/* ============================================================================
   Виртуальный храм — оформление поверх трёхмерной сцены.
   Всё, кроме самой сцены: заставка, подсказки, надписи.
   ========================================================================= */

html, body { height: 100%; }
body.sobor { margin: 0; overflow: hidden; background: #0d0b09; color: #f6f1e6; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 20%, #1c1713, #0a0806 75%);
  transition: opacity .6s ease, visibility .6s;
}
.overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.overlay__box { max-width: 42rem; padding: 2rem; text-align: center; }
.overlay__box h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); font-weight: 600;
  margin: 0 0 .4em; color: #f4e6c8;
}
.overlay__box p { color: #cfc4b0; line-height: 1.65; margin: 0 0 1.1em; }
.overlay__box small { color: #8e8271; display: block; margin-top: 1.4rem; line-height: 1.6; }
.overlay__box small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.btn-enter {
  appearance: none; border: 1px solid #b08733; border-radius: 999px;
  background: linear-gradient(180deg, #c9a227, #8a6a1f);
  color: #1b1512; font: inherit; font-weight: 600; font-size: 1.05rem;
  padding: .85rem 2.4rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(201,162,39,.25);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.btn-enter:hover { filter: brightness(1.07); box-shadow: 0 14px 40px rgba(201,162,39,.35); }
.btn-enter:active { transform: translateY(1px); }
.btn-enter:disabled { filter: grayscale(1) brightness(.6); cursor: progress; box-shadow: none; }

.keys { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.2rem 0 0; }
.keys span {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: 10px;
  border: 1px solid rgba(246,241,230,.18); background: rgba(246,241,230,.06);
  font-size: .86rem; color: #cfc4b0;
}
.keys b {
  display: inline-block; min-width: 1.6em; padding: .1rem .35rem;
  border-radius: 5px; background: rgba(246,241,230,.14);
  font-weight: 600; text-align: center; color: #f6f1e6;
}

/* ---- Поверх сцены -------------------------------------------------------- */

.hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.hud.is-hidden { display: none; }

.hud__place {
  position: absolute; left: 50%; top: 1.4rem; transform: translateX(-50%);
  padding: .5rem 1.1rem; border-radius: 999px;
  background: rgba(10,8,6,.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(246,241,230,.14);
  font-size: .9rem; letter-spacing: .01em; white-space: nowrap;
}

.hud__corner { position: absolute; right: 1rem; top: 1rem; display: flex; gap: .5rem; pointer-events: auto; }
.hud__btn {
  appearance: none; border: 1px solid rgba(246,241,230,.2); border-radius: 999px;
  background: rgba(10,8,6,.45); backdrop-filter: blur(8px);
  color: #f6f1e6; font: inherit; font-size: .85rem; padding: .5rem 1rem;
  cursor: pointer; text-decoration: none;
}
.hud__btn:hover { background: rgba(10,8,6,.7); color: #fff; }

/* Точка прицела: без неё непонятно, куда смотришь. */
.hud__dot {
  position: absolute; left: 50%; top: 50%; width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: rgba(246,241,230,.55); box-shadow: 0 0 6px rgba(0,0,0,.6);
}

.hud__hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  padding: .55rem 1.1rem; border-radius: 999px;
  background: rgba(10,8,6,.45); backdrop-filter: blur(8px);
  border: 1px solid rgba(246,241,230,.14);
  font-size: .85rem; color: #cfc4b0; text-align: center;
}
.hud__hint.is-hidden { display: none; }

@media (max-width: 720px) {
  .hud__dot { display: none; }
  /* ⚠️ На узком экране надпись места налезала на кнопки звука и выхода, а
     подсказка уходила под кнопку бега. Разводим их по разным углам. */
  .hud__place {
    font-size: .76rem; top: auto; bottom: calc(1rem + env(safe-area-inset-bottom));
    left: 1rem; transform: none; max-width: 58vw;
    white-space: normal; text-align: left;
  }
  .hud__corner { top: calc(.6rem + env(safe-area-inset-top)); right: .6rem; }
  .hud__btn { font-size: .78rem; padding: .42rem .8rem; }
  .hud__hint {
    left: 1rem; right: 1rem; transform: none;
    bottom: calc(11rem + env(safe-area-inset-bottom));
    font-size: .78rem; line-height: 1.45;
  }
  /* Подсказка нужна только первые секунды — потом она мешает смотреть. */
  .hud__hint.is-faded { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
}


/* ---- Управление на телефоне ---------------------------------------------
   ⚠️ Раньше ходьба была невидимым свайпом, а прыжка не было вовсе: на
   телефоне не существует ни Shift, ни пробела. Кольцо появляется прямо под
   пальцем, кнопки — там, где до них дотягивается большой палец. */

.touch-ui { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.touch-ui[hidden] { display: none; }

.joy {
  position: fixed; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  pointer-events: none;
}
.joy[hidden] { display: none; }
.joy__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(246,241,230,.35);
  background: radial-gradient(circle, rgba(246,241,230,.10), rgba(246,241,230,.03) 70%);
  backdrop-filter: blur(2px);
}
.joy__knob {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: rgba(246,241,230,.75);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: background .15s;
}
.joy.is-running .joy__knob { background: #e8cf7a; }

.touch-btn {
  position: fixed; z-index: 7; pointer-events: auto;
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid rgba(246,241,230,.28);
  background: rgba(20,16,12,.42); backdrop-filter: blur(8px);
  color: #f6f1e6; cursor: pointer;
  /* Двойной тап по кнопке не должен масштабировать страницу. */
  touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: transform .12s, background .12s;
}
.touch-btn svg { width: 30px; height: 30px; }
.touch-btn:active, .touch-btn.is-on { transform: scale(.92); background: rgba(201,162,39,.55); }

.touch-btn--jump { right: calc(1.1rem + env(safe-area-inset-right)); bottom: calc(6.4rem + env(safe-area-inset-bottom)); }
.touch-btn--run  { right: calc(6.2rem + env(safe-area-inset-right)); bottom: calc(1.6rem + env(safe-area-inset-bottom)); }

@media (min-width: 900px) and (pointer: fine) {
  .touch-ui { display: none; }
}

/* ---- Рассказ об иконе ---------------------------------------------------- */

/* Подсказка под точкой прицела: название иконы и как прочитать. */
.hud__prompt {
  position: absolute; left: 50%; top: calc(50% + 1.6rem); transform: translateX(-50%);
  display: grid; gap: .15rem; text-align: center;
  padding: .55rem 1rem; border-radius: 12px;
  background: rgba(10,8,6,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,39,.45);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: #f4e6c8;
}
.hud__prompt small { font-family: system-ui, sans-serif; font-size: .78rem; color: #cfc4b0; }
.hud__prompt b { color: #f6f1e6; }
.hud__prompt[hidden] { display: none; }

.icon-info {
  position: fixed; z-index: 8; right: 1rem; top: 4.2rem; bottom: 1rem;
  width: min(30rem, calc(100vw - 2rem)); overflow-y: auto;
  padding: 1.6rem 1.6rem 1.2rem; border-radius: 18px;
  background: rgba(16,12,9,.88); backdrop-filter: blur(14px);
  border: 1px solid rgba(201,162,39,.35);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  color: #e9dfcc; line-height: 1.65;
}
.icon-info[hidden] { display: none; }
.icon-info h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 1.9rem; line-height: 1.15; margin: 0 2rem .3rem 0; color: #f4e6c8;
}
.icon-info__sub { margin: 0 0 1rem; color: #c9a227; font-size: .88rem; letter-spacing: .02em; }
.icon-info__text p { margin: 0 0 .9em; }
.icon-info__src { margin: 1.2rem 0 .4rem; padding-top: .8rem; border-top: 1px solid rgba(246,241,230,.12); font-size: .82rem; color: #a99a85; }
.icon-info__src a { color: #d9bf86; margin-left: .3rem; }
.icon-info__hint { margin: 0; font-size: .78rem; color: #8e8271; }
.icon-info__close {
  position: absolute; right: .8rem; top: .7rem; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; border: 1px solid rgba(246,241,230,.2); background: rgba(246,241,230,.06);
  color: #f6f1e6; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.icon-info__close:hover { background: rgba(246,241,230,.14); }
@media (max-width: 640px) {
  .icon-info { left: .6rem; right: .6rem; top: auto; bottom: .6rem; width: auto; max-height: 70vh; }
}

/* ---- Посещение храма (visit.js): кошелёк, лавка, свечи, записки ----------
   Деньги понарошку (правило № 16); никаких счётчиков и «наград» (№ 17).
   Элементы создаёт visit.js — здесь только вид. */

.visit-bar {
  position: absolute; left: 1rem; top: 1rem; display: flex; gap: .5rem; align-items: center;
  pointer-events: auto; flex-wrap: wrap; max-width: calc(50vw - 9rem);
}
.visit-wallet {
  padding: .45rem .9rem; border-radius: 999px; font-size: .85rem;
  background: rgba(10,8,6,.45); backdrop-filter: blur(8px); border: 1px solid rgba(201,162,39,.35);
}
.visit-wallet b { color: #f4e6c8; font-weight: 600; }
.visit-wallet small { color: #a99a85; }

/* Подсказка у лавки, подсвечника, бака — ниже иконной, чтобы не налезали. */
.visit-prompt { top: calc(50% + 1.6rem); pointer-events: auto; cursor: pointer; }
.visit-chip, .visit-guide-chip {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; color: #cfc4b0;
  background: rgba(10,8,6,.5); backdrop-filter: blur(8px); border: 1px solid rgba(246,241,230,.14);
}
.visit-chip { top: calc(50% + 5.6rem); }
.visit-chip b { color: #f6f1e6; }
.visit-chip[hidden], .visit-guide-chip[hidden], .visit-toast[hidden], .visit-touch[hidden] { display: none; }
.visit-guide-chip { bottom: 4.6rem; max-width: min(40rem, calc(100vw - 2rem)); border-radius: 14px; text-align: center; pointer-events: auto; cursor: pointer; }
.visit-guide-chip b { color: #e8cf7a; }
.visit-toast {
  position: absolute; left: 50%; top: 26%; transform: translateX(-50%);
  padding: .65rem 1.2rem; border-radius: 14px; max-width: min(34rem, calc(100vw - 2rem)); text-align: center;
  background: rgba(16,12,9,.72); backdrop-filter: blur(10px); border: 1px solid rgba(201,162,39,.35);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; color: #f4e6c8;
}

/* Кнопки на телефоне: перекреститься, поклон, приложиться — столбиком над прыжком. */
.visit-touch {
  position: fixed; z-index: 7; right: calc(1.1rem + env(safe-area-inset-right)); bottom: calc(11.4rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: .5rem; pointer-events: auto;
}
.visit-tbtn {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  border: 1px solid rgba(246,241,230,.28); background: rgba(20,16,12,.42); backdrop-filter: blur(8px);
  color: #f6f1e6; cursor: pointer; padding: 0; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.visit-tbtn[hidden] { display: none; }
.visit-tbtn svg { width: 22px; height: 22px; }
.visit-tbtn span { font-size: .55rem; line-height: 1; margin-top: 2px; }
.visit-tbtn .visit-tbtn__big { font-size: 1.2rem; }
.visit-tbtn:active { background: rgba(201,162,39,.55); }

/* Панель лавки и прочего — по образцу рассказа об иконе. */
.visit-panel h3 {
  margin: 1rem 0 .45rem; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 1.25rem; color: #e8cf7a;
}
.visit-sec { margin-top: .6rem; border-top: 1px solid rgba(246,241,230,.1); }
.visit-seller { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.2rem; color: #f4e6c8; margin: 0 0 .6rem; }
.visit-row { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
.visit-row__txt { flex: 1; display: grid; gap: .1rem; }
.visit-row__txt small { color: #a99a85; font-size: .8rem; line-height: 1.4; }
.visit-row__price { color: #e8cf7a; white-space: nowrap; font-size: .9rem; }
.visit-row--wallet { justify-content: space-between; color: #cfc4b0; }
.visit-btn {
  appearance: none; border: 1px solid rgba(201,162,39,.5); border-radius: 999px; cursor: pointer;
  background: rgba(201,162,39,.16); color: #f6f1e6; font: inherit; font-size: .85rem; padding: .4rem .95rem;
  text-decoration: none; white-space: nowrap;
}
.visit-btn:hover { background: rgba(201,162,39,.32); }
.visit-btn--ghost { background: transparent; border-color: rgba(246,241,230,.22); }
.visit-btn--main { display: block; width: 100%; margin: 1rem 0 .4rem; padding: .7rem 1rem; font-size: 1rem; background: rgba(201,162,39,.38); }
.visit-btn.is-on { background: #c9a227; color: #1a120a; border-color: #c9a227; }
.visit-seg { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .4rem; }
.visit-note { margin: .4rem 0; font-size: .82rem; color: #a99a85; line-height: 1.5; }
.visit-quote { margin: .8rem 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; color: #f4e6c8; text-align: center; }
.visit-how { margin: .6rem 0 0; padding-left: 1.3rem; color: #e9dfcc; }
.visit-input {
  width: 100%; box-sizing: border-box; margin: .4rem 0 0; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid rgba(246,241,230,.22); background: rgba(246,241,230,.06); color: #f6f1e6;
  font: inherit; font-size: 1rem; resize: vertical;
}
/* Записка — как бланк: крест и заголовок; об упокоении — чёрным, о здравии — красным. */
.visit-sheet { margin-top: .4rem; padding: .7rem; border-radius: 10px; background: #efe6cf; }
.visit-sheet__head { text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; letter-spacing: .08em; color: #8a1c20; }
.visit-sheet--repose .visit-sheet__head { color: #1a1410; }
.visit-sheet .visit-input { background: transparent; color: #1a1410; border-color: rgba(26,20,16,.25); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; }
.visit-err { color: #f0a08a; font-size: .85rem; margin-top: .4rem; }
.visit-check { display: flex; align-items: center; gap: .4rem; margin: .7rem 0 .2rem; font-size: .9rem; }
.visit-check small { color: #a99a85; }
.visit-steps { padding-left: 1.3rem; }
.visit-steps li { margin: 0 0 .55rem; color: #cfc4b0; }
.visit-steps li.is-now { color: #f6f1e6; }
.visit-steps li.is-now b { color: #e8cf7a; }
.visit-rules { padding-left: 1.1rem; margin: .3rem 0; }
.visit-rules li { margin: 0 0 .45rem; }
.visit-fund { margin-top: 1rem; }
.visit-fund small { color: #a99a85; }
.visit-fund__bar { height: 4px; border-radius: 2px; background: rgba(246,241,230,.1); margin-top: .35rem; overflow: hidden; }
.visit-fund__bar i { display: block; height: 100%; background: #c9a227; }

@media (max-width: 720px) {
  .visit-bar { left: .6rem; top: calc(.6rem + env(safe-area-inset-top)); max-width: calc(100vw - 13rem); gap: .35rem; }
  .visit-bar .hud__btn, .visit-wallet { font-size: .72rem; padding: .36rem .7rem; }
  .visit-guide-chip { bottom: calc(14rem + env(safe-area-inset-bottom)); font-size: .75rem; }
}
@media (min-width: 900px) and (pointer: fine) {
  .visit-touch { display: none; }
}

/* ---- Службы (services.js) и звонница (bells.js) ------------------------- */

/* «Сейчас: … · Далее: …» — под надписью места, мельче и спокойнее. */
.hud__service {
  position: absolute; left: 50%; top: 4.1rem; transform: translateX(-50%);
  max-width: min(46rem, calc(100vw - 2rem));
  padding: .35rem .95rem; border-radius: 999px;
  background: rgba(10,8,6,.38); backdrop-filter: blur(6px);
  border: 1px solid rgba(201,162,39,.25);
  font-size: .8rem; color: #e8dcc4; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hud__service[hidden] { display: none; }
/* Поминаемые имена — внизу, над подсказкой; видит только сам посетитель. */
.hud__names {
  position: absolute; left: 50%; bottom: 4.6rem; transform: translateX(-50%);
  max-width: min(40rem, calc(100vw - 2rem));
  padding: .5rem 1rem; border-radius: 12px;
  background: rgba(10,8,6,.5); backdrop-filter: blur(6px);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; color: #f4e6c8; text-align: center;
}
.hud__names[hidden] { display: none; }
.hud__prompt--act { top: calc(50% + 5.2rem); }
/* Затемнение на лестнице звонницы. */
.fade {
  position: fixed; inset: 0; z-index: 9; display: grid; place-items: center;
  background: #0a0806; opacity: 0; transition: opacity .55s ease; pointer-events: none;
}
.fade.is-on { opacity: 1; }
.fade[hidden] { display: none; }
.fade p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; color: #d9c9a8; }
@media (max-width: 720px), (pointer: coarse) {
  /* На телефоне место — внизу слева (см. выше), строка службы — сверху слева. */
  .hud__service {
    left: .8rem; right: .8rem; transform: none; top: calc(3.3rem + env(safe-area-inset-top));
    font-size: .7rem; white-space: normal; text-align: left; max-width: none;
  }
  .hud__names { bottom: calc(14rem + env(safe-area-inset-bottom)); font-size: .95rem; }
}

/* ---- Библиотека: подсказка у полки, читалка, список книг ------------------
   Книга рисуется в самой сцене (library.js, books/reader.js); здесь — только
   то, что поверх: края страниц для щелчка, панель кнопок, оглавление. */
.book-prompt { border-color: rgba(201,162,39,.65); }

.reader { position: fixed; inset: 0; z-index: 7; touch-action: none; user-select: none; -webkit-user-select: none; }
.reader[hidden] { display: none; }
/* Края страниц: щелчок слева — назад, справа — вперёд. */
.reader__zone { position: absolute; top: 12%; bottom: 14%; width: 30%; cursor: pointer; }
.reader__zone--prev { left: 0; cursor: w-resize; }
.reader__zone--next { right: 0; cursor: e-resize; }
.reader__top {
  position: absolute; left: 50%; top: calc(.9rem + env(safe-area-inset-top)); transform: translateX(-50%);
  max-width: calc(100vw - 2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .4rem 1rem; border-radius: 999px; background: rgba(10,8,6,.5); backdrop-filter: blur(8px);
  border: 1px solid rgba(246,241,230,.14);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.05rem; color: #f4e6c8;
}
.reader__top span { color: #cfc4b0; }
.reader__bar {
  position: absolute; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: .35rem; padding: .35rem; border-radius: 999px;
  background: rgba(10,8,6,.55); backdrop-filter: blur(8px); border: 1px solid rgba(201,162,39,.35);
  opacity: 0; transition: opacity .4s ease .1s;
}
.reader.is-ready .reader__bar { opacity: 1; }
.reader__bar button {
  appearance: none; border: 0; border-radius: 999px; background: rgba(246,241,230,.07);
  color: #f6f1e6; font: 500 .9rem system-ui, sans-serif; padding: .5rem .85rem; cursor: pointer; min-width: 2.6rem;
}
.reader__bar button:hover, .reader__bar button:focus-visible { background: rgba(201,162,39,.35); outline: none; }
.reader__bar button[hidden] { display: none; }
.reader__toc {
  position: absolute; right: 1rem; top: 4rem; bottom: 5rem; width: min(26rem, calc(100vw - 2rem));
  overflow-y: auto; padding: 1.3rem 1.3rem 1rem; border-radius: 18px;
  background: rgba(16,12,9,.92); backdrop-filter: blur(14px); border: 1px solid rgba(201,162,39,.35);
  color: #e9dfcc; touch-action: pan-y; user-select: text;
}
.reader__toc[hidden] { display: none; }
.reader__toc h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.6rem; margin: 0 2rem .6rem 0; color: #f4e6c8; }
.reader__toc h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.1rem; margin: .9rem 0 .35rem; color: #d9bf86; }
.reader__toc-item {
  display: block; width: 100%; text-align: left; appearance: none; border: 0; background: none; cursor: pointer;
  color: #e9dfcc; font: 1rem/1.35 'Cormorant Garamond', Georgia, serif; padding: .3rem .4rem; border-radius: 8px;
}
.reader__toc-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.reader__toc-grid button {
  appearance: none; border: 1px solid rgba(246,241,230,.14); background: rgba(246,241,230,.04); cursor: pointer;
  color: #e9dfcc; font: .82rem system-ui, sans-serif; min-width: 2.2rem; padding: .3rem .4rem; border-radius: 7px;
}
.reader__toc-item:hover, .reader__toc-grid button:hover { background: rgba(201,162,39,.22); }
.reader__toc .is-current { background: rgba(201,162,39,.38); color: #fff; }

.library-list h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.15rem; color: #d9bf86; margin: 1rem 0 .3rem; }
.library-list__item {
  display: grid; width: 100%; text-align: left; appearance: none; cursor: pointer;
  border: 0; border-left: .45rem solid var(--cover, #5a2a1a); border-radius: 6px;
  background: rgba(246,241,230,.05); color: #f4e6c8; padding: .45rem .7rem; margin: 0 0 .3rem;
  font: 1.05rem/1.25 'Cormorant Garamond', Georgia, serif;
}
.library-list__item small { font: .75rem system-ui, sans-serif; color: #a99a85; }
.library-list__item:hover, .library-list__item:focus-visible { background: rgba(201,162,39,.2); outline: none; }

@media (max-width: 720px) {
  .reader__bar { gap: .2rem; padding: .25rem; max-width: calc(100vw - 1rem); }
  .reader__bar button { padding: .55rem .6rem; font-size: .82rem; min-width: 2.3rem; }
  .reader__zone { top: 10%; bottom: 16%; width: 34%; }
  .reader__toc { left: .6rem; right: .6rem; width: auto; top: 3.4rem; bottom: 4.6rem; }
}