/* ===================================================================
   RESONANCE · список ролей «списки жителей» | legume
   Правится свободно: скрипт только расставляет классы.

   Рамка — картинка-пергамент 1122×1402 (светлая / тёмная). Она держит
   пропорцию, а карточки прокручиваются внутри бумаги — рисунки по краям
   не растягиваются, сколько бы ролей ни было. Цвета берутся из
   переменных темы форума (--links, --text1, --beg500…), тёмная тема —
   класс .dark на странице, как у всего форума.
=================================================================== */

#rs-roles {
  --rsr-name:    var(--links, #A2706A);
  --rsr-text:    var(--text1, #323232);
  --rsr-muted:   var(--text2, #7D7D7D);
  --rsr-card:    rgba(255,255,255,.78);
  --rsr-shadow:  rgba(110,84,60,.16);
  --rsr-shadow2: rgba(110,84,60,.12);
  --rsr-card-hover: rgba(255,255,255,.9);
  --rsr-line:    rgba(50,50,50,.12);
  --rsr-chip:    rgba(255,255,255,.6);
  --rsr-chip-on: var(--links, #A2706A);

  font: 400 12px/1.45 var(--font, Inter), Verdana, Arial, sans-serif;
  color: var(--rsr-text);
  text-align: left;
  margin: 10px 0;
}
.dark #rs-roles {
  --rsr-name:    #E9A584;            /* --links тёмной темы (#B8836E) на сером не читается */
  --rsr-chip-on: #C98A70;
  --rsr-text:    #f1eef0;
  --rsr-muted:   #d8d2d6;
  --rsr-card:    rgba(89,82,80,.82);
  --rsr-shadow:  rgba(0,0,0,.25);
  --rsr-shadow2: rgba(0,0,0,.18);
  --rsr-card-hover: rgba(89,82,80,.9);
  --rsr-line:    rgba(255,255,255,.2);
  --rsr-chip:    rgba(89,82,80,.55);
}
#rs-roles * { box-sizing: border-box; }

/* --- рамка и бумага ---
   Пергамент 1122×1402 целиком, окно 1000 px (ровно полезная ширина
   форума), высота по пропорции картинки ~1250 px. Карточки
   прокручиваются внутри бумаги; поля бумаги — доли картинки, чтобы
   содержимое не заходило на рисунки по краям. */
.rsr-frame {
  position: relative;
  width: 1000px;
  max-width: none;
  margin: 0 -30px;                    /* страница даёт 940 px + по 30 px отступа; рамке — все 1000 */
  aspect-ratio: 1122 / 1402;
  background: url(https://notahub.ru/media/img/restest/roles-light.webp) center / 100% 100% no-repeat;
}
/* контейнер страницы обрезает вылет — снимаем только у того, где список */
#pun-pages .container:has(#rs-roles) { overflow: visible !important; }

.dark .rsr-frame {
  background-image: url(https://notahub.ru/media/img/restest/roles-dark.webp);
}
.rsr-paper {
  position: absolute;
  left: 8%;   right: 8%;
  top: 7%;    bottom: 7%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.rsr-title {
  margin: 0 !important;
  text-align: center;
  font: 700 20px/1.2 var(--font, Inter), sans-serif !important;
  color: var(--rsr-name) !important;
  text-transform: lowercase;
}

.rsr-intro {
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
  text-align: justify;
  font-size: 11.5px;
  line-height: 1.55;
  flex-shrink: 0;
  -webkit-mask: linear-gradient(#000 80%, transparent);
          mask: linear-gradient(#000 80%, transparent);
}

.rsr-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- строка над карточками: расы словами + поиск + «фильтры ▾» --- */
.rsr-bar1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rsr-line);
}
.rsr-races { display: flex; flex-wrap: wrap; align-items: baseline; }
#rs-roles .rsr-race {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--rsr-muted) !important;
  padding: 2px 0 !important;
  font: 500 16px/1.3 var(--font2, 'Alegreya Sans SC'), var(--font, Inter), sans-serif !important;
  text-transform: lowercase;
  cursor: pointer;
  border-bottom: 1px solid transparent !important;
}
.rsr-races { gap: 0 4px; }
.rsr-sep { color: var(--rsr-muted); opacity: .45; margin: 0 6px; }   /* разделитель между словами */
.rsr-race small { font: 400 9px Inter, sans-serif; vertical-align: super; margin-left: 2px; opacity: .6; }
#rs-roles .rsr-race:hover { color: var(--rsr-text) !important; }
#rs-roles .rsr-race.is-on {
  color: var(--rsr-name) !important;
  border-bottom-color: var(--rsr-name) !important;
}

.rsr-tools2 { display: flex; align-items: center; gap: 10px; }
#rs-roles .rsr-q {
  width: 150px;
  background: transparent !important;
  color: var(--rsr-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rsr-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 3px 2px !important;
  height: auto !important;
  font: inherit;
  font-size: 11px;
}
#rs-roles .rsr-q:focus { outline: none; border-bottom-color: var(--rsr-name) !important; }
#rs-roles .rsr-more-btn {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--rsr-muted) !important;
  font: 400 11px/1.3 var(--font, Inter), sans-serif !important;
  cursor: pointer;
  white-space: nowrap;
}
.rsr-more-btn span { display: inline-block; transition: transform .2s; }
#rs-roles .rsr-reset {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--rsr-name) !important;
  font: 400 11px/1.3 var(--font, Inter), sans-serif !important;
  cursor: pointer;
  white-space: nowrap;
}
#rs-roles .rsr-reset:hover { text-decoration: underline; }
#rs-roles .rsr-reset[hidden] { display: none !important; }
#rs-roles .rsr-more-btn.is-on { color: var(--rsr-name) !important; }
.rsr-more-btn.is-on span { transform: rotate(180deg); }

.rsr-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.rsr-filters[hidden] { display: none; }
#rs-roles .rsr-sel {
  background: var(--rsr-chip) !important;
  color: var(--rsr-text) !important;
  border: 1px solid var(--rsr-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 4px 6px !important;
  font: inherit;
  font-size: 11px;
  max-width: 140px;
}
.rsr-count { display: none; }

/* --- карточки: прокрутка внутри бумаги --- */
.rsr-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-content: start;
  gap: 12px;
  padding: 14px 10px 18px 6px;         /* место под тень и плашку ✎✕ у краёв прокрутки */
  scrollbar-width: thin;
}
/* Форма карточки (вогнутые уголки) — маской на подложке .rsr-bg::before,
   а мягкая тень — drop-shadow на самой .rsr-bg: фильтр родителя считается
   по уже вырезанной форме, поэтому тень повторяет уголки. box-shadow
   так не умеет — маска обрезала бы его вместе с карточкой. */
.rsr-card {
  --cut: 9px;
  position: relative;
  isolation: isolate;
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rsr-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: drop-shadow(0 2px 3px var(--rsr-shadow)) drop-shadow(0 8px 14px var(--rsr-shadow2));
  transition: filter .2s;
}
.rsr-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rsr-card);
  transition: background .2s;
  -webkit-mask:
    radial-gradient(circle var(--cut) at 0 0, #0000 98%, #000) top left,
    radial-gradient(circle var(--cut) at 100% 0, #0000 98%, #000) top right,
    radial-gradient(circle var(--cut) at 0 100%, #0000 98%, #000) bottom left,
    radial-gradient(circle var(--cut) at 100% 100%, #0000 98%, #000) bottom right;
  -webkit-mask-size: 51% 51%;
  -webkit-mask-repeat: no-repeat;
          mask:
    radial-gradient(circle var(--cut) at 0 0, #0000 98%, #000) top left,
    radial-gradient(circle var(--cut) at 100% 0, #0000 98%, #000) top right,
    radial-gradient(circle var(--cut) at 0 100%, #0000 98%, #000) bottom left,
    radial-gradient(circle var(--cut) at 100% 100%, #0000 98%, #000) bottom right;
          mask-size: 51% 51%;
          mask-repeat: no-repeat;
}
.rsr-card::before {                                 /* тонкая внутренняя линия */
  content: "";                                      /* отступ × √2 > --cut (9 px), иначе угол линии в вырезе */
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rsr-line);
  pointer-events: none;
}
.rsr-card[data-href] { cursor: pointer; }
.rsr-card[data-href]:hover .rsr-bg::before { background: var(--rsr-card-hover); }
.rsr-card[data-href]:hover .rsr-bg { filter: drop-shadow(0 3px 4px var(--rsr-shadow)) drop-shadow(0 12px 20px var(--rsr-shadow2)); }

.rsr-top { display: flex; align-items: baseline; gap: 6px; }
.rsr-name {
  position: relative;
  font-family: var(--font2, 'Alegreya Sans SC'), var(--font, Inter), sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--rsr-name) !important;
  text-decoration: none !important;
  text-transform: lowercase;
  overflow-wrap: anywhere;
}
.rsr-tools {
  margin-left: auto;
  white-space: nowrap;
  position: absolute;
  right: 0px;
  top: -10px;
  background: var(--beg500);
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px #0000003b;
  z-index: 2;
  opacity: 0;                           /* только при наведении на карточку */
  pointer-events: none;
  transition: opacity .15s;
}
.rsr-card:hover .rsr-tools,
.rsr-card:focus-within .rsr-tools,
.rsr-card.is-tapped .rsr-tools {
  opacity: 1;
  pointer-events: auto;
}
#rs-roles .rsr-edit, #rs-roles .rsr-del {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--rsr-muted) !important;
  cursor: pointer;
  padding: 5px !important;
}

.rsr-sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0 5px;
  border-bottom: 1px solid var(--rsr-line);
  font-size: 12px;
}
.rsr-face { text-transform: lowercase; overflow-wrap: anywhere; }
.rsr-age { margin-left: auto; white-space: nowrap; font-size: 13px; }
.rsr-age small { font-size: 10px; }

.rsr-race-l { display: flex; align-items: center; gap: 6px; padding: 6px 0 0; font-size: 11px; text-transform: lowercase; }

/* локация — мелко, под расой */
.rsr-place-l { display: flex; align-items: center; gap: 6px; padding: 2px 0 6px; font-size: 10px; color: var(--rsr-muted); }
.rsr-pin { font-size: 12px; opacity: .7; }

/* кликабельные метки (раса, вид, город, страна) — выглядят как текст, по наведению подчёркнуты */
#rs-roles .rsr-tag {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  font: inherit !important;
  color: inherit !important;
  text-transform: inherit;
  cursor: pointer;
  border-bottom: 1px dotted transparent !important;
}
#rs-roles .rsr-tag:hover { color: var(--rsr-name) !important; border-bottom-color: currentColor !important; }

/* --- знаки рас: ♁ человек · ☉ божество · ✶ легенда · ☾ существо --- */
.rsr-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  font: normal 400 15px/1 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', serif;
  color: var(--rsr-name);
  font-variant: normal;
  text-transform: none;
  flex-shrink: 0;
}
.rsr-race .rsr-sign { font-size: 13px; margin-right: 3px; vertical-align: -1px; opacity: .8; }
#rs-roles .rsr-race.is-on .rsr-sign { opacity: 1; }

.rsr-about {
  font-size: 11px;
  line-height: 1.5;
  text-align: justify;
  color: var(--rsr-muted);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rsr-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 10px; color: var(--rsr-muted); }
.rsr-foot a { color: var(--rsr-muted) !important; }

.rsr-empty { color: var(--rsr-muted); padding: 12px 0; grid-column: 1 / -1; text-align: center; }

/* --- узкий экран: без рамки, бумага на всю ширину, карточки в 1–2 колонки --- */
@media (max-width: 760px) {
  .rsr-frame, .dark .rsr-frame { aspect-ratio: auto; background: none; width: auto; margin: 0; }
  .rsr-paper { position: static; padding: 12px 0; }
  .rsr-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); overflow: visible; }
}

/* --- окно правки (✎) --- */
.rsr-ov {
  position: fixed; inset: 0; z-index: 100050;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.rsr-modal {
  --m-card: #fff; --m-text: #323232; --m-muted: #7d7d7d; --m-border: rgba(50,50,50,.15); --m-accent: var(--links, #A2706A);
  width: 100%; max-width: 620px;
  background: #f6f3ea; color: var(--m-text);
  border-radius: 10px; padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
  font: 400 12px/1.45 Inter, Verdana, Arial, sans-serif; text-align: left;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.rsr-modal * { box-sizing: border-box; }
.rsr-mh { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; text-transform: lowercase; }
.rsr-modal .rsr-x { background: none !important; border: 0 !important; font-size: 20px; line-height: 1; cursor: pointer; color: var(--m-muted); }
.rsr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.rsr-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rsr-f > span { font-size: 11px; color: var(--m-muted); }
.rsr-in { width: 100%; background: var(--m-card); color: var(--m-text); border: 1px solid var(--m-border); border-radius: 5px; padding: 6px 8px; font: inherit; }
textarea.rsr-in { resize: vertical; }
.rsr-bar { display: flex; align-items: center; gap: 10px; }
.rsr-modal .rsr-btn { background: var(--m-accent) !important; color: #fff !important; border: 0 !important; border-radius: 5px; padding: 7px 16px; font: inherit; cursor: pointer; }
.rsr-modal .rsr-btn:disabled { opacity: .5; }
.rsr-status { color: var(--m-muted); font-size: 11px; }

/* --- страница «игроки и их персонажи» (rs-players.js) --- */
.rsp .rsr-bar1 { display: flex !important; justify-content: center !important; }
.rsp .rsr-q { width: 260px !important; margin: 0 auto !important; text-align: center; }
.rsp .rsr-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rsp-card { cursor: default; }
.rsp-roles { list-style: none; margin: 6px 0 0 !important; padding: 0 !important; border-top: 1px solid var(--rsr-line); }
.rsp-roles li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--rsr-line);
  font-size: 12px;
}
.rsp-roles li:last-child { border-bottom: 0; }
.rsp-roles .rsr-sign { margin-top: 1px; }
.rsp-who { flex: 1; min-width: 0; }
.rsp-who a { color: var(--rsr-text) !important; text-decoration: none !important; text-transform: lowercase; font-weight: 600; }
.rsp-who a:hover { color: var(--rsr-name) !important; }
.rsp-who em { font-style: normal; font-size: 9px; color: var(--rsr-name); text-transform: uppercase; letter-spacing: .06em; }
.rsp-who small { display: block; font-size: 10px; color: var(--rsr-muted); text-transform: lowercase; }
.rsp-ank { font-size: 10px; color: var(--rsr-muted) !important; white-space: nowrap; }

/* окно связки твинков */
.rsp-twlist { display: flex; flex-direction: column; gap: 6px; }
.rsp-twrow { display: flex; gap: 6px; align-items: center; }
.rsp-twrow .rsr-in { flex: 1; }
.rsr-modal .rsp-del, .rsr-modal .rsp-add {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--m-muted); cursor: pointer; font: inherit; padding: 4px 6px !important;
}
.rsr-modal .rsp-add { align-self: flex-start; color: var(--m-accent); padding-left: 0 !important; }
.rsr-modal .rsp-del:hover { color: #a33a2a; }
.rsp-none { margin: 0; font-size: 11px; color: var(--m-muted); }
.rsr-modal .rsp-dissolve { background: none !important; color: #a33a2a !important; border: 1px solid rgba(163,58,42,.4) !important; }

/* --- окно ✎: новые значения справочников подсвечены --- */
.rsr-new .rsr-in { border-color: #c98a2e !important; background: rgba(255,214,140,.22) !important; }
.rsr-new > span::after { content: " · новое"; color: #b0731d; }
.rsr-hint { font-style: normal; font-size: 10px; line-height: 1.35; color: #b0731d; }
.rsr-hint:empty { display: none; }
.rsr-modal .rsr-pick {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; font: inherit; color: var(--m-accent) !important;
  text-decoration: underline dotted; cursor: pointer;
}