/* =============================================================================
   The Blind Owl — a reading companion in the Fun section.

   The page is built from the narrator's own trade: a lacquered pen case. The
   wall is lamplit plaster with an owl-shaped shadow on it; everything a
   reader works with (the figure map, the motif table, the companion) sits in
   a lacquer panel with a gilded double rule, the way a painted scene sits in
   the lid of a qalamdan. Nastaliq is kept for the title and for the names of
   the figures; reading text is Naskh (Persian) or Garamond (English); the
   controls stay in the site's own Vazirmatn.

   Prefix `bo-`. State comes from blind-owl.js as attributes and classes
   (`data-position`, `is-selected`, `has-selection`, `is-locked`).
   ========================================================================== */

/* Noto Nastaliq Urdu © The Noto Project Authors, SIL Open Font License 1.1 —
   Arabic-script subset, self-hosted like the site's other fonts. */
@font-face {
  font-family: 'Bo Nastaliq';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-nastaliq-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

/* Noto Naskh Arabic © The Noto Project Authors, SIL Open Font License 1.1. */
@font-face {
  font-family: 'Bo Naskh';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/noto-naskh-arabic-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Bo Naskh';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/noto-naskh-arabic-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

/* Cormorant Garamond © The Cormorant Project Authors, SIL Open Font License 1.1 — latin subset. */
@font-face {
  font-family: 'Bo Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Bo Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Bo Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700.woff2') format('woff2');
}

/* --- Palette and type ------------------------------------------------------ */
.bo-page {
  --bo-lacquer: #140c08;
  --bo-lacquer-2: #1c120c;
  --bo-wall: #1e140e;
  --bo-wall-lit: #3a2616;
  --bo-gold: #c9a24a;
  --bo-gold-pale: #e9d38f;
  --bo-gold-line: color-mix(in srgb, var(--bo-gold) 34%, transparent);
  --bo-gold-faint: color-mix(in srgb, var(--bo-gold) 14%, transparent);
  --bo-bone: #efe3c8;
  --bo-ash: #b9a98c;
  --bo-dim: #8f7f64;
  --bo-indigo: #8a9be0;
  --bo-blood: #b2483b;
  --bo-glow: #f0b25c;
  --bo-ink: #0d0806;
  --bo-ink-2: #0e0906;
  --bo-panel: #22160e;
  --bo-deep: #120b07;
  --bo-deep-2: #170f0a;
  --bo-on-gold: #1a0f08;
  --bo-gold-dark: #8a6a24;
  --bo-indigo-deep: #4c5f9f;
  --bo-blood-deep: #8e2f25;

  --bo-display: 'Bo Nastaliq', 'Noto Nastaliq Urdu', 'IranNastaliq', serif;
  --bo-names: var(--bo-display);
  --bo-read: 'Bo Naskh', 'Noto Naskh Arabic', var(--font-sans);
  --bo-read-size: 1.125rem;
  --bo-read-leading: 2.1;
  --bo-top: var(--header-h);

  background:
    radial-gradient(70rem 40rem at 18% 0%, color-mix(in srgb, var(--bo-glow) 9%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bo-wall) 0%, var(--bo-deep-2) 60%, var(--bo-deep) 100%);
  color: var(--bo-ash);
}

.bo-page:lang(en) {
  --bo-display: 'Bo Garamond', 'Cormorant Garamond', Georgia, serif;
  --bo-names: 'Bo Garamond', 'Cormorant Garamond', Georgia, serif;
  --bo-read: 'Bo Garamond', 'Cormorant Garamond', Georgia, serif;
  --bo-read-size: 1.3rem;
  --bo-read-leading: 1.6;
}

.bo-page ::selection {
  background: color-mix(in srgb, var(--bo-gold) 30%, transparent);
  color: var(--bo-bone);
}

.bo-page :focus-visible {
  outline-color: var(--bo-gold-pale);
}

.bo-page h2,
.bo-page h3,
.bo-page h4 {
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-weight: 600;
}

.bo-page:lang(en) h2,
.bo-page:lang(en) h3,
.bo-page:lang(en) h4 {
  font-weight: 700;
}

/* --- Immersive (full screen) ----------------------------------------------
   The site's header and footer step aside; the reading bar, which carries the
   way back, moves to the very top. */
:root.bo-immersive .site-header,
:root.bo-immersive .site-footer {
  display: none;
}

:root.bo-immersive .bo-page {
  --bo-top: 0px;
}

:root.bo-immersive .bo-back {
  visibility: hidden;
}

/* --- Hero: the lamplit wall -------------------------------------------------- */



.bo-owl {
  position: absolute;
  inset-block-start: calc(var(--bo-top) + var(--space-8));
  inset-inline-end: 9%;
  inline-size: clamp(15rem, 30vw, 30rem);
  block-size: auto;
  fill: rgb(0 0 0 / 34%);
  stroke: rgb(0 0 0 / 34%);
  stroke-width: 6;
  stroke-linecap: round;
  filter: blur(7px);
  transform-origin: 50% 100%;
  animation: bo-shadow-rise 2.4s var(--ease-out) 0.3s both;
}

.bo-lamp {
  position: absolute;
  inset-block-end: 45%;
  inset-inline-end: calc(24% - 1.5rem);
  inline-size: 3rem;
  block-size: 1rem;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #8a5a2a, #3d2412);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bo-gold) 40%, transparent);
}

.bo-lamp__flame {
  position: absolute;
  inset-block-end: 85%;
  inset-inline-start: 1.15rem;
  inline-size: 0.7rem;
  block-size: 1.5rem;
  border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: radial-gradient(circle at 50% 75%, #fff4cc, #f5b54a 45%, rgb(214 98 32 / 0%) 75%);
  filter: drop-shadow(0 0 10px rgb(245 181 74 / 80%));
  transform-origin: 50% 100%;
  animation: bo-flicker 3.2s ease-in-out infinite, bo-light 1.2s ease-out both;
}

@keyframes bo-shadow-rise {
  from { opacity: 0; transform: scale(0.8) skewX(0deg); }
  to { opacity: 1; transform: skewX(var(--bo-lean, -4deg)); }
}

@keyframes bo-light {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bo-flicker {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  22% { transform: scaleY(1.08) rotate(-2deg); }
  48% { transform: scaleY(0.94) rotate(1.5deg); }
  70% { transform: scaleY(1.04) rotate(-1deg); }
}


.bo-back {
  display: inline-flex;
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-back:hover {
  color: var(--bo-bone);
}

.bo-title {
  margin-block-start: var(--space-6);
  color: var(--bo-bone);
  font-family: var(--bo-display);
  /* Bounded by the height too: on a short laptop screen a 9rem Nastaliq title
     alone would fill the first view. */
  font-size: min(clamp(4.25rem, 2.6rem + 7.5vw, 9rem), 17vh);
  font-weight: 400;
  line-height: 1.55;
  text-shadow: 0 0 40px color-mix(in srgb, var(--bo-glow) 18%, transparent);
}

.bo-title:lang(en) {
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}

.bo-byline {
  margin-block-start: var(--space-2);
  color: var(--bo-gold);
  font-family: var(--bo-read);
  font-size: var(--text-xl);
}

.bo-lede {
  max-inline-size: 44ch;
  margin-block-start: var(--space-5);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: calc(var(--bo-read-size) * 1.12);
  line-height: var(--bo-read-leading);
}

.bo-quote {
  max-inline-size: 40rem;
  margin-block-start: var(--space-8);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--bo-gold);
}

.bo-quote blockquote p {
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: calc(var(--bo-read-size) * 1.3);
  line-height: var(--bo-read-leading);
}

.bo-quote figcaption {
  margin-block-start: var(--space-2);
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-case {
  inline-size: min(75rem, 100% - 2 * var(--shell-pad));
  margin: var(--space-12) auto var(--space-6);
}

.bo-case img {
  inline-size: 100%;
  block-size: auto;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 60%)) drop-shadow(0 0 1px color-mix(in srgb, var(--bo-gold) 40%, transparent));
}

.bo-case figcaption {
  margin-block-start: var(--space-4);
  color: var(--bo-dim);
  font-family: var(--bo-read);
  font-size: var(--text-base);
  text-align: center;
}

.bo-care-note {
  color: var(--bo-dim);
  font-size: var(--text-sm);
  text-align: center;
}

.bo-care-note a,
.bo-care a {
  color: var(--bo-gold-pale);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- The game: the narrator's room ------------------------------------------- */
.bo-game {
  position: relative;
  block-size: 100svh;
  min-block-size: 36rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(40rem 30rem at 70% 70%, color-mix(in srgb, var(--bo-glow) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bo-lacquer-2), var(--bo-ink));
  touch-action: manipulation;
}

.bo-game__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.bo-game.is-lit .bo-game__canvas {
  opacity: 1;
}

.bo-game.is-playing .bo-game__canvas {
  cursor: none;
}

/* The still wall shows before the room is lit, and stays where WebGL is missing. */
.bo-game__still {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease-out);
}

.bo-game.is-lit .bo-game__still {
  opacity: 0;
}

/* --- The start screen -------------------------------------------------------- */
.bo-game__start {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  /* Centred with auto margins, not align-items: on a short screen the
     content is taller than the box, and flex centring would push its top
     (the back link and the title) up under the site header, out of reach of
     scrolling. Auto margins centre when there is room and start at the top
     when there is not. */
  align-items: flex-start;
  padding-block: calc(var(--bo-top) + min(var(--space-6), 2.5vh)) min(var(--space-8), 3vh);
  overflow-y: auto;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bo-ink) 0%, transparent) 20%, color-mix(in srgb, var(--bo-ink) 78%, transparent) 62%, color-mix(in srgb, var(--bo-ink) 92%, transparent));
}

:root[dir='rtl'] .bo-game__start {
  background: linear-gradient(270deg, color-mix(in srgb, var(--bo-ink) 0%, transparent) 20%, color-mix(in srgb, var(--bo-ink) 78%, transparent) 62%, color-mix(in srgb, var(--bo-ink) 92%, transparent));
}

.bo-game.has-room .bo-game__start .bo-case {
  display: none;
}

.bo-game__start-inner {
  display: grid;
  justify-items: start;
  margin-block: auto;
}

/* The start screen is one screen: everything up to the buttons fits a
   standard window without scrolling. Type and spacing are bounded by the
   window's height as well as its width, and line heights are tighter here
   than in the long reading text below. */
.bo-game__start .bo-title {
  margin-block-start: min(var(--space-3), 1.2vh);
  font-size: min(clamp(3.5rem, 2rem + 6vw, 8rem), 14vh);
  line-height: 1.4;
}

.bo-game__start .bo-byline {
  margin-block-start: 0;
  font-size: min(var(--text-xl), 2.6vh);
}

.bo-game__start .bo-lede {
  margin-block-start: min(var(--space-4), 1.8vh);
  font-size: min(calc(var(--bo-read-size) * 1.06), 2.5vh);
  line-height: 1.75;
}

.bo-game__start .bo-quote {
  margin-block-start: min(var(--space-6), 2.4vh);
}

.bo-game__start .bo-quote blockquote p {
  font-size: min(calc(var(--bo-read-size) * 1.15), 2.7vh);
  line-height: 1.75;
}

.bo-game__start .bo-quote figcaption {
  margin-block-start: 0.2rem;
}

.bo-page:lang(en) .bo-game__start .bo-lede,
.bo-page:lang(en) .bo-game__start .bo-quote blockquote p {
  line-height: 1.4;
}

.bo-page:lang(en) .bo-game__start .bo-title {
  line-height: 1.05;
}

.bo-game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: min(var(--space-8), 3.2vh);
}

.bo-game__enter {
  min-block-size: 3.25rem;
  padding-inline: var(--space-8);
  font-size: var(--text-lg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bo-gold) 18%, transparent), 0 0 30px color-mix(in srgb, var(--bo-glow) 35%, transparent);
}

.bo-game.is-static .bo-game__enter {
  display: none;
}

.bo-game__note {
  margin-block-start: var(--space-3);
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-game__start .bo-care-note {
  margin-block-start: min(var(--space-6), 2vh);
  line-height: 1.6;
  text-align: start;
}

.bo-game__start .bo-case {
  inline-size: 100%;
  margin: var(--space-8) 0 0;
}

/* --- Hotspots: invisible until the pointer or focus finds them --------------- */
.bo-game__spots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.bo-spot {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: var(--s, 48px);
  block-size: var(--s, 48px);
  border-radius: 50%;
  translate: calc(var(--x, 0px) - 50%) calc(var(--y, 0px) - 50%);
  pointer-events: auto;
  cursor: pointer;
}

.bo-game:not(.is-playing) .bo-spot {
  pointer-events: none;
}

.bo-spot__ring {
  position: absolute;
  inset: 12%;
  border: 1.5px solid color-mix(in srgb, var(--bo-gold-pale) 0%, transparent);
  border-radius: 50%;
  transition: border-color var(--dur-base) var(--ease-out), inset var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.bo-spot:hover .bo-spot__ring,
.bo-spot:focus-visible .bo-spot__ring {
  inset: 0;
  border-color: color-mix(in srgb, var(--bo-gold-pale) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--bo-glow) 35%, transparent), inset 0 0 18px color-mix(in srgb, var(--bo-glow) 20%, transparent);
}

.bo-spot.is-done:hover .bo-spot__ring {
  border-style: dashed;
}

.bo-spot__label {
  position: absolute;
  inset-block-end: calc(100% + 0.4rem);
  inset-inline-start: 50%;
  translate: -50% 0.3rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bo-lacquer) 90%, transparent);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}

:root[dir='rtl'] .bo-spot__label {
  translate: 50% 0.3rem;
}

.bo-spot:hover .bo-spot__label,
.bo-spot:focus-visible .bo-spot__label {
  opacity: 1;
  translate: -50% 0;
}

:root[dir='rtl'] .bo-spot:hover .bo-spot__label,
:root[dir='rtl'] .bo-spot:focus-visible .bo-spot__label {
  translate: 50% 0;
}

.bo-spot:focus-visible {
  outline: none;
}

/* --- HUD ------------------------------------------------------------------- */
.bo-hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--bo-top) + var(--space-3)) var(--shell-pad) var(--space-4);
  pointer-events: none;
}

.bo-hud[hidden] {
  display: none;
}

.bo-hud__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-full);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bo-lacquer-2) 88%, transparent), color-mix(in srgb, var(--bo-ink-2) 88%, transparent));
  outline: 1px solid color-mix(in srgb, var(--bo-gold) 14%, transparent);
  outline-offset: 4px;
  box-shadow: 0 16px 40px -20px rgb(0 0 0 / 80%);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.bo-hud__chapters {
  display: flex;
  gap: var(--space-1);
}

.bo-chapter-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--bo-ash);
  font-size: var(--text-xs);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

:root[dir='rtl'] .bo-chapter-pill {
  padding: 0.3rem 0.35rem 0.3rem 0.8rem;
}

.bo-chapter-pill__n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border: 1.5px solid var(--bo-gold-line);
  border-radius: 50%;
  color: var(--bo-gold-pale);
  font-weight: 700;
}

.bo-chapter-pill:hover {
  color: var(--bo-bone);
  background: var(--bo-gold-faint);
}

.bo-chapter-pill.is-past .bo-chapter-pill__n {
  background: color-mix(in srgb, var(--bo-gold) 30%, transparent);
}

.bo-chapter-pill.is-current {
  border-color: var(--bo-gold-line);
  background: var(--bo-gold-faint);
  color: var(--bo-bone);
}

.bo-chapter-pill.is-current .bo-chapter-pill__n {
  border-color: var(--bo-gold-pale);
  background: var(--bo-gold-pale);
  color: var(--bo-on-gold);
  box-shadow: 0 0 14px color-mix(in srgb, var(--bo-gold-pale) 55%, transparent);
}

.bo-page.is-unset .bo-chapter-pill__n {
  animation: bo-beckon 2.4s ease-in-out infinite;
}

.bo-hud__found {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--bo-bone);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.bo-hud__found-label {
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-hud__meter {
  position: relative;
  inline-size: 7rem;
  block-size: 0.4rem;
  overflow: hidden;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bo-gold) 14%, transparent);
}

.bo-hud__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--fill, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bo-gold-dark), var(--bo-gold-pale));
  box-shadow: 0 0 10px color-mix(in srgb, var(--bo-gold-pale) 60%, transparent);
  transition: inline-size 0.8s var(--ease-out);
}

.bo-hud__tools {
  display: flex;
  gap: var(--space-1);
}

.bo-icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--bo-gold-line);
  border-radius: 50%;
  color: var(--bo-gold-pale);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.bo-icon-button:hover {
  border-color: var(--bo-gold);
  background: var(--bo-gold-faint);
}

.bo-icon-button svg {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bo-sound .bo-sound__on,
.bo-sound[aria-pressed='true'] .bo-sound__off {
  display: none;
}

.bo-sound[aria-pressed='true'] .bo-sound__on {
  display: inline;
}

.bo-sound[aria-pressed='true'] {
  background: var(--bo-gold-faint);
}

.bo-hud__hint {
  align-self: center;
  max-inline-size: 46rem;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bo-ink-2) 70%, transparent);
  color: var(--bo-ash);
  font-size: var(--text-sm);
  text-align: center;
}

.bo-game.is-chapter-done .bo-hud__hint {
  color: var(--bo-gold-pale);
}

/* --- Toasts and the smoke veil --------------------------------------------- */
.bo-game__toasts {
  position: absolute;
  inset-block-start: calc(var(--bo-top) + 5.5rem);
  inset-inline: 0;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: none;
}

.bo-toast {
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--bo-lacquer) 92%, transparent);
  color: var(--bo-gold-pale);
  font-family: var(--bo-read);
  font-size: var(--text-base);
  box-shadow: 0 0 28px color-mix(in srgb, var(--bo-glow) 25%, transparent);
  animation: bo-toast-in 0.45s var(--ease-out) both;
}

.bo-toast::before {
  content: '✦ ';
}

.bo-toast.is-leaving {
  animation: bo-toast-out 0.5s var(--ease-out) both;
}

@keyframes bo-toast-in {
  from { opacity: 0; transform: translateY(-0.6rem) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes bo-toast-out {
  to { opacity: 0; transform: translateY(-0.4rem); }
}

.bo-game__veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: var(--bo-bone);
  font-family: var(--bo-display);
  font-size: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  text-align: center;
  text-shadow: 0 0 30px rgb(0 0 0 / 80%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}

.bo-game.is-smoking .bo-game__veil {
  opacity: 1;
}

/* --- Discovery cards ---------------------------------------------------------- */
.bo-card {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: calc(var(--bo-top) + var(--space-4)) var(--space-4) var(--space-4);
  background: radial-gradient(60% 60% at 50% 50%, rgb(0 0 0 / 25%), rgb(0 0 0 / 65%));
}

.bo-card[hidden],
.bo-drawer[hidden] {
  display: none;
}

.bo-card__frame {
  position: relative;
  inline-size: min(34rem, 100%);
  max-block-size: 100%;
  overflow-y: auto;
  padding: var(--space-8) var(--space-8) var(--space-6);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(30rem 16rem at 50% -10%, color-mix(in srgb, var(--bo-gold) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bo-panel), var(--bo-deep));
  outline: 1px solid color-mix(in srgb, var(--bo-gold) 20%, transparent);
  outline-offset: 6px;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 90%), 0 0 60px color-mix(in srgb, var(--bo-glow) 12%, transparent);
  animation: bo-card-in 0.5s var(--ease-out) both;
}

@keyframes bo-card-in {
  from { opacity: 0; transform: translateY(1rem) scale(0.95); }
  to { opacity: 1; transform: none; }
}

.bo-card__place {
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-card__art {
  display: grid;
  place-items: center;
  margin-block: var(--space-2) var(--space-3);
}

.bo-card__glyph {
  inline-size: 4rem;
  block-size: 4rem;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bo-glow) 40%, transparent));
}

.bo-card__art .bo-medal {
  inline-size: 5rem;
  block-size: 5rem;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--bo-glow) 35%, transparent));
}

.bo-slot .bo-medal {
  inline-size: 2.4rem;
  block-size: 2.4rem;
}

.bo-card__mirror {
  inline-size: 3.6rem;
  block-size: 4.6rem;
  border: 3px solid var(--bo-gold);
  border-radius: 50%;
  background: linear-gradient(135deg, #5e6b72, #23282c 55%, #3d464c);
  box-shadow: 0 0 22px color-mix(in srgb, var(--bo-glow) 30%, transparent);
}

.bo-card__kind {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  color: var(--bo-gold);
  font-size: var(--text-xs);
  text-align: center;
}

.bo-card__fresh {
  padding: 0 0.6em;
  border-radius: var(--r-full);
  background: var(--bo-gold-pale);
  color: var(--bo-on-gold);
  font-weight: 700;
}

.bo-page .bo-card__name {
  margin-block-start: var(--space-1);
  font-family: var(--bo-names);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}

.bo-page:lang(en) .bo-card__name {
  font-style: italic;
  line-height: 1.15;
}

.bo-card__sub {
  margin-block-start: var(--space-5);
  font-size: var(--text-base);
}

.bo-card__echo {
  margin-block-start: var(--space-2);
  font-family: var(--bo-read);
  font-size: calc(var(--bo-read-size) * 0.92);
  line-height: 1.9;
}

.bo-card__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.bo-card__dots {
  display: flex;
  gap: 0.35rem;
}

.bo-card__dots span {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border: 1px solid var(--bo-gold);
  border-radius: 50%;
}

.bo-card__dots span.is-on {
  background: var(--bo-gold-pale);
}

.bo-card__buttons {
  display: flex;
  gap: var(--space-2);
}

/* --- Drawers: the journal and the companion ------------------------------------- */
.bo-drawer {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 6;
  inline-size: min(30rem, 100%);
  padding: calc(var(--bo-top) + var(--space-3)) var(--space-3) var(--space-3);
}

.bo-drawer__frame {
  block-size: 100%;
  overflow-y: auto;
  padding: var(--space-5);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bo-panel) 97%, transparent), color-mix(in srgb, var(--bo-ink-2) 97%, transparent));
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / 90%);
  animation: bo-drawer-in 0.4s var(--ease-out) both;
}

@keyframes bo-drawer-in {
  from { transform: translateX(1.5rem); }
  to { transform: none; }
}

:root[dir='rtl'] .bo-drawer__frame {
  animation-name: bo-drawer-in-rtl;
}

@keyframes bo-drawer-in-rtl {
  from { transform: translateX(-1.5rem); }
  to { transform: none; }
}

.bo-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.bo-drawer__head h3 {
  font-size: var(--text-2xl);
}

.bo-drawer__head p {
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-drawer__count {
  margin-block: var(--space-3);
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-drawer__count span {
  color: var(--bo-gold-pale);
  font-size: var(--text-lg);
  font-weight: 700;
}

.bo-drawer h4 {
  margin-block: var(--space-4) var(--space-2);
  color: var(--bo-gold);
  font-size: var(--text-sm);
}

.bo-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2);
}

.bo-slot {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-1);
  inline-size: 100%;
  min-block-size: 7.5rem;
  padding: var(--space-3) var(--space-2);
  border: 1px dashed color-mix(in srgb, var(--bo-gold) 22%, transparent);
  border-radius: var(--r-lg);
  color: var(--bo-dim);
  text-align: center;
}

.bo-slot.is-found {
  border-style: solid;
  border-color: var(--bo-gold-line);
  background: radial-gradient(10rem 6rem at 50% 0%, color-mix(in srgb, var(--bo-gold) 12%, transparent), transparent 70%);
  color: var(--bo-bone);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.bo-slot.is-found:hover {
  border-color: var(--bo-gold);
}

.bo-slot.is-locked {
  opacity: 0.55;
}

.bo-slot .bo-glyph {
  inline-size: 2.2rem;
  block-size: 2.2rem;
}


.bo-slot__mark {
  display: grid;
  place-items: center;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  border: 1px dashed color-mix(in srgb, var(--bo-gold) 30%, transparent);
  border-radius: 50%;
  font-size: var(--text-lg);
}

.bo-slot__name {
  font-family: var(--bo-read);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.bo-slot__kind {
  color: var(--bo-dim);
  font-size: var(--text-2xs);
}

.bo-drawer--ask {
  inline-size: min(40rem, 100%);
}

.bo-drawer--ask .bo-panel {
  margin-block-start: var(--space-4);
  outline: none;
  box-shadow: none;
}

/* --- Reading position: a string of beads ---------------------------------- */
.bo-progress {
  position: sticky;
  inset-block-start: var(--bo-top);
  z-index: 20;
  border-block: 1px solid var(--bo-gold-line);
  background: color-mix(in srgb, var(--bo-lacquer) 90%, transparent);
  backdrop-filter: blur(10px);
}

.bo-progress__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'label steps fs'
    'jump jump hint';
  align-items: center;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-3) var(--space-2);
}

.bo-progress__label { grid-area: label; }
.bo-progress__steps { grid-area: steps; }
.bo-fs { grid-area: fs; justify-self: end; }
.bo-jump { grid-area: jump; }
.bo-progress__hint { grid-area: hint; }

.bo-fs {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-full);
  color: var(--bo-gold-pale);
  font-size: var(--text-sm);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.bo-fs:hover {
  border-color: var(--bo-gold);
  background: var(--bo-gold-faint);
}

.bo-fs__icon {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

.bo-fs__exit,
.bo-fs[aria-pressed='true'] .bo-fs__enter {
  display: none;
}

.bo-fs[aria-pressed='true'] .bo-fs__exit {
  display: inline;
}

.bo-jump {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.bo-jump a {
  flex: none;
  padding: 0.15em 0.7em;
  border-radius: var(--r-full);
  color: var(--bo-dim);
  font-size: var(--text-xs);
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.bo-jump a:hover {
  color: var(--bo-bone);
}

.bo-jump a[aria-current='true'] {
  background: var(--bo-gold-faint);
  color: var(--bo-gold-pale);
}

.bo-progress__label {
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--text-lg);
  font-weight: 600;
}

.bo-progress__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.bo-step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-full);
  color: var(--bo-ash);
  font-size: var(--text-sm);
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.bo-step:hover {
  color: var(--bo-bone);
  background: var(--bo-gold-faint);
}

.bo-step__bead {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  border: 1.5px solid var(--bo-gold);
  border-radius: 50%;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.bo-step.is-passed .bo-step__bead {
  background: color-mix(in srgb, var(--bo-gold) 45%, transparent);
}

.bo-page.is-unset .bo-progress__hint {
  color: var(--bo-gold-pale);
}

.bo-page.is-unset .bo-step__bead {
  animation: bo-beckon 2.4s ease-in-out infinite;
}

@keyframes bo-beckon {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bo-gold-pale) 0%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bo-gold-pale) 28%, transparent); }
}

.bo-step[aria-checked='true'] {
  color: var(--bo-bone);
  background: var(--bo-gold-faint);
}

.bo-step[aria-checked='true'] .bo-step__bead {
  background: var(--bo-gold-pale);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bo-gold) 25%, transparent), 0 0 12px color-mix(in srgb, var(--bo-gold-pale) 60%, transparent);
}

.bo-progress__hint {
  justify-self: end;
  max-inline-size: 46ch;
  text-align: end;
  color: var(--bo-dim);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

/* --- Sections -------------------------------------------------------------- */
.bo-section {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0;
  scroll-margin-block-start: calc(var(--bo-top) + 7.5rem);
}

.bo-section__head {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 2fr;
  gap: var(--space-4) var(--space-12);
  align-items: baseline;
  margin-block-end: var(--space-8);
}

.bo-section__head h2,
.bo-care h2,
.bo-built h2 {
  font-size: var(--text-3xl);
  line-height: 1.5;
}

.bo-section__head h2::before {
  content: '';
  display: block;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-block-end: var(--space-3);
  background: var(--bo-gold);
  transform: rotate(45deg);
}

.bo-section__head p {
  max-inline-size: 62ch;
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  line-height: var(--bo-read-leading);
}

.bo-muted {
  color: var(--bo-dim);
}

.bo-later {
  margin-block-start: var(--space-3);
  color: var(--bo-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.bo-later::before {
  content: '◇';
  margin-inline-end: var(--space-2);
  color: var(--bo-gold);
}

/* The lacquer panel: one rule on the panel, a fainter one outside it. */
.bo-panel {
  position: relative;
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(60rem 30rem at 50% -20%, color-mix(in srgb, var(--bo-gold) 7%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bo-lacquer-2), var(--bo-lacquer));
  outline: 1px solid color-mix(in srgb, var(--bo-gold) 16%, transparent);
  outline-offset: 6px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 70%);
}

.bo-note {
  margin-block-start: var(--space-3);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  line-height: var(--bo-read-leading);
}

.bo-tier {
  display: inline-block;
  margin-inline-end: var(--space-2);
  padding: 0 0.6em;
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-style: normal;
  font-weight: 600;
  line-height: 1.8;
  vertical-align: 0.2em;
}

.bo-tier--text { color: var(--bo-gold); }
.bo-tier--reading { color: var(--bo-indigo); }
.bo-tier--context { color: var(--bo-ash); }
.bo-tier--none { color: var(--bo-dim); }

.bo-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1em 0.8em;
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-full);
  color: var(--bo-gold-pale);
  font-size: var(--text-sm);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.bo-chip:hover {
  border-color: var(--bo-gold);
  background: var(--bo-gold-faint);
}

.bo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding: 0 var(--space-6);
  border: 1px solid var(--bo-gold);
  border-radius: var(--r-full);
  background: var(--bo-gold);
  color: var(--bo-on-gold);
  font-weight: 700;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.bo-button:hover {
  background: var(--bo-gold-pale);
}

.bo-button[disabled] {
  border-color: var(--bo-gold-line);
  background: transparent;
  color: var(--bo-dim);
  cursor: not-allowed;
}

.bo-button--ghost {
  min-block-size: 2.25rem;
  padding-inline: var(--space-4);
  background: transparent;
  color: var(--bo-gold-pale);
  font-size: var(--text-sm);
}

.bo-button--ghost:hover {
  background: var(--bo-gold-faint);
}

/* --- The shape of the book: the ring ---------------------------------------- */
.bo-shape {
  display: grid;
  grid-template-columns: minmax(16rem, 26rem) 1fr;
  gap: var(--space-12);
  align-items: center;
}

.bo-ring__svg {
  inline-size: 100%;
  block-size: auto;
  overflow: visible;
}

.bo-ring__track {
  fill: none;
  stroke: color-mix(in srgb, var(--bo-gold) 8%, transparent);
  stroke-width: 14;
}

.bo-ring__seg {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.bo-ring__seg--gold { stroke: var(--bo-gold); }
.bo-ring__seg--indigo { stroke: var(--bo-indigo-deep); }
.bo-ring__seg--blood { stroke: var(--bo-blood-deep); }

.bo-ring__seg.is-locked {
  stroke: var(--bo-dim);
  stroke-dasharray: 1 12;
  stroke-width: 6;
  opacity: 0.7;
}

.bo-ring__label {
  fill: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: 17px;
}

.bo-ring__halo { fill: color-mix(in srgb, var(--bo-gold-pale) 22%, transparent); }
.bo-ring__dot { fill: var(--bo-gold-pale); }
.bo-ring__owl { fill: color-mix(in srgb, var(--bo-gold) 22%, transparent); }

.bo-ring__center {
  fill: var(--bo-ash);
  font-family: var(--font-sans);
  font-size: 13px;
}

.bo-ring__center--strong {
  fill: var(--bo-bone);
  font-size: 15px;
  font-weight: 600;
}

.bo-ring__note {
  margin-block-start: var(--space-3);
  color: var(--bo-dim);
  font-size: var(--text-sm);
  text-align: center;
}

.bo-parts {
  display: grid;
  gap: var(--space-6);
}

.bo-part {
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--bo-gold-line);
}

.bo-part h3 {
  font-size: var(--text-xl);
}

/* --- Figures ------------------------------------------------------------- */
.bo-figures,
.bo-motifs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
}

.bo-map {
  padding: var(--space-4);
  overflow-x: auto;
  scrollbar-color: var(--bo-gold-line) transparent;
}

.bo-map__svg {
  display: block;
  inline-size: 100%;
  min-inline-size: 44rem;
  block-size: auto;
}

.bo-map__svg.is-narrow {
  min-inline-size: 0;
}

.bo-band__label {
  font-family: var(--font-sans);
  font-size: 15px;
}

.bo-link {
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-out), stroke-width var(--dur-base) var(--ease-out);
}

.has-selection .bo-link {
  opacity: 0.16;
}

.has-selection .bo-link.is-lit {
  opacity: 1;
  stroke-width: 2.4;
  stroke-dasharray: none;
}

.bo-node {
  cursor: pointer;
  outline: none;
}

.bo-node__glow {
  transition: fill-opacity var(--dur-base) var(--ease-out);
}

.bo-node:hover .bo-node__glow { fill-opacity: 0.1; }
.bo-node:focus-visible .bo-node__glow { fill-opacity: 0.22; stroke: var(--bo-gold-pale); stroke-width: 2; }
.bo-node.is-selected .bo-node__glow { fill-opacity: 0.26; }

.has-selection .bo-node:not(.is-selected) {
  opacity: 0.72;
}

.bo-node__name,
.bo-veil__count {
  font-family: var(--bo-names);
  font-size: 22px;
}

.bo-page:lang(en) .bo-node__name {
  font-size: 24px;
  font-style: italic;
}

.bo-veil__count {
  font-size: 17px;
}

.bo-veil__mark {
  font-family: var(--font-sans);
  font-size: 22px;
}

.bo-detail {
  position: sticky;
  inset-block-start: calc(var(--bo-top) + 8.5rem);
  align-self: start;
  padding: var(--space-6);
  border-inline-start: 1px solid var(--bo-gold-line);
}

.bo-detail__band {
  color: var(--bo-gold);
  font-size: var(--text-xs);
}

.bo-page .bo-detail__name {
  margin-block-start: var(--space-1);
  font-family: var(--bo-names);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.6;
}

.bo-page:lang(en) .bo-detail__name {
  font-style: italic;
  line-height: 1.15;
}

.bo-detail__sub {
  margin-block-start: var(--space-6);
  font-size: var(--text-base);
}

.bo-echoes {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.bo-echoes li {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  font-family: var(--bo-read);
  font-size: calc(var(--bo-read-size) * 0.92);
  line-height: 1.9;
}

.bo-page:lang(en) .bo-echoes li {
  line-height: 1.45;
}

/* --- Motifs: the echo table ------------------------------------------------ */
.bo-echo {
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.bo-echo__table {
  inline-size: 100%;
  border-collapse: collapse;
}

.bo-echo__table th,
.bo-echo__table td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid color-mix(in srgb, var(--bo-gold) 10%, transparent);
  text-align: start;
}

.bo-echo__table thead th {
  color: var(--bo-dim);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
}

.bo-echo__table td,
.bo-echo__table thead th:not(:first-child) {
  inline-size: 7rem;
  text-align: center;
}

.bo-echo__table tbody tr {
  transition: background-color var(--dur-base) var(--ease-out);
}

.bo-echo__table tbody tr:hover,
.bo-echo__table tbody tr.is-selected {
  background: var(--bo-gold-faint);
}

.bo-motif {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  font-weight: 400;
  text-align: start;
}

.bo-glyph {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  color: var(--bo-gold);
}

.bo-glyph--large {
  inline-size: 3rem;
  block-size: 3rem;
}

.bo-bead {
  display: inline-block;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--bo-gold-pale), var(--bo-gold) 55%, var(--bo-gold-dark));
  box-shadow: 0 0 10px color-mix(in srgb, var(--bo-gold) 40%, transparent);
}

/* --- The companion ----------------------------------------------------------- */
.bo-ask {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}

.bo-ask__suggest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bo-suggest {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-full);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: calc(var(--bo-read-size) * 0.9);
  line-height: 1.6;
  text-align: start;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.bo-suggest:hover {
  border-color: var(--bo-gold);
  background: var(--bo-gold-faint);
}

.bo-ask__log {
  display: grid;
  gap: var(--space-6);
}

.bo-ask__log:empty {
  display: none;
}

.bo-turn__q {
  color: var(--bo-ash);
  font-size: var(--text-base);
}

.bo-turn__who {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-1);
  color: var(--bo-dim);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
}

.bo-turn__q .bo-turn__who {
  display: block;
}

.bo-turn__a {
  margin-block-start: var(--space-3);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--bo-gold);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  line-height: var(--bo-read-leading);
}

.bo-turn__a.is-pending {
  border-color: var(--bo-gold-line);
}

.bo-turn__refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
  font-family: var(--font-sans);
}

.bo-turn__refs > span {
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-turn__care {
  margin-block: var(--space-2) var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--bo-indigo) 45%, transparent);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bo-indigo) 8%, transparent);
}

.bo-turn__care a {
  color: var(--bo-indigo);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-decoration: underline;
}

.bo-ask__form {
  display: grid;
  gap: var(--space-2);
}

.bo-ask__label {
  color: var(--bo-ash);
  font-size: var(--text-sm);
}

.bo-ask__form textarea {
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-lg);
  background: rgb(0 0 0 / 30%);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  line-height: 1.8;
  resize: vertical;
}

.bo-ask__form textarea::placeholder {
  color: var(--bo-dim);
}

.bo-ask__form textarea:focus-visible {
  border-color: var(--bo-gold);
  outline-offset: 2px;
}

.bo-ask__form textarea:disabled {
  opacity: 0.6;
}

.bo-ask__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.bo-ask__status {
  flex: 1 1 18rem;
  color: var(--bo-dim);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* --- The story in five minutes ------------------------------------------ */
.bo-brief__meta {
  margin-block: calc(var(--space-4) * -1) var(--space-6);
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-brief {
  display: grid;
  gap: var(--space-10);
  max-inline-size: 46rem;
  counter-reset: bo-chapter;
}

.bo-chapter {
  position: relative;
  padding-inline-start: var(--space-8);
  border-inline-start: 1px solid var(--bo-gold-line);
}

.bo-chapter::before {
  content: '';
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-start: -0.4rem;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  background: var(--bo-gold);
  transform: rotate(45deg);
}

.bo-chapter__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.bo-chapter__head h3 {
  font-size: var(--text-2xl);
  line-height: 1.5;
}

.bo-chapter__time {
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-chapter__body p {
  margin-block-start: var(--space-4);
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  line-height: var(--bo-read-leading);
}

.bo-chapter__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  color: var(--bo-blood);
  font-size: var(--text-xs);
}

.bo-chapter.is-revealed {
  border-inline-start-color: color-mix(in srgb, var(--bo-blood) 55%, transparent);
}

.bo-chapter.is-revealed::before {
  background: var(--bo-blood);
}

.bo-chapter.is-veiled {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding-block: var(--space-2);
  border-inline-start-style: dashed;
}

.bo-chapter.is-veiled::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--bo-dim);
}

.bo-chapter__veil {
  display: grid;
  gap: var(--space-2);
  inline-size: min(100%, 30rem);
  margin-block-end: var(--space-2);
}

.bo-chapter__veil span {
  block-size: 0.55rem;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--bo-gold) 14%, transparent), color-mix(in srgb, var(--bo-gold) 4%, transparent));
}

.bo-chapter__veil span:nth-child(2) { inline-size: 86%; }
.bo-chapter__veil span:nth-child(3) { inline-size: 62%; }

.bo-chapter__locked {
  color: var(--bo-ash);
  font-family: var(--bo-read);
  font-size: var(--text-lg);
}

/* --- Map key ------------------------------------------------------------- */
.bo-map-col {
  display: grid;
  align-content: start;
  min-inline-size: 0;
}

.bo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  padding: 0 var(--space-6) var(--space-5);
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.bo-legend svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* --- Companion extras ------------------------------------------------------ */
.bo-ask__help {
  color: var(--bo-dim);
  font-size: var(--text-xs);
}

.bo-suggest.is-asked {
  border-style: dashed;
  color: var(--bo-ash);
}

.bo-suggest.is-asked::after {
  content: ' ✓';
  color: var(--bo-gold);
}

.bo-turn.is-flash .bo-turn__a {
  animation: bo-flash 1.4s var(--ease-out);
}

@keyframes bo-flash {
  0% { background: color-mix(in srgb, var(--bo-gold) 22%, transparent); }
  100% { background: transparent; }
}

/* --- Context --------------------------------------------------------------- */
.bo-context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-8) var(--space-10);
}

.bo-context__item {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--bo-gold-line);
}

.bo-context__item h3 {
  font-size: var(--text-xl);
}

.bo-context__item p {
  margin-block-start: var(--space-2);
  font-family: var(--bo-read);
  font-size: calc(var(--bo-read-size) * 0.95);
  line-height: var(--bo-read-leading);
}

/* --- Take it with you ------------------------------------------------------ */
.bo-take {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-10);
  align-items: start;
}

.bo-downloads {
  display: grid;
  gap: var(--space-4);
}

.bo-download {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--bo-gold-line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--bo-lacquer-2), var(--bo-lacquer));
  text-align: start;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.bo-download:hover {
  border-color: var(--bo-gold);
}

.bo-download[disabled] {
  cursor: progress;
}

.bo-download__title {
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--text-xl);
  font-weight: 600;
}

.bo-download__note {
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-editions h3 {
  font-size: var(--text-xl);
}

.bo-editions ul {
  margin-block-start: var(--space-3);
}

.bo-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid color-mix(in srgb, var(--bo-gold) 12%, transparent);
}

.bo-edition__title {
  color: var(--bo-bone);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
}

.bo-edition__note {
  color: var(--bo-dim);
  font-size: var(--text-sm);
}

.bo-edition__soon {
  flex: none;
  font-size: var(--text-xs);
}

/* --- Care and colophon ------------------------------------------------------ */
.bo-care > *,
.bo-built > * {
  max-inline-size: 52rem;
}

.bo-care p,
.bo-built p {
  margin-block-start: var(--space-3);
  font-family: var(--bo-read);
  font-size: var(--bo-read-size);
  line-height: var(--bo-read-leading);
}

.bo-care p {
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--bo-indigo) 40%, transparent);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--bo-indigo) 7%, transparent);
  color: var(--bo-bone);
}

.bo-care strong {
  color: var(--bo-bone);
  white-space: nowrap;
}

.bo-built {
  padding-block-end: var(--section-gap);
}

.bo-built h2 {
  font-size: var(--text-xl);
}

.bo-built p {
  color: var(--bo-dim);
  font-size: calc(var(--bo-read-size) * 0.92);
}

.bo-broken,
.bo-noscript {
  margin-block-start: var(--space-6);
  color: var(--bo-blood);
}

/* --- Narrow screens -------------------------------------------------------- */
@media (max-width: 60rem) {
  .bo-progress__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'label fs'
      'steps steps'
      'jump jump'
      'hint hint';
  }

  .bo-progress__hint {
    justify-self: start;
    max-inline-size: none;
    text-align: start;
  }

  .bo-section__head,
  .bo-shape,
  .bo-take {
    grid-template-columns: 1fr;
  }

  .bo-shape {
    gap: var(--space-6);
  }

  .bo-ring {
    max-inline-size: 24rem;
    margin-inline: auto;
  }

  .bo-figures,
  .bo-motifs {
    grid-template-columns: 1fr;
  }

  .bo-detail {
    position: static;
    border-inline-start: 0;
    border-block-start: 1px solid var(--bo-gold-line);
  }
}

@media (max-width: 40rem) {
  .bo-owl {
    inline-size: 12rem;
    opacity: 0.8;
  }

  .bo-progress__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'label fs'
      'steps steps'
      'jump jump'
      'hint hint';
    gap: var(--space-2) var(--space-3);
  }

  /* On a phone the bar has to stay small: the hint is still announced to
     screen readers, it just takes no room on screen. */
  .bo-progress__hint {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bo-page.is-unset .bo-progress__hint {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    white-space: normal;
  }

  .bo-progress__label {
    font-size: var(--text-base);
  }

  .bo-step {
    padding-block: 0.15rem;
    font-size: var(--text-xs);
  }

  .bo-fs__text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bo-fs {
    padding: var(--space-2);
  }

  .bo-chapter {
    padding-inline-start: var(--space-5);
  }

  .bo-legend {
    padding-inline: var(--space-3);
  }

  .bo-lamp {
    display: none;
  }

  .bo-progress__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    inline-size: 100%;
  }

  .bo-step {
    padding-inline: var(--space-2);
  }

  .bo-map {
    padding: var(--space-2);
  }

  .bo-echo {
    padding-inline: var(--space-2);
  }

  .bo-echo__table td,
  .bo-echo__table thead th:not(:first-child) {
    inline-size: 4.5rem;
  }

  .bo-ask,
  .bo-detail {
    padding: var(--space-4);
  }
}

@media (max-width: 48rem) {
  .bo-hud__bar {
    border-radius: var(--r-xl);
  }

  .bo-chapter-pill__label,
  .bo-hud__found-label {
    display: none;
  }

  .bo-chapter-pill,
  :root[dir='rtl'] .bo-chapter-pill {
    padding: 0.2rem;
  }

  .bo-hud__meter {
    inline-size: 3.5rem;
  }

  .bo-icon-button {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .bo-hud__hint {
    font-size: var(--text-xs);
  }

  .bo-game__start {
    align-items: flex-end;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bo-ink) 10%, transparent) 0%, color-mix(in srgb, var(--bo-ink) 85%, transparent) 45%, color-mix(in srgb, var(--bo-ink) 96%, transparent));
  }

  :root[dir='rtl'] .bo-game__start {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bo-ink) 10%, transparent) 0%, color-mix(in srgb, var(--bo-ink) 85%, transparent) 45%, color-mix(in srgb, var(--bo-ink) 96%, transparent));
  }

  .bo-card__frame {
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-toast,
  .bo-card__frame,
  .bo-drawer__frame,
  .bo-page.is-unset .bo-chapter-pill__n,
  .bo-owl,
  .bo-lamp__flame,
  .bo-page.is-unset .bo-step__bead,
  .bo-turn.is-flash .bo-turn__a {
    animation: none;
  }
}