/* DynastyStoryModal — full-screen modal showing the AI-generated
   "Story of House X" narrative for one finished dynasty. Layout is
   intentionally simple: a centered prose column, sensible body type, a
   pair of action buttons at the bottom for Copy + Share. Size/position
   of the overlay comes from .modal-fullscreen (in modals.css); this
   file only owns the inside-content shape. */

.dynasty-story-modal {
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Fill the parent .modal-body so the loading + error states can
     vertically center inside the available space when the prose isn't
     present yet. Loaded state uses the natural top-down flow with a
     sticky actions row (see .dynasty-story-actions below). */
  min-height: 100%;
}

/* ===== Loading + error states =====
   Centered vertically in the modal body. The quill glyph above the
   loading copy reinforces "the historian is writing this for you" —
   a small flourish to make the 5–8 second wait feel intentional. */
.dynasty-story-state {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  text-align: center;
  /* Body type — readable prose tier matching the rest of the narrative. */
  font-family: var(--font-family-2);
  font-size: 1rem;
  color: var(--font-color-2);
}

.dynasty-story-state p {
  margin: 0;
  max-width: 24rem;
  line-height: 1.5;
}

.dynasty-story-quill {
  font-size: 2.5rem;
  line-height: 1;
  /* Gentle bob — the quill nods as if writing. Not a spinner; the
     animation is slow on purpose so it reads as ambient texture, not
     a progress indicator. */
  animation: dynasty-story-quill-nod 1.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes dynasty-story-quill-nod {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.dynasty-story-error p {
  color: var(--font-color-danger, #8b2e2e);
}

/* ===== Loaded prose =====
   The narrative renders as plain <p> blocks inside an <article>. Width
   is capped on the column so long lines stay readable — caps at 36rem
   which yields ~60–75 characters per line at the body font-size, the
   typographic sweet spot for sustained reading. The prose scrolls
   inside .modal-body; the .dynasty-story-actions row above sticks to
   the top so prose passes behind it as the user scrolls. */
.dynasty-story-prose {
  max-width: 36rem;
  margin: 0 auto;
  padding: 0.5rem 0.25rem 1rem;
  font-family: var(--font-family-2);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--font-color-1);
}

.dynasty-story-prose p {
  margin: 0 0 1rem;
  /* Slight first-paragraph drop-cap-adjacent emphasis: a small left
     indent for paragraphs after the first matches printed-book rhythm.
     The first paragraph stays flush so it opens cleanly. */
  text-indent: 1.25rem;
}

.dynasty-story-prose p:first-child {
  text-indent: 0;
}

.dynasty-story-prose p:last-child {
  margin-bottom: 0;
}

/* ===== Action row — truly pinned alongside the modal title =====
   Copy + Share buttons. Lives outside the scrolling .modal-body — injected
   by DynastyStoryModal.js's injectActionsRow() as a sibling of the body
   inside .modal-container (which is a flex column: title → actions →
   body). The buttons can never scroll out of view no matter how long
   the narrative is, because they're not inside the scroll context.

   Floating on the parchment — no background, no border, no divider.
   The two buttons stand on their own against the modal's parchment
   surface. .action-row's existing flex layout sizes them evenly. */
.dynasty-story-actions {
  /* Modest padding so the row sits cleanly between the title above
     and the scrolling prose below without crowding either. */
  padding: 0 0 0.75rem;
  /* flex:0 0 auto so the actions take their natural height inside
     .modal-container's flex column — the .modal-body sibling owns
     the remaining vertical space via its own flex:1 1 auto. */
  flex: 0 0 auto;
}

/* ===== Story trigger icon =====
   The scroll affordance used by the past-dynasties list and leaderboard
   rows to open this modal. Sized identically to .ftree-trigger-icon
   (1.6rem square, see ui/styles.css) so the two icons line up when
   rendered side-by-side. Distinct class name from the modal's prose
   styling so any future swap (e.g. to a button-shaped affordance with
   its own background) stays scoped to this rule. */
.story-trigger-icon {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}

/* The button shell that wraps the icon — naked, no background, matches
   .ftree-trigger so a row holding both buttons reads as a matched pair. */
.story-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

.story-trigger:hover,
.story-trigger:focus {
  outline: none;
}

/* ===== EOD modal — story CTA (era-card treatment) =====
   The "Read the Story of House X" button on the End-of-Dynasty modal
   sits below the legacy score and above the Family Tree / Share stack.
   It's styled to match the Era cards on the Choose-Era screen — purple
   fill, 3rem icon on the left, the Metamorphous display face for the
   label — so it reads as the highlighted "what's next" affordance,
   distinct from the secondary Tree/Share buttons below it.
   Padding / gap / icon size are copied from .era-card + .era-card-portrait;
   the fill uses the shared --special-card-* purple so the look lives with
   the other "special" treatments. The corners are fully pill-rounded
   (border-radius: 999px) and borderless to match the other buttons on this
   screen (Family Tree / Share / New Dynasty) rather than the squarer era
   card. */
.end-story-cta {
  margin: 0.75rem 0 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: var(--special-card-bg);
  color: var(--font-color-1);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
  touch-action: manipulation;
}
.end-story-cta:hover { background: var(--special-card-bg-hover); }
.end-story-cta:active { transform: scale(0.99); }
.end-story-cta:focus { outline: none; }
/* Out-of-free-generations state: a padlock pinned to the right edge of the CTA
   (tap pitches a subscription instead of generating — see EndOfDynastyModal.js).
   The label keeps its space; margin-left:auto shoves the lock to the far end. */
.end-story-lock {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.end-story-lock img {
  width: 1.4rem;
  height: 1.4rem;
  display: block;
}
/* 3rem square icon slot on the left, mirroring .era-card-portrait.
   position:relative anchors the free-generations count pill (below). */
.end-story-icon {
  position: relative;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* "{remaining}/{cap}" pill overlaying the bottom of the story icon, showing a
   free player's remaining AI-story generations (EndOfDynastyModal.js). Counter
   chip overlaid on an icon — allowed below 1rem per the readable-font rule. */
.end-story-count {
  position: absolute;
  bottom: -0.3rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.1rem 0.35rem;
  border-radius: 0.6rem;
  background: var(--background-color-3);
  color: var(--font-color-1);
  font-family: var(--font-family-2);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  pointer-events: none;
}
/* Fill the slot — overrides the 1.6rem row-icon default of
   .story-trigger-icon, scoped so the leaderboard/row icons stay small. */
.end-story-icon .story-trigger-icon,
.end-story-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Label in the Metamorphous display face at the era-card name size. */
.end-story-label {
  font-family: var(--font-family-1);
  font-size: 1.0875rem;
  color: var(--font-color-1);
  min-width: 0;
}