/* ── Step 110 (docs/mechanisms/storybook.md): the storybook ─────────────────
   Its own file since Step 144, loaded by the game's index.html and by the
   public book page (book.html), so both draw the same book.
   The map's full-screen shell (#exploration-map-fullscreen, style.css). The
   build draws the book -- the boards, the parchment, the spine's shadow,
   the page edges, the dark room around it; his pages are transparent and
   sit on the parchment. Page size comes from storybook-player.js (storybookFit()) as
   --sb-page-w/--sb-page-h: one page on a phone, a spread on a computer. */
#storybook-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(120, 78, 36, 0.35) 0%, rgba(40, 24, 12, 0) 60%),
    radial-gradient(ellipse at 50% 50%, #24170d 0%, #120b06 55%, #050302 100%);
  color: #e8d9b5;
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  --sb-page-w: 300px;
  --sb-page-h: 400px;
}

#storybook-fullscreen[hidden] { display: none; }

#storybook-fullscreen button {
  font-family: inherit;
  color: #f0e4c4;
  background: rgba(24, 16, 10, 0.82);
  border: 1px solid #b08d4a;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.95rem;
  cursor: pointer;
}

#storybook-fullscreen button:hover:not(:disabled) { background: rgba(66, 46, 24, 0.95); }
#storybook-fullscreen button:disabled { opacity: 0.35; cursor: default; }
#storybook-fullscreen [hidden] { display: none !important; }

/* Left of #music-mute-btn, which sits above every overlay (z-index 10001)
   in the top-right corner. */
#storybook-close-btn {
  position: absolute;
  z-index: 20;
  top: max(10px, env(safe-area-inset-top));
  right: calc(max(12px, env(safe-area-inset-right)) + 52px);
}

#storybook-feedback-btn {
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 20;
}

/* The closed book. His cover is the whole book, painted; a book without one
   gets a plain leather board with its title. */
#storybook-cover-view {
  display: none;
  position: absolute;
  inset: 56px 16px 16px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#storybook-fullscreen[data-state="cover"] #storybook-cover-view { display: flex; }

#storybook-fullscreen #storybook-cover-btn {
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: calc(100% - 90px);
  max-width: 100%;
}

#storybook-cover-img {
  display: block;
  max-width: min(100%, 560px);
  max-height: calc(100vh - 56px - 16px - 110px);
  max-height: calc(100dvh - 56px - 16px - 110px);
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7));
  animation: storybook-cover-in 0.6s ease both;
}

@keyframes storybook-cover-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

#storybook-cover-title {
  display: none;
  width: min(70vw, 300px);
  aspect-ratio: 3 / 4;
  padding: 18% 12%;
  box-sizing: border-box;
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0 6%, rgba(255, 255, 255, 0.06) 7%, rgba(0, 0, 0, 0) 12%),
    radial-gradient(ellipse at 45% 35%, #7a4a26 0%, #4b2a14 70%, #2e190b 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), inset 0 0 0 6px rgba(201, 162, 74, 0.35);
  color: #e3c47a;
  font-size: 1.3rem;
  line-height: 1.3;
  text-align: center;
}

/* A book with no cover image, or one that won't open (the title then says so). */
#storybook-fullscreen:not([data-cover="image"]) #storybook-cover-title:not(:empty) { display: block; }

#storybook-cover-note { margin: 0; font-size: 0.85rem; opacity: 0.75; text-align: center; }

#storybook-fullscreen #storybook-open-btn { font-size: 1.05rem; padding: 9px 26px; }

/* The open book. */
#storybook-stage {
  display: none;
  position: absolute;
  top: 56px;
  bottom: 64px;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

#storybook-fullscreen:not([data-state="cover"]) #storybook-stage { display: flex; }

#storybook-book {
  position: relative;
  width: var(--sb-page-w);
  height: var(--sb-page-h);
  perspective: calc(var(--sb-page-w) * 6);
  isolation: isolate;
  animation: storybook-open-in 0.7s ease both;
}

#storybook-fullscreen[data-layout="spread"] #storybook-book { width: calc(var(--sb-page-w) * 2); }

@keyframes storybook-open-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* The boards: dark leather just proud of the pages. */
#storybook-book::before {
  content: "";
  position: absolute;
  inset: -10px -9px -12px;
  z-index: -1;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0) 54%),
    radial-gradient(ellipse at 50% 30%, #5a3419 0%, #3a200e 65%, #25140a 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 4px 10px rgba(0, 0, 0, 0.5);
}

#storybook-fullscreen[data-layout="single"] #storybook-book::before {
  inset: -9px -9px -12px -12px;
  background: radial-gradient(ellipse at 50% 30%, #5a3419 0%, #3a200e 65%, #25140a 100%);
}

/* Parchment, for every page and both faces of the turning leaf. */
.storybook-slot,
.storybook-face {
  position: absolute;
  top: 0;
  width: var(--sb-page-w);
  height: 100%;
  overflow: hidden;
  background-color: #efe0bd;
  background-image:
    radial-gradient(ellipse at 50% 38%, rgba(255, 250, 232, 0.6) 0%, rgba(255, 250, 232, 0) 65%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(128, 88, 40, 0.28) 100%),
    repeating-linear-gradient(8deg, rgba(120, 90, 50, 0.025) 0 2px, rgba(0, 0, 0, 0) 2px 5px);
}

.storybook-slot img,
.storybook-face img {
  position: absolute;
  inset: 2.4% 2.8%;
  width: 94.4%;
  height: 95.2%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

.storybook-slot-left { left: 0; border-radius: 3px 0 0 3px; }
.storybook-slot-right { left: var(--sb-page-w); border-radius: 0 3px 3px 0; }
#storybook-fullscreen[data-layout="single"] .storybook-slot-left,
#storybook-fullscreen[data-layout="single"] .storybook-shade-left { display: none; }
#storybook-fullscreen[data-layout="single"] .storybook-slot-right,
#storybook-fullscreen[data-layout="single"] .storybook-shade-right,
#storybook-fullscreen[data-layout="single"] #storybook-turner { left: 0; }

/* The page edges: a few leaves showing at the fore-edge. */
.storybook-slot-right {
  box-shadow: 1px 0 0 #d9c7a0, 2px 1px 0 #a48d63, 3px 1px 0 #dccaa3, 4px 2px 0 #9e8760, 5px 2px 0 #d4c199, 6px 3px 0 #86704c;
}
.storybook-slot-left {
  box-shadow: -1px 0 0 #d9c7a0, -2px 1px 0 #a48d63, -3px 1px 0 #dccaa3, -4px 2px 0 #9e8760, -5px 2px 0 #d4c199, -6px 3px 0 #86704c;
}

/* The spine: each page darkens into the gutter. */
.storybook-slot::after,
.storybook-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.storybook-slot-right::after,
.storybook-face-front::after {
  background: linear-gradient(90deg, rgba(70, 42, 14, 0.5) 0%, rgba(70, 42, 14, 0.18) 3.5%, rgba(70, 42, 14, 0) 11%);
}
.storybook-slot-left::after,
.storybook-face-back::after {
  background: linear-gradient(270deg, rgba(70, 42, 14, 0.5) 0%, rgba(70, 42, 14, 0.18) 3.5%, rgba(70, 42, 14, 0) 11%);
}

/* The shadow a lifting leaf casts on the page under it. */
.storybook-shade {
  position: absolute;
  top: 0;
  width: var(--sb-page-w);
  height: 100%;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.storybook-shade-left {
  left: 0;
  background: linear-gradient(270deg, rgba(20, 10, 2, 0.75) 0%, rgba(20, 10, 2, 0.3) 35%, rgba(20, 10, 2, 0) 85%);
}
.storybook-shade-right {
  left: var(--sb-page-w);
  background: linear-gradient(90deg, rgba(20, 10, 2, 0.75) 0%, rgba(20, 10, 2, 0.3) 35%, rgba(20, 10, 2, 0) 85%);
}

/* The turning leaf: hinged at the spine (its left edge), two faces back to
   back. Shown only while a page turns. */
#storybook-turner {
  display: none;
  position: absolute;
  top: 0;
  left: var(--sb-page-w);
  width: var(--sb-page-w);
  height: 100%;
  z-index: 6;
  transform-origin: left center;
  transform-style: preserve-3d;
}
#storybook-fullscreen[data-turning="forward"] #storybook-turner,
#storybook-fullscreen[data-turning="back"] #storybook-turner { display: block; }

.storybook-face {
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.storybook-face-back { transform: rotateY(180deg); }

.storybook-gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.storybook-face-front .storybook-gloss {
  background: linear-gradient(90deg, rgba(40, 22, 6, 0.15) 0%, rgba(40, 22, 6, 0.55) 70%, rgba(255, 245, 220, 0.25) 100%);
}
.storybook-face-back .storybook-gloss {
  background: linear-gradient(270deg, rgba(40, 22, 6, 0.15) 0%, rgba(40, 22, 6, 0.55) 70%, rgba(255, 245, 220, 0.25) 100%);
}

/* The controls under the book. */
#storybook-controls {
  display: none;
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(12px, env(safe-area-inset-bottom));
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;
}
#storybook-fullscreen:not([data-state="cover"]) #storybook-controls { display: flex; }
#storybook-fullscreen #storybook-prev-btn,
#storybook-fullscreen #storybook-next-btn { font-size: 1.3rem; line-height: 1; padding: 4px 14px; }
#storybook-status { min-width: 7.5em; text-align: center; font-size: 0.85rem; opacity: 0.8; white-space: nowrap; }
#storybook-again-btn { display: none; }
#storybook-fullscreen[data-state="ended"] #storybook-again-btn { display: inline-block; }
#storybook-fullscreen[data-retime] #storybook-retime-btn { display: none; }
#storybook-fullscreen #storybook-retime-btn { font-size: 0.8rem; padding: 5px 10px; opacity: 0.85; }

@media (max-width: 480px) {
  #storybook-controls { gap: 8px; }
  #storybook-status { min-width: 0; font-size: 0.8rem; }
  #storybook-fullscreen #storybook-retime-btn { font-size: 0.75rem; padding: 5px 8px; }
}

/* The Speaker's tap-along tool: a sheet over the bottom of the book. */
#storybook-retime-panel {
  position: absolute;
  z-index: 15;
  left: 50%;
  bottom: 60px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  max-height: 48vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #b08d4a;
  border-radius: 8px;
  background: rgba(16, 10, 6, 0.93);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  text-align: center;
}
#storybook-retime-panel p { margin: 0 0 8px; font-size: 0.9rem; }
#storybook-fullscreen #storybook-tap-btn { font-size: 1.15rem; padding: 12px 30px; margin-bottom: 8px; }
#storybook-retime-times { font-variant-numeric: tabular-nums; opacity: 0.85; word-spacing: 0.2em; }
#storybook-retime-yaml {
  display: block;
  margin: 0 0 10px;
  padding: 6px 8px;
  background: rgba(239, 224, 189, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}
#storybook-retime-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#storybook-fullscreen #storybook-retime-actions button { font-size: 0.85rem; padding: 6px 10px; }