/* Story room and reader, on the design system (tokens.css).
   Unlayered, so every rule here wins over legacy.css (style.css + collection.css).
   Positioning and layout still come from the legacy files; this file sets surface,
   type, colour, shape, elevation and motion. Where a size is set here, its phone
   variant is set here too, because legacy media queries no longer apply to it. */

/* ---------- Round controls (top bar, shelf arrows, dialog close) ---------- */
.round {
  border: var(--border-hair) solid var(--paper-300);
  background: var(--paper-50);
  color: var(--teal-800);
  box-shadow: 0 3px 0 var(--paper-400), var(--shadow-2);
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out), background-color var(--dur-state) var(--ease-out);
}
.round:hover {
  background: var(--paper-100);
}
.round:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--paper-400), var(--shadow-1);
}
.top-actions .round {
  width: var(--tap-min);
  height: var(--tap-min);
}
.control-icon {
  filter: none;
}
.control-icon path {
  fill: currentColor;
  stroke: none;
}
.top-actions .control-icon {
  width: 22px;
  height: 22px;
}
.round.muted::after {
  width: 26px;
  height: 3px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--coral-500);
  box-shadow: 0 0 0 2px var(--paper-50);
}
.round.language select {
  border: 0;
  background: transparent;
  color: var(--teal-800);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-text);
  text-align: center;
}
.round.language select option {
  color: var(--ink-900);
}

/* ---------- Reading counters ---------- */
.count-pill {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 40px;
  padding: 0 var(--space-4);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: var(--shadow-1);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-text);
}
.count-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
.count-item .control-icon {
  width: 18px;
  height: 18px;
}
.count-pins .control-icon { color: var(--honey-700); }
.count-done .control-icon { color: var(--leaf-600); }
.count-started .control-icon { color: var(--teal-700); }
.count-item small,
.count-label {
  font-weight: var(--weight-regular);
  color: var(--ink-600);
}
.count-label {
  margin-inline-start: var(--space-1);
}

/* ---------- Reading card ---------- */
.text-card,
.text-card.parchment {
  padding: clamp(16px, 2.2vw, 30px) clamp(18px, 2.6vw, 34px);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-xl);
  background: var(--paper-50);
  box-shadow: var(--shadow-3);
  color: var(--ink-900);
  scrollbar-color: var(--paper-400) transparent;
}
.text-card .eyebrow,
#folio .eyebrow,
.opening-kicker,
.collection-kicker {
  font: var(--weight-bold) var(--text-xs) / 1.2 var(--font-text);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-700);
}
.text-card h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--teal-900);
}
.reader-author {
  color: var(--color-text-muted);
}
.story-text {
  font-family: var(--font-text);
  color: var(--ink-900);
}
.word {
  border-radius: 6px;
  text-decoration-color: var(--honey-300);
  transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.word:hover {
  background: var(--honey-100);
}
.word.active {
  background: var(--honey-200);
  color: var(--ink-900);
  box-shadow: 0 0 0 3px var(--honey-200);
  transform: none;
}
.zoom-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--teal-800);
}
.zoom-button:hover {
  background: var(--paper-200);
}
.zoom-button .control-icon {
  width: 18px;
  height: 18px;
}
.self-done {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: var(--border-hair) solid var(--honey-700);
  border-radius: var(--radius-pill);
  background: var(--honey-300);
  box-shadow: 0 3px 0 var(--honey-700);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-text);
}

/* ---------- Scene touch chips and step keys ---------- */
.story-touch {
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: 0 3px 0 var(--paper-400), var(--shadow-2);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-sm) / 1.2 var(--font-text);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-state) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
.story-touch .touch-label {
  font-weight: var(--weight-regular);
  color: var(--ink-600);
}
.story-touch:hover {
  background: var(--paper-100);
  transform: none;
}
.story-touch:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--paper-400), var(--shadow-1);
}
.story-touch[aria-pressed=true] {
  background: var(--honey-100);
  border-color: var(--honey-500);
  box-shadow: 0 3px 0 var(--honey-500), var(--shadow-1);
  color: var(--ink-900);
}
.story-touch[aria-pressed=true] .touch-label {
  color: var(--honey-800);
}
.interaction-keys button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: var(--shadow-1);
  color: var(--teal-800);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-text);
}
.interaction-keys button:disabled {
  opacity: 0.55;
}

/* ---------- Reader bar ---------- */
.reader-bar .nav-round {
  width: 60px;
  height: 60px;
}
.reader-bar .nav-round .control-icon {
  width: 28px;
  height: 28px;
}
.pill {
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  background-image: none;
  box-shadow: 0 3px 0 var(--paper-400), var(--shadow-1);
  color: var(--teal-800);
  font-family: var(--font-text);
  font-weight: var(--weight-bold);
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-state) var(--ease-out), box-shadow var(--dur-press) var(--ease-out);
}
.pill:hover {
  background: var(--paper-100);
}
.pill:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--paper-400);
}
.pill.primary {
  min-width: 0;
  min-height: 60px;
  gap: var(--space-3);
  padding: 0 var(--space-8);
  border-color: var(--teal-900);
  background: var(--color-primary);
  box-shadow: 0 var(--edge) 0 var(--teal-900), var(--shadow-2);
  color: var(--color-on-primary);
  font-size: var(--text-xl);
}
.pill.primary:hover {
  background: var(--color-primary-hover);
}
.pill.primary:active {
  box-shadow: 0 2px 0 var(--teal-900), var(--shadow-1);
}
.pill.primary .control-icon {
  width: 26px;
  height: 26px;
  color: var(--honey-300);
}
.reader-position {
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: var(--shadow-2);
  color: var(--ink-800);
  font-family: var(--font-text);
}
.reader-position select {
  min-height: 40px;
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-md);
  background: var(--paper-100);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-text);
}
.reader-position #reading-focus {
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-100);
  box-shadow: none;
  color: var(--teal-800);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-text);
}
.reader-position #reading-focus[aria-pressed=true] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- Dialogs: settings, pins, awards, words ---------- */
dialog {
  border: var(--border-hair) solid var(--paper-300);
  outline: 0;
  border-radius: var(--radius-xl);
  background: var(--paper-50);
  box-shadow: var(--shadow-3);
  color: var(--ink-900);
  padding: clamp(24px, 4vw, 44px);
}
dialog::backdrop {
  background: rgb(27 36 51 / 0.55);
  backdrop-filter: none;
}
.folio-close {
  width: 44px;
  height: 44px;
}
.folio-close .control-icon {
  width: 18px;
  height: 18px;
}
.folio-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--teal-900);
}
.settings-row {
  border-bottom: var(--border-hair) solid var(--paper-300);
  font-size: var(--text-md);
}
.settings-row input {
  accent-color: var(--color-primary);
}
.settings-row select {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-md);
  background: var(--paper-100);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-text);
}
.journal-pin {
  border-radius: var(--radius-lg);
}
.journal-pin b {
  color: var(--paper-400);
}
.journal-pin.earned b,
.award-star {
  color: var(--honey-500);
}
.award-star {
  filter: none;
}

/* Ten-step reading progress (the ★ glyphs become segments) */
.shelf-stars {
  gap: 3px;
}
.shelf-stars i {
  width: 10px;
  height: 4px;
  font-size: 0;
  border-radius: var(--radius-pill);
  background: var(--paper-300);
}
.shelf-stars i.earned {
  background: var(--honey-500);
}

/* ---------- Shelf strip (Samana's World collection) ---------- */
.shelf-label {
  color: var(--paper-50);
  font: var(--weight-bold) var(--text-md) / 1.3 var(--font-text);
  text-shadow: 0 1px 2px rgb(27 36 51 / 0.6);
}
.shelf-title {
  border: var(--border-hair) solid var(--paper-300);
  outline: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  background-image: none;
  box-shadow: 0 var(--edge) 0 var(--paper-400), var(--shadow-2);
  color: var(--ink-900);
}
.shelf-title.active {
  border-color: var(--honey-500);
  box-shadow: 0 var(--edge) 0 var(--honey-500), var(--shadow-3);
}
.shelf-title .shelf-book-name {
  font: var(--weight-bold) var(--text-md) / 1.25 var(--font-text);
}
.shelf-title small {
  color: var(--ink-600);
}
.collection-switch {
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: var(--border-hair) solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius-pill);
  background: rgb(27 36 51 / 0.55);
  color: var(--paper-50);
  font: var(--weight-bold) var(--text-sm) / 1.2 var(--font-text);
}
.collection-switch:hover {
  background: rgb(27 36 51 / 0.72);
}

/* ---------- Aisha Bakhrani library ---------- */
.author-library #collection-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: var(--tracking-display);
  color: var(--paper-50);
}
.author-library #collection-title span {
  font: var(--weight-regular) var(--text-md) / 1.4 var(--font-text);
  letter-spacing: 0;
  color: var(--paper-300);
}
.author-library .collection-kicker {
  color: var(--honey-300);
}
.edition-title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100;
}
.edition-caption {
  font-family: var(--font-text);
}

/* ---------- Book opening (cover card) ---------- */
.author-opening {
  background: var(--paper-50);
  box-shadow: var(--shadow-3);
  color: var(--ink-900);
}
#opening-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: var(--tracking-display);
  color: var(--teal-900);
}
.listen-story {
  min-height: 52px;
  padding: 0 var(--space-5);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: 0 3px 0 var(--paper-400);
  color: var(--teal-800);
  font: var(--weight-bold) var(--text-md) / 1 var(--font-text);
}
.opening-back,
.restart-link {
  color: var(--teal-700);
  font-weight: var(--weight-bold);
}

/* ---------- Phones ---------- */
@media (max-width: 650px) {
  .top-actions .round {
    width: 44px;
    height: 44px;
  }
  .count-pill {
    gap: var(--space-3);
    padding: 0 var(--space-3);
  }
  .reader-bar .nav-round {
    width: 52px;
    height: 52px;
  }
  .pill.primary {
    min-height: 52px;
    padding: 0 var(--space-5);
    font-size: var(--text-lg);
  }
}
/* Counter labels only where there is room for them */
@media (max-width: 1100px) {
  .count-label {
    display: none;
  }
}

/* Icons drawn as outlines rather than solid shapes */
.icon-search path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.count-item b {
  color: var(--ink-900);
}

/* Toasts ("1 of 3 found") and small print */
.notice {
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-50);
  box-shadow: var(--shadow-3);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-md) / 1.3 var(--font-text);
}
.fine {
  color: var(--ink-600);
}

/* ---------- Phone reader: picture, then a row of touch chips, then the card ----------
   Replaces the legacy small framed preview with chips stacked over it (issue #2). */
@media (max-width: 570px) and (min-height: 560px) {
  body[data-view=read]:has(.mobile-scene-preview) {
    --m-top: calc(max(14px, env(safe-area-inset-top)) + 60px);
    --m-img-h: clamp(170px, 32dvh, 300px);
    --m-chips-top: calc(var(--m-top) + var(--m-img-h) + 10px);
    --m-card-top: calc(var(--m-chips-top) + 60px);
    --m-bar: calc(max(25px, env(safe-area-inset-bottom)) + 52px);
    --m-card-bottom: calc(var(--m-bar) + 64px);
  }
  body[data-view=read]:has(.mobile-scene-preview):not(:has(.story-touch)) {
    --m-card-top: var(--m-chips-top);
  }
  body[data-view=read]:has(.mobile-scene-preview):has(.reader-position) {
    --m-card-bottom: calc(var(--m-bar) + 80px);
  }
  body[data-view=read]:has(.mobile-scene-preview):not(:has(.interaction-keys button, .reader-position)) {
    --m-card-bottom: calc(var(--m-bar) + 14px);
  }

  /* Picture: full width for wide scenes, complete 2:3 for portrait pages */
  body[data-view=read] .mobile-scene-preview {
    top: var(--m-top);
    left: 50%;
    right: auto;
    width: calc(var(--m-img-h) * 2 / 3);
    height: var(--m-img-h);
    aspect-ratio: auto;
    transform: translateX(-50%);
  }
  body[data-view=read] .mobile-scene-preview.wide-scene-preview,
  body.generated-mobile-reader[data-view=read] .mobile-scene-preview {
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
  body[data-view=read] .mobile-scene-image {
    border: var(--border-hair) solid rgb(255 255 255 / 0.18);
    border-radius: var(--radius-xl);
    background: var(--night-800);
    box-shadow: var(--shadow-3);
  }
  body[data-view=read] .mobile-scene-image > img {
    object-fit: cover;
    background: var(--night-800);
  }

  /* Touch chips: one swipeable row under the picture */
  body[data-view=read]:has(.mobile-scene-preview) .story-interactions {
    position: fixed;
    top: var(--m-chips-top);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    max-width: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: var(--space-2);
    padding: 2px var(--space-4) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
    transform: none;
  }
  body[data-view=read]:has(.mobile-scene-preview) .story-interactions::-webkit-scrollbar {
    display: none;
  }
  body[data-view=read]:has(.mobile-scene-preview) .story-touch {
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;
  }

  /* Reading card fills the space between chips and controls */
  body[data-view=read]:has(.mobile-scene-preview) #text-card:not(.expanded) {
    top: var(--m-card-top);
    right: 12px;
    bottom: var(--m-card-bottom);
    left: 12px;
    width: auto;
    max-height: none;
    transform: none;
  }

  body[data-view=read]:has(.mobile-scene-preview) #text-card.expanded {
    right: 12px;
    left: 12px;
    width: auto;
  }

  /* An enlarged card is the only thing to read; chips step aside */
  body.card-expanded[data-view=read]:has(.mobile-scene-preview) .story-interactions {
    visibility: hidden;
  }

  /* Step keys sit just above the reader bar */
  body[data-view=read]:has(.mobile-scene-preview) .interaction-keys {
    top: auto;
    bottom: calc(var(--m-bar) + 10px);
  }
}

/* RTL details */
.count-item {
  direction: ltr;
}
.text-card[dir=rtl] h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

/* ==========================================================================
   Reader interaction layer
   ========================================================================== */

/* Tap label: the object's name (and its story line) at the touched object */
.magic-word {
  display: grid;
  gap: 2px;
  max-width: min(300px, calc(100vw - 32px));
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--paper-300);
  outline: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  box-shadow: var(--shadow-3);
  color: var(--ink-900);
  text-align: center;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  z-index: var(--z-toast);
  pointer-events: none;
}
.magic-word.below {
  transform: translate(-50%, 0);
  transform-origin: 50% 0;
}
.magic-word strong {
  font: 600 var(--text-xl) / 1.15 var(--font-display);
  font-variation-settings: 'SOFT' 100;
  color: var(--teal-900);
}
.magic-word[dir=rtl] strong {
  font-family: var(--font-arabic);
  font-weight: var(--weight-bold);
}
.magic-word span {
  font: var(--weight-regular) var(--text-sm) / 1.4 var(--font-text);
  color: var(--ink-600);
}
.magic-word.has-detail {
  text-align: start;
}
.magic-word.pop {
  animation: tap-label-in var(--dur-enter) var(--ease-spring) both;
}
.magic-word.below.pop {
  animation-name: tap-label-in-below;
}
@keyframes tap-label-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 8px)) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes tap-label-in-below {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Words linked to a touched object glow teal, distinct from the honey narration highlight */
.word.linked {
  background: var(--teal-100);
  box-shadow: 0 0 0 3px var(--teal-100);
  color: var(--teal-900);
  animation: word-linked 1.6s var(--ease-out) both;
}
@keyframes word-linked {
  0% { background: var(--teal-200); box-shadow: 0 0 0 5px var(--teal-200); }
  100% { background: var(--teal-100); box-shadow: 0 0 0 3px var(--teal-100); }
}

/* Karaoke: during narration, words not yet read are quieter than the current and past words */
.is-narrating .story-text .word {
  transition: color var(--dur-state) var(--ease-out), background-color var(--dur-press) var(--ease-out);
}
.is-narrating .story-text .word.active ~ .word {
  color: var(--ink-600);
}

/* A new page's words arrive in reading order */
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduced) .story-text .word {
    animation: word-in var(--dur-enter) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 22ms);
  }
  body:not(.reduced) .story-text .word.linked {
    animation: word-linked 1.6s var(--ease-out) both;
  }
}
@keyframes word-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.magic-word[hidden] {
  display: none;
}

/* In the reader, notices ("1 of 3 found") sit above the reader bar, over the step keys
   they describe, never on top of "Read to me". */
body[data-view=read] .notice {
  bottom: calc(max(25px, env(safe-area-inset-bottom)) + 72px);
}
@media (max-width: 570px) {
  body[data-view=read] .notice {
    bottom: calc(max(25px, env(safe-area-inset-bottom)) + 60px);
  }
}

/* ==========================================================================
   Earned reading stars
   ========================================================================== */
.text-card .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-right: 44px; /* the enlarge button sits top-right in both directions */
}
.book-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  padding: 2px var(--space-3) 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--paper-200);
  color: var(--ink-800);
  font: var(--weight-bold) var(--text-sm) / 1.4 var(--font-text);
}
.book-stars .control-icon {
  width: 16px;
  height: 16px;
  color: var(--paper-400);
}
.book-stars small {
  font-weight: var(--weight-regular);
  color: var(--ink-600);
}
.book-stars.earned-here {
  background: var(--honey-100);
}
.book-stars.earned-here .control-icon,
.count-stars .control-icon,
.award-stars .control-icon {
  color: var(--honey-500);
}
.book-stars.just-earned {
  animation: star-bump var(--dur-scene) var(--ease-spring);
}
@keyframes star-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.flying-star {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  color: var(--honey-500);
  filter: drop-shadow(0 2px 4px rgb(154 102 32 / 0.35));
  pointer-events: none;
  z-index: var(--z-toast);
}
.flying-star .control-icon {
  width: 100%;
  height: 100%;
}
.self-done[hidden] {
  display: none;
}
.self-done.appear {
  animation: rise-in var(--dur-enter) var(--ease-spring) both;
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.award-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  font: var(--weight-bold) var(--text-md) / 1.4 var(--font-text);
  color: var(--ink-800);
}
.award-stars .control-icon {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Samana, the reader's guide
   ========================================================================== */
.samana-guide {
  display: none;
}
body[data-view=read] .samana-guide:not([hidden]) {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: calc(var(--z-ui) + 6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  pointer-events: none;
}
html[dir=rtl] body[data-view=read] .samana-guide:not([hidden]) {
  left: auto;
  right: max(20px, env(safe-area-inset-right));
  align-items: flex-end;
}
.samana-avatar {
  width: 88px;
  height: 98px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  filter: drop-shadow(0 6px 10px rgb(38 34 31 / 0.25));
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--dur-state) var(--ease-out);
}
.samana-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.samana-avatar:hover {
  transform: translateY(-3px);
}
.samana-bubble {
  position: relative;
  max-width: min(320px, calc(100vw - 40px));
  margin-inline-start: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid var(--paper-300);
  border-radius: var(--radius-lg);
  background: var(--paper-50);
  box-shadow: var(--shadow-3);
  color: var(--ink-900);
  font: var(--weight-bold) var(--text-md) / 1.4 var(--font-text);
  pointer-events: auto;
}
.samana-bubble[hidden] {
  display: none;
}
.samana-bubble p {
  margin: 0;
}
/* Tail pointing down at Samana */
.samana-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  inset-inline-start: 26px;
  width: 14px;
  height: 14px;
  background: var(--paper-50);
  border-right: var(--border-hair) solid var(--paper-300);
  border-bottom: var(--border-hair) solid var(--paper-300);
  transform: rotate(45deg);
}
.samana-bubble.pop {
  animation: rise-in var(--dur-enter) var(--ease-spring) both;
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.reduced) .samana-guide.speaking .samana-avatar {
    animation: samana-bob 1.4s ease-in-out infinite;
  }
  body:not(.reduced) .samana-guide.cheer .samana-avatar {
    animation: samana-hop 0.6s var(--ease-spring) 2;
  }
}
@keyframes samana-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes samana-hop {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-16px); }
}

/* Phones: Samana sits at the bottom of the picture; tips appear beside her */
@media (max-width: 570px) and (min-height: 560px) {
  body[data-view=read]:has(.mobile-scene-preview) .samana-guide:not([hidden]),
  html[dir=rtl] body[data-view=read]:has(.mobile-scene-preview) .samana-guide:not([hidden]) {
    top: calc(var(--m-top) + var(--m-img-h) - 6px);
    right: 22px;
    bottom: auto;
    left: 22px;
    flex-direction: row-reverse; /* Samana on the reading-start side, bubble after her */
    align-items: flex-end;
    transform: translateY(-100%);
  }
  body[data-view=read]:has(.mobile-scene-preview) .samana-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 54px;
  }
  body[data-view=read]:has(.mobile-scene-preview) .samana-bubble {
    flex: 1;
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
  }
  /* Tail points sideways at Samana */
  body[data-view=read]:has(.mobile-scene-preview) .samana-bubble::after {
    bottom: 14px;
    inset-inline-start: -8px;
    transform: rotate(135deg);
  }
  html[dir=rtl] body[data-view=read]:has(.mobile-scene-preview) .samana-bubble::after {
    transform: rotate(-45deg);
  }
}

/* Samana in Learn & Play activities (hidden on the Learn & Play menu, where her artwork is) */
body[data-view=learn] .samana-guide:not([hidden]),
html[dir=rtl] body[data-view=learn] .samana-guide:not([hidden]) {
  position: fixed;
  right: auto;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(20px, env(safe-area-inset-left));
  z-index: calc(var(--z-screen) + 6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  pointer-events: none;
}
body[data-view=learn] .samana-avatar {
  width: 76px;
  height: 84px;
}
body[data-view=learn]:has(.samana-guide:not([hidden])) .learn-shell {
  padding-bottom: 120px;
}
@media (max-width: 650px) {
  body[data-view=learn] .samana-guide:not([hidden]),
  html[dir=rtl] body[data-view=learn] .samana-guide:not([hidden]) {
    right: 16px;
    left: 16px;
    flex-direction: row-reverse;
    align-items: flex-end;
  }
  body[data-view=learn] .samana-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 58px;
  }
  body[data-view=learn] .samana-bubble {
    flex: 1;
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
  }
  body[data-view=learn] .samana-bubble::after {
    bottom: 14px;
    inset-inline-start: -8px;
    transform: rotate(135deg);
  }
  body[data-view=learn]:has(.samana-guide:not([hidden])) .learn-shell {
    padding-bottom: 96px;
  }
}

/* ==========================================================================
   One shelf for every collection
   ========================================================================== */
/* Aisha Bakhrani's books sit on the same 3D shelf: undo the legacy blurred, darkened room */
body[data-edition=aisha][data-view=shelf] {
  background: #292633;
}
body[data-edition=aisha][data-view=shelf] #world {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}
body[data-edition=aisha][data-view=shelf] .room-shade {
  background: radial-gradient(ellipse at 50% 40%, transparent 60%, rgb(103 64 22 / 0.09));
}

/* Collection switch: a segmented pill above the shelf titles */
.shelf-collections {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--space-3);
  padding: 4px;
  gap: 4px;
  border: var(--border-hair) solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  background: rgb(27 36 51 / 0.62);
  box-shadow: var(--shadow-2);
}
.collection-tab {
  min-height: 40px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--paper-50);
  font: var(--weight-bold) var(--text-sm) / 1 var(--font-text);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.collection-tab:hover {
  background: rgb(255 255 255 / 0.12);
}
.collection-tab[aria-pressed=true] {
  background: var(--paper-50);
  color: var(--teal-900);
  box-shadow: 0 2px 0 var(--paper-400);
}
.shelf-collections :focus-visible {
  outline-color: var(--honey-300);
  box-shadow: none;
}
.shelf-title .shelf-author {
  display: block;
  margin-top: 2px;
  color: var(--teal-700);
  font: var(--weight-bold) var(--text-xs) / 1.2 var(--font-text);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
@media (max-width: 570px) {
  .collection-tab {
    padding: 0 var(--space-4);
  }
}

/* Title cards in a row from 640 px, so the books on the shelf stay visible
   (the legacy layout stacked them over the middle book on tablets and near-square screens). */
@media (min-width: 640px) {
  .shelf-strip {
    width: min(880px, 94vw);
  }
  .shelf-row {
    justify-content: center;
  }
  .shelf-titles {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    gap: var(--space-4);
    width: auto;
    max-width: none;
  }
  .shelf-title {
    flex: 1 1 0;
    max-width: 260px;
  }
}

/* ==========================================================================
   One book opening for every book
   ========================================================================== */
/* Every opening dims the room the same way (previously only Aisha Bakhrani's books) */
body[data-view=cover] .room-shade {
  background: rgb(22 44 55 / 0.85);
}
/* Samana's World covers are full paintings: show them whole, not framed like line art */
.samana-book .opening-art img {
  width: auto;
  max-width: 100%;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: var(--shadow-3);
  object-fit: cover;
}
.opening-blurb {
  max-width: 34ch;
  margin: calc(var(--space-4) * -1) 0 var(--space-4);
  font: var(--weight-regular) var(--text-lg) / 1.45 var(--font-text);
  color: var(--ink-800);
}
.opening-page h1[lang=ar] {
  font-family: var(--font-arabic);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
.samana-book .opening-art img {
  height: min(380px, 50dvh);
}
@media (max-width: 650px) {
  .samana-book .opening-art img {
    height: 145px;
  }
}

/* ==========================================================================
   Shelf titles: current group on larger screens, one swipeable row on phones
   ========================================================================== */
.shelf-title:not(.in-group) {
  display: none;
}
.shelf-dots {
  display: none;
}
@media (max-width: 639px) {
  .shelf-strip {
    width: 100vw;
  }
  .shelf-row {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-3);
  }
  .shelf-arrow,
  .shelf-group-count {
    display: none !important;
  }
  .shelf-titles {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    width: 100%;
    max-width: none;
    padding: 4px 14vw 8px; /* (100vw - card) / 2, so the first and last cards can centre */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .shelf-titles::-webkit-scrollbar {
    display: none;
  }
  .shelf-title,
  .shelf-title:not(.in-group) {
    display: block;
    flex: 0 0 72vw;
    width: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .shelf-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .shelf-dots i {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 0.5);
    box-shadow: 0 0 0 1px rgb(27 36 51 / 0.25);
    transition: width var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out);
  }
  .shelf-dots i.on {
    width: 20px;
    background: var(--paper-50);
  }
}
/* Phones: the two ways to read stack full width rather than wrapping their labels */
@media (max-width: 650px) {
  .opening-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    width: 100%;
  }
  .opening-actions .pill {
    width: 100%;
    white-space: nowrap;
  }
}

/* Logo on the loading card */
.loading-logo {
  width: min(360px, 76vw);
  margin: var(--space-2) auto var(--space-3);
}