/* Экраны Библии (холст: ряд «Библия»): книги, главы, чтение, выделение, «Аа», ночной фон, поиск, пометки, переводы, о книге,
   Библия поверх игры. Цвета выделений — светлые тона палитры: жёлтый, бирюзовый, сиреневый, розовый. */
:root {
  --hl-gold: var(--must-t);
  --hl-olive: var(--teal-t);
  --hl-blue: var(--viol-t);
  --hl-terra: var(--coral-t);
}

/* ---------- список книг ---------- */
.bb-page { padding-top: 16px; }
.bb-top { gap: 8px; }
.bb-tr { padding: 0; text-align: left; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-title { margin-top: 4px; }
.bb-cont {
  margin-top: 14px; height: 96px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; border-radius: 8px;
  background: var(--coral); color: var(--ink); text-decoration: none; animation: rise .7s var(--ease) .25s backwards; transition: transform .15s var(--ease);
}
.bb-cont:active { transform: scale(.98); }
.bb-cont-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-cont-t b { font-family: var(--cond); font-weight: 800; font-size: 40px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-cont-go { width: 52px; height: 52px; flex: none; border-radius: 6px; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.bb-cont-go svg { width: 22px; height: 22px; stroke-width: 2.4; }
.bb-search {
  margin-top: 16px; height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 6px;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); cursor: text;
}
.bb-search:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.bb-search svg { width: 19px; height: 19px; flex: none; }
.bb-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 15.5px; font-weight: 600; -webkit-appearance: none; appearance: none;
}
.bb-search input::placeholder { color: var(--muted); opacity: 1; }
.bb-tabs { margin-top: 14px; padding: 4px; }
.bb-tabs button { height: 40px; font-size: 15px; }
.bb-list { display: flex; flex-direction: column; margin-top: 10px; }
.bb-row {
  height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 4px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; animation: rise .45s ease both;
}
.bb-row:active { background: var(--card2); }
.bb-n { width: 28px; flex: none; font-family: var(--cond); font-weight: 800; font-size: 22px; color: var(--dim); }
.bb-n.on { color: var(--coral); }
.bb-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 14px; }
.bb-t b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bb-t small { flex: none; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bb-p { margin-left: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.bb-p > span:not(.ring) { font-size: 12px; font-weight: 800; color: var(--teal); text-transform: uppercase; }
.ring { display: inline-grid; flex: none; }
.ring svg { display: block; }
.bb-go {
  min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 4px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 800;
}
.bb-go span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-go svg { width: 20px; height: 20px; flex: none; color: var(--coral); }
.bb-go svg:last-child { color: var(--dim); }
.bb-go.soft { font-weight: 700; color: var(--teal); }

/* ---------- книга и главы ---------- */
.bk-page, .ab-page, .mk-page { padding-top: 16px; }
.bk-title { margin-top: 14px; font-size: 80px; line-height: .9; }
.bk-title > .ln > span { white-space: nowrap; }
.bk-row { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; animation: rise .5s ease .2s both; }
.bk-row > span:nth-child(2) { min-width: 0; }
.bk-about-btn {
  margin-left: auto; flex: none; height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border: 2px solid var(--ink); border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 800; white-space: nowrap;
}
.bk-about-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.bk-go { margin-top: 18px; height: 58px; font-size: 26px; }
.bk-l { margin: 24px 0 0; }
.bk-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; animation: rise .6s ease .35s both; }
.bk-c {
  height: 52px; border-radius: 6px; display: grid; place-items: center; text-decoration: none;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line);
  font-family: var(--cond); font-weight: 800; font-size: 24px; transition: transform .12s var(--ease);
}
.bk-c:active { transform: scale(.94); }
.bk-c.read { background: var(--teal-t); box-shadow: none; }
.bk-c.cur { background: var(--coral); box-shadow: none; animation: pulse 1.8s ease-in-out infinite; }
.bk-legend { margin-top: 14px; display: flex; gap: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.bk-legend span { display: flex; align-items: center; gap: 6px; }
.bk-legend i { width: 12px; height: 12px; border-radius: 3px; }
.bk-legend i.read { background: var(--teal-t); }
.bk-legend i.cur { background: var(--coral); }
.bk-about { margin-top: 24px; padding: 14px 16px; border-radius: 8px; background: var(--must-t); cursor: pointer; animation: rise .6s ease .2s both; }
.bk-about p { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; }

/* ---------- о книге ---------- */
.ab-body { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.ab-sec { animation: rise .5s ease .2s both; }
.ab-about { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.ab-two { display: flex; gap: 8px; animation: rise .5s ease .3s both; }
.ab-card { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; }
.ab-card:first-child { flex: 1.3; }
.ab-card.teal { background: var(--teal-t); }
.ab-card.must { background: var(--must-t); }
.ab-card .kicker { font-size: 11.5px; letter-spacing: .12em; }
.ab-card p { margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.32; }
.ab-plan { margin-top: 2px; }
.ab-row {
  min-height: 38px; display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.ab-row b { width: 52px; flex: none; font-family: var(--cond); font-weight: 800; font-size: 19px; color: var(--coral); white-space: nowrap; }
.ab-plan.wide .ab-row b { width: 70px; }
.ab-row span { font-size: 14.5px; font-weight: 700; line-height: 1.25; }

/* ---------- чтение главы ---------- */
.rd-page {
  --bg: var(--paper); --fg: var(--ink); --num: var(--coral); --sub: var(--muted); --bd: var(--ink);
  min-height: 100%; background: var(--bg); color: var(--fg); padding-bottom: 76px;
}
.rd-page[data-theme="white"] { --bg: #FFFFFF; }
.rd-page[data-theme="sand"] { --bg: var(--must-t); }
.rd-page[data-theme="night"] { --bg: var(--ink); --fg: #E9E2D2; --num: var(--coral-t); --sub: var(--onink); --bd: var(--onink); }
body.bible-th-white .view, body.bible-th-white .backdrop + .view { background: #FFFFFF; }
body.bible-th-sand .view { background: var(--must-t); }
body.bible-night .view { background: var(--ink); }
.rd-top {
  position: sticky; top: 0; z-index: 5; background: var(--bg);
  transition: transform .3s var(--ease);
}
body.bible-down .rd-top { transform: translateY(calc(-100% - var(--safe-top))); }
.rd-bar { height: 70px; padding: 14px 20px; display: flex; align-items: center; gap: 8px; }
.rd-bar .cbtn { border-color: var(--bd); color: var(--fg); }
.rd-page[data-theme="night"] .rd-bar .cbtn { color: var(--paper); }
.cbtn.rd-aa span { font-family: var(--cond); font-weight: 800; font-size: 20px; line-height: 1; }
.rd-bar .cbtn svg { width: 19px; height: 19px; }
.rd-prog { height: 4px; background: var(--mute); }
.rd-page[data-theme="night"] .rd-prog { background: #3B474D; }
.rd-prog span { display: block; width: 0; height: 100%; background: var(--num); transition: width .15s linear; }
.rd-page[data-theme="night"] .rd-prog span { background: var(--coral-t); }
.rd-main { padding: 22px var(--bpad, 20px) 0; }

.reader { position: relative; }
.rd-head { display: flex; align-items: flex-end; gap: 12px; }
.rd-num { height: 104px; overflow: hidden; flex: none; font-family: var(--cond); font-weight: 800; font-size: 124px; line-height: 104px; color: var(--num, var(--coral)); }
.rd-num span { display: block; animation: up .7s var(--ease) .1s both; }
.rd-meta { padding-bottom: 10px; min-width: 0; display: flex; flex-direction: column; animation: rise .5s ease .3s both; }
.rd-meta .kicker { letter-spacing: .16em; color: var(--fg, var(--ink)); }
.rd-sub { font-size: 13px; font-weight: 600; color: var(--sub, var(--muted)); }
.rd-ps:empty { display: none; }
.rd-ps { margin: 16px 0 0; font-family: var(--bf, var(--serif)); font-style: italic; font-weight: 500; font-size: 17px; color: var(--sub, var(--muted)); }
.rd-ps:not(:empty) + .rd-text { margin-top: 12px; }
.rd-text {
  margin-top: 22px; font-family: var(--bf, var(--serif)); font-weight: var(--bw, 500); font-size: var(--bs, 19px); line-height: var(--bl, 1.68);
  color: var(--fg, var(--ink)); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow-wrap: break-word;
}
.rd-text p.bp { margin: 0 0 10px; text-indent: 0; }
.rd-text .v { cursor: pointer; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .25s ease; }
.rd-text .v i { font-style: italic; }
.rd-text sup.vn {
  font-family: var(--cond); font-weight: 700; font-size: 14px; line-height: 0; color: var(--num, var(--coral));
  margin-right: 3px; vertical-align: 2px;
}
.rd-text .v.hl-gold { background-color: var(--hl-gold); }
.rd-text .v.hl-olive { background-color: var(--hl-olive); }
.rd-text .v.hl-blue, .rd-text .v.hl-lilac { background-color: var(--hl-blue); }
.rd-text .v.hl-terra { background-color: var(--hl-terra); }
.rd-text .v.focus { background-color: var(--must-t); }
.rd-text .v.focus.soft:not([class*="hl-"]) { background-color: transparent; transition: background-color 1.4s ease; }
.rd-text .v.sel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--fg, var(--ink)); }
[data-theme="night"] .rd-text .v.hl-gold { background-color: rgba(231, 181, 73, .34); }
[data-theme="night"] .rd-text .v.hl-olive { background-color: rgba(187, 216, 212, .24); }
[data-theme="night"] .rd-text .v.hl-blue, [data-theme="night"] .rd-text .v.hl-lilac { background-color: rgba(205, 207, 230, .24); }
[data-theme="night"] .rd-text .v.hl-terra { background-color: rgba(242, 195, 179, .28); }
[data-theme="night"] .rd-text .v.focus { background-color: rgba(231, 181, 73, .34); }
.rd-text .mk { display: inline-flex; vertical-align: -.1em; color: var(--teal); }
[data-theme="night"] .rd-text .mk { color: var(--teal-t); }
.rd-text .mk svg { width: .8em; height: .8em; }
.rd-text .mk-bm { margin-right: .15em; }
.rd-text .mk-note { padding: 0 .2em; margin-left: .1em; border-radius: 5px; background: var(--mute); cursor: pointer; }
[data-theme="night"] .rd-text .mk-note { background: #3B474D; }
.rd-text.turn-out-l { animation: tOutL .15s ease forwards; }
.rd-text.turn-out-r { animation: tOutR .15s ease forwards; }
.rd-text.turn-in-r { animation: tInR .25s var(--ease) both; }
.rd-text.turn-in-l { animation: tInL .25s var(--ease) both; }
@keyframes tOutL { to { opacity: 0; transform: translateX(-24px); } }
@keyframes tOutR { to { opacity: 0; transform: translateX(24px); } }
@keyframes tInR { from { opacity: 0; transform: translateX(24px); } }
@keyframes tInL { from { opacity: 0; transform: translateX(-24px); } }
.rd-end { display: flex; justify-content: space-between; gap: 8px; padding: 14px 0 6px; min-height: 8px; }
.rd-done { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--sub, var(--muted)); animation: fadein .4s ease both; }
.rd-done svg { width: 17px; height: 17px; stroke-width: 2.6; color: var(--teal); }
.rd-page[data-theme="night"] .rd-done svg { color: var(--teal-t); }
.rd-fail { padding: 30px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-weight: 600; color: var(--sub, var(--muted)); }

/* плашка «‹ Книга N ›» над нижним меню (холст: dock) */
.rd-dock {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index: 21;
  height: 54px; display: flex; align-items: center; border-radius: 10px; background: var(--ink); color: var(--paper);
  animation: rise .5s ease .3s backwards; transition: transform .3s var(--ease), opacity .2s;
}
.rd-dock.off { opacity: 0; pointer-events: none; }
body.bible-down .rd-dock { transform: translateY(calc(var(--nav-h) + 4px)); }
.dk-arr { width: 54px; height: 54px; flex: none; display: grid; place-items: center; color: inherit; }
.dk-arr svg { width: 22px; height: 22px; stroke-width: 2.4; }
.dk-arr[disabled] { opacity: .3; pointer-events: none; }
.dk-t { flex: 1; min-width: 0; height: 54px; color: inherit; font-family: var(--cond); font-weight: 800; font-size: 24px; line-height: 54px; }
.dk-t span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.bible-night .rd-dock { background: var(--paper); color: var(--ink); }

/* нижнее меню прячется, пока читают вниз; ночью — тёмное (холст: «чтение, ночной фон») */
body.bible-down .tabbar { transform: translateY(110%); }
body.bible-night .tabbar { background: var(--ink); box-shadow: 0 -1px 0 #3B474D; }
body.bible-night .tabbar a { color: var(--rankink); }
body.bible-night .tabbar a.on { color: var(--paper); }

/* ---------- выделенные стихи: шторка снизу (холст: «Библия — выделенный стих») ---------- */
.bsel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 560px; margin: 0 auto; min-height: calc(330px + var(--safe-bottom));
  padding: 10px 20px calc(20px + var(--safe-bottom)); border-radius: 16px 16px 0 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 -1px 0 var(--line), 0 -12px 28px rgba(37, 50, 56, .12); animation: slideup .45s var(--ease) both;
}
.bsel-grip { display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: var(--line); }
.bsel-head { display: flex; align-items: center; gap: 10px; }
.bsel-head b { font-family: var(--cond); font-weight: 800; font-size: 32px; line-height: 1; white-space: nowrap; }
.bsel-head > span { font-size: 14px; font-weight: 600; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel-x { margin-left: auto; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mute); color: var(--ink); }
.bsel-x svg { width: 18px; height: 18px; }
.bsel-l { margin: 14px 0 8px; }
.bsel-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bsel-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); }
.bsel-sw .sw { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; transition: box-shadow .2s ease; }
.bsel-sw .sw.hl-gold { background: var(--hl-gold); }
.bsel-sw .sw.hl-olive { background: var(--hl-olive); }
.bsel-sw .sw.hl-blue { background: var(--hl-blue); }
.bsel-sw .sw.hl-terra { background: var(--hl-terra); }
.bsel-sw .sw.none { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.bsel-sw.on .sw { box-shadow: inset 0 0 0 3px var(--ink); }
.bsel-sw .sw svg { width: 18px; height: 18px; stroke-width: 2.8; }
.bsel-sw small { font-size: 11.5px; font-weight: 700; line-height: 1.1; text-align: center; }
.bsel-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.bsel-act {
  height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 8px;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font-size: 13px; font-weight: 700;
  transition: transform .12s var(--ease);
}
.bsel-act:active { transform: scale(.95); }
.bsel-act svg { width: 22px; height: 22px; stroke-width: 2; }
.bsel-act span { max-width: 100%; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-page.sel-on { padding-bottom: 340px; }

/* ---------- «Аа» (холст: «Библия — «Аа»: шрифт и размер») ---------- */
/* шторки Библии, как на холсте, оставляют внизу место высотой с нижнее меню */
.sheet.aa-sheet, .sheet.tr-sheet { padding-bottom: calc(24px + 50px + var(--safe-bottom)); }
.aa-top { display: flex; align-items: baseline; }
.aa-top h3 { margin: 0; }
.aa-reset { margin-left: auto; color: var(--teal); font-size: 14px; font-weight: 800; }
.aa-pv {
  margin-top: 10px; height: 104px; overflow: hidden; padding: 12px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line);
  transition: background .25s ease, color .25s ease;
}
.aa-pv p { margin: 0; font-family: var(--bf); font-weight: var(--bw); font-size: var(--bs); line-height: var(--bl); }
.aa-pv sup { font-family: var(--cond); font-weight: 700; font-size: 13px; color: var(--coral); margin-right: 3px; }
.aa-pv[data-theme="night"] sup { color: var(--coral-t); }
.aa-l { margin: 14px 0 6px; }
.aa-fonts { display: flex; flex-wrap: wrap; gap: 6px; }
.aa-font { height: 38px; padding: 0 12px; border-radius: 6px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15px; }
.aa-font.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.aa-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.aa-row > .kicker { width: 72px; flex: none; }
.aa-step { width: 42px; height: 42px; flex: none; border-radius: 6px; display: grid; place-items: center; background: var(--mute); color: var(--ink); }
.aa-step svg { width: 18px; height: 18px; stroke-width: 2.6; }
.aa-step[disabled] { opacity: .4; }
.aa-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--mute); overflow: hidden; }
.aa-bar span { display: block; height: 100%; border-radius: 4px; background: var(--coral); transition: width .2s ease; }
.aa-val { width: 30px; flex: none; text-align: center; font-family: var(--cond); font-weight: 800; font-size: 26px; }
.aa-seg { flex: 1; display: flex; padding: 3px; border-radius: 7px; background: var(--mute); }
.aa-seg button { flex: 1; min-width: 0; height: 34px; border-radius: 5px; color: var(--ink); font-size: 13px; font-weight: 800; white-space: nowrap; }
.aa-seg button.on { background: var(--ink); color: var(--paper); }
.aa-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.aa-th { height: 50px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 13.5px; font-weight: 800; }
.aa-th.on { box-shadow: inset 0 0 0 3px var(--coral); }

/* ---------- переводы (холст: «Библия — переводы») ---------- */
.tr-list { border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); }
.tr-row { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 14px; text-align: left; color: var(--ink); }
.tr-row + .tr-row { box-shadow: 0 -1px 0 var(--line); }
.tr-row > span:last-child { display: flex; flex-direction: column; }
.tr-row b { font-size: 16px; font-weight: 800; }
.tr-row small { font-size: 13px; font-weight: 600; color: var(--muted); }
.tr-ck { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); }
.tr-ck svg { width: 18px; height: 18px; stroke-width: 3; }
.tr-ck.off { background: var(--mute); color: transparent; }
.tr-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tr-soon .kicker { color: var(--muted); margin-right: 4px; }
.tr-s { padding: 6px 10px; border-radius: 6px; background: var(--mute); font-size: 13px; font-weight: 700; }
.tr-off { margin-top: 20px; padding-top: 16px; box-shadow: 0 -1px 0 var(--line); }
.tr-off:empty { display: none; }
.tr-off p { margin: 0 0 10px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.tr-bar { display: block; height: 8px; border-radius: 4px; background: var(--mute); overflow: hidden; }
.tr-bar span { display: block; height: 100%; background: var(--teal); transition: width .3s ease; }
.tr-save {
  width: 100%; margin-top: 12px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px;
  border-radius: 8px; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font-family: var(--cond); font-weight: 800; font-size: 22px;
}
.tr-save span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-save svg { width: 22px; height: 22px; flex: none; }
.tr-save[disabled] { opacity: .7; }
.tr-done { display: flex; align-items: center; gap: 12px; }
.tr-done > span:last-child { display: flex; flex-direction: column; }
.tr-done b { font-size: 15px; font-weight: 800; }
.tr-done small { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------- поиск (холст: «Библия — поиск») ---------- */
.sr-page { padding-top: 16px; }
.sr-bar { display: flex; align-items: center; gap: 10px; }
.sr-in {
  flex: 1; min-width: 0; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-radius: 6px;
  background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); cursor: text;
}
.sr-in > svg { width: 19px; height: 19px; flex: none; }
.sr-in input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 17px; font-weight: 700; -webkit-appearance: none; appearance: none;
}
.sr-in input::-webkit-search-cancel-button { display: none; }
.sr-x { width: 30px; height: 30px; flex: none; border-radius: 50%; display: none; place-items: center; background: var(--mute); color: var(--ink); }
.sr-x.on { display: grid; }
.sr-x svg { width: 14px; height: 14px; stroke-width: 2.4; }
.sr-info { margin: 20px 0 0; }
.sr-info:empty { display: none; }
.sr-scopes { margin-top: 10px; }
.sr-scopes:empty { display: none; }
.sr-top { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sr-top:empty { display: none; }
.sr-res { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sr-bookh { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.sr-bookh:first-child { margin-top: 0; }
.sr-bookh h3 { font-size: 26px; }
.sr-bookh span { font-size: 13px; font-weight: 700; color: var(--muted); }
.sr-card {
  display: block; padding: 12px 14px; border-radius: 8px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink); text-decoration: none; animation: rise .45s ease both;
}
.sr-card b { display: block; font-family: var(--cond); font-weight: 800; font-size: 20px; }
.sr-card > span { display: block; margin-top: 4px; font-family: var(--serif); font-size: 15px; line-height: 1.45; }
.sr-card mark { background: var(--must-t); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.sr-more { height: 44px; border-radius: 6px; background: var(--mute); color: var(--ink); font-size: 14px; font-weight: 800; }
.sr-ref { display: block; padding: 14px 16px; border-radius: 8px; background: var(--ink); color: var(--paper); text-decoration: none; }
.sr-ref-h { display: flex; align-items: center; gap: 10px; }
.sr-ref-h b { font-family: var(--cond); font-weight: 800; font-size: 28px; line-height: 1; }
.sr-ref-h > span { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--coral-t); }
.sr-ref-h svg { width: 16px; height: 16px; stroke-width: 2.4; }
.sr-ref-t { display: block; margin-top: 6px; font-family: var(--serif); font-size: 15px; line-height: 1.45; color: #E9E2D2; }
.sr-book {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 8px;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); text-decoration: none;
}
.sr-book svg { width: 20px; height: 20px; flex: none; color: var(--coral); }
.sr-book svg:last-child { color: var(--dim); }
.sr-book b { font-size: 16px; font-weight: 800; }
.sr-book small { font-size: 13px; font-weight: 600; color: var(--muted); margin-right: auto; }
.sr-sec { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.sr-sec button { color: var(--teal); font-size: 14px; font-weight: 800; }
.sr-hist { display: flex; flex-direction: column; }
.sr-hist button {
  min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 4px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 16px; font-weight: 700; text-align: left;
}
.sr-hist button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-hist svg { width: 18px; height: 18px; flex: none; color: var(--dim); }
.sr-hint { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--muted); }
.sr-fix { padding: 14px 16px; border-radius: 8px; background: var(--must-t); color: var(--ink); text-align: left; font-size: 15px; font-weight: 600; }

/* ---------- мои пометки (холст: «Библия — мои пометки») ---------- */
.mk-title { margin-top: 14px; }
.mk-tabs { margin-top: 14px; padding: 4px; }
.mk-tabs button { height: 40px; font-size: 14px; padding: 0 4px; }
.mk-filter { margin-top: 12px; }
.mk-filter:empty { display: none; }
.mk-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mk-dot.hl-gold { background: var(--hl-gold); }
.mk-dot.hl-olive { background: var(--hl-olive); }
.mk-dot.hl-blue, .mk-dot.hl-lilac { background: var(--hl-blue); }
.mk-dot.hl-terra { background: var(--hl-terra); }
.chip.on .mk-dot { box-shadow: 0 0 0 1.5px var(--paper); }
.mk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mk-card {
  display: block; width: 100%; padding: 12px 14px; border-radius: 8px; color: var(--ink); text-align: left; text-decoration: none;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); animation: rise .45s ease backwards; transition: transform .12s var(--ease);
}
.mk-card:active { transform: scale(.98); }
.mk-card.hl-gold { background: var(--hl-gold); box-shadow: none; }
.mk-card.hl-olive { background: var(--hl-olive); box-shadow: none; }
.mk-card.hl-blue, .mk-card.hl-lilac { background: var(--hl-blue); box-shadow: none; }
.mk-card.hl-terra { background: var(--hl-terra); box-shadow: none; }
.mk-h { display: flex; align-items: baseline; gap: 8px; }
.mk-h b { font-family: var(--cond); font-weight: 800; font-size: 22px; white-space: nowrap; }
.mk-l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-l svg { width: 15px; height: 15px; color: var(--teal); vertical-align: -2px; }
.mk-d { margin-left: auto; flex: none; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mk-t {
  display: -webkit-box; margin-top: 4px; font-family: var(--serif); font-size: 15px; line-height: 1.45;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-t.sans { font-family: var(--sans); font-weight: 600; white-space: pre-line; }

/* ---------- заметка ---------- */
.note-sheet { min-height: 70%; display: flex; flex-direction: column; }
.note-top { display: flex; align-items: center; gap: 10px; }
.note-top h3 { margin: 0; flex: 1; min-width: 0; }
.note-open { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--ink); font-size: 14px; font-weight: 800; }
.note-open svg { width: 16px; height: 16px; }
.note-q { margin: 12px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--must-t); font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.45; max-height: 9.5em; overflow: auto; }
.note-priv { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.note-priv svg { width: 15px; height: 15px; }
.note-in { flex: 1; min-height: 150px; font-size: 16px; line-height: 1.45; }
.note-btns { margin-top: 12px; }

/* ---------- Библия поверх игры (холст: «Библия поверх игры») ---------- */
.bible-ov { position: fixed; left: 0; right: 0; top: var(--vt, 0px); height: var(--vh, 100%); z-index: 90; }
.bo-dim { position: absolute; inset: 0; background: rgba(37, 50, 56, .55); animation: fadein .4s ease both; }
.bo-sheet {
  --bg: var(--paper); --fg: var(--ink); --num: var(--coral); --sub: var(--muted);
  position: absolute; left: 0; right: 0; top: calc(52px + var(--safe-top)); bottom: 0; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; border-radius: 16px 16px 0 0; background: var(--bg); color: var(--fg);
  animation: slideup .55s var(--ease) .05s both;
}
.bo-sheet[data-theme="white"] { --bg: #FFFFFF; }
.bo-sheet[data-theme="sand"] { --bg: var(--must-t); }
.bo-sheet[data-theme="night"] { --bg: var(--ink); --fg: #E9E2D2; --num: var(--coral-t); --sub: var(--onink); }
.bible-ov.out .bo-sheet { animation: boOut .22s ease forwards; }
.bible-ov.out .bo-dim, .bible-ov.out .bo-foot { animation: boFade .22s ease forwards; }
@keyframes boOut { to { transform: translateY(100%); } }
@keyframes boFade { to { opacity: 0; } }
.bo-top { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px 0; }
.bo-back {
  height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 10px; border-radius: 8px;
  background: var(--ink); color: var(--paper); font-family: var(--cond); font-weight: 800; font-size: 21px; line-height: 1;
}
.bo-sheet[data-theme="night"] .bo-back { background: var(--paper); color: var(--ink); }
.bo-back svg { width: 20px; height: 20px; stroke-width: 2.6; }
.bo-top .rd-aa { width: 44px; height: 44px; border-color: var(--fg); color: var(--fg); }
.bo-sheet[data-theme="night"] .bo-top .rd-aa { border-color: var(--onink); color: var(--paper); }
.bo-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px var(--bpad, 20px) 120px; }
.bo-body .rd-num { height: 84px; font-size: 100px; line-height: 84px; }
.bo-body .rd-num span { animation-delay: .3s; }
.bo-body .rd-meta { padding-bottom: 8px; }
.bo-body .rd-text { margin-top: 12px; }
.bo-body .rd-text .v.focus { background-color: var(--must-t); }
.bo-sheet[data-theme="night"] .rd-text .v.focus { background-color: rgba(231, 181, 73, .34); }
.bo-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; max-width: 760px; margin: 0 auto;
  padding: 10px 20px calc(14px + var(--safe-bottom)); background: var(--paper); box-shadow: 0 -1px 0 var(--line);
  animation: fadein .4s ease .2s both;
}
.bo-foot[data-theme="night"] { background: var(--ink); box-shadow: 0 -1px 0 #3B474D; }
.bo-foot p { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bo-foot[data-theme="night"] p { color: var(--onink); }
.bo-ret { height: 54px; font-size: 25px; }
.bo-foot[data-theme="night"] .bo-ret { background: var(--paper); color: var(--ink); }
.bible-ov .bsel { position: absolute; z-index: 3; }
.bible-ov.sel-on .bo-foot { visibility: hidden; }

/* широкий экран: текст не шире удобной строки */
@media (min-width: 900px) {
  .rd-main, .rd-bar { max-width: 760px; margin: 0 auto; }
  .rd-dock { left: 50%; right: auto; width: 520px; margin-left: -260px; }
}