/*
 * Static styles for the scene fragment (app/ui/scene-page.tsx).
 *
 * These rules used to be emitted as inline <style data-rmx="..."> tags by the
 * css()-in-JS runtime on every /play/:id/choose response. Since none of them
 * depend on runtime data, they're hand-authored here and loaded once via
 * <link rel="stylesheet"> in app/ui/document.tsx's <head> instead.
 *
 * Values are copied verbatim from app/ui/theme.ts and app/ui/scene-page.tsx.
 * If those constants change, keep this file in sync by hand.
 */

/* ---------- shared theme primitives (app/ui/theme.ts) ---------- */

.scene-panel {
  background: #181614;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 10px 12px;
}

.scene-stage {
  background: #1e1b17;
  border: 1px solid rgba(255, 240, 210, 0.16);
  border-radius: 2px;
}

.scene-drawer-toggle {
  cursor: pointer;
  font: inherit;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  color: #d7cfbf;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}
.scene-drawer-toggle:hover {
  color: #f5efe3;
  background: #302c26;
}
@media (max-width: 1024px) {
  .scene-drawer-toggle {
    display: inline-flex;
    padding: 6px 7px;
    min-width: 32px;
    font-size: 0.85rem;
  }
}

/* ---------- small reusable utilities ---------- */

.scene-grid-gap { display: grid; gap: 6px; }
.scene-grid-gap-section { display: grid; gap: 8px; }
.scene-flex-wrap-gap { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-flex-wrap-gap-section { display: flex; flex-wrap: wrap; gap: 8px; }
.scene-hide-mobile { }
@media (max-width: 1024px) {
  .scene-hide-mobile { display: none; }
}
.scene-relative { position: relative; }

.scene-c-d7cfbf { color: #d7cfbf; }
.scene-c-a9a293 { color: #a9a293; }
.scene-c-7d7768 { color: #7d7768; }
.scene-c-4f4a40 { color: #4f4a40; }
.scene-c-8fa6c8 { color: #8fa6c8; }

.scene-kicker {
  color: #f5d48a;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: 700;
  margin: 0 0 8px;
}

.scene-empty-muted { margin: 0; font-size: 0.82rem; color: #7d7768; }
.scene-empty-danger { margin: 0; font-size: 0.82rem; color: #e0617a; }

.scene-clock { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- module-level consts (app/ui/scene-page.tsx) ---------- */

.scene-worn-thumb {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
}

.scene-aside-base {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 1024px) {
  .scene-aside-left {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    width: min(320px, 88vw);
    max-width: 100vw;
    overflow-y: auto;
    padding: 6px;
    padding-top: 48px;
    background: #181614;
    border-right: 1px solid rgba(255, 240, 210, 0.11);
    transition: transform 240ms ease;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    transform: translateX(-100%);
  }
  .scene-aside-right {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 200;
    width: min(320px, 88vw);
    max-width: 100vw;
    overflow-y: auto;
    padding: 6px;
    padding-top: 48px;
    background: #181614;
    border-left: 1px solid rgba(255, 240, 210, 0.11);
    transition: transform 240ms ease;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    transform: translateX(100%);
  }
}

.scene-mobile-close {
  display: none;
}
@media (max-width: 1024px) {
  .scene-mobile-close {
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font: inherit;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #d7cfbf;
    background: #262218;
    border: 1px solid rgba(255, 240, 210, 0.11);
    border-radius: 2px;
    font-size: 0.95rem;
  }
  .scene-mobile-close:hover {
    color: #f5efe3;
    background: #302c26;
  }
}

.scene-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 0.8rem;
}
.scene-chip-value {
  margin-left: auto;
  font-weight: 800;
  color: #f5efe3;
  font-variant-numeric: tabular-nums;
}

.scene-skill-card {
  display: grid;
  gap: 6px;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 6px 10px 7px;
  font-size: 0.8rem;
}
.scene-skill-card-head { display: flex; align-items: center; gap: 7px; }
.scene-skill-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  align-items: end;
}
.scene-skill-bar {
  height: 5px;
  border-radius: 1px;
  transition: opacity 120ms ease;
}

.scene-stat-change-line {
  margin: 0 0 10px;
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.scene-dev-source-link {
  color: inherit;
  text-decoration: none;
  display: block;
  border-radius: 4px;
  cursor: pointer;
}
.scene-dev-source-link:hover {
  outline: 1px dashed rgba(246, 201, 111, 0.45);
  outline-offset: 3px;
}

.scene-stat-meter { display: grid; gap: 4px; }
.scene-stat-meter-row { display: flex; justify-content: space-between; font-size: 0.78rem; }
.scene-icon-dim { opacity: 0.9; }
/* Image-path icons (app/ui/icon.tsx): small pixel art (24x24 / 32x32) sized to
   the surrounding text like an emoji. width+height pin the box (a slow load or
   broken path can't reflow the line), min-width + flex-shrink stop flex rows
   from squishing it, and pixelated keeps the art crisp at any scale. */
.icon-img {
  width: 1.5em;
  height: 1.5em;
  min-width: 1em;
  flex-shrink: 0;
  display: inline-block;
  object-fit: contain;
  vertical-align: -0.3em;
  image-rendering: pixelated;
}
.scene-num-strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.scene-meter-track { height: 8px; border-radius: 2px; background: #302c24; overflow: hidden; }
.scene-meter-fill { height: 100%; border-radius: 2px; }

/* ---------- SceneFragment layout (app/ui/scene-page.tsx) ---------- */

.scene-main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #07080c;
  color: #f5efe3;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .scene-main {
    height: 100dvh;
    min-height: 100dvh;
  }
  .scene-main[data-scene-drawer="left"] [data-scene-panel="left"] { transform: translateX(0); }
  .scene-main[data-scene-drawer="right"] [data-scene-panel="right"] { transform: translateX(0); }
}

.scene-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 240, 210, 0.11);
  background: #0c0b0a;
  flex-shrink: 0;
  z-index: 160;
}
@media (max-width: 1024px) {
  .scene-header { gap: 6px; padding: 6px 8px; }
}

.scene-header-portrait {
  display: none;
  flex-shrink: 0;
  width: 44px;
}
@media (max-width: 1024px) {
  .scene-header-portrait { display: block; width: 38px; }
}

.scene-header-title-wrap { min-width: 0; flex: 1; }

.scene-header-eyebrow {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d7768;
}
@media (max-width: 1024px) {
  .scene-header-eyebrow { font-size: 0.58rem; }
}

.scene-header-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f5efe3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .scene-header-title { font-size: 0.88rem; }
}

.scene-header-datetime {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 5px 10px;
  font-size: 0.82rem;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .scene-header-datetime { display: none; }
}

.scene-header-year { color: #7d7768; font-size: 0.72rem; }

.scene-header-datetime-mobile {
  display: none;
  align-items: center;
  gap: 3px;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 4px 7px;
  font-size: 0.72rem;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .scene-header-datetime-mobile { display: flex; }
}

.scene-undo-form {
  margin: 0;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .scene-undo-form { display: none; }
}
.scene-undo-btn {
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  color: #ffcaa0;
  background: rgba(224, 97, 122, 0.12);
  border: 1px solid rgba(224, 97, 122, 0.35);
  border-radius: 2px;
  padding: 8px 12px;
}
.scene-undo-btn:hover {
  color: #fff;
  background: rgba(224, 97, 122, 0.22);
}

.scene-menu-link {
  font-size: 0.8rem;
  color: #a9a293;
  text-decoration: none;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 6px 10px;
  flex-shrink: 0;
}
.scene-menu-link:hover { color: #f5efe3; background: #302c26; }
@media (max-width: 1024px) {
  .scene-menu-link { display: none; }
}

.scene-menu-link-mobile {
  cursor: pointer;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  color: #d7cfbf;
  border-radius: 2px;
  font: inherit;
  display: none;
  justify-content: center;
  text-decoration: none;
  padding: 9px 12px;
  font-size: 0.82rem;
}
.scene-menu-link-mobile:hover { background: #302c26; color: #f5efe3; }
@media (max-width: 1024px) {
  .scene-menu-link-mobile { display: flex; }
}

.scene-body-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 6px;
  padding: 6px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .scene-body-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0;
    gap: 0;
    overflow: hidden;
  }
}

.scene-portrait-panel-hide-mobile { }
@media (max-width: 1024px) {
  .scene-portrait-panel-hide-mobile { display: none; }
}

.scene-portrait-col { display: grid; gap: 8px; justify-items: center; }
.scene-portrait-frame { width: 117px; }
.scene-portrait-caption { width: 100%; text-align: center; }
.scene-name { margin: 0; font-weight: 700; font-size: 1rem; }
.scene-descriptor { margin: 0; font-size: 0.74rem; color: #a9a293; }
.scene-descriptor-indent { margin: 4px 0 0; font-size: 0.74rem; color: #a9a293; }

.scene-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  border-radius: 2px;
  padding: 5px 11px;
}
.scene-status-label { font-weight: 700; }
.scene-minutes { color: #7d7768; font-variant-numeric: tabular-nums; }

.scene-stage-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .scene-stage-column {
    min-height: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

.scene-stage-column-article {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .scene-stage-column-article {
    min-height: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The passage wrap owns the flex slot and anchors the pinned Wait; the
   scroller fills it. */
.scene-passage-wrap {
  position: relative;
  flex: 2 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.scene-passage {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 14px;
  /* Keep long prose from running under the pinned Wait. */
  padding-bottom: 52px;
  -webkit-overflow-scrolling: touch;
}

/* Wait pins to the content block's ACTUAL lower right (Pixel, 2026-07-24,
   second pass): a sibling of the scroller, always visible regardless of
   text length or scroll. */
.scene-wait-float {
  position: absolute;
  right: 14px;
  bottom: 10px;
  margin: 0;
}
@media (max-width: 1024px) {
  .scene-passage {
    flex: unset;
    min-height: 0;
    padding: 10px 10px 8px;
  }
}

.scene-title {
  font-size: clamp(1.7rem, 3.2vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
@media (max-width: 1024px) {
  .scene-title { font-size: 1.35rem; margin: 0 0 8px; }
}

.scene-flair-list { display: grid; gap: 6px; margin-top: 14px; }

.scene-traces-list { display: grid; gap: 8px; margin-top: 14px; max-width: 62ch; }
.scene-trace-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 240, 210, 0.11);
  background: #221e18;
}
.scene-trace-icon { font-size: 1.1rem; line-height: 1.4; }
.scene-trace-text { font-size: 0.92rem; color: #dcd2ea; line-height: 1.6; font-style: italic; }

.scene-npc-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.scene-npc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: #e8e1d3;
  background: rgba(246, 201, 111, 0.1);
  border: 1px solid rgba(246, 201, 111, 0.28);
  border-radius: 2px;
  padding: 5px 10px;
}
.scene-npc-name { font-weight: 700; }

.scene-choices-footer {
  flex: 1 0 0;
  min-height: 180px;
  max-height: 34%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgba(255, 240, 210, 0.16);
  background: #141210;
}
@media (max-width: 1024px) {
  .scene-choices-footer {
    flex: unset;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
}

.scene-choices-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
  .scene-choices-inner { padding: 8px 10px 10px; }
}

.scene-worn-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; }
.scene-worn-slot-label {
  color: #7d7768;
  min-width: 92px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.scene-worn-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.scene-worn-exposure { margin: 4px 0 0; font-size: 0.76rem; color: #e0617a; }

.scene-inventory-chip {
  font-size: 0.78rem;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  padding: 4px 9px;
}

.scene-entry-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.scene-journal-entry {
  font-size: 0.8rem;
  color: #c9c1b1;
  line-height: 1.5;
  padding-left: 12px;
  border-left: 2px solid rgba(246, 201, 111, 0.4);
}
.scene-notebook-entry {
  font-size: 0.8rem;
  color: #c9c1b1;
  line-height: 1.5;
  padding-left: 12px;
  border-left: 2px solid rgba(180, 200, 220, 0.45);
}

/* ---------- SceneChoices (app/ui/scene.client.tsx) ---------- */

@keyframes rin-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.choice-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: 700;
  margin: 0;
}

.choice-spinner {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  display: inline-block;
  animation: rin-spin 0.6s linear infinite;
}

/* Badges keep to one row while they fit; on narrow screens the wrapped
   button lets the whole badge group drop to its own right-aligned line
   instead of squeezing the label into a one-word column. */
.choice-btn-primary { flex-wrap: wrap; }
.choice-btn-primary .choice-badges { margin-left: auto; }
.choice-badges { flex-shrink: 0; display: inline-flex; flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; align-items: center; gap: 4px; }
.choice-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
}

.choice-exit-door { flex-shrink: 0; font-size: 1.05rem; }
.choice-exit-arrow { flex-shrink: 0; display: inline-block; color: #d7a858; font-size: 1.1rem; }

.choice-hotkey {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: -4px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  line-height: 1;
}

.choice-form { margin: 0; min-width: 0; }

.choice-btn {
  cursor: pointer;
  font: inherit;
  width: 100%;
  min-height: 46px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  padding: 8px 12px;
  font-size: 0.92rem;
  line-height: 1.25;
  transition: opacity 0.15s ease, transform 0.05s ease, background 0.15s ease;
}
.choice-btn:active { transform: translateY(1px); }
.choice-btn-exit {
  background: #1a1814;
  color: #e8e1d3;
  font-weight: 600;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-left: 3px solid #c2862b;
}
.choice-btn-exit:hover { background: #242018; }
.choice-btn-primary {
  background: #f6c96f;
  color: #191207;
  font-weight: 800;
  border: none;
}
.choice-btn-primary:hover { background: #ffd884; }

.choice-icon-glyph { font-size: 0.95rem; flex-shrink: 0; }
.choice-label { flex: 1; }

.choice-section { display: grid; gap: 6px; min-width: 0; }
.choice-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.choice-exits-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-exit-item { flex: 0 1 auto; min-width: 12.5rem; max-width: 100%; }

.choice-wait-form { margin: 0; }
.choice-wait-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c8c2b4;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  transition: opacity 0.15s ease, background 0.15s ease;
}
.choice-wait-btn:hover { background: rgba(255, 255, 255, 0.1); color: #e8e1d3; }
.choice-wait-icon { font-size: 0.95rem; opacity: 0.85; }

.choice-root { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.choice-empty { color: #a9a293; }
.choice-actions-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.choice-noexits { display: flex; justify-content: flex-end; }

/* ---------- Map (app/ui/scene-map.client.tsx, canvas renderer) ---------- */

.map-shell {
  position: relative;
  height: 260px;
  background: #262218;
  border: 1px solid rgba(255, 240, 210, 0.11);
  border-radius: 2px;
  overflow: hidden;
  user-select: none;
}
.map-shell canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.map-shell-large { height: min(68vh, 760px); }

.map-recenter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: #a9a293;
  background: rgba(24, 22, 20, 0.8);
  border: 1px solid rgba(255, 240, 210, 0.14);
  border-radius: 2px;
  cursor: pointer;
}
.map-recenter:hover { color: #f5efe3; background: rgba(42, 38, 32, 0.9); }

.map-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.map-title {
  color: #f5d48a;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  font-weight: 700;
}

.map-badge-inside {
  font-size: 0.6rem;
  color: #f5d48a;
  background: rgba(246, 201, 111, 0.15);
  border-radius: 2px;
  padding: 2px 8px;
}
.map-badge-hidden {
  font-size: 0.6rem;
  color: #e8c07a;
  background: rgba(246, 201, 111, 0.12);
  border-radius: 2px;
  padding: 2px 8px;
}

.map-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.map-tab { font-size: 0.62rem; padding: 3px 9px; border-radius: 2px; }

.map-empty { margin: 0; font-size: 0.72rem; color: #7d7768; }

.map-legend { margin: 12px 0 0; font-size: 0.66rem; color: #7d7768; display: flex; gap: 12px; flex-wrap: wrap; }
.map-legend-here { color: #f5d48a; }

/* ---------- Portrait (app/ui/portrait.client.tsx) ---------- */

.portrait-spinner {
  flex-shrink: 0;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.22);
  border-top-color: #f6c96f;
  display: inline-block;
  animation: rin-spin 0.65s linear infinite;
}

.portrait-root { display: grid; gap: 10px; }

.portrait-frame {
  position: relative;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
}
.portrait-frame [data-portrait-initial] {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  border-radius: 2px;
  color: #a9a293;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.portrait-frame [data-portrait-updating] {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: rgba(12, 11, 10, 0.82);
  border: 1px solid rgba(255, 240, 210, 0.14);
  color: #f6c96f;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.portrait-frame[data-portrait-busy="initial"] [data-portrait-initial] {
  display: flex;
  opacity: 1;
}
.portrait-frame[data-portrait-busy="updating"] [data-portrait-updating] {
  display: flex;
  opacity: 1;
  transform: scale(1);
}

.portrait-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 68 / 148;
  image-rendering: pixelated;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.portrait-canvas[data-ready] { opacity: 1; }

.portrait-toggle-group { display: grid; gap: 6px; }
.portrait-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #a9a293;
  cursor: pointer;
  user-select: none;
}
.portrait-toggle-checkbox { accent-color: #f6c96f; cursor: pointer; }

/* ---------- UsableItemChip (app/ui/use-item.client.tsx) ---------- */

.use-item-form { margin: 0; display: inline-flex; }
.use-item-btn {
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  line-height: inherit;
  color: inherit;
  padding: 4px 9px;
  background: #262218;
  border-radius: 2px;
  border: 1px solid rgba(246, 201, 111, 0.55);
  opacity: 1;
  transition: background 0.15s ease;
}
.use-item-btn[aria-busy="true"] { cursor: progress; opacity: 0.5; }
.use-item-btn:not([aria-busy="true"]):hover { background: rgba(246, 201, 111, 0.14); }

/* ---------- SceneMobileLayout (app/ui/scene-layout.client.tsx) ---------- */

.scene-backdrop { display: none; }
@media (max-width: 1024px) {
  .scene-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(0, 0, 0, 0.58);
    transition: opacity 200ms ease;
  }
}

/* ---------- Shop (app/ui/shop.client.tsx) ---------- */

.shop-thumb-preview {
  height: 100px;
  width: 100%;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
.shop-thumb-image { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* Checkout-list sprite: small inline garment render beside the line name. */
.shop-cart-thumb { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }

/* Palette swatches on colorable garment tiles (clothing-colors.ts). */
.shop-color-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding-top: 2px;
}
.shop-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  cursor: pointer;
}
.shop-color-swatch:hover { border-color: #f5efe3; }
.shop-color-swatch-active { border: 2px solid #f6c96f; }

.shop-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.shop-tab {
  cursor: pointer;
  font: inherit;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8c8676;
  border-radius: 0;
  padding: 10px 12px 9px;
  margin-bottom: 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
.shop-tab:hover { color: #f5efe3; background: rgba(255, 255, 255, 0.04); }
.shop-tab-active { border-bottom: 2px solid #c2862b; background: #181614; color: #f5efe3; font-weight: 700; }
.shop-tab-active:hover { background: #181614; }
.shop-tab-count { opacity: 0.75; font-weight: 600; }

.shop-root {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #07080c;
}

.shop-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.shop-header-info { min-width: 0; }
.shop-kicker { margin: 0; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #f5d48a; font-weight: 700; }
.shop-title { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; }
.shop-blurb { margin: 6px 0 0; font-size: 0.86rem; color: #a9a293; line-height: 1.5; }
.shop-stat-changes { margin: 8px 0 0; font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.shop-stat-sep { color: #7d7768; }

.shop-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.shop-balance {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e8e1d3;
  background: rgba(246, 201, 111, 0.12);
  border-radius: 2px;
  padding: 8px 14px;
  font-variant-numeric: tabular-nums;
}
.shop-leave-btn {
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #e8e1d3;
  background: #262218;
  border: none;
  border-radius: 2px;
  padding: 10px 18px;
}
.shop-leave-btn:hover { background: #302c26; }

.shop-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}
@media (max-width: 820px) {
  .shop-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
}

.shop-listing-col {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 820px) {
  .shop-listing-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
}

.shop-listing-scroll { min-height: 0; overflow-y: auto; padding: 16px; }
.shop-listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }

.shop-item { font: inherit; display: grid; gap: 8px; padding: 10px; border-radius: 2px; border: none; text-align: center; }
.shop-item-owned { cursor: default; background: rgba(255, 255, 255, 0.02); color: #7d7768; opacity: 0.72; }
.shop-item-in-cart { cursor: pointer; outline: 2px solid rgba(246, 201, 111, 0.85); background: rgba(246, 201, 111, 0.1); color: #f5efe3; opacity: 1; }
.shop-item-in-cart:hover { background: rgba(246, 201, 111, 0.08); }
.shop-item-default { cursor: pointer; background: rgba(255, 255, 255, 0.04); color: #f5efe3; opacity: 1; }
.shop-item-default:hover { background: rgba(246, 201, 111, 0.08); }
.shop-item-icon { font-size: 2.6rem; line-height: 1; }
.shop-item-name { font-size: 0.72rem; line-height: 1.3; font-weight: 600; }
.shop-item-price { font-size: 0.7rem; }

.shop-cart { min-height: 0; display: flex; flex-direction: column; background: #262218; padding: 12px; }
.shop-cart-kicker { margin: 0 0 12px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7d7768; font-weight: 700; }
.shop-cart-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 8px; align-content: start; }
.shop-cart-empty { margin: 0; font-size: 0.84rem; color: #5f5a4f; }
.shop-cart-line { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; padding: 8px 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.04); }
.shop-cart-line-name { flex: 1; min-width: 0; }
.shop-cart-line-price { color: #d7a858; font-variant-numeric: tabular-nums; }
.shop-cart-remove {
  cursor: pointer;
  font: inherit;
  border: none;
  background: transparent;
  color: #8c8676;
  padding: 2px 6px;
  border-radius: 2px;
}
.shop-cart-remove:hover { color: #f5efe3; background: rgba(255, 255, 255, 0.06); }

.shop-cart-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.shop-cart-total-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.9rem; }
.shop-cart-total-label { color: #a9a293; }
.shop-cart-total-value { font-weight: 700; font-variant-numeric: tabular-nums; }

.shop-checkout-btn { font: inherit; width: 100%; font-size: 0.9rem; font-weight: 700; border: none; border-radius: 2px; padding: 12px 16px; }
.shop-checkout-btn-enabled { cursor: pointer; color: #191207; background: #f6c96f; opacity: 1; }
.shop-checkout-btn-enabled:hover { filter: brightness(1.05); }
.shop-checkout-btn-disabled { cursor: not-allowed; color: #7d7768; background: rgba(255, 255, 255, 0.06); opacity: 0.7; }

/* ---------- Wardrobe (app/ui/wardrobe.client.tsx) ---------- */

.wardrobe-mend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-self: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  color: #f6c96f;
  background: rgba(246, 201, 111, 0.12);
  border: 1px solid rgba(246, 201, 111, 0.5);
  cursor: pointer;
}
.wardrobe-mend-chip:hover { background: rgba(246, 201, 111, 0.24); }

.wardrobe-thumb-preview {
  height: 120px;
  width: 100%;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .wardrobe-thumb-preview { height: 84px; padding: 4px; }
}
.wardrobe-thumb-image { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

.wardrobe-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
@media (max-width: 1024px) {
  .wardrobe-item-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
}

.wardrobe-tab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 1024px) {
  .wardrobe-tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px;
    scrollbar-width: none;
  }
  .wardrobe-tab-bar::-webkit-scrollbar { display: none; }
}

.wardrobe-tab {
  cursor: pointer;
  font: inherit;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8c8676;
  border-radius: 0;
  padding: 10px 12px 9px;
  margin-bottom: 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
}
.wardrobe-tab:hover { color: #f5efe3; background: rgba(255, 255, 255, 0.04); }
.wardrobe-tab-active { border-bottom: 2px solid #f6c96f; background: rgba(14, 17, 24, 0.88); color: #f5efe3; font-weight: 700; }
.wardrobe-tab-active:hover { background: rgba(14, 17, 24, 0.88); }
@media (max-width: 1024px) {
  .wardrobe-tab { font-size: 0.7rem; padding: 8px 9px 7px; }
}
.wardrobe-tab-count { opacity: 0.75; font-weight: 600; }

.wardrobe-root {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #07080c;
  overflow: hidden;
}

.wardrobe-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .wardrobe-header { padding: 8px 10px; gap: 8px; align-items: center; }
}

.wardrobe-header-info { min-width: 0; flex: 1; }
.wardrobe-kicker { margin: 0; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #f5d48a; font-weight: 700; }
.wardrobe-hint { margin: 4px 0 0; font-size: 0.88rem; color: #a9a293; }
@media (max-width: 1024px) {
  .wardrobe-hint { display: none; }
}

.wardrobe-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .wardrobe-header-actions { gap: 6px; }
}

.wardrobe-debug-btn {
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 2px;
  padding: 10px 12px;
}
@media (max-width: 1024px) {
  .wardrobe-debug-btn { font-size: 0.68rem; padding: 7px 8px; }
}
.wardrobe-debug-btn-on { color: #ffcaa0; background: rgba(224, 97, 122, 0.12); border: 1px solid rgba(224, 97, 122, 0.35); }
.wardrobe-debug-btn-on:hover { color: #f5efe3; background: rgba(224, 97, 122, 0.22); }
.wardrobe-debug-btn-off { color: #a9a293; background: #262218; border: none; }
.wardrobe-debug-btn-off:hover { color: #f5efe3; background: #302c26; }

.wardrobe-strip-btn {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 2px;
  padding: 10px 14px;
  cursor: pointer;
}
.wardrobe-strip-btn:disabled { cursor: not-allowed; }
@media (max-width: 1024px) {
  .wardrobe-strip-btn { font-size: 0.72rem; padding: 7px 9px; }
}
.wardrobe-strip-btn-active { color: #e8b4bc; background: rgba(224, 97, 122, 0.1); border: 1px solid rgba(224, 97, 122, 0.25); opacity: 1; }
.wardrobe-strip-btn-active:hover { background: rgba(224, 97, 122, 0.18); color: #f5d0d6; }
.wardrobe-strip-btn-inactive { color: #6a6458; background: #262218; border: none; opacity: 0.65; }

.wardrobe-close-btn {
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  color: #e8e1d3;
  background: #262218;
  border: none;
  border-radius: 2px;
  padding: 10px 18px;
}
.wardrobe-close-btn:hover { background: #302c26; }
@media (max-width: 1024px) {
  .wardrobe-close-btn { font-size: 0.78rem; padding: 7px 12px; }
}

.wardrobe-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .wardrobe-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
}

.wardrobe-portrait-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: #262218;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .wardrobe-portrait-col { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 8px 10px; gap: 4px; }
}

.wardrobe-portrait-frame { width: min(100%, 240px); }
@media (max-width: 1024px) {
  .wardrobe-portrait-frame { width: 132px; }
}

.wardrobe-picker {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #181614;
  overflow: hidden;
}

.wardrobe-picker-scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
  .wardrobe-picker-scroll { padding: 8px 10px 10px; }
}

.wardrobe-section-hint { margin: 0 0 14px; font-size: 0.82rem; color: #7d7768; }
.wardrobe-empty-note { margin: 0; font-size: 0.84rem; color: #5f5a4f; }
.wardrobe-empty-note-spaced { margin: 16px 0 0; font-size: 0.84rem; color: #5f5a4f; }

.wardrobe-garment-tile {
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 2px;
  border: none;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  color: #f5efe3;
  opacity: 1;
}
.wardrobe-garment-tile:hover { background: rgba(246, 201, 111, 0.08); }
.wardrobe-garment-tile-worn { outline: 2px solid rgba(246, 201, 111, 0.85); background: rgba(246, 201, 111, 0.1); }
.wardrobe-garment-tile-unowned { color: #b8b0a0; opacity: 0.82; }

.wardrobe-empty-tile {
  cursor: pointer;
  font: inherit;
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 2px;
  border: none;
  color: #a9a293;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.wardrobe-empty-tile:hover { background: rgba(246, 201, 111, 0.06); color: #f5efe3; }
.wardrobe-empty-tile-selected { outline: 2px solid rgba(246, 201, 111, 0.7); background: rgba(246, 201, 111, 0.08); }

.wardrobe-tile-name { font-size: 0.72rem; line-height: 1.3; }
.wardrobe-tile-subtext { display: block; margin-top: 2px; font-size: 0.62rem; color: #7d7768; }
.wardrobe-tile-icon-lg { font-size: 1.6rem; line-height: 1; }

/* ---------- Book reader (app/ui/book-reader.client.tsx) ---------- */

.book-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #07080c;
  padding: 14px 16px 18px;
  gap: 10px;
  overflow-y: auto;
}

.book-header {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.book-title {
  margin: 2px 0 0;
  font-size: 1.1rem;
  color: #f5efe3;
}

.book-header-buttons { display: flex; gap: 8px; align-items: center; }

.book-help-btn,
.book-close-btn,
.book-nav-btn {
  cursor: pointer;
  font: inherit;
  color: #cfc7b4;
  background: rgba(246, 201, 111, 0.08);
  border: 1px solid rgba(246, 201, 111, 0.25);
  border-radius: 2px;
  padding: 6px 10px;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.book-help-btn { min-width: 32px; text-align: center; user-select: none; }
.book-help-btn:hover,
.book-close-btn:hover,
.book-nav-btn:hover:not(:disabled) { background: rgba(246, 201, 111, 0.2); }
.book-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* ----- The help pop-up (the ? in the header): a native modal ----- */

.book-help-dialog {
  width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  color: #f5efe3;
}
.book-help-dialog::backdrop { background: rgba(4, 5, 8, 0.72); }

.book-help-card {
  background: #100f0b;
  border: 1px solid rgba(246, 201, 111, 0.25);
  border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.book-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.book-help-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f5d48a;
}

.book-help-body {
  margin: 0;
  color: #cfc7b4;
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-line;
}

/* ----- The shelf: pick a carried book ----- */

.book-shelf {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.book-shelf-item {
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  color: #ded6c4;
  background: #100f0b;
  border: 1px solid rgba(246, 201, 111, 0.18);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 0.95rem;
  transition: background 0.15s ease;
}

.book-shelf-item:hover { background: rgba(246, 201, 111, 0.08); }
.book-shelf-icon { font-size: 1.3rem; }

/* ----- The open page: a book-shaped card, big readable text -----
   The frame is a size container and everything inside the card is sized in
   cqw (1% of card width), so an authored page lays out IDENTICALLY on every
   device — same relative text size, same line breaks, same fit. Pages are
   authored as fixed blocks, so the whole reading system depends on this.
   The px declarations before each cqw one are fallbacks for browsers
   without container-query units. */

.book-page-frame {
  container-type: inline-size;
  width: min(480px, 100%);
  margin: 0 auto;
}

.book-page {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 5 / 7;
  background: #14110d;
  border-radius: 4px;
  /* The gold hairline lives in the shadow stack (not border) so it never
     eats into the cqw-proportioned text column. */
  box-shadow: inset 0 0 0 1px rgba(246, 201, 111, 0.22),
    inset 0 0 40px rgba(0, 0, 0, 0.45), 0 6px 24px rgba(0, 0, 0, 0.4);
  padding: clamp(18px, 4vw, 34px);
  padding: 7cqw;
  display: flex;
  flex-direction: column;
  gap: 18px;
  gap: 3.75cqw;
  overflow-y: auto;
  /* Books read in a printed serif, unlike the UI around them. */
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}

/* Every paragraph is a pressable target. The pointer shows on ALL of them
   (Pixel, 2026-07-24, overruling the earlier no-pointer note): a uniform
   affordance leaks nothing about which blocks carry knowledge. */
.book-passage {
  position: relative;
  display: block;
  font: inherit;
  text-align: left;
  color: #ded6c4;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 1.65;
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  font-size: 3.75cqw;
}

/* Authored line breaks inside a passage survive (verse, letters). */
.book-passage-text { white-space: pre-line; }

/* ----- Book markdown block styles (see app/game/book-markdown.ts) ----- */

/* `# Chapter title`: centered small caps with a little air around it. */
.book-passage.book-style-title {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: clamp(1.25rem, 3.4vw, 1.45rem);
  font-size: 4.8cqw;
  color: #efe6d2;
  margin: 10px 0 4px;
  margin: 2cqw 0 0.8cqw;
}

/* `## Section heading`: smaller, still centered. */
.book-passage.book-style-heading {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: clamp(1.08rem, 2.9vw, 1.2rem);
  font-size: 4cqw;
  color: #e9dfc9;
  margin: 6px 0 0;
  margin: 1.25cqw 0 0;
}

/* `> Quotation`: set in, italic, with a hairline in the margin. */
.book-passage.book-style-quote {
  font-style: italic;
  padding-left: 1.1em;
  border-left: 2px solid rgba(246, 201, 111, 0.3);
  border-left-width: 0.42cqw;
  color: #d4cbb6;
}

/* `---` on its own passage: an ornamental break. */
.book-passage.book-style-divider {
  text-align: center;
  color: rgba(246, 201, 111, 0.55);
  letter-spacing: 0.5em;
  font-size: 1rem;
  font-size: 3.3cqw;
  margin: 2px 0;
  margin: 0.4cqw 0;
}

/* Inline `**bold**` / `*italic*` — never set color, so the claimed-gold and
   collect-sweep styles on the passage keep applying to every glyph. */
.book-passage-text strong { font-weight: 700; color: inherit; }
.book-passage-text em { font-style: italic; color: inherit; }

/* ----- Multi-block passages (blank lines inside one passage) -----
   Each sub-block keeps its shape but NEVER its own color: everything
   inherits from .book-passage-text so claimed-gold and the collect sweep
   tint a multi-block passage exactly like a plain one. */
.book-passage-text .book-block { display: block; }
.book-passage-text .book-block + .book-block {
  margin-top: 14px;
  margin-top: 2.9cqw;
}
.book-passage-text .book-block.book-style-title {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: clamp(1.25rem, 3.4vw, 1.45rem);
  font-size: 4.8cqw;
}
.book-passage-text .book-block.book-style-heading {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: clamp(1.08rem, 2.9vw, 1.2rem);
  font-size: 4cqw;
}
.book-passage-text .book-block.book-style-quote {
  font-style: italic;
  padding-left: 1.1em;
  border-left: 2px solid rgba(246, 201, 111, 0.3);
  border-left-width: 0.42cqw;
}
.book-passage-text .book-block.book-style-divider {
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1rem;
  font-size: 3.3cqw;
}

/* Inline images (`![alt](path)`): plate-style, sized to the page. Width is
   page-relative for the same reason the text is — a plate must occupy the
   same share of every device's page or authored pages stop fitting. The
   rule: 1 intrinsic image px = 1 page px on the 480px reference page, so
   the 160px statue is 160/480 → 33.3cqw. (If a future plate needs another
   size, that's a markdown size hint to add, not a CSS tweak.) */
.book-passage-text .book-inline-img {
  display: block;
  max-width: 100%;
  width: 33.3cqw;
  margin: 10px auto;
  margin: 2cqw auto;
  border-radius: 3px;
  image-rendering: pixelated;
}

/* A passage already collected on an earlier read sits in a quiet gold. */
.book-passage-claimed .book-passage-text {
  color: #eec472;
  text-shadow: 0 0 14px rgba(255, 200, 90, 0.2);
}

/* The claim moment: the text itself turns gold left to right as the glow
   passes. A text-clipped gradient whose position the collect animation
   sweeps (JS sets the duration to the per-letter cadence); it starts
   fully on the plain color, so nothing changes until the sweep moves. */
.book-passage-just-claimed .book-passage-text {
  background-image: linear-gradient(90deg, #ffd873 0%, #ffd873 49.8%, #ded6c4 50.2%, #ded6c4 100%);
  background-size: 205% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

/* The overlay of glowing duplicates: the original text never moves; the
   glow blooms over it and peels away, all in fixed space. */
.book-collect-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

.book-collect-char {
  position: fixed;
  color: #ffd873;
  text-shadow: 0 0 12px rgba(255, 200, 80, 0.95), 0 0 30px rgba(255, 190, 60, 0.5);
  filter: blur(1.2px);
  opacity: 0;
  will-change: transform, opacity;
}

/* Fixed-height result slot: the journal line appears without moving the
   page (mobile included). */
.book-result {
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
  min-height: 1.5em;
  font-size: 0.88rem;
  color: #f5d48a;
  text-align: center;
}

.book-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.book-page-count {
  font-size: 0.8rem;
  color: #7d7768;
}

/* World ledger (/stats): the live-feed indicator. A keyframed pulse rather
   than a JS-driven one, so an idle page animates the dot without waking the
   render loop between updates. */
.stats-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f6c96f;
  box-shadow: 0 0 0 0 rgba(246, 201, 111, 0.55);
  animation: stats-live-pulse 2.4s ease-out infinite;
}

.stats-live-dot[data-state='reconnecting'] {
  background: #7d7768;
  box-shadow: none;
  animation: stats-live-fade 1.2s ease-in-out infinite;
}

.stats-live-dot[data-state='off'] {
  background: #7d7768;
  box-shadow: none;
  animation: none;
}

@keyframes stats-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(246, 201, 111, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(246, 201, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(246, 201, 111, 0); }
}

@keyframes stats-live-fade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-live-dot,
  .stats-live-dot[data-state='reconnecting'] {
    animation: none;
  }
}
