/* Меню персонажа «Книга» — стиль варианта A, HP-кольцо из варианта C. */
body.book-open { overflow: hidden; }

/* Верх рельса убран: имя и портрет уже в шапке листа. */
.book-rail .book-brand,
.book-rail .book-who { display: none; }

.book {
  position: fixed;
  inset: 0;
  z-index: 80;
  background:
    radial-gradient(1100px 650px at 18% -5%, #16202d 0%, #0a0f16 55%, #05070a 100%);
  color: #f4efe4;
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}
.book[hidden] { display: none; }
.book-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; }
.book-rail {
  border-right: 1px solid #2a3546;
  background: linear-gradient(180deg, #0e1520, #080c12);
  padding: 26px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  min-height: 0;
}
.book-rail:after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid #1c2531;
  pointer-events: none;
}
.book-brand {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid #c79a52;
  display: grid; place-items: center;
  font: 600 24px Georgia, serif; color: #f2ce88;
  background: radial-gradient(circle, #1d2632, #0c1118);
  box-shadow: 0 0 0 4px #0a0f15, 0 0 24px #e7c17a22;
}
.book-who b { display: block; font-family: Georgia, serif; font-size: 18px; letter-spacing: .4px; }
.book-who span { color: #a7b0bf; font-size: 12px; }
.book-nav { display: flex; flex-direction: column; gap: 6px; }
.book-nav button {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid transparent; background: none;
  color: #c9d1dc; border-radius: 10px; cursor: pointer;
  font: 500 13.5px "Segoe UI", sans-serif; text-align: left;
}
.book-icon {
  width: 24px; height: 24px; flex: 0 0 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.book-nav button .book-icon {
  box-sizing: border-box; padding: 3px;
  border: 1px solid #2a3443; border-radius: 7px;
  color: #d9b36c; background: #0c1118;
}
.book-nav button:hover { background: #101823; border-color: #2a3546; }
.book-nav button.active {
  background: linear-gradient(90deg, #1a2430, #121a24);
  border-color: #3a4658; color: #fff;
  box-shadow: inset 3px 0 0 #d9b36c;
}
.book-nav button.has-new:after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #c79a52; margin-left: auto; box-shadow: 0 0 6px #c79a5288;
}
.book-rail-foot {
  margin-top: auto; color: #6f7887; font-size: 11.5px; line-height: 1.55;
  border-top: 1px solid #1b2330; padding-top: 14px;
}
.book-rail-foot b { color: #c79a52; font-weight: 500; }
.book-rail-actions { display: flex; flex-direction: column; gap: 6px; }
.book-rail-actions .btn {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 11.5px;
  justify-content: flex-start;
}
@media (min-width: 761px) {
  .book-footer #book-save,
  .book-footer #book-settings,
  .book-footer #book-home { display: none; }
}
.book-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.book-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px 14px; gap: 18px;
}
.book-kicker {
  color: #c79a52; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; margin: 0 0 4px;
}
.book-head h2 { font: 600 28px Georgia, serif; margin: 0; letter-spacing: .3px; }
.book-head-right { display: flex; align-items: center; gap: 12px; }
.book-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #2c3645; background: #0d131b; color: #9aa3b1; cursor: pointer;
}
.book-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 32px 24px; }
.book-panel { display: none; }
.book-panel.active { display: block; }
.book-vitals {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.book-sheet-tabs {
  display: flex; gap: 4px; margin: 0 0 12px;
  border-bottom: 1px solid #25303f; overflow-x: auto;
}
.book-sheet-tabs button {
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: #8d9aa9; padding: 8px 12px; font: 600 12px Georgia, serif;
  cursor: pointer; white-space: nowrap;
}
.book-sheet-tabs button:hover { color: #eee6d6; }
.book-sheet-tabs button.active { color: #f2ce88; border-bottom-color: #c79a52; }
.book-vital {
  background: linear-gradient(160deg, #141d28, #0d131b);
  border: 1px solid #2c3849; border-radius: 11px;
  padding: 9px 11px; min-width: 0;
}
.book-vital span {
  display: block; color: #8d9aa9; font-size: 9px; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.book-vital b { font: 600 19px Georgia, serif; color: #eee6d6; line-height: 1.2; }
.book-vital small { display: block; color: #a7b0bf; font-size: 9.5px; margin-top: 2px; }
.book-vital.is-hp b { color: #f2ce88; }
#book-sheet.diary-sheet {
  background:
    radial-gradient(circle at 15% 10%, #fff8e8 0, transparent 40%),
    repeating-linear-gradient(0deg, #ece1ca 0 27px, #e4d7bd 28px);
  color: #2b2118; border: 1px solid #c9b99b; border-radius: 14px;
  padding: 16px; box-shadow: inset 0 0 70px #6b4b2014;
}
#book-sheet.diary-sheet .book-card,
#book-sheet.diary-sheet .book-vital {
  background: #f8f0df; border-color: #c9b99b; color: #2b2118;
  box-shadow: 0 7px 18px #5b3d1718;
}
#book-sheet.diary-sheet .book-card h3,
#book-sheet.diary-sheet .book-hero h2,
#book-sheet.diary-sheet .book-vital b,
#book-sheet.diary-sheet .book-ab b,
#book-sheet.diary-sheet .book-save b,
#book-sheet.diary-sheet .book-skill b,
#book-sheet.diary-sheet .book-row b { color: #38291b; }
#book-sheet.diary-sheet .book-card h3 small,
#book-sheet.diary-sheet .book-vital span,
#book-sheet.diary-sheet .book-row span,
#book-sheet.diary-sheet .book-hero p,
#book-sheet.diary-sheet .book-muted { color: #7a6650; }
#book-sheet.diary-sheet .book-row { border-bottom-color: #d8c8ac; }
#book-sheet.diary-sheet .book-tags span { background: #efe3cc; border-color: #c9b99b; color: #4c3a27; }
#book-sheet.diary-sheet .book-sheet-tabs { border-bottom-color: #c9b99b; }
#book-sheet.diary-sheet .book-sheet-tabs button { color: #7a6650; }
#book-sheet.diary-sheet .book-sheet-tabs button.active { color: #6b4b20; border-bottom-color: #9a7434; }
#book-sheet.diary-sheet .book-inv-summary { border-top-color: #d8c8ac; color: #5f4b34; }
#book-sheet.diary-sheet .book-portrait { background: #efe3cc; border-color: #9a7434; color: #6b4b20; }
.book-inv-summary {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed #25303f;
  color: #b3bcc9; font-size: 12px;
}
.book-inv-summary em { color: #c79a52; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.book-sheet-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 14px; align-items: start;
}
.book-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.book-card {
  position: relative;
  background: linear-gradient(160deg, #141d28, #0d131b);
  border: 1px solid #2c3849;
  border-radius: 14px;
  padding: 15px 17px;
  box-shadow: 0 12px 30px #0006, inset 0 1px 0 #ffffff08;
}
.book-card:before, .book-card:after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: #c79a52; opacity: .55;
}
.book-card:before { left: 6px; top: 6px; border-left: 1px solid; border-top: 1px solid; }
.book-card:after { right: 6px; bottom: 6px; border-right: 1px solid; border-bottom: 1px solid; }
.book-card h3 {
  font: 600 16px Georgia, serif; margin: 0 0 11px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.book-card h3 small { color: #a7b0bf; font: 400 11px "Segoe UI", sans-serif; }
.book-hero { display: flex; align-items: center; gap: 14px; }
.book-portrait {
  width: 66px; height: 66px; border-radius: 50%;
  border: 1px solid #7b6236; display: grid; place-items: center;
  font: 600 27px Georgia, serif; color: #f2ce88;
  background: radial-gradient(circle at 35% 30%, #2a3443, #0b1017);
  flex: 0 0 auto;
}
.book-hero h2 { font: 600 24px Georgia, serif; margin: 0; line-height: 1.1; }
.book-hero p { margin: 2px 0 0; color: #a7b0bf; font-size: 12px; }
.book-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.book-tags span {
  border: 1px solid #2c3849; background: #0d131b;
  color: #b6bfcc; padding: 2px 7px; border-radius: 6px; font-size: 10.5px;
}
.book-ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.book-ab {
  background: #0c131b; border: 1px solid #2a3546;
  border-radius: 10px; padding: 9px 6px; text-align: center;
}
.book-ab span { display: block; color: #a7b0bf; font-size: 9.5px; letter-spacing: .14em; }
.book-ab b { display: block; font: 600 21px Georgia, serif; margin-top: 2px; }
.book-ab small { color: #f2ce88; font-size: 10.5px; }
.book-saves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.book-save {
  display: flex; justify-content: space-between; padding: 6px 8px;
  border-radius: 7px; background: #0c131b; border: 1px solid #26303f; font-size: 12px;
}
.book-save b { color: #dbe3ec; }
.book-save.prof { border-color: #4d3d24; background: #151208; color: #f2ce88; }
.book-save.prof b { color: #f2ce88; }
.book-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.book-skill {
  display: flex; justify-content: space-between; gap: 6px;
  border-bottom: 1px dashed #25303f; padding: 4px 0; font-size: 11.5px;
}
.book-skill em { color: #7f8b99; font-style: normal; font-size: 10px; }
.book-skill b { color: #dbe3ec; font-weight: 500; }
.book-skill.prof span { color: #f2ce88; }
.book-skill.expert span:before { content: "◆ "; color: #f2ce88; }
.book-skill.prof span:before { content: "• "; color: #f2ce88; }
.book-skill:not(.prof) span:before { content: "· "; color: #5d6876; }

.book-vitals { align-items: stretch; }
.book-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; }
.book-mini div { background: #0b1219; border: 1px solid #243243; border-radius: 9px; padding: 7px 9px; }
.book-mini span { display: block; color: #8d9aa9; font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; }
.book-mini b { font: 600 17px Georgia, serif; color: #eee6d6; }
.book-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #25303f; font-size: 12px; }
.book-row:last-child { border-bottom: 0; }
.book-row span { color: #b3bcc9; }
.book-row b { color: #e8e2d4; font-weight: 500; text-align: right; }
.book-muted { color: #a7b0bf; font-size: 11.5px; }
.book-note { color: #b3bcc9; font-size: 12px; margin: 3px 0 0; }
.book-feature { border-bottom: 1px solid #25303f; padding-bottom: 8px; margin-bottom: 8px; }
.book-feature:last-child { border: 0; margin: 0; padding: 0; }
.book-feature b { font-size: 12.5px; }
.book-feature p { margin: 2px 0 0; color: #b3bcc9; font-size: 11.5px; }
.book-spell { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #25303f; padding: 5px 0; font-size: 12px; }
.book-spell span { color: #a7b0bf; font-size: 10.5px; }
.book-slots { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.book-slot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.book-slot i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #4a3b23; background: #0d131b; }
.book-slot i.on { background: #f2ce88; border-color: #f2ce88; }
.book-footer {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  padding: 12px 32px 16px; border-top: 1px solid #2a3546;
  background: linear-gradient(180deg, #0a1018cc, #080c12);
}
.book-footer .book-saved { margin-right: auto; color: #7f8b99; font-size: 11.5px; }
.book-footer .btn { min-height: 38px; }
.book-footer .btn, .book-rail-foot .btn { display: inline-flex; align-items: center; gap: 7px; }
.book-footer .book-icon, .book-rail-foot .book-icon { width: 18px; height: 18px; flex-basis: 18px; }
.book-footer .btn-primary {
  background: linear-gradient(180deg, #f3d391, #d9ae62); color: #1a1305; border-color: #b78c45;
}
.book-footer .btn-ghost { border: 1px solid #2c3645; color: #c9d1dc; background: #0d131b; }

.book-page-title { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 14px; }
.book-page-title h2 { font: 600 24px Georgia, serif; margin: 0; }
.book-page-title span { color: #a7b0bf; font-size: 12px; }
.book-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.book-quest { border-bottom: 1px solid #25303f; padding: 0 0 10px; margin-bottom: 10px; }
.book-quest:last-child { border: 0; margin: 0; padding: 0; }
.book-quest h4 { font: 600 15px Georgia, serif; margin: 0 0 3px; display: flex; justify-content: space-between; gap: 8px; }
.book-quest h4 span { color: #f2ce88; font: 400 10.5px "Segoe UI", sans-serif; }
.book-quest p { color: #b3bcc9; font-size: 11.5px; margin: 0; }
.book-quest em { color: #7f8b99; font-style: normal; font-size: 10.5px; }

.book-inv { width: 100%; border-collapse: collapse; font-size: 12px; }
.book-inv th {
  text-align: left; color: #7f8897; font-weight: 500; font-size: 10px;
  text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 1px solid #2a3442; padding: 7px 6px;
}
.book-inv td { padding: 8px 6px; border-bottom: 1px solid #1a222e; color: #e2dccd; }
.book-inv td small { display: block; color: #78818f; font-size: 10px; }
.book-inv td.r { text-align: right; color: #b3bcc9; }
.book-inv-group td {
  background: #0b1219; color: #c79a52; font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em; padding: 6px;
}
.book-totals { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: #a7b0bf; font-size: 12px; }
.book-totals b { color: #f2ce88; font-weight: 500; }

.book-search {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.book-search input {
  flex: 1; background: #0b1118; border: 1px solid #2a3442;
  border-radius: 9px; color: #f4efe4; padding: 9px 12px; font: inherit;
}
.book-lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.book-lore-card { padding: 0; }
.book-lore-card summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
}
.book-lore-card summary::-webkit-details-marker { display: none; }
.book-lore-card summary b { font: 600 15px Georgia, serif; }
.book-lore-card summary span { color: #c79a52; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.book-lore-body { padding: 0 16px 14px; color: #b3bcc9; font-size: 12px; }
.book-lore-body p { margin: 0 0 8px; }
.book-lore-body .book-feature { border-color: #233140; }
.book-empty { color: #7f8b99; font-size: 12px; padding: 14px; border: 1px dashed #2a3546; border-radius: 10px; }

@media (max-width: 1100px) {
  .book-vitals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-vital span { white-space: normal; }
  .book-sheet-grid { grid-template-columns: 1fr 1fr; }
}

/* Старая боковая панель заменена книгой: чат занимает всю ширину. */
.game-layout { grid-template-columns: minmax(0, 1fr) !important; }
#panel-combat, #panel-bestiary { min-height: 100%; }
#book-combat, #book-bestiary { padding-bottom: 8px; }
#book-combat .combat-empty { border: 1px solid #2c3849; border-radius: 14px; background: linear-gradient(160deg, #141d28, #0d131b); }
#book-bestiary .beast-head { margin-top: 4px; }
@media (max-width: 760px) {
  .book-shell {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100dvh;
  }
  .book-rail {
    position: relative; width: 56px; transform: none;
    flex-direction: column; align-items: center; gap: 10px; min-width: 0;
    padding: 8px 5px; border-right: 1px solid #1e2a38; border-bottom: 0;
  }
  .book-rail:after { display: none; }
  .book-brand, .book-who, .book-rail-foot { display: none; }
  .book-nav {
    flex-direction: column; overflow: visible; gap: 5px;
    flex: 1; min-width: 0; width: 100%; align-items: center;
  }
  .book-nav button {
    width: 100%; padding: 9px 0; white-space: nowrap;
    justify-content: center; gap: 0;
  }
  .book-nav button span { display: none; }
  .book-nav button .book-icon { width: 26px; height: 26px; flex-basis: 26px; }
  .book-head { padding: 12px 8px 6px; }
  .book-head h2 { font-size: 20px; }
  .book-scroll { padding: 0 8px 16px; }
  .book-footer { padding: 8px 8px max(12px, env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 6px; }
  .book-footer .book-saved { width: 100%; margin: 0 0 2px; }
  .book-footer .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 12px; min-height: 36px; }
  .book-sheet-grid { grid-template-columns: 1fr; }
  .book-vitals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .book-vital span { white-space: normal; }
  .book-inv th:last-child, .book-inv td:last-child { display: none; }
  .book-lore-grid, .book-grid2 { grid-template-columns: 1fr; }
}

/* ---------- история мира и задания ---------- */
.world-tabs { margin-top: 0; }
.world-list { display: flex; flex-direction: column; gap: 8px; }
.world-card {
  background: linear-gradient(160deg, #141d28, #0d131b);
  border: 1px solid #2c3849;
  border-radius: 12px;
  overflow: hidden;
}
.world-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
.world-card summary::-webkit-details-marker { display: none; }
.world-card summary b { font: 600 15px Georgia, serif; color: #e8eef7; min-width: 0; overflow-wrap: anywhere; }
.world-badge {
  max-width: 55%;
  color: #d9b36c;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.25;
  text-align: right;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.world-card-body {
  display: grid;
  gap: 2px;
  padding: 0 14px 14px;
  border-top: 1px solid #2a3546;
}
.world-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed #2a3546;
  font-size: 12px;
}
.world-row:last-child { border-bottom: 0; }
.world-row span { flex: 0 0 42%; color: #8a97a8; }
.world-row b { color: #e8eef7; font-weight: 500; text-align: right; white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.world-desc {
  margin: 8px 0 6px;
  color: #c9d2df;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.world-muted { margin: 6px 0 0; color: #7f8b99; font-size: 11px; }
.quest-card { border-bottom: 1px solid #2a3546; }
.quest-card:last-child { border-bottom: 0; }
.quest-card summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
}
.quest-card summary::-webkit-details-marker { display: none; }
.quest-card summary b { font: 600 14px Georgia, serif; color: #e8eef7; }
.quest-status {
  color: #d9b36c;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.quest-card.done .quest-status { color: #7f8b99; }
.quest-body { padding: 2px 0 10px; }
.quest-desc {
  margin: 4px 0 6px;
  color: #c9d2df;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-line;
}
.quest-steps { display: grid; gap: 3px; margin: 6px 0 8px; }
.quest-step { display: flex; align-items: baseline; gap: 7px; color: #c9d2df; font-size: 11.5px; }
.quest-step i {
  flex: 0 0 9px;
  width: 9px; height: 9px;
  border: 1px solid #334157;
  border-radius: 50%;
  background: #0d131b;
}
.quest-step.done { color: #7f8b99; }
.quest-step.done i { background: #d9b36c; border-color: #d9b36c; }
@media (max-width: 420px) {
  .world-row { flex-direction: column; gap: 1px; }
  .world-row span { flex-basis: auto; }
  .world-row b { text-align: left; }
}