/* ==========================================================================
   BOOK LAYOUT — Two-page spread for tablet / PC (≥768 px)
   On mobile the wrapper elements become display:contents so they vanish
   from layout and the single-column experience is unchanged.
   ========================================================================== */

/* ── Mobile: invisible wrappers ─────────────────────────────────────────── */

.book-wrapper,
.book-left-page {
  display: contents; /* children participate in body's flex centering */
}

.book-spine,
.book-right-page,
.book-nav-bar {
  display: none;
}

/* ── Desktop / tablet: two-page spread ──────────────────────────────────── */

@media (min-width: 768px) {

  /* Single source of truth for page width.
     Both pages are always this wide — the cover IS the left page.
     46vw keeps the book at ~92% viewport width; 850px cap only affects 4K+. */
  :root {
    --page-w: min(46vw, 850px);
  }

  /* Outer wrapper — body's flex will center this */
  .book-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    /* Open: both pages + spine */
    max-width: calc(var(--page-w) * 2 + 14px);
    height: calc(100vh - clamp(12px, 2vh, 24px));
    height: calc(100dvh - clamp(12px, 2dvh, 24px));
    max-height: calc(100vh - clamp(12px, 2vh, 24px));
    max-height: calc(100dvh - clamp(12px, 2dvh, 24px));
    position: relative;
    transition: max-width 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Spine crease — centered over the 14px spine, wider gradient that fades
     into both pages symmetrically. z-index 100 ensures it paints above the
     pages and their inner stacking contexts (response frames, etc.). */
  .book-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 60px;
    transform: translateX(-50%);
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.28) 35%,
      rgba(0, 0, 0, 0.55) 50%,
      rgba(0, 0, 0, 0.28) 65%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 100;
  }

  /* When the book is closed the spine collapses to 0 and the right page is
     hidden — hide the crease too so it doesn't bleed onto the cover. */
  .book-wrapper.book-closed::after {
    display: none;
  }

  /* ── Cover (book shut) ────────────────────────────────────────────────── */

  .book-wrapper.book-closed {
    /* Cover: exactly one page wide — left page never resizes */
    max-width: var(--page-w);
  }

  .book-wrapper.book-closed .book-spine {
    width: 0;
    opacity: 0;
    overflow: hidden;
  }

  .book-wrapper.book-closed .book-right-page {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
    box-shadow: none;
  }

  /* Cover: left page container gets all four rounded corners */
  .book-wrapper.book-closed .book-left-page .container {
    border-radius: 24px;
  }

  /* ── Left page (chat) ─────────────────────────────────────────────────── */

  .book-left-page {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--page-w);  /* fixed width — never flexes */
    min-width: 0;
    position: relative;
  }

  /* 3D context for the tome cover overlay (see tome-cover.css).
     Only applied when the feature flag is on — keeps the render path
     untouched when disabled. */
  html[data-tome-cover="on"] .book-left-page {
    perspective: 2200px;
    perspective-origin: 50% 50%;
  }

  /* Override container sizing so it fills its parent. Mirrors the right
     page's glass effect (backdrop-filter + matching shadows) so the spine's
     ::before crease reads symmetrically on both sides. */
  .book-left-page .container {
    flex: 1;
    min-height: 0;
    max-width: none;
    width: 100%;
    height: auto;
    max-height: none;
    border: none;
    border-radius: 24px 0 0 24px;
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 color-mix(in srgb, var(--dice) 10%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: border-radius 420ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Move the chat scrollbar to the left edge of the left page.
     Flip the scroll container to RTL so WebKit renders the scrollbar on
     the left, then flip each child back to LTR so content direction is
     unaffected. */
  .book-left-page .chat-messages {
    direction: rtl;
  }

  /* Keep the scrollbar track above the container's rounded bottom-left corner.
     The input-container is moved to the right page in book layout, so
     chat-messages fills to the container bottom — the track margin prevents
     the scrollbar from being clipped by the 24px border-radius. */
  .book-left-page .chat-messages::-webkit-scrollbar-track {
    margin-bottom: 28px;
  }

  .book-left-page .chat-messages > * {
    direction: ltr;
  }

  /* ── Spine / seam ─────────────────────────────────────────────────────── */

  .book-spine {
    display: block;
    width: 14px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 380ms ease 120ms;
    background: transparent;
  }

  /* Spine crease is painted by .book-wrapper::after (below) instead of a
     pseudo on the spine itself. The wrapper is the common ancestor of both
     pages, so its pseudo paints above everything inside without fighting
     the stacking contexts the pages / message frames create. */

  /* ── Right page ───────────────────────────────────────────────────────── */

  .book-right-page {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--page-w);  /* fixed width — mirrors left page exactly */
    min-width: 0;
    max-width: var(--page-w);
    border-radius: 0 24px 24px 0;
    position: relative;
    transition: max-width 500ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 380ms ease 120ms;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-primary) 85%, transparent) 0%,
      color-mix(in srgb, var(--bg-secondary) 85%, transparent) 100%
    );
    box-shadow:
      0 25px 80px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 color-mix(in srgb, var(--dice) 10%, transparent);
    border: none;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    overflow: hidden;
  }

  /* Scrollable content viewport — clips page-turn animations */
  .book-right-page__viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
  }

  /* Input bar footer — docked to the bottom of the right page */
  .book-right-page__footer {
    flex-shrink: 0;
    padding: 10px 14px 14px;
    border-top: 1px solid color-mix(in srgb, var(--dice) 12%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .book-right-page__footer .input-container {
    border-top: none;
    border-radius: 0 0 24px 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Individual page slot — sits inside the viewport */
  .book-right-page__slot {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Page-turn animations ─────────────────────────────────────────────── */

  .bl-enter-right {
    animation: blEnterRight var(--bl-dur, 380ms) cubic-bezier(0, 0, 0.2, 1) forwards;
  }

  .bl-exit-left {
    animation: blExitLeft var(--bl-dur, 380ms) cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  .bl-enter-left {
    animation: blEnterLeft var(--bl-dur, 380ms) cubic-bezier(0, 0, 0.2, 1) forwards;
  }

  .bl-exit-right {
    animation: blExitRight var(--bl-dur, 380ms) cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  @keyframes blEnterRight {
    from { transform: translateX(100%); opacity: 0.5; }
    to   { transform: translateX(0);    opacity: 1; }
  }

  @keyframes blExitLeft {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(-100%); opacity: 0.5; }
  }

  @keyframes blEnterLeft {
    from { transform: translateX(-100%); opacity: 0.5; }
    to   { transform: translateX(0);     opacity: 1; }
  }

  @keyframes blExitRight {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0.5; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bl-enter-right,
    .bl-exit-left,
    .bl-enter-left,
    .bl-exit-right {
      animation: none;
    }
  }

  /* ── Page header ──────────────────────────────────────────────────────── */

  .bl-page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--dice) 14%, transparent);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    color: var(--text-primary);
  }

  .bl-page-header__icon {
    font-size: 17px;
    color: var(--text-primary);
  }

  .bl-page-header__title {
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.4px;
  }

  .bl-page-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Navigation bar ───────────────────────────────────────────────────── */

  .book-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid color-mix(in srgb, var(--dice) 12%, transparent);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
  }

  .book-nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--dice) 28%, transparent);
    background: color-mix(in srgb, var(--dice) 8%, transparent);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
  }

  .book-nav:disabled {
    opacity: 0.22;
    cursor: default;
    pointer-events: none;
  }

  .book-nav:not(:disabled):hover {
    background: color-mix(in srgb, var(--dice) 22%, transparent);
    border-color: color-mix(in srgb, var(--dice) 50%, transparent);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--dice) 28%, transparent);
    transform: scale(1.06);
  }

  /* Page dots */
  .book-page-dots {
    display: flex;
    gap: 7px;
    align-items: center;
  }

  .bl-page-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dice) 22%, transparent);
    transition: background 0.25s ease, transform 0.25s ease;
  }

  .bl-page-dot--active {
    background: var(--dice);
    transform: scale(1.25);
  }
}

/* ==========================================================================
   PAGE CONTENT STYLES  (bl-* prefix = "book layout")
   Only rendered inside .book-right-page so no risk of collision.
   ========================================================================== */

/* ── Character page ───────────────────────────────────────────────────────── */

.bl-character-page {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bl-identity {
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--dice) 14%, transparent);
}

.bl-char-name {
  font-family: var(--font-family-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-color);
  text-shadow: 0 2px 8px color-mix(in srgb, var(--dice) 20%, transparent);
}

.bl-char-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 3px;
  font-style: italic;
}

/* HP */
.bl-hp-section { display: flex; flex-direction: column; gap: 4px; }

.bl-hp-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
}

.bl-hp-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.1;
}

.bl-hp-sep { opacity: 0.45; margin: 0 3px; }

.bl-hp-bar-track {
  height: 6px;
  background: color-mix(in srgb, var(--dice) 12%, transparent);
  border-radius: 3px;
  overflow: hidden;
}

.bl-hp-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Combat stats row */
.bl-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.bl-stat-box {
  background: color-mix(in srgb, var(--dice) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice) 14%, transparent);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.bl-stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
}

.bl-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
  margin-top: 2px;
}

/* Section label */
.bl-section-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: -6px;
}

/* Abilities grid */
.bl-abilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.bl-ability-block {
  background: color-mix(in srgb, var(--dice) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice) 11%, transparent);
  border-radius: 8px;
  padding: 10px 6px 8px;
  text-align: center;
}

.bl-ability-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.bl-ability-score {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  margin-top: 2px;
}

.bl-ability-mod {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dice);
  margin-top: 1px;
}

/* Conditions */
.bl-conditions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bl-condition-tag {
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: var(--warning);
}

.bl-no-conditions {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ── Tome page ───────────────────────────────────────────────────────────── */

.bl-tome-page { padding: 16px; }

.bl-tome-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 10px;
  text-align: center;
}

.bl-tome-empty-icon { font-size: 38px; opacity: 0.7; }

.bl-tome-empty-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.bl-tome-empty-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.65;
  max-width: 240px;
}

.bl-tome-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bl-tome-entry {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--dice) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice) 12%, transparent);
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.bl-tome-entry:hover {
  background: color-mix(in srgb, var(--dice) 13%, transparent);
  border-color: color-mix(in srgb, var(--dice) 28%, transparent);
}

.bl-tome-entry:active {
  transform: scale(0.99);
  background: color-mix(in srgb, var(--dice) 18%, transparent);
}

.bl-tome-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.bl-tome-entry-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-color);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bl-tome-entry-date {
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0.6;
  flex-shrink: 0;
}

.bl-tome-entry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.bl-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 500;
}

.bl-badge--quest {
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  color: var(--gold);
}

.bl-badge--class {
  background: color-mix(in srgb, var(--dice) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice) 22%, transparent);
  color: var(--dice);
}

/* ── Left page: chapter header ────────────────────────────────────────── */

.book-chapter-header {
  display: none; /* hidden on mobile; desktop override below */
}

@media (min-width: 768px) {
  /* Scroll-to-top button must clear the chapter + quest headers above the chat */
  .book-left-page .scroll-to-top {
    top: 68px; /* chapter-header ~32px + quest-strip ~26px + gap */
  }

  .book-chapter-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--dice) 12%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 40%, transparent);
  }

  .book-chapter-header.u-hidden {
    display: none;
  }

  .book-chapter-header__text {
    font-family: var(--font-family-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0.75;
    font-style: italic;
  }

  /* Quest objective strip below chapter header */
  .book-quest-objective {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 18px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--dice) 10%, transparent);
    background: color-mix(in srgb, var(--bg-primary) 30%, transparent);
  }

  .book-quest-objective.u-hidden {
    display: none;
  }

  .book-quest-objective__icon {
    font-size: 0.75rem;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .book-quest-objective__text {
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.6;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
}

/* ── Right page: adventures list (home screen) ─────────────────────────── */

.bl-adventures-slot {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bl-adventures-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}

.bl-adventures-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  gap: 8px;
  text-align: center;
  padding: 24px 16px;
}

.bl-adventures-empty-icon { font-size: 34px; opacity: 0.6; }

.bl-adventures-empty-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.bl-adventures-empty-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.6;
  max-width: 220px;
}

.bl-adventures-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bl-adventure-entry {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--dice) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice) 12%, transparent);
  border-radius: 8px;
  padding: 10px 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.bl-adventure-entry:hover {
  background: color-mix(in srgb, var(--dice) 14%, transparent);
  border-color: color-mix(in srgb, var(--dice) 30%, transparent);
}

.bl-adventure-entry:active {
  transform: scale(0.99);
}

.bl-adventure-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.bl-adventure-entry-title {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-color);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bl-adventure-entry-date {
  font-size: 0.68rem;
  color: var(--text-secondary);
  opacity: 0.55;
  flex-shrink: 0;
}

.bl-adventure-entry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

/* ── Left page: narrative only — hide action prompts and user messages ─── */

@media (min-width: 768px) {
  /* Choices, skill checks, saving throws, and roll prompts belong on the right page */
  .book-left-page .choices-structured {
    display: none;
  }

  .book-left-page .message.assistant .gm-skillcheck,
  .book-left-page .message.assistant .gm-savingthrow,
  .book-left-page .message.assistant .gm-rollprompt,
  .book-left-page .message.assistant .roll-prompt-wrapper,
  .book-left-page .message.assistant .gm-diceroll {
    display: none;
  }

  /* Player messages are actions/choices, not narrative prose */
  .book-left-page .message.user {
    display: none;
  }

  /* Roll result badges are injected into the chat to show the outcome inline */
  .book-left-page .message.user.chat-roll-indicator {
    display: flex;
  }

  /* Subtle left-rule on the active narrative entry */
  .book-left-page .message.assistant.is-current-response {
  }

  /* Hide the whole frame when the current response is pure action prompts (no narrative prose) */
  .book-left-page .message.assistant.is-current-response.has-no-narrative {
    display: none;
  }

  /* ── Extensible bookmark tab strip ───────────────────────────────────── */

  /* On desktop the strip's LEFT edge is anchored at the book's right edge so
     tabs extend rightward into the gap between the book and the viewport.
     `left: 100vw` is the safe fallback when the JS property is not yet set
     (tabs stay off-screen right rather than overlapping book content). */
  .book-tab-strip {
    right: auto;
    left: calc(100vw - var(--book-right-gap, 0px));
    top: 42vh;
  }

  /* Desktop tab appearance: right side exposed, left side flush with book edge */
  .book-tab-strip .book-tab {
    border-radius: 0 8px 8px 0;
    border-right: 1px solid color-mix(in srgb, var(--dice) 40%, transparent);
    border-left: none;
    justify-content: center;
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Desktop: stay flush with book edge; label visible when open */
  .book-tab-strip .book-tab[data-tab-open="true"] {
    transform: translateX(0);
    justify-content: flex-start;
    padding: 0 14px 0 16px;
  }


  /* ── Tab panels: right-side, outside the book ────────────────────────── */
  /* Panels are anchored to the right viewport edge and extend horizontally
     to the right — they slide in from behind/beyond the book's right edge. */

  .settings-menu,
  .tome-menu,
  .character-sheet-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: none;
    border-radius: 12px 0 0 12px;
    border: 1px solid color-mix(in srgb, var(--dice) 20%, transparent);
    border-right: none;
  }

  .settings-menu.show,
  .tome-menu.show {
    animation: blMenuSlideIn 0.22s cubic-bezier(0, 0, 0.2, 1) forwards;
  }

  @keyframes blMenuSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ── Right page: player decision panel ─────────────────────────────────── */

.bl-choices-slot {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 20px 16px;
  gap: 14px;
  overflow-y: auto;
}

/* "What will you do?" header shown above choices */
.bl-choices-header {
  font-family: var(--font-family-heading);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  opacity: 0.65;
  text-align: center;
}

/* Action-prompt blocks (skill checks, saving throws, roll prompts) */
.bl-action-blocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Choice list */
.bl-choices-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bl-choice-item {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--dice) 25%, transparent);
  background: color-mix(in srgb, var(--dice) 6%, transparent);
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.45;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bl-choice-action-label {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--dice) 42%, transparent);
  background: color-mix(in srgb, var(--dice) 15%, transparent);
  color: color-mix(in srgb, var(--text-primary) 88%, transparent);
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.bl-choice-item:hover {
  background: color-mix(in srgb, var(--dice) 16%, transparent);
  border-color: color-mix(in srgb, var(--dice) 48%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--dice) 18%, transparent);
  transform: translateY(-1px);
}

.bl-choice-item:active {
  transform: scale(0.985) translateY(0);
}

/* Selected choice: highlighted, non-interactive */
.bl-choice-item.bl-choice-selected {
  border-color: color-mix(in srgb, var(--dice) 55%, transparent);
  background: color-mix(in srgb, var(--dice) 14%, transparent);
  pointer-events: none;
  cursor: default;
}

.bl-choice-item.bl-choice-selected:hover {
  transform: none;
  box-shadow: none;
}

/* Siblings fade out when a choice is selected */
.bl-choice-item.bl-choice-collapsing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Roll panel: chosen-action display above the roll content */
.bl-roll-panel__chosen {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--dice) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice) 25%, transparent);
  margin-bottom: 8px;
}

.bl-roll-panel__chosen-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.bl-roll-panel__chosen-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-primary);
}

/* Awaiting-roll slot: center the result + unfolding text as a pair */
.bl-slot-awaiting-roll {
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.bl-slot-awaiting-roll .bl-choices-unfolding {
  flex: none;
}

/* Faded label shown while the GM narrative is streaming */
.bl-choices-unfolding {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-secondary);
  opacity: 0.45;
  user-select: none;
}

/* Empty state — no messages yet */
.bl-choices-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-secondary);
  opacity: 0.45;
}

/* Freeform turn — no structured choices, player types freely in the input below */
.bl-choices-freeform {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-secondary);
  opacity: 0.6;
  user-select: none;
}

/* Locked state — right page hidden until player reads to the bottom of the left page */
.bl-choices-slot.bl-choices-locked > :not(.bl-choices-header):not(.bl-choices-locked-hint) {
  opacity: 0.15;
  pointer-events: none;
  filter: blur(3px);
  user-select: none;
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.bl-choices-locked-hint {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-secondary);
  opacity: 0.55;
  text-align: center;
  padding: 4px 0 8px;
}

/* Smooth reveal when lock is removed */
.bl-choices-slot .bl-choices-list,
.bl-choices-slot .bl-action-blocks,
.bl-choices-slot .bl-choices-freeform,
.bl-choices-slot .bl-choices-unfolding,
.bl-choices-slot .bl-roll-panel__chosen {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* ── Choice roll badge ───────────────────────────────────────────────────── */

.choices li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bl-choice-item {
  align-items: flex-start;
}

.choice-roll-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.choice-roll-badge--pos {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.choice-roll-badge--neg {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.25);
}

.choice-roll-badge--neu {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid rgba(156, 163, 175, 0.2);
}

/* ── Roll panel (right-page slot) ────────────────────────────────────────── */

.bl-roll-panel {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Inline fallback used when the right page is hidden (narrow viewports).
   Renders as a fixed-position overlay anchored to <body>, so it's immune
   to ancestor overflow/clipping rules in the chat container. */
.bl-roll-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: clamp(8px, 1.6vh, 18px);
  overflow-y: auto;
  animation: bl-roll-overlay-fade 120ms ease-out;
}

@keyframes bl-roll-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Close button — top-right corner of the mobile overlay */
.bl-roll-overlay__close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  z-index: 1;
  transition: background 150ms, color 150ms;
}

.bl-roll-overlay__close:hover,
.bl-roll-overlay__close:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  outline: none;
}

/* After the roll resolves, clicking the dimmed backdrop area closes it.
   A subtle "tap to close" hint appears at the bottom. */
.bl-roll-overlay--resolved {
  cursor: pointer;
}

.bl-roll-overlay--resolved::after {
  content: 'Tap to close';
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  letter-spacing: 0.04em;
}

.bl-roll-panel--overlay {
  width: min(92vw, 420px);
  padding: clamp(0.75rem, 1.2vh, 1rem) clamp(0.85rem, 2vw, 1rem);
  border-radius: 14px;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid color-mix(in srgb, var(--dice, #b48cff) 35%, transparent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.bl-roll-panel__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-muted, #9ca3af);
  font-size: 0.85rem;
}

.bl-roll-panel__icon {
  font-size: 1.75rem;
  line-height: 1;
}

.bl-roll-panel__label {
  font-size: 1rem;
  color: var(--text-primary, #e8dcc8);
  font-weight: 500;
}

.bl-roll-panel__dc {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
}

.bl-roll-panel__die {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bl-roll-panel__roll-btn {
  padding: 0.55rem 1.5rem;
  background: var(--gold, #c8a96e);
  color: #1a1208;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: opacity 0.15s;
}

.bl-roll-panel__roll-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.bl-roll-panel__roll-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* "Continue without rolling" dismiss button under Roll 1d20 */
.bl-roll-panel__dismiss-btn {
  margin-top: 0.5rem;
  padding: 0.35rem 1rem;
  background: transparent;
  color: var(--text-muted, rgba(255,255,255,0.45));
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  transition: color 0.15s, border-color 0.15s;
}

.bl-roll-panel__dismiss-btn:hover {
  color: var(--text-secondary, rgba(255,255,255,0.7));
  border-color: rgba(255,255,255,0.3);
}

/* Static "Roll D20" frame shown in physical-dice mode (non-interactive) */
.bl-roll-panel__roll-static {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.bl-roll-panel__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bl-roll-panel__input {
  width: 64px;
  text-align: center;
  padding: 0.45rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--gold, #c8a96e);
  background: rgba(200, 169, 110, 0.07);
  color: var(--text-primary, #e8dcc8);
  font-size: 1.1rem;
  font-weight: 600;
}

.bl-roll-panel__input--error {
  border-color: #f87171;
  animation: bl-shake 0.3s;
}

.bl-roll-panel__submit-btn {
  padding: 0.45rem 1rem;
  background: var(--gold, #c8a96e);
  color: #1a1208;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}

.bl-roll-panel__result {
  width: 100%;
}

@keyframes bl-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Pill reveal when a freeform-roll verdict is patched into the awaiting slot. */
.bl-outcome-reveal {
    animation: bl-outcome-reveal 250ms ease-out;
}

@keyframes bl-outcome-reveal {
    0%   { opacity: 0; transform: scale(0.92); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   RUNE-SLAB ROLL PANEL  (Option D)
   Layout: banner → 3-D canvas die → name → DC → rule → verdict → button
   ========================================================================== */

.bl-rp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1vh, 0.8rem);
  padding: clamp(0.65rem, 1.1vh, 0.85rem) clamp(0.65rem, 1.2vw, 0.9rem) clamp(0.8rem, 1.2vh, 1rem);
  text-align: center;
  width: 100%;
  min-height: 0;
  flex: 1;
  box-sizing: border-box;
}

/* When the rune-slab panel is the overlay modal, give it a definite height so
   flex: 1 on .bl-rp__middle can resolve and centre the die. */
.bl-roll-panel--overlay.bl-rp {
  position: relative;
  height: auto;
  max-height: calc(100dvh - (2 * clamp(8px, 1.6vh, 18px)));
  justify-content: flex-start;
}

.bl-rp__middle {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.45rem, 1vh, 0.8rem);
}

/* Context banner at top */
.bl-rp__banner {
  width: 100%;
  min-height: clamp(52px, 8.5vh, 72px);
  padding: clamp(6px, 0.8vh, 9px) clamp(10px, 1.2vw, 12px);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bl-rp__banner-title {
  font-size: clamp(0.64rem, 0.88vw, 0.74rem);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold, #c8a96e);
  margin-bottom: 2px;
  font-weight: 700;
  line-height: 1.2;
}

.bl-rp__banner-action {
  font-size: clamp(0.76rem, 1.02vw, 0.86rem);
  color: var(--text-secondary, rgba(232,220,200,0.6));
  line-height: 1.25;
  font-style: italic;
}

.bl-rp__banner-action--placeholder {
  visibility: hidden;
}

/* 3-D canvas die wrapper */
.bl-rp__die-wrap {
  position: relative;
  width: clamp(120px, 20vh, 220px);
  height: clamp(120px, 20vh, 220px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  cursor: pointer;
}

.bl-rp__die-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Glow ring — active while the panel awaits a roll */
.bl-rp__die-wrap::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Shimmer glow on the die while idle — filter:drop-shadow traces the wireframe and is not clipped */
.bl-rp--idle .bl-rp__die-wrap {
  animation: bl-rp-die-shimmer 2.6s ease-in-out infinite;
}

.bl-rp--idle .bl-rp__die-wrap:hover {
  animation-duration: 1.2s;
}

/* Check name */
.bl-rp__name {
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  font-weight: 700;
  color: var(--text-color, #e8dcc8);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

/* DC row */
.bl-rp__dc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(0.76rem, 0.95vw, 0.82rem);
  color: var(--text-secondary, rgba(232,220,200,0.55));
  min-height: 1.45rem;
  line-height: 1.2;
  margin-bottom: 0;
}

.bl-rp__dc-row--placeholder {
  visibility: hidden;
}

.bl-rp__dc-badge {
  padding: 2px 10px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--dice, #b48cff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice, #b48cff) 22%, transparent);
  color: var(--dice, #b48cff);
  font-weight: 700;
  font-size: clamp(0.72rem, 0.9vw, 0.78rem);
  letter-spacing: 0.5px;
}

/* Thin rule above buttons */
.bl-rp__rule {
  display: none;
}

/* Shimmer keyframes for idle roll prompt */
@keyframes bl-rp-btn-shimmer {
  0%   { box-shadow: 0 0 8px 2px rgba(180, 140, 255, 0.55),
                     0 0 22px 5px rgba(180, 140, 255, 0.25); }
  50%  { box-shadow: 0 0 18px 5px rgba(180, 140, 255, 0.95),
                     0 0 44px 12px rgba(180, 140, 255, 0.45); }
  100% { box-shadow: 0 0 8px 2px rgba(180, 140, 255, 0.55),
                     0 0 22px 5px rgba(180, 140, 255, 0.25); }
}

/* drop-shadow traces the wireframe die shape and is immune to overflow:hidden clipping */
@keyframes bl-rp-die-shimmer {
  0%   { filter: drop-shadow(0 0  6px rgba(180, 140, 255, 0.55))
                 drop-shadow(0 0 14px rgba(180, 140, 255, 0.25)); }
  50%  { filter: drop-shadow(0 0 14px rgba(180, 140, 255, 1.0))
                 drop-shadow(0 0 30px rgba(180, 140, 255, 0.55)); }
  100% { filter: drop-shadow(0 0  6px rgba(180, 140, 255, 0.55))
                 drop-shadow(0 0 14px rgba(180, 140, 255, 0.25)); }
}

/* Roll button */
.bl-rp__roll-btn {
  width: 100%;
  padding: clamp(10px, 1.2vh, 14px);
  background: color-mix(in srgb, var(--dice, #b48cff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--dice, #b48cff) 30%, transparent);
  color: var(--dice, #b48cff);
  border-radius: 10px;
  font-size: clamp(0.9rem, 1.04vw, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

/* Shimmer while the panel is idle (waiting for player to roll) */
.bl-rp--idle .bl-rp__roll-btn:not(:disabled) {
  animation: bl-rp-btn-shimmer 2.2s ease-in-out infinite;
}

.bl-rp__roll-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--dice, #b48cff) 18%, transparent);
  border-color: color-mix(in srgb, var(--dice, #b48cff) 50%, transparent);
  animation-duration: 1s;
}

.bl-rp__roll-btn:active { transform: scale(0.98); }

.bl-rp__roll-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  animation: none;
}

/* Button area wrapper — collapsed smoothly when player clicks Roll */
.bl-rp__btn-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  width: 100%;
  overflow: hidden;
  max-height: 104px; /* enough for both buttons while staying compact */
  opacity: 1;
  transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 250ms ease;
  margin-top: 0;
}

.bl-rp__btn-area--rolled {
  visibility: hidden;
  pointer-events: none;
}

/* Dismiss link */
.bl-rp__dismiss-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary, rgba(232,220,200,0.45));
  font-size: clamp(0.75rem, 0.88vw, 0.82rem);
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,0.15);
}

.bl-rp__dismiss-btn:hover { color: var(--text-color, #e8dcc8); }

/* Verdict bar — slides up on result, takes over button space */
.bl-rp__verdict {
  width: calc(100% - (2 * clamp(0.65rem, 1.2vw, 0.9rem)));
  padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.5vw, 16px);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.5s ease 0.1s,
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  position: absolute;
  left: clamp(0.65rem, 1.2vw, 0.9rem);
  right: clamp(0.65rem, 1.2vw, 0.9rem);
  bottom: calc(clamp(0.8rem, 1.2vh, 1rem) + 2.1rem);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

/* Inner shimmer stripe */
.bl-rp__verdict::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  opacity: 0.6;
}

.bl-rp__verdict.bl-rp__verdict--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.bl-rp__verdict--success {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow:
    0 8px 32px rgba(74, 222, 128, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(74, 222, 128, 0.25);
}

.bl-rp__verdict--success::before {
  background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.5), transparent);
}

.bl-rp__verdict--failure {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  box-shadow:
    0 8px 32px rgba(248, 113, 113, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(248, 113, 113, 0.2);
}

.bl-rp__verdict--failure::before {
  background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.45), transparent);
}

.bl-rp__verdict--crit {
  background: rgba(200, 169, 110, 0.12);
  border: 1px solid rgba(200, 169, 110, 0.4);
  box-shadow:
    0 8px 40px rgba(200, 169, 110, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(200, 169, 110, 0.3);
}

.bl-rp__verdict--crit::before {
  background: linear-gradient(90deg, transparent, rgba(200, 169, 110, 0.55), transparent);
}

.bl-rp__verdict-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}

.bl-rp__verdict-text {
  font-size: clamp(0.92rem, 1.08vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
}

.bl-rp__verdict-sub {
  font-size: clamp(0.7rem, 0.8vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.3px;
  opacity: 0.65;
  margin-top: 1px;
}

.bl-rp__verdict--success .bl-rp__verdict-text { color: #4ade80; }
.bl-rp__verdict--success .bl-rp__verdict-sub  { color: rgba(74, 222, 128, 0.65); }
.bl-rp__verdict--failure .bl-rp__verdict-text { color: #f87171; }
.bl-rp__verdict--failure .bl-rp__verdict-sub  { color: rgba(248, 113, 113, 0.65); }
.bl-rp__verdict--crit    .bl-rp__verdict-text { color: var(--gold, #c8a96e); }
.bl-rp__verdict--crit    .bl-rp__verdict-sub  { color: rgba(200, 169, 110, 0.65); }

/* "The tale unfolds…" text below the verdict */
.bl-rp__unfolding {
  font-style: italic;
  font-size: clamp(0.74rem, 0.9vw, 0.82rem);
  opacity: 0.4;
  animation: bl-rp-unfolding-fade 600ms ease 400ms both;
  min-height: 1.2em;
  flex: none; /* override bl-choices-unfolding { flex: 1 } which would steal space from bl-rp__middle */
}

.bl-rp__unfolding--hidden {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.bl-rp__unfolding--visible {
  visibility: visible;
  animation: bl-rp-unfolding-fade 600ms ease 400ms both;
}

@media (max-height: 820px) {
  .bl-rp {
    gap: 0.5rem;
  }

  .bl-rp__die-wrap {
    width: clamp(110px, 16vh, 170px);
    height: clamp(110px, 16vh, 170px);
    margin-top: clamp(0.1rem, 0.5vh, 0.3rem);
  }

  .bl-rp__banner {
    min-height: 50px;
    max-height: 50px;
  }
}

@keyframes bl-rp-unfolding-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 0.4; transform: translateY(0); }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bl-rp__verdict { transition: none; }
}