/* ============================================================
   Story Play — стили (на базе дизайн-системы SPRQ)
   Dark-fantasy: угольный фон, пергамент/золото, шрифт Oswald.
   Без тонких обводок, без скруглений (резаные углы).
   ============================================================ */

/* Цвета, шрифты и отступы вынесены в общую прослойку public/design-system.css
   (единый источник стиля). Она подключается в HTML ПЕРЕД этим файлом.
   Здесь — только специфичная вёрстка экранов игры. */

* { box-sizing: border-box; }
body { margin:0; font-family:var(--font-ui); background:var(--surface-app); color:var(--text-body); height:100vh; -webkit-font-smoothing:antialiased; }
.center { display:flex; align-items:center; justify-content:center; }

.logo { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  color:var(--c-harvest-gold); margin:0; font-size:32px; }
.logo.small { font-size:20px; }
/* Логотип-картинка вместо надписи в карточке входа — высота ограничена */
.logo-img { display:block; height:72px; width:auto; margin:0 auto; }
/* Логотип в лобби — во всю ширину контента панели (как плашка «ЛОББИ») */
.logo-img.small { width:100%; height:auto; margin:0; align-self:stretch; flex:none; }

/* ===== ВХОД ===== */
.card { background:var(--surface-card); border:none; border-radius:0; padding:var(--sp-10); }
.login-card { width:340px; text-align:center; box-shadow:var(--shadow-popover); }
.subtitle { color:var(--text-muted); margin-top:var(--sp-2); text-transform:uppercase; font-size:12px;  }
form { display:flex; flex-direction:column; gap:var(--sp-6); margin-top:var(--sp-8); text-align:left; }
label { display:flex; flex-direction:column; gap:var(--sp-2); font-size:12px; font-weight:700; text-transform:uppercase;  color:var(--text-muted); }
/* Поля ввода (input/textarea/.num-input) — стандарт в прослойке public/design-system.css */
/* Кнопки (button, .ghost, .btn-add) — стандарт в прослойке public/design-system.css.
   Здесь остаются только специфичные кнопки экранов (.menu-btn, .cropper-btn, .inv-btn и т.п.). */
/* .error — стандарт в прослойке public/design-system.css */
.hint { color:var(--text-faint); font-size:11px; text-transform:uppercase;  margin-top:var(--sp-8); }
.hint a, .hint a:visited { color:var(--accent-strong); text-decoration:none; font-weight:600; }
.hint a:hover { color:var(--c-pale-cream); text-decoration:underline; }

/* ===== ЛОББИ ===== */
.lobby { display:grid; grid-template-columns:300px 1fr; height:100vh; }
.sidebar { background:var(--surface-panel); border:none; padding:var(--sp-8) var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-6); overflow-y:auto; }
.user-box { display:flex; align-items:center; justify-content:space-between; background:var(--surface-card); border:none; border-radius:0; padding:10px 12px; font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); }
.role-badge { font-size:11px; color:var(--text-muted); font-weight:500; }
.menu { display:flex; flex-direction:column; gap:var(--sp-4); }
.menu-btn { width:100%; }
.menu-btn.ghost { background:var(--surface-card); border:none; color:var(--text-muted); }
.menu-btn.ghost:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.section-title { font-family:var(--font-display); font-size:12px; font-weight:700; text-transform:uppercase;  color:var(--text-faint); margin:var(--sp-4) 0 0; }

.presence { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.presence li { display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-card); border:none; border-radius:0; padding:8px 10px; font-size:14px; text-transform:uppercase;  }
.dot { width:8px; height:8px; border-radius:50%; background:var(--role-player); flex:none; box-shadow:0 0 6px currentColor; }
.p-role { margin-left:auto; font-size:11px; color:var(--text-muted); }
.role-master { color:var(--role-master); }
.role-podmaster { color:var(--role-podmaster); }
.role-player { color:var(--role-player); }
#logoutBtn { margin-top:auto; }

/* ===== СПИСОК НОВЕЛЛ ===== */
.novella-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.novella-empty { color:var(--text-faint); font-size:12px; font-style:italic; padding:var(--sp-2) 0; }
/* Плашка новеллы = строка списка из образца (.list-row): миниатюра во всю высоту слева,
   текст по центру, крестик прижат вправо с отступом от края. */
.novella-item { display:flex; align-items:center; gap:var(--sp-5); background:var(--surface-card); border:none; border-radius:0; padding:0; min-height:48px; cursor:pointer; transition:filter var(--dur) var(--ease); }
.novella-item:hover { filter:brightness(1.2); }
.novella-thumb { width:56px; align-self:stretch; flex:none; border:none; border-radius:0; background:var(--surface-slot) center/cover no-repeat; }
.novella-info { display:flex; flex-direction:column; min-width:0; flex:1; }
.novella-item > .ic-btn { margin-left:auto; margin-right:var(--sp-5); }
.novella-name { font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.novella-scenes { font-size:11px; color:var(--text-muted); text-transform:uppercase; }
/* .novella-del удалён — кнопки удаления теперь .ic-btn (прослойка) */

/* ===== ЧАТ ===== */
.chat-panel { display:flex; flex-direction:column; padding:var(--sp-8); gap:var(--sp-6); overflow:hidden; }
.chat-log { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-5); background:var(--surface-inset); border:none; border-radius:0; }
.msg { font-size:16px; line-height:1.4; }
.msg-name { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  margin-right:var(--sp-4); }
.msg-time { color:var(--text-faint); font-size:11px; margin-right:var(--sp-4); font-variant-numeric:tabular-nums; }
.msg-text { color:var(--text-body); }
.msg.system { color:var(--text-faint); font-style:italic; text-align:center; }
.chat-input { flex-direction:row; gap:var(--sp-5); margin:0; }
.chat-input input { flex:1; }
.chat-input button { padding:10px 20px; }

/* ===== ГОЛОС ===== */
.voice-box { display:flex; flex-direction:column; gap:var(--sp-4); }
#voiceToggle.active { background:var(--danger); color:var(--text-strong); }
#voiceToggle.active:hover { filter:brightness(1.12); }
.menu-btn.ghost.muted { background:var(--danger-deep); color:var(--text-strong); }
.voice-list { list-style:none; padding:0; margin:var(--sp-2) 0 0; display:flex; flex-direction:column; gap:var(--sp-2); }
.voice-row { display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-card); border:none; border-radius:0; padding:6px 8px; font-size:13px; text-transform:uppercase;  }
.v-dot { width:8px; height:8px; border-radius:50%; background:var(--role-master); flex:none; box-shadow:0 0 6px currentColor; }
.v-name { color:var(--text-body); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.v-vol { width:70px; flex:none; accent-color:var(--c-harvest-gold); }
.voice-note { color:var(--danger); font-size:11px; margin:var(--sp-2) 0 0; }

/* ===== МОДАЛКА ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:300; }
.modal-overlay[hidden] { display:none; }
.modal-box { width:420px; max-height:90vh; overflow-y:auto; background:var(--surface-card); border:none; border-radius:0; padding:var(--sp-8); box-shadow:var(--shadow-popover); display:flex; flex-direction:column; gap:var(--sp-6); }
.modal-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  color:var(--text-strong); margin:0; }
.cover-pick { display:flex; gap:var(--sp-5); align-items:center; }
.cover-preview { width:160px; height:90px; flex:none; border:none; border-radius:0; background:var(--surface-inset) center/cover no-repeat; }
.cover-preview.empty::after { content:"16:9"; display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-faint); font-size:12px;  }
.cover-pick-btns { display:flex; flex-direction:column; gap:var(--sp-4); flex:1; }
.modal-actions { display:flex; gap:var(--sp-5); }

/* ===== ШАПКА ОКНА (оранжевая полоса с названием и крестиком) ===== */
/* Применяется во всех окнах: модалки лобби, редактор персонажа, обрезчик, лист игрока.
   Полоса во всю ширину окна (отрицательные поля компенсируют внутренний отступ окна sp-8). */
/* .win-head, .win-title — стандарт в прослойке public/design-system.css */
/* Крестик закрытия в шапке — стандарт .ic-btn в прослойке public/design-system.css */
/* Окна «Новая новелла» и «Сохранить как шаблон»: компактная золотая шапка высотой 32px (крестик 32×32 в неё впритык). */
#createModal .win-head, #tplModal .win-head { height:32px; min-height:32px; padding:0 var(--sp-6); }
/* Список шаблонов / тип шаблона — фирменный .sp-dd, растянут на всю ширину поля (как «Название»). */
#templateField .sp-dd, #tplTypeField .sp-dd { display:flex; }

/* ===== ОБРЕЗАТЕЛЬ ===== */
.cropper-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); display:flex; align-items:center; justify-content:center; z-index:400; }
.cropper-box { background:var(--surface-card); border:none; border-radius:0; padding:var(--sp-8); box-shadow:var(--shadow-popover); display:flex; flex-direction:column; gap:var(--sp-5); }
.cropper-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  color:var(--text-strong); margin:0; }
/* Рамка кадрирования — функциональная (показывает область экрана), её оставляем */
.cropper-frame { position:relative; overflow:hidden; background:var(--c-pitch); border:var(--bw) solid var(--c-harvest-gold); cursor:grab; user-select:none; }
.cropper-frame:active { cursor:grabbing; }
.cropper-img { position:absolute; max-width:none; user-select:none; -webkit-user-drag:none; }
.cropper-row { display:flex; align-items:center; gap:var(--sp-5); }
.cropper-lbl { font-size:12px; text-transform:uppercase;  color:var(--text-muted); }
.cropper-zoom { flex:1; width:auto; }  /* вид — стандарт .slider в прослойке */
.cropper-hint { font-size:12px; color:var(--text-muted); margin:0; max-width:600px; }
.cropper-actions { display:flex; gap:var(--sp-5); }
.cropper-btn { background:var(--surface-panel); color:var(--text-body); border:none; border-radius:0; }
.cropper-btn.primary { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.cropper-btn.ghost { background:var(--surface-card); color:var(--text-muted); }

/* Окно обрезки «рамкой по картинке» (img-crop-tools.js).
   Граница выделения = контраст «затемнение/свет» + золотые уголки, без тонких линий. */
.crop2-box { max-width:760px; }
.crop2-body { display:flex; gap:var(--sp-6); align-items:flex-start; }
.crop2-stage { position:relative; overflow:hidden; background:var(--c-pitch); user-select:none; flex:none; }
.crop2-img { position:absolute; left:0; top:0; pointer-events:none; -webkit-user-drag:none; z-index:0; }
.crop2-veil { position:absolute; background:rgba(0,0,0,0.55); pointer-events:none; z-index:1; }
.crop2-sel { position:absolute; cursor:move; z-index:1; }
.crop2-handle { position:absolute; width:16px; height:16px; background:var(--c-harvest-gold); z-index:2; }
.crop2-handle[data-h="nw"], .crop2-handle[data-h="se"] { cursor:nwse-resize; }
.crop2-handle[data-h="ne"], .crop2-handle[data-h="sw"] { cursor:nesw-resize; }
.crop2-panel { display:flex; flex-direction:column; gap:var(--sp-5); width:236px; flex:none; align-self:stretch; }
.crop2-cap { font-size:12px; text-transform:uppercase; color:var(--text-muted); }
.crop2-grid-btns { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.crop2-grid-btns .cropper-btn { padding:var(--sp-5); font-size:16px; }
.crop2-shape-btns { display:flex; gap:var(--sp-5); }
.crop2-shape-btns .cropper-btn { flex:1; }
.crop2-spacer { flex:1; min-height:var(--sp-5); }
.crop2-do { padding:var(--sp-5); }
.crop2-hint { max-width:none; }
/* Предпросмотр линий реза при выборе доли (2×2 и т.п.): полосы-зазоры заливкой, без обводок.
   В режиме сетки прячем ручную рамку, показываем линии реза. */
.crop2-cuts { position:absolute; inset:0; pointer-events:none; z-index:2; display:none; }
.crop2-cut { position:absolute; background:rgba(0,0,0,0.55); }
.crop2-stage.grid .crop2-cuts { display:block; }
.crop2-stage.grid .crop2-sel,
.crop2-stage.grid .crop2-veil,
.crop2-stage.grid .crop2-handle { display:none; }

/* Окно «Редактировать участок» (инпейнтинг, img-inpaint-tool.js).
   Выделение — полупрозрачная заливка (не линия); углы ровные, обводок нет. */
/* Окно «Редактировать участок» — во весь экран: крупная картинка + панель кнопок помещается */
.inp-box { max-width:none; width:96vw; height:94vh; }
.inp-body { display:flex; gap:var(--sp-6); align-items:flex-start; flex:1; min-height:0; }
.inp-stage { position:relative; overflow:hidden; background:var(--c-pitch); user-select:none; flex:none; cursor:crosshair; align-self:center; }
.inp-img { position:absolute; left:0; top:0; pointer-events:none; -webkit-user-drag:none; z-index:0; }
.inp-vis { position:absolute; left:0; top:0; pointer-events:none; z-index:1; }
/* Кружок-курсор кисти — заливкой, полупрозрачно (без обводки) */
.inp-cursor { position:absolute; z-index:2; pointer-events:none; transform:translate(-50%,-50%);
  background:rgba(193,145,60,0.28); border-radius:50%; }
.inp-cursor[hidden] { display:none; }
.inp-panel { display:flex; flex-direction:column; gap:var(--sp-4); width:268px; flex:none; align-self:stretch; overflow-y:auto; }
.inp-cap { font-size:12px; text-transform:uppercase; color:var(--text-muted); }
.inp-tools { display:flex; gap:var(--sp-4); }
.inp-tools .cropper-btn { flex:1; }
.inp-size-row { display:flex; align-items:center; gap:var(--sp-4); }
.inp-size-row .inp-size { flex:1; width:auto; min-width:0; }
.inp-models { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.inp-cost { color:var(--text-faint); font-size:11px; }
.inp-model.primary .inp-cost { color:var(--text-on-gold); }
.inp-lbl { display:flex; flex-direction:column; gap:var(--sp-3); font-size:12px; text-transform:uppercase; color:var(--text-muted); }
.inp-text { min-height:66px; resize:vertical; }
.inp-err { min-height:0; color:var(--danger); max-width:none; }
.inp-err:empty { display:none; }
.inp-spacer { flex:1; min-height:var(--sp-4); }
.inp-go { padding:var(--sp-5); }
.inp-after { display:flex; gap:var(--sp-4); }
.inp-after .cropper-btn { flex:1; }
.inp-hint { max-width:none; }

/* ===== ЭКРАН НОВЕЛЛЫ ===== */
.game { display:grid; grid-template-columns:280px 1fr; height:100vh; }
.game-side { background:var(--surface-panel); border:none; padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5); overflow:hidden; }
/* Середина (сцены) скроллится, шапка и нижняя панель — закреплены */
.game-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-5); }
.game-head { display:flex; flex-direction:column; gap:var(--sp-4); }
/* Строка названия новеллы + шестерёнка настроек новеллы */
.game-title-row { display:flex; align-items:center; gap:var(--sp-4); }
.game-title-row .nov-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nov-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  color:var(--c-harvest-gold); font-size:20px; margin:0; }
.scene-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-4); flex:1; }
/* Строка сцены = строка списка (.list-row из образца): миниатюра во всю высоту,
   справа в две строки название + подпись, крестик прижат вправо. */
.scene-item { position:relative; display:flex; align-items:center; gap:var(--sp-5); background:var(--surface-card); border:none; border-radius:0; padding:0; min-height:48px; cursor:pointer; transition:filter var(--dur) var(--ease); }
.scene-item:hover { filter:brightness(1.2); }
/* Активная сцена — оранжевое выделение (его оставляем) */
/* Выбранная сцена — заливка (без обводки): оранжевый фон, тёмный текст/иконки */
.scene-item.active { background:var(--c-harvest-gold); filter:none; }
.scene-item.active .scene-name, .scene-item.active .scene-sub { color:var(--text-on-gold); }
.scene-item.active .ic-btn { color:var(--text-on-gold); }
/* Миниатюра: слева, во всю высоту строки, без отступов */
.scene-thumb { width:56px; align-self:stretch; flex:none; border:none; border-radius:0; background:var(--surface-slot) center/cover no-repeat; }
.scene-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.scene-name { font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene-sub { font-size:11px; color:var(--text-muted); text-transform:uppercase;  }
/* Кнопки сцены (шестерёнка + крестик) прижаты вправо, с небольшим отступом от края */
.scene-acts { margin-left:auto; margin-right:var(--sp-5); display:flex; align-items:center; gap:var(--sp-2); }
.scene-acts .ic-btn { width:28px; height:28px; background:transparent; }
.scene-acts .ic-btn:hover { background:transparent; filter:brightness(1.2); }
.scene-acts .ic-btn svg { width:20px; height:20px; }
/* Бейдж «Игроки» — на сцене, где сейчас игроки. Тёмный фон + золото, чтобы читался
   и на обычной строке, и на золотой (подсвеченной) строке мастера. */
.scene-players-badge { flex:none; padding:2px 6px; background:var(--surface-app); color:var(--c-harvest-gold); font-family:var(--font-display); font-weight:700; font-size:10px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
/* .scene-del удалён — кнопки удаления теперь .ic-btn (прослойка) */

/* ===== Нижняя панель иконок мастера ===== */
.game-foot { flex:0 0 auto; display:flex; gap:var(--sp-2); }
.game-foot-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  padding:var(--sp-5) 0; background:transparent; color:var(--text-muted); }
.game-foot-btn:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.game-foot-btn.active { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.game-foot-btn .ic { width:26px; height:26px; display:block; }
.game-foot-btn .ic svg { width:26px; height:26px; display:block; }
.game-foot-btn .lbl { font-size:10px; font-weight:700; text-transform:uppercase;  }

/* ===== Выезжающие панели (Игроки / Контент / Шаблоны) ===== */
.sp-fly { position:fixed; left:280px; top:0; bottom:0; width:300px; z-index:30;
  background:var(--surface-panel); box-shadow:var(--shadow-popover); padding:var(--sp-6);
  overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-5); }
.sp-fly[hidden] { display:none; }
.sp-fly-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.sp-fly-title { font-family:var(--font-display); font-weight:700; font-size:16px;
  text-transform:uppercase;  color:var(--text-strong); margin:0; }
.sp-fly input[type="url"], .sp-fly input[type="text"], .sp-fly textarea { width:100%; }

/* ===== НОВЫЙ интерфейс мастера (ui-v2): центральная нижняя полоса + панели вверх ===== */
body.ui-v2-active #gameSide { display:none; }       /* левое меню убрано полностью */
body.ui-v2-active #game { grid-template-columns:1fr; }  /* сцена на весь экран */
body.ui-v2-active .game-foot { display:none; }     /* старая нижняя панель скрыта */
body.ui-v2-active .game-scroll { display:none; }   /* список сцен переехал в кнопку «Сцены» */
.foot-v2 { position:fixed; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:var(--sp-2); z-index:40; background:var(--surface-panel);
  box-shadow:var(--shadow-popover); padding:var(--sp-3); max-width:calc(100vw - 24px); }
.foot-v2 .game-foot-btn { flex:0 0 auto; min-width:88px; padding:var(--sp-4) var(--sp-5); }
/* выезжающие панели нового интерфейса всплывают вверх над полосой, по центру */
.sp-fly.sp-fly-up { left:50%; right:auto; top:auto; bottom:84px; transform:translateX(-50%);
  width:auto; min-width:320px; max-width:min(900px, calc(100vw - 32px)); max-height:calc(100vh - 120px); }
/* карточка игрока открывается вторым окном СПРАВА от панели «Игроки» (позицию задаёт novella-ui-v2.js) */
/* окно эффектов сцены прибито к ПРАВОМУ краю сцены (в старом интерфейсе оно у левого меню) */
body.ui-v2-active .sfx-panel { left:auto; right:0; }

/* список треков плейлиста */
.music-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.stage { position:relative; background:var(--c-pitch); display:flex; align-items:center; justify-content:center; overflow:hidden; }
/* картинка занимает всё поле сцены; чем её заполнять — задаёт режим вписывания (object-fit inline) */
.stage-img { width:100%; height:100%; object-fit:contain; }
.stage-empty { color:var(--text-faint); font-family:var(--font-display); text-transform:uppercase;  }

/* Story Mode: слои переходов между сценами (см. scene-transitions.js) */
.st-curtain { position:absolute; inset:0; opacity:0; z-index:62; pointer-events:none; }
.st-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; z-index:61; pointer-events:none; }
.st-img { width:100%; height:100%; object-fit:contain; will-change:transform,opacity; }
.st-flip-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:61; pointer-events:none; }
.st-flip { position:absolute; inset:0; transform-style:preserve-3d; }
.st-face { position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%,-50%);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.st-back { transform:translate(-50%,-50%) rotateY(180deg); }

/* ===== Музыка: мини-бар (виден всем), плейлист — в оверлее ===== */
.music-bar { position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:65;
  display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-card);
  box-shadow:var(--shadow-popover); padding:6px 10px; max-width:min(92vw,520px); }
.music-bar[hidden] { display:none; }
.music-note { color:var(--c-harvest-gold); font-size:16px; flex:none; }
.music-title { color:var(--text-strong); font-family:var(--font-display); text-transform:uppercase;
   font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; flex:1; }
.music-vol { width:110px; flex:none; }
.music-enable { flex:none; padding:5px 10px; font-size:11px; background:var(--surface-card); color:var(--text-body); border:none; }
.music-enable:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.music-open { flex:none; width:28px; height:28px; padding:0; background:var(--surface-inset); color:var(--text-faint); border:none; font-size:14px; }
.music-open:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.music-mute { flex:none; width:28px; height:28px; padding:0; background:var(--surface-inset); color:var(--text-strong); border:none; font-size:14px; }
.music-mute:hover { filter:brightness(1.2); }
.music-mute.on { background:var(--danger); color:var(--text-strong); }
.row-card.active { box-shadow:inset 0 0 0 2px var(--c-harvest-gold); }

/* Скроллбары */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--surface-inset); }
::-webkit-scrollbar-thumb { background:var(--c-espresso); }
::-webkit-scrollbar-thumb:hover { background:var(--c-leather); }

/* ============================================================
   ИНСТРУМЕНТАРИЙ МАСТЕРА — персонажи, навыки, предметы
   ============================================================ */
.game-side .scene-list { flex:0 0 auto; }

/* --- список персонажей в панели --- */
.char-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.char-item { position:relative; display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-card); border:none; padding:var(--sp-4); cursor:pointer; transition:filter var(--dur) var(--ease); }
.char-item:hover { filter:brightness(1.2); }
.char-thumb { width:40px; height:40px; flex:none; background:var(--surface-slot) center/cover no-repeat; }
.char-thumb.empty::after { content:"?"; display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-faint); font-family:var(--font-display); }
.char-name { font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
/* .char-del удалён — кнопки удаления теперь .ic-btn (прослойка) */

/* --- большой редактор (оверлей) --- */
.ed-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); display:flex; align-items:flex-start; justify-content:center; z-index:70; overflow-y:auto; padding:var(--sp-9) var(--sp-6); }
.ed-overlay[hidden] { display:none; }
.ed-box { width:760px; max-width:100%; background:var(--surface-card); padding:var(--sp-8); box-shadow:var(--shadow-popover); display:flex; flex-direction:column; gap:var(--sp-7); }
.ed-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  color:var(--c-harvest-gold); font-size:22px; margin:0; }

/* шапка: портрет + имя */
.ed-head { display:flex; gap:var(--sp-7); align-items:flex-start; }
/* Портрет = ДВА слоя: задний фон (можно выключить) + фото сверху (всегда). Само фото — отдельный
   слой .ed-portrait-img, а НЕ фон контейнера, поэтому выключение фона не убирает фото; прозрачный
   PNG тогда покажет подложку листа. Фон-слой .ed-portrait-bg скрывается классом .no-bg. */
.ed-portrait { width:140px; height:140px; flex:none; cursor:pointer; position:relative; box-shadow:var(--inset-well); }
.ed-portrait-bg { position:absolute; inset:0; background:var(--surface-inset); }
.ed-portrait.no-bg .ed-portrait-bg { display:none; }
.ed-portrait-img { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; }
.ed-portrait::after { content:"Портрет\A(жми)"; white-space:pre; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text-faint); font-size:12px;  }
.ed-portrait.has-img::after { content:""; }
.ed-head-fields { flex:1; display:flex; flex-direction:column; gap:var(--sp-5); }
.ed-head-fields label { color:var(--text-muted); }

/* секции */
.ed-section { display:flex; flex-direction:column; gap:var(--sp-5); }
.ed-section h3 { font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase;  color:var(--c-parchment); margin:0; padding-bottom:var(--sp-4); }
.ed-hint { color:var(--text-faint); font-size:12px; margin:0; }

/* атрибуты — сетка имя + значение */
.attr-grid { display:flex; flex-direction:column; gap:var(--sp-4); }
.attr-row { display:flex; align-items:center; gap:var(--sp-5); background:var(--surface-inset); padding:var(--sp-4) var(--sp-5); --ic-seg:var(--surface-inset); }
.attr-row .attr-name { flex:1; font-family:var(--font-display); text-transform:uppercase;  color:var(--text-strong); }
/* .num-input — стандарт в прослойке public/design-system.css */
/* живой предпросмотр атрибута (редактор атрибутов): части кликабельны, настройки — в правой панели */
.attr-preview { display:flex; align-items:center; gap:var(--sp-3); background:#161412; padding:var(--sp-3) var(--sp-4); border-radius:0; }
.attr-part { cursor:pointer; padding:4px 5px; border-radius:0; display:inline-flex; align-items:center; }
.attr-part:hover { background:rgba(197,168,126,0.14); }
.attr-part.sel { background:rgba(193,145,60,0.34); }
/* предпросмотр списочного инвентаря (окно инвентаря конструктора, режим без сетки) */
.inv-list-preview { display:flex; flex-direction:column; gap:var(--sp-3); }
.inv-list-row { display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-inset); padding:var(--sp-3) var(--sp-4); border-radius:0; }
.inv-list-ic { width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.inv-list-name { font-family:var(--font-display); text-transform:uppercase; color:var(--text-strong); }

/* строки навыков и предметов */
.row-card { display:flex; align-items:flex-start; gap:var(--sp-5); background:var(--surface-inset); padding:var(--sp-5); }
.row-icon { width:44px; height:44px; flex:none; background:var(--surface-slot) center/cover no-repeat; cursor:pointer; box-shadow:var(--inset-well); position:relative; }
.row-icon::after { content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:18px; }
.row-icon.has-img::after { content:""; }
.row-fields { flex:1; display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }
.row-fields input[type="text"] { flex:1; min-width:140px; }
.row-fields textarea { flex:1 1 100%; min-width:140px; background:var(--surface-app); border:none; padding:8px 10px; color:var(--text-strong); font-family:var(--font-ui); font-size:14px; resize:vertical; min-height:48px; }
.row-fields textarea:focus { outline:none; box-shadow:var(--ring); }
.field-mini { display:flex; flex-direction:column; gap:var(--sp-2); }
.field-mini span { font-size:10px; text-transform:uppercase;  color:var(--text-faint); }
.row-fields select { background:var(--surface-app); border:none; padding:8px 10px; color:var(--text-strong); font-family:var(--font-ui); font-size:14px; }
.row-fields select:focus { outline:none; box-shadow:var(--ring); }
/* .row-del удалён — кнопки удаления теперь .ic-btn (прослойка). align-self при необходимости задаётся контекстом */

/* .btn-add — стандарт в прослойке public/design-system.css */

.ed-actions { display:flex; gap:var(--sp-5); justify-content:flex-end; padding-top:var(--sp-6); }
.ed-actions .ghost { background:var(--surface-panel); color:var(--text-muted); }
.ed-actions .ghost:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }

/* ===== ПРИГЛАШЕНИЯ ИГРОКОВ ===== */
.invite-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.invite-row { display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-card); padding:6px 8px; font-size:13px; text-transform:uppercase;  }
.inv-name { flex:1; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-btn { flex:none; padding:5px 10px; font-size:11px; }
.inv-btn.ok { background:var(--role-player); color:var(--text-on-gold); }
.inv-btn.no { background:var(--surface-inset); color:var(--danger); }
.invite-text { font-size:16px; color:var(--text-body); line-height:1.4; margin:0; }

/* ===== ПАНЕЛЬ ИГРОКОВ: участники новеллы ===== */
.party-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.party-row { background:var(--surface-card); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.party-head { display:flex; align-items:center; gap:var(--sp-4); }
.party-name { flex:1; font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.party-status { flex:none; font-size:10px; text-transform:uppercase;  padding:2px 6px; }
.party-status.here { background:var(--role-player); color:var(--text-on-gold); }
.party-status.away { background:var(--surface-inset); color:var(--c-harvest-gold); }
.party-status.off { background:var(--surface-inset); color:var(--text-faint); }
.party-head .inv-btn { flex:none; }
.party-actions { display:flex; align-items:center; gap:var(--sp-4); }
.party-actions .inv-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.party-chars { display:flex; flex-direction:column; gap:var(--sp-2); }
.party-char-row { display:flex; align-items:center; gap:var(--sp-3); }
.party-char { flex:1; display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-inset); padding:4px 8px; cursor:pointer; transition:filter var(--dur) var(--ease); }
.party-char:hover { filter:brightness(1.25); }
.party-char-thumb { width:28px; height:28px; flex:none; background:var(--surface-slot) center/cover no-repeat; }
.party-char-thumb.empty::after { content:"?"; display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-faint); font-size:12px; }
.party-char-name { font-size:12px; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* строка-плашка кликабельна и подсвечивается при наведении */
.party-head.clickable { cursor:pointer; }
.party-row:hover { filter:brightness(1.15); }
/* вторая панель — настройки игрока, выезжает справа от «Игроков».
   По высоте обтекает контент (растёт вниз), а не тянется до низа экрана. */
.party-fly { left:580px; bottom:auto; height:auto; max-height:calc(100vh - var(--sp-6)); }
/* тело панели настроек игрока */
.party-card-body { display:flex; flex-direction:column; gap:var(--sp-5); }
.party-card-body .party-status { align-self:flex-start; }
.party-card-body .inv-btn { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
/* карточка персонажа: портрет слева (1/3), справа имя и кнопки. Разделение — фоном, без обводок */
.pchar-card { display:flex; gap:var(--sp-4); background:var(--surface-inset); padding:var(--sp-4); }
.pchar-portrait { flex:0 0 33%; aspect-ratio:1/1; background:var(--surface-slot) center/cover no-repeat; cursor:pointer; transition:filter var(--dur) var(--ease); }
.pchar-portrait:hover { filter:brightness(1.25); }
.pchar-portrait.empty::after { content:"?"; display:flex; align-items:center; justify-content:center; height:100%; color:var(--text-faint); font-size:24px; }
.pchar-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.pchar-name { font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); font-size:13px; line-height:1.25; word-break:break-word; }
.pchar-acts { display:flex; gap:var(--sp-3); margin-top:auto; }
/* кнопки карточки: тёмный фон + светлый символ; при наведении — оранжевый фон + чёрный символ (стандарт) */
.pchar-btn { min-height:42px; padding:8px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-slot); color:var(--c-ancient-bone); }
.pchar-btn .ic, .pchar-btn svg { display:block; }
.pchar-btn:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.pchar-btn:active { background:var(--c-deep-gold); color:var(--text-on-gold); filter:none; }
.pchar-tok { flex:1; }
.pchar-del { flex:none; width:38px; }

/* раскрывающееся лобби */
.lobby-box { background:transparent; }
.lobby-summary { cursor:pointer; list-style:none; font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase;  color:var(--c-parchment); padding:var(--sp-4) 0; }
.lobby-summary::-webkit-details-marker { display:none; }
.lobby-summary::before { content:"▸ "; color:var(--text-faint); }
.lobby-box[open] .lobby-summary::before { content:"▾ "; }
.lobby-box .invite-list { margin-top:var(--sp-4); }

/* ===== ВЫДАЧА / ЛИСТ ИГРОКА ===== */
.char-give { width:24px; height:24px; flex:none; padding:0; background:var(--surface-inset); color:var(--text-faint); border:none; font-size:12px; }
.char-give:hover { background:var(--role-player); color:var(--text-strong); filter:none; }
/* иконка персонажа у игрока — снизу, слева от кнопки выхода */
.player-char { position:fixed; bottom:12px; left:14px; width:48px; height:48px; padding:0; border:none; background:var(--surface-slot) center/cover no-repeat; color:var(--text-strong); font-family:var(--font-display); font-size:20px; cursor:pointer; z-index:20; box-shadow:var(--shadow-popover); }
/* Нижняя панель Мулов (общие сундуки): ряд иконок правее иконки своего персонажа. */
.mule-bar { position:fixed; bottom:12px; left:70px; z-index:20; display:flex; gap:8px; }
.mule-bar .mule-char { position:static; }
/* значения в листе (атрибуты/навыки) */
.sheet-val { flex:none; font-family:var(--font-display); font-weight:700; color:var(--c-harvest-gold); font-size:16px; }
.row-card.faded { opacity:0.5; }

/* Лист игрока (sheet-view): квадратный портрет + текст шапки распределён по его высоте.
   По образцу ОБРАЗЕЦ-СТИЛЯ.html (.sheet-view .tpl-portrait, строка 388). Перебивает
   растяжение портрета из .ed-box.tpl .ed-portrait за счёт более высокой специфичности. */
.ed-box.sheet-view .ed-head { align-items:stretch; }
.ed-box.tpl.sheet-view .ed-portrait { width:150px; height:150px; aspect-ratio:1/1; flex:none; align-self:flex-start; }
.ed-box.sheet-view .ed-head-fields { justify-content:space-between; }
/* Лист персонажа НЕ затемняет поле и не модальный: фон прозрачный, клики мимо окна
   проходят на поле (pointer-events:none), а само окно ловит мышь и свободно таскается. */
.ed-overlay.sheet-overlay { background:transparent; pointer-events:none; display:block; padding:0; overflow:visible; }
.ed-overlay.sheet-overlay .ed-box { pointer-events:auto; position:fixed; max-height:calc(100vh - var(--sp-6)); overflow-y:auto; }
.ed-overlay.sheet-overlay .win-head { cursor:move; }
/* Оформленный лист-страница фиксирован в своей зоне: у самого листа НЕТ полос прокрутки. */
.ed-overlay.sheet-overlay .ed-box.sheet-page { max-height:none; overflow:hidden; }
/* Длинный блок листа прокручивается ВНУТРИ себя (шапка на месте, крутится только содержимое). */
.sheet-page .sheet-scrollblock { overflow:hidden; }
.sheet-page .sheet-scrollblock .attr-grid { flex:1 1 auto; min-height:0; overflow-y:auto; }
/* Строка опыта: надпись + компактная кнопка «Распределить» высотой как сама надпись */
.sheet-xp { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.sheet-xp .btn-distribute { padding:0 var(--sp-4); font-size:12px; line-height:1.4; min-height:0; }

/* имя персонажа + подпись «у кого выдан» */
.char-name-wrap { flex:1; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.char-name-wrap .char-name { flex:none; }
.char-sub { font-size:10px; color:var(--text-faint); text-transform:none;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* группа мелких полей в строке предмета (кубы + стоимость) */
.row-inline { display:flex; gap:var(--sp-5); flex-wrap:wrap; align-items:flex-end; }
/* колонка кнопок справа в строке (отдать + удалить) */
.row-btns { display:flex; flex-direction:column; gap:var(--sp-3); align-self:flex-start; }

/* ===== ОКНО «ПРЕДМЕТЫ НОВЕЛЛЫ» (по ОБРАЗЕЦ-СТИЛЯ.html, секция 21) =====
   Слои фона по минимуму: окно (панель) → карточка предмета (светлее) → поля ввода (inset) → подписи (эспрессо). */
/* Компактная шапка 32px и тёмное окно-панель, чтобы карточки предметов отделялись фоном */
.ed-box.items-win { background:var(--surface-panel); gap:var(--sp-6); }
.ed-box.items-win .win-head { min-height:32px; padding:0 var(--sp-5); }
.ed-box.items-win .win-title { font-size:15px; }
.ed-box.items-win .win-head .ic-btn { width:32px; height:32px; }
.ed-box.items-win .win-head .ic-btn svg { width:24px; height:24px; }
.ed-box.items-win .ed-hint { margin:0; }
.items-list { display:flex; flex-direction:column; gap:var(--sp-5); }

/* Карточка предмета — светлее окна (видно границы), единое поле по краям + зазор между блоками */
.item-card { display:flex; flex-direction:column; gap:var(--sp-5); padding:var(--sp-5); background:var(--surface-card); }
/* Шапка: иконка, название, кубы, стоимость, кнопки — в одну линию, без своего фона/паддинга (поле даёт карточка) */
.item-head { display:flex; align-items:center; gap:var(--sp-5); padding:0; background:transparent; }
.item-thumb { width:40px; height:40px; flex:none; background:var(--surface-slot) center/cover no-repeat; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.item-thumb svg { width:30px; height:30px; }
/* Название — поле на тёмном фоне (как остальные поля), а не голым текстом */
.item-head .item-name { flex:1; min-width:0; height:32px; padding:0 var(--sp-5); background:var(--surface-inset); font-family:var(--font-display); font-weight:600; text-transform:uppercase;  color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Поле-метка: значок + значение в своей коробочке */
.item-field { flex:none; display:inline-flex; align-items:center; gap:3px; }
.item-ic { width:32px; height:32px; flex:none; display:block; }
.item-field .num-input { width:56px; height:32px; background:var(--surface-inset); }
/* Кнопки-действия (стрелка, X) в строчку, прижаты вправо */
.item-actions { display:flex; align-items:center; gap:var(--sp-2); margin-left:auto; }
.item-actions .ic-btn:not(:disabled):hover { filter:none; background:var(--surface-slot); }
.item-actions .ic-btn:not(:disabled):active { filter:none; background:var(--c-espresso); }
/* Описание и крит — тот же тёмный фон поля, на всю ширину */
.item-card textarea { width:100%; box-sizing:border-box; min-height:40px; margin:0; background:var(--surface-inset); }
/* поле монет в шапке редактора */
.coins-field { flex-direction:row; align-items:center; gap:var(--sp-4); }
.coins-field .num-input { width:90px; }

/* ===== ВЛИЯНИЕ НА ПУЛЫ — строка в одну линию, БЕЗ вложенных подложек ===== */
.fx-sec { display:flex; flex-direction:column; gap:var(--sp-4); }
.fx-sec > h3 { font-family:var(--font-display); font-size:12px; font-weight:700; text-transform:uppercase;  color:var(--c-parchment); margin:0; }
/* Между разными влияниями зазор больше, чем перенос строк внутри одного */
.fx-list { display:flex; flex-direction:column; gap:var(--sp-6); }
/* Строка: Пул • [+/−] • Значение • [число] • кому • крестик — всё в одну линию, без своего фона */
.fx-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-4); }
.fx-row .tpl-field { flex:none; display:flex; align-items:center; gap:3px; }
.fx-row .tpl-field-cap { display:inline-flex; align-items:center; height:32px; padding:0 var(--sp-4); background:var(--c-espresso); color:var(--text-strong); font-family:var(--font-display); font-weight:700; font-size:12px; text-transform:uppercase;  white-space:nowrap; }
/* Все списки в строке — на тёмном фоне (включая «На себя/На другого») */
.fx-row .sp-dd-trigger { min-width:92px; height:32px; background:var(--surface-inset); font-size:14px; }
.fx-row .fx-target .sp-dd-trigger { min-width:120px; }
.fx-row .sp-dd-trigger:hover,
.fx-row .sp-dd[data-open="true"] .sp-dd-trigger { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.fx-row .num-input { width:52px; height:32px; background:var(--surface-inset); }
/* Переключатель + / − вместо списка «Добавляет/Отнимает» — квадрат 32×32, клик меняет знак */
.fx-pm { width:32px; height:32px; flex:none; padding:0; border:none; cursor:pointer; background:var(--c-espresso); color:var(--c-parchment); display:inline-flex; align-items:center; justify-content:center; }
.fx-pm .ic, .fx-pm svg { width:22px; height:22px; display:block; }
.fx-pm:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* Крестик «убрать влияние» — в той же строке, прижат вправо */
.fx-row > .ic-btn { flex:none; margin-left:auto; }
/* одно влияние пула — свои строки в столбик (без линий, разделяет отступ списка) */
.fx-item { display:flex; flex-direction:column; gap:var(--sp-4); }
/* правая колонка карточки пула: крестик сверху, стрелочка «влияния» под ним */
.pool-row-actions { display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); flex:none; }
/* строка «добавить кубы из пула» в окне броска: имя слева, степпер справа */
.roll-pool-spend { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }

/* ===== БРОСКИ / ВДОХНОВЕНИЕ ===== */
.attr-left { display:flex; flex-direction:column; gap:4px; flex:1; }
.insp-row { display:flex; gap:6px; align-items:center; }
.insp { width:18px; height:18px; transform:rotate(45deg); background:var(--label-bg, var(--c-espresso)); box-shadow:none; }
.insp.on { background:var(--label-fg, var(--text-strong)); box-shadow:none; }
/* Кнопка броска — стандарт .ic-btn в прослойке public/design-system.css */
.roll-total { font-family:var(--font-display); color:var(--text-strong); font-size:18px; margin:0; }
.attr-row.pick { cursor:pointer; gap:var(--sp-4); }
.attr-row.pick input { width:auto; flex:none; }
.spend-row { display:flex; align-items:center; gap:var(--sp-5); }
.spend-row .btn-add { width:36px; padding:8px 0; text-align:center; }
.ed-overlay.roll-dialog { z-index:80; }

/* всплывающий результат по центру экрана */
/* Вид попапа (фон, паддинг, классы rp- и die, БЕЗ верхней полоски) — стандарт в прослойке public/design-system.css.
   Здесь только положение на экране и анимация появления. */
.roll-popup { position:fixed; top:16%; left:50%; transform:translate(-50%,-12px); z-index:120;
  opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none; }
.roll-popup.in { opacity:1; transform:translate(-50%,0); }
.roll-popup.out { opacity:0; transform:translate(-50%,-12px); }

/* ===== ЛОКАЛЬНЫЙ ЧАТ НОВЕЛЛЫ ===== */
/* Блок из трёх кнопок (таймер / голос / чат) — единый контейнер, прижат к низу-правому,
   между кнопками зазор 6px; двигается как одно целое. */
.nov-btn-bar { position:fixed; bottom:12px; right:16px; display:flex; gap:var(--sp-3); z-index:30; }

/* ===== ЗАПИСЬ СЕССИИ ===== */
/* Заметка «● Идёт запись» — сверху по центру, видят все участники, пока мастер пишет сессию.
   Разделение заливкой, углы ровные; мигает только точка-кружок (кружок 50% допустим — статус). */
.sp-rec-note { position:fixed; top:12px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:var(--sp-3); background:#302f2b; color:#f8eab9; padding:6px 14px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:13px; box-shadow:var(--shadow-popover); z-index:60; pointer-events:none; }
.sp-rec-dot { width:12px; height:12px; border-radius:50%; background:var(--danger); flex:none; animation:sp-rec-blink 1s steps(1) infinite; }
@keyframes sp-rec-blink { 50% { opacity:0.25; } }
/* Режим «камера-зритель» (?cam=1): вкладка для записи. Прячем ВЕСЬ интерфейс-хром, оставляем
   только сцену (#stage / #game), режим диалога (.stage-overlay) и левую панель говорящих
   (.nv-side) — именно это должно попасть в видео. Скрытие — без линий и рамок. */
body.sp-cam .nov-btn-bar,
body.sp-cam #playerExit,
body.sp-cam #fsBtn,
body.sp-cam .novella-chat,
body.sp-cam .nv-dropdown,
body.sp-cam #novMobnav,
body.sp-cam .nov-mobnav,
body.sp-cam .music-bar,
body.sp-cam #sp-offline-bar,
body.sp-cam .sp-offline-bar,
body.sp-cam .sp-rec-note,
body.sp-cam .foot-v2,
body.sp-cam #gameSide,
body.sp-cam .game-side,
body.sp-cam .sc-fab,
body.sp-cam .player-char { display:none !important; }
.novella-chat-btn { position:relative; width:40px; height:40px; padding:0; font-size:22px; background:#57574f; color:#f8eab9; border:none; cursor:pointer; box-shadow:var(--shadow-popover); order:3; display:flex; align-items:center; justify-content:center; }
.chat-badge { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--danger); color:var(--text-strong); font-family:var(--font-display); font-size:11px; }
/* нет уведомлений — прячем бейдж вместе с фоном (иначе display:flex перебивает атрибут hidden) */
.chat-badge[hidden] { display:none; }
/* Коробка чата: три блока (шапка / лента / низ) с зазором 6px между ними. Зазор — это фон самой
   коробки, видимый между блоками (разделяем заливкой, без линий и рамок). Размер задан явно,
   чтобы окно не «дышало» при переключении вкладок; перетягивание ручкой переписывает его. */
.novella-chat { position:fixed; bottom:70px; right:16px; max-width:calc(100vw - 32px); max-height:calc(100vh - 100px); background:#302f2b; box-shadow:var(--shadow-popover); display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-3); box-sizing:border-box; z-index:30; }
.novella-chat[hidden] { display:none; }
/* Шапка: вкладки слева (равной ширины) + шестерёнка справа. Между вкладками и шестерёнкой — 6px. */
.nc-head { height:40px; display:flex; align-items:stretch; gap:var(--sp-3); flex:none; }
.nc-tabs { display:flex; gap:var(--sp-3); flex:1; min-width:0; }
.nc-tab { flex:1; min-width:0; padding:11px 6px; font-family:var(--font-display); font-weight:400; font-size:18px; text-transform:uppercase;  background:#57574f; color:#f8eab9; display:flex; align-items:center; justify-content:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nc-tab:not(:disabled):hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.nc-tab.active { background:var(--c-harvest-gold); color:var(--text-on-gold); font-weight:700; }
.nc-tab.active:not(:disabled):hover { background:var(--c-deep-gold); color:var(--text-on-gold); filter:none; }
/* Шестерёнка — квадрат той же высоты, что и вкладки (тянется по высоте шапки) */
.nc-gear-wrap { position:relative; flex:none; display:flex; }
.nc-gear { width:40px; padding:0; background:#57574f; color:#f5e7b7; display:flex; align-items:center; justify-content:center; }
.nc-gear:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.nc-gear svg { width:32px; height:32px; }
/* Выпадающее меню шестерёнки: падает вниз под шапкой, со своим отступом 6px */
.nc-gear-menu { position:absolute; top:calc(100% + var(--sp-3)); right:0; min-width:230px; background:#57574f; box-shadow:var(--shadow-popover); z-index:60; display:flex; flex-direction:column; }
.nc-gear-menu[hidden] { display:none; }
.nc-gear-item { display:flex; align-items:center; gap:var(--sp-4); width:100%; padding:9px 12px; background:transparent; color:#f4e6b6; font-family:var(--font-ui); font-size:14px; text-align:left; }
.nc-gear-item:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.nc-gear-item svg { width:18px; height:18px; flex:none; }
.nc-gear-label { flex:1; min-width:0; }
.nc-gear-item.off { opacity:0.45; }
/* Скрытая лента (переключается по вкладке) */
.novella-chat .nc-log[hidden] { display:none; }
/* Лента сообщений: тёмная заливка; строки идут с зазором 6px */
.nc-log { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); background:var(--surface-inset); }
.nc-log::-webkit-scrollbar-thumb { background:#302f2b; }
.nc-log::-webkit-scrollbar-thumb:hover { background:#302f2b; }
.nc-msg { font-size:16px; line-height:1.4; }
.nc-name { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  margin-right:6px; }
/* Время — всегда; дата — скрыта, раскрывается при наведении (ПК) или касании (телефон) */
.nc-time { color:var(--text-faint); font-size:11px; margin-right:6px; font-variant-numeric:tabular-nums; }
.nc-date { color:var(--text-faint); font-size:11px; margin-right:6px; font-variant-numeric:tabular-nums; display:none; }
.nc-msg.has-ts:hover .nc-date, .nc-msg.show-date .nc-date, .novella-chat.show-datetime .nc-date { display:inline; }
.nc-clock.off { opacity:0.4; }
.nc-text { color:var(--text-body); }
/* Удаление одного сообщения: корзинка скрыта, появляется по наведению (ПК) или касанию (телефон) */
.nc-actions { display:none; gap:4px; margin-left:6px; vertical-align:middle; }
.nc-msg:hover .nc-actions, .nc-msg.show-date .nc-actions,
.nc-roll:hover .nc-actions, .nc-roll.open .nc-actions { display:inline-flex; }
/* Высота корзинки = высоте строки (16px), чтобы при наведении строка НЕ росла вверх и не дёргалась —
   меняется только ширина (добавляются дата и кнопка). */
.nc-del-yes { width:20px; height:16px; color:var(--danger); vertical-align:middle; display:inline-flex; align-items:center; justify-content:center; }
.nc-del-yes svg { width:16px; height:16px; }
.nc-del-yes:hover { color:var(--danger-deep); }

/* ===== Вкладка «Персонажи» ===== */
/* Лента персонажей: те же зазоры между строками (6px), но отступ ленты тоже 6px — чтобы
   слева от портрета было ровно 6px, как просили. Разделение — только заливкой, без линий. */
.nc-log-chars { padding:var(--sp-3); }
/* Панель выбора персонажа (только мастер): «Рассказчик» + портреты. Полоска-заливка, без рамок.
   Активный — полной яркостью и цветом, остальные приглушены (отличаем заливкой/яркостью, не обводкой). */
/* overflow:visible — чтобы превью увеличенного портрета не обрезалось краем полоски. */
.nc-cast { display:flex; flex-wrap:wrap; gap:var(--sp-3); padding:var(--sp-3); background:var(--surface-inset); flex:none; overflow:visible; }
.nc-cast[hidden] { display:none; }
.nc-cast-opt { position:relative; width:32px; height:32px; flex:none; padding:0; background-color:var(--surface-slot); background-size:cover; background-position:center; color:var(--c-harvest-gold); font-family:var(--font-display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0.5; filter:grayscale(0.55); transition:opacity .12s ease, filter .12s ease; }
/* Перебиваем общее правило button:hover (оно сбрасывало фон-картинку и обрезку, отчего портрет
   «моргал» и пропадал). На наведении портрет НЕ трогаем — только делаем ярче, без жёлтой заливки. */
.nc-cast .nc-cast-opt:hover, .nc-cast .nc-cast-opt.active { opacity:1; filter:none; background-color:var(--surface-slot); color:var(--c-harvest-gold); background-size:cover; background-position:center; }
.nc-cast .nc-cast-narr:hover, .nc-cast .nc-cast-narr.active { background-color:var(--c-harvest-gold); color:var(--text-on-gold); }
/* Превью: имя сверху + увеличенный портрет. Появляется под кнопкой при наведении, поверх ленты. */
/* Подложка превью (в цвет чата) — чтобы имя и увеличенный портрет не сливались с сообщениями за ними. */
.nc-cast-pop { position:absolute; left:50%; top:calc(100% + var(--sp-3)); transform:translateX(-50%); display:none; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-4); background:#302f2b; box-shadow:var(--shadow-popover); z-index:40; pointer-events:none; }
.nc-cast-opt:hover .nc-cast-pop { display:flex; }
.nc-cast-pname { color:var(--c-harvest-gold); font-family:var(--font-display); font-weight:700; text-transform:uppercase;  font-size:13px; white-space:nowrap; }
.nc-cast-big { width:120px; height:120px; background-color:var(--surface-slot); background-size:cover; background-position:center; color:var(--c-harvest-gold); font-family:var(--font-display); font-weight:700; font-size:40px; display:flex; align-items:center; justify-content:center; }
/* Сообщение персонажа: портрет 32×32 слева, справа в одну строку имя/время/текст, выровнены по
   центру относительно портрета. Зазор портрет→текст 6px. Никаких рамок и обводок портрета. */
.nc-cmsg { display:flex; align-items:center; gap:var(--sp-3); font-size:16px; line-height:1.4; }
.nc-cport { width:32px; height:32px; flex:none; background:var(--surface-slot); background-size:cover; background-position:center; color:var(--c-harvest-gold); font-family:var(--font-display); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }
.nc-cbody { flex:1; min-width:0; }
.nc-cmsg .nc-name { color:var(--c-harvest-gold); }
/* Рассказчик (мастер без персонажа): особый цвет и курсив — видно описательную вставку мастера. */
.nc-cmsg.nc-narr .nc-name, .nc-cmsg.nc-narr .nc-text { color:var(--role-podmaster); font-style:italic; }
.nc-cmsg.has-ts:hover .nc-date, .nc-cmsg.show-date .nc-date { display:inline; }
.nc-cmsg:hover .nc-actions, .nc-cmsg.show-date .nc-actions { display:inline-flex; }

/* ===== «Голый» режим: курсор ушёл с чата — остаются только сообщения поверх сцены ===== */
/* Плавное появление/исчезание оформления (фон, верх, низ). Сами блоки прячем прозрачностью —
   место они сохраняют, поэтому сообщения не прыгают. Без линий и рамок. */
.novella-chat { transition:background-color .25s ease, box-shadow .25s ease; }
.nc-head, .nc-cast, .nc-input, .nc-dice, .nc-resize { transition:opacity .2s ease, visibility .2s ease; }
.nc-log { transition:background-color .25s ease; }
.novella-chat.nc-bare { background-color:transparent; box-shadow:none; }
.novella-chat.nc-bare .nc-head, .novella-chat.nc-bare .nc-cast,
.novella-chat.nc-bare .nc-input, .novella-chat.nc-bare .nc-dice,
.novella-chat.nc-bare .nc-resize { opacity:0; visibility:hidden; pointer-events:none; }
.novella-chat.nc-bare .nc-log { background-color:transparent; }
.novella-chat.nc-bare .nc-log::-webkit-scrollbar { width:0; height:0; }
/* Контраст: вместо чёрной тени-обводки за текстом — полупрозрачная плашка под каждым
   сообщением (фон чата #302f2b на ~20%), чтобы сообщения читались на светлой сцене. */
.novella-chat.nc-bare .nc-cmsg {
  background-color:rgba(48,47,43,0.20); padding:var(--sp-2) var(--sp-3); }
/* «Мастер»-рассказчик: обычный синий слишком тёмный на светлой сцене — в голом режиме берём
   светлее, чтобы текст читался (в обычном чате цвет остаётся прежним). */
.novella-chat.nc-bare .nc-cmsg.nc-narr .nc-name, .novella-chat.nc-bare .nc-cmsg.nc-narr .nc-text { color:#9FC2D6; }

.nc-roll { font-size:13px; padding:6px 8px; background:var(--surface-inset); }
.nc-roll.has-detail { cursor:pointer; }
.nc-roll-who { font-family:var(--font-display); font-weight:700; text-transform:uppercase; color:var(--text-strong); margin-right:6px; }
.nc-roll-res { color:var(--text-muted); }
.nc-roll.crit .nc-roll-res { color:var(--c-harvest-gold); }
/* Подпись об изменении пула броском (всегда видна): «Добавлено N в пул «X»» / «Вычтено N из пула «X»» */
.nc-roll-pool { margin-top:4px; font-size:12px; color:var(--c-harvest-gold); }
/* Раскрываемая детализация броска — отдельной заливкой (без линий), видна при .open */
.nc-roll-detail { display:none; margin:6px -8px -6px; padding:8px; background:var(--surface-card); }
.nc-roll.open .nc-roll-detail { display:block; }
.nc-roll-detail .rp-dice { justify-content:flex-start; }
/* Низ: кубик (слева) + поле (центр) + отправить (справа). Между ними — зазор 6px (фон коробки). */
.nc-input { display:flex; flex-direction:row; align-items:flex-end; gap:var(--sp-3); padding:0; margin:0; background:transparent; flex:none; }
/* Кнопка-кубик d12 — квадрат, открывает список кубиков */
.nc-dice-btn { flex:none; width:40px; height:40px; padding:0; background:#57574f; color:#f8eab9; display:flex; align-items:center; justify-content:center; }
.nc-dice-btn:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.nc-dice-btn svg { width:32px; height:32px; }
/* Поле сообщения: 40px по умолчанию, растёт по тексту; без рамок и фокус-кольца */
/* font-size 16px ОБЯЗАТЕЛЕН: при меньшем iOS авто-зумит страницу на фокусе поля (всё уезжает вбок). */
.nc-field { flex:1; height:40px; min-height:40px; max-height:120px; padding:10px; line-height:20px;
  background:var(--surface-inset); color:var(--text-strong); font-family:var(--font-ui); font-size:16px;
  border:none; border-radius:0; resize:none; overflow-y:auto; box-sizing:border-box; }
.nc-field::placeholder { color:var(--text-faint); }
.nc-field:focus { outline:none; box-shadow:none; }
/* Иконка отправки: квадрат, общий серый фон ряда, символ светлого цвета */
.nc-send { flex:none; width:40px; height:40px; padding:0; background:#57574f; color:#f8eab9;
  display:flex; align-items:center; justify-content:center; }
.nc-send svg { width:32px; height:32px; }
/* Выезжающий список кубиков: между лентой и низом, появляется по кнопке d12 (отодвигает ленту вверх) */
.nc-dice { flex:none; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.nc-dice[hidden] { display:none; }
.nc-dice-opt { width:40px; height:40px; padding:0; background:#57574f; color:#f8eab9; display:flex; align-items:center; justify-content:center; }
.nc-dice-opt:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.nc-dice-opt svg { width:32px; height:32px; }
/* Линии-сегменты кубика всегда в цвет фона кнопки: в покое — серый, при наведении — золото.
   Так у иконки всегда ровно ДВА цвета (фон + рисунок), как у остальных иконок — без третьего. */
.nc-dice-opt, .nc-dice-btn { --ic-seg:#57574f; }
.nc-dice-opt:hover, .nc-dice-btn:hover { --ic-seg:var(--c-harvest-gold); }
.nc-dice-opt svg path[stroke], .nc-dice-btn svg path[stroke] { stroke:var(--ic-seg); }
.nc-dice-close { width:40px; height:40px; padding:0; background:#57574f; color:#f8eab9; display:flex; align-items:center; justify-content:center; }
.nc-dice-close:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.nc-dice-close svg { width:32px; height:32px; }

/* голос внутри панели чата новеллы */
.nc-voice { padding:var(--sp-5); background:var(--surface-card); display:flex; flex-direction:column; gap:var(--sp-4); }
.nc-voice:empty { display:none; }
.nv-toggle.active { background:var(--danger); color:var(--text-strong); }
.nv-toggle.active:hover { filter:brightness(1.12); }
.nv-controls { display:flex; flex-direction:column; gap:var(--sp-4); }
.nv-controls[hidden] { display:none; }
.nv-mic.muted { background:var(--danger-deep); color:var(--text-strong); }
.nv-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.nv-note { color:var(--danger); font-size:11px; margin:0; }
.nv-note:empty { display:none; }

/* ===== ГОЛОС — отдельная кнопка и выпадающий список ===== */
.novella-voice-btn { width:40px; height:40px; padding:0; font-family:var(--font-display); font-weight:700; font-size:15px; background:#57574f; color:#f8eab9; border:none; cursor:pointer; box-shadow:var(--shadow-popover); order:2; display:flex; align-items:center; justify-content:center; }
.novella-voice-btn.active { background:var(--danger); }
.novella-voice-btn.active:hover { background:var(--danger); filter:brightness(1.12); color:var(--text-strong); }
.nv-dropdown { position:fixed; bottom:70px; right:74px; width:240px; max-width:calc(100vw - 32px); background:var(--surface-panel); box-shadow:var(--shadow-popover); padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); z-index:40; }
.nv-dropdown[hidden] { display:none; }
.nv-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;  color:var(--c-harvest-gold); font-size:13px; }
.nv-join.active { background:var(--danger); color:var(--text-strong); }
.nv-join.active:hover { filter:brightness(1.12); }

/* ===== Индикатор речи: точка у ника загорается зелёным и мягко моргает, пока человек говорит ===== */
.v-dot.speaking { background:var(--role-player); animation:nv-speak .9s ease-in-out infinite; }
@keyframes nv-speak { 50% { filter:brightness(1.9); } }
/* Кнопка «Говорящие» (рядом с кнопкой голоса) и левая панель участников голоса */
.nv-side-btn { order:2; }
.nv-side { position:fixed; left:12px; top:50%; transform:translateY(-50%); width:238px; max-width:56vw; background:var(--surface-panel); box-shadow:var(--shadow-popover); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); z-index:29; }
.nv-side[hidden] { display:none; }
.nv-side .voice-list { margin:0; }
.nv-side-empty { list-style:none; font-size:12px; color:var(--text-faint); }
/* строка говорящего: слева АВАТАР 64×64 (портрет персонажа / «М» у мастера), справа имя */
.voice-row.v-person { gap:var(--sp-4); padding:6px; align-items:center; }
.voice-row.v-person .v-name { text-transform:none; font-size:14px; color:var(--text-body); }
.v-ava { width:64px; height:64px; flex:none; background:var(--surface-inset) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text-muted); }
.v-ava.is-master { color:var(--role-master); background:var(--surface-card); }
.voice-row.mod { cursor:pointer; }
.voice-row.mod:hover { filter:brightness(1.1); }
.voice-row.off { opacity:0.42; }
.voice-row.muted .v-ava { filter:grayscale(1) brightness(0.6); }
.voice-row.solo { background:var(--surface-inset); }
.v-muteflag { margin-left:auto; flex:none; display:inline-flex; }
/* пока человек говорит — его аватар пульсирует зелёным (от голоса) */
.voice-row.v-person.speaking .v-ava { animation:nv-ava-pulse .8s ease-in-out infinite; }
@keyframes nv-ava-pulse {
  0%,100% { box-shadow:0 0 8px 2px rgba(90,190,90,0.55); }
  50%     { box-shadow:0 0 22px 6px rgba(90,190,90,0.95); }
}

/* ручка растягивания чата (верхний-левый угол) */
.nc-resize { position:absolute; top:0; left:0; width:28px; height:28px; cursor:nwse-resize; z-index:2;
  background:linear-gradient(135deg, var(--c-harvest-gold) 0 22%, transparent 22%); opacity:0; transition:opacity .12s; }
.nc-resize:hover, .nc-resize.dragging { opacity:1; }

/* инлайн-иконки из пака icon pack */
.ic { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; line-height:0; color:inherit; }
.ic svg { display:block; }

/* ===== ВЫПАДАЮЩИЙ СПИСОК ===== */
/* Базовый вид (.sp-dd*) — стандарт в прослойке public/design-system.css.
   Здесь только подгонка под строку эффектов сцены. */
.sfx-ctl .sp-dd { flex:1; min-width:0; }
.sfx-ctl .sp-dd-trigger { min-width:0; }

/* ===== СЦЕНАРИЙ (записная книжка мастера) ===== */
/* Окно на весь экран: слева дерево листов, справа редактор/чтение. */
.sc-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:78;
  display:flex; align-items:center; justify-content:center; padding:var(--sp-7); }
.sc-overlay[hidden] { display:none; }
.sc-win { width:1120px; max-width:100%; height:88vh; background:var(--surface-card);
  box-shadow:var(--shadow-popover); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
/* Шапка окна сценария: ровно по ширине окна (без «вылезающих» отрицательных полей
   из общей .win-head), высотой 32px, без рамок и обводок. */
.sc-win .win-head { margin:0; height:32px; min-height:32px; padding:0 8px 0 12px; border:none; box-sizing:border-box; }
.sc-win .win-title { font-size:14px; }
.sc-win .win-head .ic-btn { width:28px; height:28px; }
.sc-win .win-head .ic-btn svg { width:14px; height:14px; }
.sc-body { flex:1; display:flex; min-height:0; }

/* — дерево слева — */
.sc-tree { width:300px; flex:none; background:var(--surface-panel);
  display:flex; flex-direction:column; min-height:0; }
.sc-tree-scroll { flex:1; overflow:auto; padding:var(--sp-4); }
.sc-tree-foot { padding:var(--sp-4); }
.sc-tree-foot .btn-add { width:100%; }
.sc-children { margin-left:14px; }
.sc-row { display:flex; align-items:center; gap:4px; padding:3px 4px; cursor:pointer; color:var(--text-body); }
.sc-row:hover { background:var(--surface-card); }
.sc-row.sel { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sc-row.sel .ic-btn { color:var(--text-on-gold); }
.sc-twist { width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.sc-twist .ic { cursor:pointer; }
.sc-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-ui); font-size:14px; padding:2px 2px; }
.sc-name[contenteditable="true"] { background:var(--surface-inset); color:var(--text-strong); outline:none; cursor:text; }
.sc-row-actions { display:none; flex:none; align-items:center; }
.sc-row:hover .sc-row-actions { display:inline-flex; }
.sc-row.sel .sc-row-actions { display:inline-flex; }
.sc-row-actions .ic-btn { width:24px; height:24px; }
.sc-row-actions .ic-btn svg { width:15px; height:15px; }
.sc-eye-on { color:var(--c-harvest-gold); }   /* лист открыт игрокам — глазик золотой */
.sc-row.sel .sc-eye-on { color:var(--text-on-gold); }
/* подсветка зоны при перетаскивании */
.sc-row.drop-before { box-shadow:inset 0 2px 0 var(--c-harvest-gold); }
.sc-row.drop-after { box-shadow:inset 0 -2px 0 var(--c-harvest-gold); }
.sc-row.drop-inside { background:rgba(193,145,60,0.28); }

/* — редактор / чтение справа — */
.sc-editor { flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.sc-ed-inner { flex:1; display:flex; flex-direction:column; min-height:0; }

/* раскрывающаяся подсказка по разметке (пример → результат) */
.sc-legend { flex:none; background:var(--surface-panel); }
.sc-legend > summary { cursor:pointer; padding:7px 12px; list-style:none; font-family:var(--font-display);
  font-weight:700; font-size:12px; text-transform:uppercase;  color:var(--text-muted); }
.sc-legend > summary::-webkit-details-marker { display:none; }
.sc-legend > summary::before { content:'▸ '; }
.sc-legend[open] > summary { color:var(--c-harvest-gold); }
.sc-legend[open] > summary::before { content:'▾ '; }
.sc-legend-grid { padding:6px 14px 12px; display:grid; grid-template-columns:auto 1fr; gap:6px 18px; align-items:center; }
.sc-leg-ex { font-family:"Consolas","Courier New",monospace; font-size:13px; color:var(--text-muted);
  background:var(--surface-inset); padding:3px 8px; white-space:pre; }
.sc-leg-res { color:var(--text-body); font-size:16px; }
.sc-leg-res strong { font-weight:700; color:var(--accent-strong); }
.sc-leg-h1 { font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:19px; }
.sc-leg-h2 { font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:16px; }
.sc-leg-h3 { font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:14px; }
.sc-leg-res hr { border:none; border-top:2px solid var(--border-strong); margin:0; width:90px; }
.sc-ed-head { display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); }
.sc-ed-title { flex:1; font-family:var(--font-display); font-weight:700; color:var(--text-strong);
  font-size:16px; text-transform:uppercase;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-ed-head .ghost { flex:none; }
.sc-ed-body { flex:1; overflow:auto; min-height:0; }
.sc-textarea { width:100%; height:100%; box-sizing:border-box; background:var(--surface-app);
  border:none; resize:none; padding:var(--sp-7); color:var(--text-strong);
  font-family:var(--font-ui); font-size:17px; line-height:1.6; }
.sc-empty { padding:var(--sp-9); color:var(--text-faint); text-align:center; font-size:16px; }

/* — оформление прочитанного текста (наш стиль Markdown) — */
.sc-read { padding:var(--sp-7) var(--sp-8); color:var(--text-body);
  font-family:var(--font-ui); font-size:17px; line-height:1.65; }
/* заголовки: крупные и жирные, БЕЗ подчёркиваний/линий */
.sc-read h1, .sc-read h2, .sc-read h3 { font-family:var(--font-display); color:var(--text-strong);
  font-weight:700; line-height:1.2; margin:0.75em 0 0.35em; border:none; }
.sc-read h1:first-child, .sc-read h2:first-child, .sc-read h3:first-child { margin-top:0; }
.sc-read h1 { font-size:30px; }
.sc-read h2 { font-size:24px; }
.sc-read h3 { font-size:19px; }
.sc-read p { margin:0 0 0.7em; }
.sc-read ul { margin:0 0 0.7em; padding-left:1.4em; }
.sc-read li { margin:0.15em 0; }
.sc-read hr { border:none; border-top:2px solid var(--border-strong); margin:1.1em 0; }
/* выделение жирным = жирный + оранжевый акцент */
.sc-read strong { font-weight:700; color:var(--accent-strong); }

/* — сворачиваемые блоки по заголовкам (sc-fold) — */
.sc-read .sc-fold { margin:0; }
/* заголовок становится flex-строкой, чтобы кнопка встала слева от текста */
.sc-read .sc-fold-head { display:flex; align-items:center; gap:5px; }
/* кнопка-стрелка: маленькая, тихая, появляется ярче при наведении */
.sc-read .sc-fold-btn {
  flex:none;
  width:16px; height:16px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:initial; font-weight:normal; font-size:11px;
  color:var(--text-muted);
  opacity:0.45;
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity 0.15s;
  user-select:none;
}
.sc-read .sc-fold:hover > .sc-fold-head > .sc-fold-btn { opacity:1; color:var(--c-harvest-gold); }
/* иконка-шеврон из пака: поворачивается при сворачивании */
.sc-read .sc-fold-btn .ic { display:block; transition:transform 0.18s; }
.sc-read .sc-fold.collapsed > .sc-fold-head > .sc-fold-btn .ic { transform:rotate(-90deg); }
/* свёрнутое состояние */
.sc-read .sc-fold.collapsed > .sc-fold-body { display:none; }
/* первый блок — без верхнего отступа (как h1:first-child раньше) */
.sc-read .sc-fold:first-child > .sc-fold-head { margin-top:0; }

/* — картинки в листе: обтекание текстом + правка положения/размера у мастера — */
/* по умолчанию на картинке ничего нет; клик → «Изменить»; «Изменить» → уголок и кнопки. */
/* углы везде ровные (border-radius:0) — в проекте скруглений нет. */
.sc-read::after { content:''; display:block; clear:both; }                 /* содержим обтекание */
.sc-read .sc-img { position:relative; margin:0 0 10px; max-width:100%; }
.sc-read .sc-img img { display:block; width:100%; height:auto; }
.sc-read .sc-img-left  { float:left;  max-width:70%; margin:4px 18px 10px 0; }
.sc-read .sc-img-right { float:right; max-width:70%; margin:4px 0 10px 18px; }
.sc-read .sc-img-center { float:none; margin-left:auto; margin-right:auto; }
.sc-read .sc-img-full  { float:none; width:100%; margin:8px 0 12px; }
/* кнопка «Изменить» — в углу, видна при выделении картинки */
.sc-img-edit { position:absolute; top:6px; right:6px; display:none; z-index:3;
  font-family:var(--font-display); font-weight:700; font-size:11px; line-height:1; padding:5px 9px;
  cursor:pointer; border:none; border-radius:0; color:var(--text-on-gold); background:var(--c-harvest-gold); }
.sc-read .sc-img.sel .sc-img-edit { display:block; }
.sc-read .sc-img.editing .sc-img-edit { display:none; }
/* панель положения и уголок — только в режиме правки картинки */
.sc-img-tools { position:absolute; top:6px; left:6px; display:none; gap:3px; z-index:3; }
.sc-read .sc-img.editing .sc-img-tools { display:flex; }
.sc-img-tools button { font-family:var(--font-display); font-weight:700; font-size:11px; line-height:1;
  padding:5px 8px; cursor:pointer; border:none; border-radius:0;
  color:var(--text-on-gold); background:var(--c-harvest-gold); opacity:0.92; }
.sc-img-tools button:hover { opacity:1; }
.sc-img-tools button.on { background:var(--text-strong); color:var(--text-on-gold); opacity:1; }
/* уголок-ручка для растягивания ширины (ровные углы, цвета — палитра проекта) */
.sc-img-grip { position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; cursor:nwse-resize;
  display:none; background:var(--c-harvest-gold); border-radius:0; z-index:3; }
.sc-read .sc-img.editing .sc-img-grip { display:block; }

/* — плавающая кнопка-свиток у игрока (появляется, только если мастер что-то открыл) — */
.sc-fab { position:fixed; bottom:12px; left:16px; width:48px; height:48px; padding:0;
  background:var(--surface-slot); color:var(--text-strong); border:none; cursor:pointer;
  z-index:30; box-shadow:var(--shadow-popover); display:inline-flex; align-items:center; justify-content:center; }
.sc-fab[hidden] { display:none; }
.sc-fab svg { width:26px; height:26px; }

/* ============================================================
   НОВЫЙ ВИД ЛИСТА/ШАБЛОНА ПЕРСОНАЖА (перенос из ОБРАЗЕЦ-СТИЛЯ.html).
   Применяется только к окнам с классом .ed-box.tpl, чтобы не задеть остальные.
   ============================================================ */
/* Шапка окна — высота 32px, крестик во всю высоту, заголовок чуть мельче */
.ed-box.tpl .win-head { min-height:32px; padding:0 var(--sp-5); }
.ed-box.tpl .win-title { font-size:15px; }
.ed-box.tpl .win-head .ic-btn { width:32px; height:32px; }
/* Шапка-контент: портрет тянется во всю высоту блока полей */
.ed-box.tpl .ed-head { display:flex; gap:var(--sp-6); align-items:stretch; }
.ed-box.tpl .ed-portrait { width:150px; height:auto; flex:none; align-self:stretch; }
.ed-box.tpl .ed-portrait::after { font-size:12px; }
.ed-box.tpl .ed-head-fields { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.ed-box.tpl .ed-head-fields input { width:100%; box-sizing:border-box; }

/* Атрибут: иконка + 3px + лейбл на фоне + 3px + значение на фоне (слева, компактно) */
.tpl-attr { display:flex; align-items:center; gap:3px; background:none; padding:0; }
.tpl-attr-ic { width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-slot); }
.tpl-attr-ic svg { display:block; }
.tpl-attr-name { display:inline-flex; align-items:center; height:32px; padding:0 var(--sp-5);
  background:var(--label-bg, var(--c-espresso)); font-family:var(--font-display); font-weight:700; text-transform:uppercase;
   color:var(--label-fg, var(--text-strong)); font-size:14px; min-width:120px; }
.tpl-attr .num-input { width:56px; height:32px; background:var(--surface-inset); text-align:center; }
.tpl-attr .sheet-val { display:inline-flex; align-items:center; justify-content:center; height:32px; min-width:48px;
  padding:0 var(--sp-4); background:var(--surface-inset); font-family:var(--font-display); font-weight:700;
  color:var(--c-harvest-gold); font-size:16px; }
.tpl-attr .insp-row { margin-left:var(--sp-3); }
.tpl-attr > .ic-btn { margin-left:var(--sp-4); }
/* Кубик-проверка в листе: при наведении рисунок становится золотым (как шапка),
   а не темнеет от стандартного brightness. Рисунок иконки = currentColor. */
.tpl-attr > .ic-btn:not(:disabled):hover,
.tpl-skill > .ic-btn:not(:disabled):hover { filter:none; color:var(--c-harvest-gold); background:transparent; }
.tpl-attr > .ic-btn:not(:disabled):active,
.tpl-skill > .ic-btn:not(:disabled):active { filter:none; color:var(--c-deep-gold); background:transparent; }

/* Навык/предмет — карточка со своим фоном (отличается от фона окна), по ширине как блоки выше */
.tpl-skill { display:flex; align-items:center; gap:var(--sp-5); background:var(--surface-panel);
  padding:var(--sp-4) var(--sp-5); box-shadow:var(--inset-well); }
.tpl-skill.faded { opacity:0.5; }
.tpl-skill-icon { width:44px; height:44px; flex:none; background:var(--surface-slot) center/cover no-repeat;
  box-shadow:var(--inset-well); display:inline-flex; align-items:center; justify-content:center; }
.tpl-skill-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tpl-skill-name { font-family:var(--font-display); font-weight:600; text-transform:uppercase;
   color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tpl-skill-sub { font-size:11px; color:var(--text-muted); }
/* надпись цены прокачки рядом с золотым плюсом (режим «Распределить») */
.xp-cost { margin-left:auto; white-space:nowrap; }
.tpl-attr > .xp-cost { margin-left:auto; }
.tpl-attr > .xp-cost + .xp-plus, .xp-cost + .xp-plus { margin-left:var(--sp-3); }
.tpl-field { flex:none; display:flex; align-items:center; gap:3px; }
.tpl-field-cap { display:inline-flex; align-items:center; height:32px; padding:0 var(--sp-5);
  background:var(--c-espresso); color:var(--text-strong); font-family:var(--font-display); font-weight:700;
  font-size:14px; text-transform:uppercase;  }
.tpl-field .sp-dd-trigger { min-width:110px; height:32px; background:var(--surface-inset); font-size:14px; }
.tpl-field .sp-dd-trigger:hover,
.tpl-field .sp-dd[data-open="true"] .sp-dd-trigger { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.tpl-field--rank .sp-dd-trigger { min-width:48px; }
.tpl-field--rank .sp-dd-label { flex:1; text-align:center; }
.tpl-skill > .ic-btn { flex:none; }

/* ===== Полоска пула (здоровье, мана, выносливость и т.п.) =====
   Плашка с иконкой слева + полоска справа. Светлое заполнение поверх тёмного остатка.
   Цвета задаются переменными на строке (--pool-fill / --pool-track / --pool-ic-bg / --pool-ic-fg). */
.pool-row { display:flex; align-items:center; gap:3px; }
.pool-ic { width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; }
.pool-ic svg { display:block; }
.pool-bar { position:relative; flex:1; height:32px; min-width:120px;
  background:var(--pool-track, var(--surface-inset)); overflow:hidden; box-shadow:var(--inset-well); }
.pool-fill { position:absolute; left:0; top:0; bottom:0; width:var(--pool-pct, 100%);
  background:var(--pool-fill, var(--c-harvest-gold)); transition:width var(--dur, .15s) var(--ease, ease); }
/* Потёртости-мазки поверх заливки: серая текстура в «мягком свете» берёт цвет пула
   и делает тон выше/ниже (несколько слоёв запечены в саму текстуру).
   Включается общим переключателем .fx-wear (см. блок «Эффект потёртостей» ниже). */
.fx-wear .pool-bar::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url(tex/pool-wear-1.png) center/cover; mix-blend-mode:soft-light; opacity:.9; }
.fx-wear .pool-row:nth-of-type(3n+2) .pool-bar::after { background-image:url(tex/pool-wear-2.png); }
.fx-wear .pool-row:nth-of-type(3n) .pool-bar::after { background-image:url(tex/pool-wear-3.png); }
.pool-val { position:absolute; right:var(--sp-5); top:0; height:32px; display:flex; align-items:center;
  font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text-strong);
  text-shadow:0 1px 2px rgba(0,0,0,0.6); z-index:1; }
.pool-row > .ic-btn { flex:none; margin-left:var(--sp-4); }
.sheet-pools { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-2); max-width:240px; }

/* ===== Эффект потёртостей (переключатель «Потёртости» в настройках новеллы) =====
   Класс .fx-wear вешается на <html>. Текстура накладывается «Перекрытием» на СОБСТВЕННЫЙ
   фон элемента (background-blend-mode) — исходный цвет фона/кнопки сохраняется, а сверху
   проступает фактура. Текст элементов не затрагивается (это фон, не слой поверх). */
html.fx-wear body {
  background-image:url(tex/bg-concrete.jpg);
  background-size:cover; background-position:center; background-attachment:fixed;
  background-blend-mode:overlay;
}
/* ── Текстуру с КНОПОК убрали по всему проекту (была «дурацкая» на всех кнопках и,
   помимо прочего, перекрывала наши собственные фоны кнопок, например #57574F в лобби).
   Фон-текстура страницы (bg-concrete на body, видна на входе/регистрации) и потёртости
   полосок-пулов ОСТАЮТСЯ. Новую текстуру на нужные кнопки добавляем точечно (см. .sp-tex). ── */

/* ===== Новый лист персонажа: блоки без шапки, поле имени, сеточный инвентарь.
   По ОБРАЗЕЦ-СТИЛЯ.html и токенам. Блоки разделяем ТОЛЬКО заливкой — никаких линий/обводок. ===== */
/* Окно уже: заканчивается там, где заканчиваются пулы (портрет + полоски), без пустого правого края.
   Зазор между блоками — 12px (не 20), и столько же перед кнопкой «Закрыть». */
.ed-box.sheet-view { width:480px; gap:var(--sp-5); }
.ed-box.sheet-view .ed-actions { padding-top:0; }
/* Верхний блок: имя + портрет + пулы. Своя заливка = отдельный блок. */
.sheet-view .sheet-top { background:var(--surface-panel); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-5); }
/* Поле ввода имени персонажа — во всю ширину, крупное, заглавное */
.sheet-name-input { width:100%; box-sizing:border-box; height:auto; padding:var(--sp-4) var(--sp-5);
  background:var(--surface-inset); color:var(--text-strong); font-family:var(--font-display); font-weight:700;
  text-transform:uppercase;  font-size:20px; }
/* Левая колонка: портрет + под ним «Очки опыта» и «Монеты» во всю ширину портрета.
   Заголовок, значение и кнопка — одинаковые рамки-плашки одной высоты, аккуратным столбцом. */
/* Опыт и монеты — ровно ДВЕ строки, каждая в ОДНУ строчку: заголовок + значение + кнопка. */
.sheet-econ { display:flex; flex-direction:column; gap:var(--sp-3); }
.econ-row { display:flex; align-items:center; gap:var(--sp-3); }
.econ-label { flex:none; width:150px; box-sizing:border-box; height:32px; display:flex; align-items:center; justify-content:center;
  padding:0 var(--sp-4); background:var(--c-espresso); color:var(--text-strong); font-family:var(--font-display); font-weight:700;
  text-transform:uppercase;  font-size:13px; white-space:nowrap; }
.econ-val { flex:none; height:32px; min-width:44px; display:flex; align-items:center; justify-content:center; padding:0 var(--sp-4);
  background:var(--surface-inset); color:var(--c-harvest-gold); font-family:var(--font-display); font-weight:700; font-size:15px; }
.econ-btn { flex:1; height:32px; padding:0 var(--sp-5); white-space:nowrap; }
.econ-btn.on { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* Блоки атрибутов и навыков — тоже отдельной заливкой */
.sheet-view .ed-section { background:var(--surface-panel); padding:var(--sp-5); }
/* Навыки — во всю ширину блока (окно теперь узкое) */
.sheet-skills .tpl-skill { max-width:none; }
/* Кнопка «Инвентарь» — во всю ширину */
.sheet-inv-btn { align-self:stretch; width:100%; text-align:center; }
/* Ромбики вдохновения — видны у ВСЕХ атрибутов: пустые — приглушённым тоном, набранные — светлым */
.tpl-attr .insp { background:var(--c-leather); }
.tpl-attr .insp.on { background:var(--c-pale-cream); }

/* Отдельное окно инвентаря: сетка клеток. Пустая клетка и предмет — разной заливкой, без рамок. */
.ed-box.inv-view { width:auto; min-width:0; max-width:100%; }
.inv-title { font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase;
   color:var(--c-parchment); margin:0; }
.inv-grid { display:grid; grid-template-columns:repeat(var(--inv-cols,6), 46px); grid-auto-rows:46px; gap:3px; }
.inv-cell { background:var(--surface-inset); }
.inv-item { position:relative; background:center/cover no-repeat; display:flex; align-items:center; justify-content:center;
  cursor:grab; transition:filter var(--dur) var(--ease); }
.inv-item:hover { filter:brightness(1.15); }
.inv-item.dragging { cursor:grabbing; z-index:20; }
.inv-item-name { font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:10px;
  color:var(--text-strong); text-align:center; padding:2px; line-height:1.1; }
/* подсветка места при перетаскивании: зелёным — влезает, красным — некуда. Только заливкой. */
.inv-hl { position:absolute; z-index:5; pointer-events:none; background:rgba(120,175,90,0.40); }
.inv-hl.bad { background:rgba(200,70,60,0.45); }
/* Фон окна инвентаря (рюкзак): картинка тянется точно в свой размер (шире/выше),
   лежит за прозрачными ячейками — сквозь них видно нарисованные на рюкзаке клетки. */
.inv-stage { margin:0 auto; }
.inv-bg { pointer-events:none; z-index:0; background-position:center; background-repeat:no-repeat; background-size:100% 100%; }
.inv-grid.inv-has-bg { z-index:1; }
.inv-grid.inv-has-bg .inv-cell { background:transparent; }
/* режим фона: у окна инвентаря нет своего задника — виден только рюкзак */
.ed-box.inv-view.inv-bg-mode { background:transparent; padding:0; box-shadow:none; gap:0; }
/* заголовок и кнопка «Закрыть», размещённые мастером прямо на рюкзаке */
/* Заголовок и кнопка «Закрыть»: САМ элемент всегда без фона, тени и обводки (жёстко, через
   !important — чтобы базовый стиль кнопки и фокус-обводка не оставляли «залоченный» фон).
   Любой видимый фон рисуется ТОЛЬКО отдельным слоем .chrome-bg под текстом. */
.inv-bg-title, .inv-bg-close {
  background:transparent !important; background-color:transparent !important; background-image:none !important;
  box-shadow:none !important; border:none !important; outline:none !important;
}
.inv-bg-title { z-index:3; position:relative; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
   color:var(--text-strong); font-size:18px; white-space:nowrap; pointer-events:none; }
.inv-bg-close { z-index:3; position:relative; padding:8px 18px; white-space:nowrap; }
/* слой фона под текстом заголовка/кнопки — отдельно, чтобы прозрачность не задевала текст.
   Именно ЭТОТ слой красится/прячется; сам элемент-кнопка остаётся прозрачным. */
.chrome-bg { position:absolute; inset:0; z-index:0; }
.chrome-tx { position:relative; z-index:1; }

/* ===== МОДУЛЬ ХОЛСТА (sp-canvas): окно-вьюпорт + двигаемый/масштабируемый мир ===== */
.spcv-viewport { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:default; }
.spcv-viewport.spcv-panning { cursor:grabbing; }
/* без will-change:transform — иначе браузер кэширует холст растром и при зуме всё мутнеет.
   Так содержимое (текст, заливки, кнопки) пересчитывается чётко на любом приближении. */
.spcv-world { position:absolute; left:0; top:0; transform-origin:0 0; }

/* ===== ПОЛНОЭКРАННЫЙ РЕДАКТОР ЛИСТА ПЕРСОНАЖА ===== */
/* Слева — вертикальная панель инструментов, по центру — холст. */
/* Разделение блоков только фоном (без тонких линий/обводок). */
.sheet-ed-full { position:fixed; inset:0; z-index:80; display:flex; flex-direction:row; background:var(--c-pitch);
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
/* но в полях ввода выделение и печать текста работают как обычно */
.sheet-ed-full input, .sheet-ed-full textarea, .sheet-ed-full [contenteditable="true"] {
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
/* левая вертикальная панель инструментов */
.sheet-ed-side { flex:none; width:240px; display:flex; flex-direction:column; gap:var(--sp-5);
  padding:var(--sp-6) var(--sp-5); background:var(--surface-panel); overflow-y:auto; }
.sheet-ed-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;
   color:var(--c-harvest-gold); font-size:16px; margin:0; }
.sheet-ed-group { display:flex; flex-direction:column; gap:var(--sp-4); }
.sheet-ed-group .ghost { width:100%; }
.sheet-ed-side .invbg-num { flex-direction:column; gap:2px; }
.sheet-ed-side .invbg-num .num-input { width:100%; box-sizing:border-box; }
.sheet-ed-spacer { flex:1 1 auto; }
.sheet-ed-foot { display:flex; flex-direction:column; gap:var(--sp-4); }
.sheet-ed-foot button { width:100%; }
/* правая панель-инспектор (как в Figma): настройки выбранного элемента. Оформление как у левой
   панели, разделение фоном, без линий/обводок. */
.sheet-ed-inspector { flex:none; width:360px; display:flex; flex-direction:column; gap:var(--sp-5);
  padding:var(--sp-6) var(--sp-6); background:var(--surface-panel); overflow-y:auto; }
.sheet-ed-insp-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase;
   color:var(--c-harvest-gold); font-size:15px; margin:0; }
.sheet-ed-insp-body { display:flex; flex-direction:column; gap:var(--sp-5); }
.sheet-ed-insp-hint { color:var(--text-muted); font-size:13px; line-height:1.4; }
/* «Свойства»: КАЖДАЯ секция настроек — отдельная карточка. Блоки разделяются ФОНОМ и отступом
   (в проекте нет линий/рамок/скруглений). Вложенная секция берёт другой фон, чтобы отделяться. */
.sheet-ed-insp-controls { display:flex; flex-direction:column; gap:var(--sp-4); background:var(--surface-app); padding:var(--sp-5); }
.sheet-ed-insp-controls .sheet-ed-insp-controls { background:var(--surface-card); padding:var(--sp-4); }
.sheet-ed-insp-controls .invbg-mrow { flex-wrap:wrap; }
/* заголовок секции (маленькая шапка над группой настроек) */
.sp-insp-head { font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.04em; color:var(--c-parchment); margin:0; }
/* кнопки в панели читаются как кнопки — своя заливка (не сливаются с карточкой) */
.sheet-ed-inspector .ghost { background:var(--surface-slot); }
.sheet-ed-insp-controls .sheet-ed-insp-controls .ghost { background:var(--surface-inset); }
.sheet-ed-inspector .ghost:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* активная кнопка-режим в правой панели (Заполнить/Вписать/Цвет) — золотая заливкой */
.sheet-ed-inspector .ghost.on { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.sheet-ed-inspector .invbg-num { flex-direction:column; gap:2px; }
.sheet-ed-inspector .invbg-num .num-input { width:100%; box-sizing:border-box; }
/* тост отмены/повтора (Ctrl-Z / Ctrl-Y): короткое всплывающее подтверждение внизу по центру */
.sp-undo-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:3000;
  background:var(--surface-slot); color:var(--text-strong); font-family:var(--font-display); font-size:14px;
  text-transform:uppercase; letter-spacing:.04em; padding:8px 18px; opacity:0; pointer-events:none; transition:opacity .15s; }
.sp-undo-toast.show { opacity:0.96; }
/* по центру — холст-«рабочий стол»: ровный тёмно-серый, как в Figma (без линий/рамок) */
.sheet-ed-stage { position:relative; flex:1 1 auto; overflow:hidden; background:#2b2b2b; }
/* кнопка «+ Чертёж» сверху по центру холста конструктора */
.sheet-ed-addbp { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:20; background:var(--c-harvest-gold); color:var(--text-on-gold); padding:8px 18px; font-size:14px; cursor:pointer; box-shadow:none; }
.sheet-ed-addbp:hover { background:var(--c-deep-gold); color:var(--text-strong); }
/* плавающее управление зумом в углу холста */
.sheet-ed-zoom { position:absolute; left:var(--sp-5); bottom:var(--sp-5); z-index:6;
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--surface-panel); }
.sheet-ed-zoom .ghost { min-width:34px; }
.sheet-ed-pct { min-width:52px; text-align:center; color:var(--text-muted); font-size:13px; }
/* уголки зоны-листа — заливкой (без обводки), чуть светлее и ниже уголков картинки */
.invbg-handle.sheet-zone-h { z-index:4; background:var(--c-pale-cream); }
/* плашка сетки — внизу по центру холста */
.sheet-ed-grid { position:absolute; left:50%; bottom:var(--sp-5); transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); background:var(--surface-panel); }
.sheet-ed-grid-cap { font-size:11px; text-transform:uppercase;  color:var(--text-muted); }
.sheet-ed-grid-step { display:flex; align-items:center; gap:var(--sp-3); }
.sheet-ed-grid-mode { display:flex; gap:var(--sp-3); }
.sheet-ed-grid .ghost { min-width:34px; }
.sheet-ed-grid .ghost.on { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sheet-ed-grid-op { display:flex; align-items:center; gap:var(--sp-3); }
/* заблокированный выделенный элемент — другой оттенок подсветки (заливкой, без обводки) */
.invbg-sel.locked { background:rgba(90,150,210,0.28); }
/* значок замка в верхнем-левом углу заблокированной («пришпиленной») детали листа —
   только сам символ замка, без плашки-фона; клики сквозь него проходят */
.sheet-lock-badge { position:absolute; left:-4px; top:-4px; width:18px; height:18px; z-index:5;
  display:flex; align-items:center; justify-content:center; background:transparent; pointer-events:none; }
.sheet-lock-badge .ic, .sheet-lock-badge svg { width:18px; height:18px; display:block; }
/* умные направляющие выравнивания (тонкие линии-инструмент, как в Figma) */
.sheet-guide-v, .sheet-guide-h { background:#e864a0; pointer-events:none; }
/* рамка выделения (marquee) — заливкой, без обводки */
.sheet-marquee { background:rgba(232,100,160,0.14); pointer-events:none; }
/* ряды кнопок выравнивания в левой панели */
.sheet-ed-align-row { display:flex; gap:var(--sp-3); }
.sheet-ed-align-row .ghost { flex:1; min-width:0; padding-left:4px; padding-right:4px; font-size:12px; }
/* рамки деталей (по кнопке «Показать рамки») — ДВОЙНОЙ край, чтобы контур был виден на ЛЮБОМ фоне:
   тёмная штриховка (видна на светлом фоне-бумаге) + светлое кольцо снаружи (видно на тёмном фоне).
   Цвета системные (--c-pitch / --c-pale-cream). Так контур сам «подстраивается» под яркость фона —
   над картинкой-бумагой один цвет не угадать, а двойной край читается всегда.
   (outline-offset:-1px — штриховка точно по краю, совпадает с линиями выравнивания) */
/* Обёртка детали — флекс (как контейнер карточки .attr-preview): убирает «хвост строки»
   под строчной иконкой, из-за которого кубик/плюсик проседали вниз на листе. */
.sheet-el { display:flex; }
.sheet-ed-full.frames-on .sheet-el { outline:1px dashed var(--c-pitch); outline-offset:-1px; box-shadow:0 0 0 1px var(--c-pale-cream); }
/* в редакторе листа НЕ обрезаем содержимое по краю — чтобы можно было выносить элементы за границу зоны.
   Двойной класс — чтобы перебить overflow:hidden у .invbg-canvas независимо от порядка правил. */
.invbg-canvas.sheet-canvas { overflow:visible; }
/* фон листа больше не таскают мышью — обычный курсор, чтобы можно было обводить блоки рамкой прямо по листу.
   overflow:hidden — для режима «Кроп»: приближённая картинка обрезается по краю листа. */
.sheet-canvas .invbg-img { cursor:default; overflow:hidden; }
/* картинка-фон режима «Кроп»: cover + сдвиг/зум через transform (точка отсчёта — левый-верхний угол) */
.sheet-bg-img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; transform-origin:0 0; pointer-events:none; user-select:none; }
/* окно-фрейм листа (Конструктор системы): «Свернуть» прячет тело окна, оставляя только шапку */
.sheet-canvas.frame-collapsed > :not(.sheet-frame-head) { display:none !important; }
/* группа кнопок в шапке окна-фрейма (справа: свернуть, закрыть) */
.sheet-frame-btns { display:flex; align-items:center; gap:var(--sp-2); }
/* доп. окна-фреймы на холсте (Инвентарь/Навыки/Карта/Тултип) — каркас, заливкой без обводок */
.sp-frame { position:absolute; z-index:4; background:var(--surface-panel); box-shadow:var(--inset-well); }
.sp-frame .win-head { position:relative; margin:0; cursor:move; }
/* компактная шапка окон-фреймов конструктора (Лист/Инвентарь/Навыки/Карта/Тултип/Мастерская) —
   высота 32px по образцу стиля (.tpl-win): кнопки свернуть/закрыть во всю высоту шапки,
   значок 24px помещается по высоте, заголовок чуть мельче. Без рамок/обводок. */
.sheet-frame-head { min-height:32px; padding:0 var(--sp-5); }
.sheet-frame-head .win-title { font-size:15px; }
.sheet-frame-head .ic-btn { width:32px; height:32px; }
.sheet-frame-head .ic-btn svg { width:24px; height:24px; }
.sp-frame-body { padding:var(--sp-5); color:var(--text-muted); display:flex; align-items:center; justify-content:center; text-align:center; }
.sp-frame.collapsed .sp-frame-body, .sp-frame.collapsed .sp-frame-rs { display:none; }
.sp-frame-rs { position:absolute; right:0; bottom:0; width:14px; height:14px; background:var(--c-harvest-gold); cursor:nwse-resize; z-index:5; }
/* мастерская сущностей: кнопки создания + список атрибутов/пулов/навыков/предметов */
.sp-frame-body.sp-workshop { display:block; text-align:left; }
/* окно с fillBody: тело — колонка на всю высоту окна; внутренняя область тянется и прокручивается.
   (сворачивание окна .collapsed .sp-frame-body имеет больший вес и всё равно прячет тело) */
.sp-frame-body.sp-fill { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; text-align:left; }
.sp-workshop-create { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.sp-workshop-sec { margin-bottom:var(--sp-4); }
.sp-workshop-empty { color:var(--text-muted); font-size:13px; padding:2px 0; }
/* вкладки Мастерской (Атрибуты/Пулы/Навыки/Предметы/Детали листа) — компактные чипы, разделение
   ТОЛЬКО фоном (без линий/обводок): активная — золотая заливкой, как чат-вкладки лобби. */
.sp-ws-tabs { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.sp-ws-tab { padding:6px 14px; font-family:var(--font-display); font-weight:400; font-size:13px;
  text-transform:uppercase;  white-space:nowrap; background:var(--surface-inset); color:var(--text-muted); }
.sp-ws-tab:not(:disabled):hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.sp-ws-tab.active { background:var(--c-harvest-gold); color:var(--text-on-gold); font-weight:700; }
.sp-ws-tab.active:not(:disabled):hover { background:var(--c-deep-gold); color:var(--text-on-gold); filter:none; }
/* Окно-сообщение spAlert / spConfirm / spPrompt (ui-alert.js) — всегда поверх всего, в т.ч.
   на телефоне, где общий мобильный стиль прижимает .ed-overlay под меню (z-index 50 !important).
   ⚠ БЕЗ ЗАТЕМНЕНИЯ ФОНА (решение пользователя 07.08.2026): вся картина под окном остаётся
   видна как есть, окно просто всплывает ПО ЦЕНТРУ экрана и отделяется тенью. Раньше оно
   прижималось к верху и гасило всё вокруг — читалось как «экран сломался». */
.ed-overlay.sp-alert { z-index:1400 !important; background:transparent; align-items:center; }
.ed-overlay.sp-alert .ed-box { box-shadow:0 10px 40px rgba(0,0,0,0.75); }
/* Полка деталей в окне «Элементы» (🔧): чипы-витрина. Разделение ТОЛЬКО фоном, углы ровные.
   .live — деталь уже живая (добавляется на чертёж кнопкой «+ Деталь»). */
.sp-shelf { display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-2) 0 var(--sp-4); }
.sp-shelf-chip { padding:5px 10px; font-size:13px; background:var(--surface-inset); color:var(--text-muted); white-space:nowrap; cursor:help; }
.sp-shelf-chip:hover { background:var(--surface-slot); color:var(--text-body); }
.sp-shelf-chip.live { background:var(--surface-slot); color:var(--text-body); }
/* Детали чертежа («Элементы»): число, ромбики-точки, клетка — только заливкой, углы ровные.
   Ромбики — как «вдохновение» (принятая в проекте форма); кругов не вводим. */
.sp-bp-num { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:32px; padding:0 10px;
  background:#161412; color:#C1913C; font-family:var(--font-display); font-weight:700; font-size:18px; }
.sp-bp-dots { display:inline-flex; gap:5px; align-items:center; }
.sp-bp-dot { width:12px; height:12px; transform:rotate(45deg); flex:none; }
.sp-bp-cell { display:inline-block; width:18px; height:18px; }
/* трек-ряд клеток с мультисостояниями: глиф состояния (/, X, *) — текстом-заливкой */
.sp-bp-track { display:inline-flex; gap:4px; align-items:center; }
.sp-bp-tcell { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1; color:#161412; flex:none; }
/* часы-сегменты: круг-пирог как форма часов (сектора заливкой, без обводок) */
.sp-bp-clock { width:44px; height:44px; display:inline-block; vertical-align:middle; }
/* деталь «Колода»: рубашка со счётчиком + кнопка тасовки + последняя вытянутая карта */
.sp-bp-deck { display:inline-flex; align-items:center; gap:6px; }
.sp-bp-deckback { display:inline-flex; align-items:center; padding:8px 12px; background:var(--c-espresso);
  color:var(--c-pale-cream); font-family:var(--font-display); font-weight:700; font-size:13px;
  text-transform:uppercase; white-space:nowrap; }
.sp-bp-deckshuf { font-size:16px; font-weight:700; }
.sp-bp-deckcard { display:inline-flex; align-items:center; padding:6px 10px; background:var(--c-pale-cream);
  color:#161412; font-family:var(--font-display); font-weight:700; font-size:13px; white-space:nowrap; }
/* деталь «Карточка»: прямоугольник-подложка для группировки деталей (только заливка) */
.sp-bp-card { display:inline-block; vertical-align:top; }
/* деталь «Слот»: гнездо выбора экземпляра; пустое — приглашение */
.sp-bp-slot { display:inline-flex; align-items:center; gap:6px; padding:4px 6px; background:var(--surface-inset); }
.sp-bp-slot-empty { color:var(--text-faint); font-size:13px; text-transform:uppercase; font-family:var(--font-display); font-weight:700; padding:2px 6px; }
/* деталь «Бейдж»: плашка-состояние (видна, пока флаг включён / число ≠ 0).
   Скрытая: у игрока не рисуется вовсе; у мастера (внутри конструктора) — полупрозрачная. */
.sp-bp-badge { display:inline-flex; align-items:center; padding:3px 8px; font-family:var(--font-display);
  font-weight:700; font-size:12px; text-transform:uppercase; white-space:nowrap;
  background:var(--danger); color:var(--c-pale-cream); }
.sp-bp-badge-off { display:none; }
.sheet-ed-full .sp-bp-badge-off { display:inline-flex; opacity:0.25; }
/* КНОПКИ ДЕТАЛЕЙ — ТРИ СОСТОЯНИЯ: покой → наведение → нажатие.
   Цвета мастера приходят CSS-переменными (--b-bg / --b-bg-h / --b-bg-p), поэтому :hover и :active
   их перебивают (инлайн-фон бы это сломал). Класс продублирован для веса — чтобы победить общие
   правила кнопок из прослойки. Переход плавный; нажатие срабатывает мгновенно и держится ~150 мс
   (класс .is-press), затем плавно возвращается в наведение или покой. */
.sp-btn3 { background:var(--b-bg, var(--surface-slot)); color:var(--b-fg, var(--text-strong));
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease); }
.sp-btn3.sp-btn3:hover { background:var(--b-bg-h, var(--c-harvest-gold)); color:var(--b-fg-h, var(--text-on-gold)); filter:none; }
.sp-btn3.sp-btn3:active,
.sp-btn3.sp-btn3.is-press { background:var(--b-bg-p, var(--c-deep-gold)); color:var(--b-fg-p, var(--text-on-gold)); filter:none; transition-duration:0s; }
/* деталь «Счётчик»: число с кнопками −/+ по бокам */
.sp-bp-counter { display:inline-flex; align-items:center; gap:4px; }
.sp-bp-cbtn { flex:none; }
/* деталь «Переключатель»: ступени-квадраты + подпись текущей ступени */
.sp-bp-sw { display:inline-flex; align-items:center; gap:4px; }
.sp-bp-swcell { display:inline-block; width:16px; height:16px; flex:none; }
.sp-bp-swcap { font-family:var(--font-display); font-weight:700; font-size:12px; text-transform:uppercase;
  color:var(--text-body); padding:0 4px; white-space:nowrap; }
/* деталь «Текст-поле»: запись игрока (аспект, рана словами) — плашка фоном, углы ровные */
.sp-bp-note { display:inline-block; min-width:120px; max-width:260px; padding:6px 8px;
  background:var(--surface-inset); color:var(--text-body); font-size:13px; line-height:1.4; white-space:pre-line; }
/* «Описание» — мастерский текст в экземпляре (игрок читает): иконка слева + подпись + многострочный текст. Без рамок/скруглений. */
.sp-bp-descr { display:inline-flex; align-items:flex-start; gap:8px; min-width:140px; max-width:300px; padding:6px 8px; background:var(--surface-inset); vertical-align:top; }
.sp-bp-descr-ic { flex:none; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; }
.sp-bp-descr-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sp-bp-descr-cap { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--text-strong); }
.sp-bp-descr-text { color:var(--text-body); font-size:13px; line-height:1.45; white-space:pre-line; word-break:break-word; }
.sp-bp-descr-text[data-empty] { color:var(--text-faint); font-style:italic; }
/* мини-разметка (описание/запись): заголовки, списки, жирный/курсив/подчёркнутый.
   Никаких рамок/скруглений — только размер и заливка текста. */
.sp-md { white-space:normal; }
.sp-md .md-p { margin:0; }
.sp-md .md-br { height:6px; }
.sp-md .md-h { font-family:var(--font-display); color:var(--text-strong); font-weight:700; line-height:1.2; margin:3px 0 1px; }
.sp-md .md-h1 { font-size:1.35em; }
.sp-md .md-h2 { font-size:1.18em; }
.sp-md .md-h3 { font-size:1.05em; text-transform:uppercase; letter-spacing:.03em; }
.sp-md ul, .sp-md ol { margin:2px 0; padding-left:1.35em; }
.sp-md li { margin:1px 0; }
.sp-md b { font-weight:800; }
.sp-md i { font-style:italic; }
.sp-md u { text-decoration:underline; }
/* редактор текста с форматированием (панель кнопок + тянущееся поле + предпросмотр) */
.sp-rt { display:flex; flex-direction:column; gap:6px; margin:2px 0 2px; }
.sp-rt-cap { font-family:var(--font-display); text-transform:uppercase; font-size:11px; letter-spacing:.04em; color:var(--text-strong); margin-top:6px; }
.sp-rt-bar { display:flex; flex-wrap:wrap; gap:4px; }
.sp-rt-btn { background:var(--surface-panel); color:var(--text-body); font-family:var(--font-display); font-size:12px; text-transform:uppercase; padding:4px 9px; cursor:pointer; border:none; border-radius:0; transition:filter var(--dur) var(--ease); }
.sp-rt-btn:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sp-rt-btn[title="Жирный"] { font-weight:800; }
.sp-rt-btn[title="Курсив"] { font-style:italic; }
.sp-rt-btn[title="Подчёркнутый"] { text-decoration:underline; }
.sp-rt-area { width:100%; box-sizing:border-box; min-height:110px; resize:both; background:var(--surface-inset); color:var(--text-body); font-family:var(--font-ui); font-size:13px; line-height:1.5; padding:8px; border:none; border-radius:0; outline:none; }
.sp-rt-prev { background:var(--surface-app); color:var(--text-body); font-size:13px; line-height:1.45; padding:8px; min-height:22px; word-break:break-word; }
.sp-rt-prev.sp-rt-empty { color:var(--text-faint); font-style:italic; }
/* строки таблицы исходов в панели кубика: карточки фоном, поля в строку */
.sp-bp-tblrow { display:flex; flex-direction:column; gap:4px; background:var(--surface-inset); padding:6px; margin-bottom:6px; }
.sp-bp-tblline { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* деталь «Список»: экземпляры другого чертежа строками; разделение строк — ТОЛЬКО фоном */
.sp-bp-list { display:inline-flex; flex-direction:column; gap:4px; align-items:stretch; }
.sp-bp-listrow { display:inline-flex; align-items:center; gap:6px; padding:4px 6px; background:var(--surface-inset); }
.sp-bp-list-empty { color:var(--text-faint); font-size:12px; padding:2px 4px; white-space:nowrap; }
/* Значения чертежа: чипы под предпросмотром (клик → настройки справа), разделение фоном */
.sp-bp-vals { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.sp-bp-val-chip { padding:4px 8px; font-size:12px; background:var(--surface-slot); color:var(--text-body); cursor:pointer; white-space:nowrap; }
.sp-bp-val-chip:hover { background:rgba(197,168,126,0.14); }
.sp-bp-val-chip.sel { background:rgba(193,145,60,0.34); }
/* ═══ Корневой нодовый холст конструктора: секции-чертежи + ноды + провода на cv.world ═══ */
.sp-sec { position:absolute; z-index:6; background:rgba(22,20,18,0.72); }
.sp-sec.sel { background:rgba(33,32,28,0.82); }
.sp-sec-head { display:flex; align-items:center; gap:4px; padding:5px 8px; background:var(--surface-card-head); cursor:move; user-select:none; }
.sp-sec.sel .sp-sec-head { background:var(--c-harvest-gold); }
/* имя рамки — НАДПИСЬ (за шапку рамку тащат); правка имени — из меню «Переименовать» */
.sp-sec-head .sp-sec-title { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--text-strong); font-size:14px; padding:2px 2px; }
.sp-sec.sel .sp-sec-head .sp-sec-title { color:#0F0F0F; }
.sp-sec-head input.sp-sec-titleed { flex:1 1 auto; min-width:0; box-sizing:border-box; background:var(--surface-inset);
  color:var(--text-strong); font-size:14px; padding:1px 4px; border:none; box-shadow:none; }
/* рамка выделения нод: заливка без обводки (линии в проекте запрещены) */
.sp-selbox { position:fixed; z-index:220; pointer-events:none; background:rgba(193,145,60,0.20); }
/* нода, попавшая в выделение: золотая шапка (активная — кремовая, их не спутать) */
.sp-node.msel .sp-node-head { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sp-node.msel .sp-node-kind { color:var(--text-on-gold); }
.sp-sec.locked .sp-sec-head { cursor:default; }
.sp-sec-body { position:relative; min-width:240px; min-height:120px; background-image:radial-gradient(var(--border-soft) 1px, transparent 1.5px); background-size:16px 16px; }
.sp-sec-wires { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.sp-sec-wires .sp-wire { fill:none; stroke-width:2.5; }
.sp-sec-wires .sp-wire-hit { fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; cursor:pointer; }
.sp-node { position:absolute; width:180px; background:var(--surface-card); cursor:grab; user-select:none; z-index:2; }
.sp-node.sel { z-index:3; }
.sp-node-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:4px 8px; background:var(--surface-card-head); color:var(--text-strong); font-size:12px; }
/* ═══ СЕМЕЙСТВА НОД: данные · визуал · экземпляр · счёт · действие ═══════════════════════
   У каждого семейства СВОЙ цвет шапки И свой тёмный фон тела в тон шапке — чтобы холст
   читался с любого расстояния, а не был серым пятном. Разделение только цветом (без линий). */
.sp-node.fam-data { background:#16242E; }
.sp-node.fam-data .sp-node-head { background:#3F6E8C; color:var(--text-on-gold); }
.sp-node.fam-view { background:#241A12; }
.sp-node.fam-view .sp-node-head { background:#8A6A34; color:var(--text-on-gold); }
.sp-node.fam-inst { background:#1E1830; }
.sp-node.fam-inst .sp-node-head { background:#6A54A0; color:var(--text-on-gold); }
.sp-node.fam-calc { background:#2A1608; }
.sp-node.fam-calc .sp-node-head { background:#B0701E; color:var(--text-on-gold); }
.sp-node.fam-act { background:#2A100C; }
.sp-node.fam-act .sp-node-head { background:#A6483A; color:var(--text-on-gold); }
/* выделенная нода: шапка светлеет до кремовой, тело — до тёплого светло-тёмного (не спутать с семейством) */
.sp-node.sel .sp-node-head, .sp-node.fam-data.sel .sp-node-head, .sp-node.fam-view.sel .sp-node-head,
.sp-node.fam-inst.sel .sp-node-head, .sp-node.fam-calc.sel .sp-node-head, .sp-node.fam-act.sel .sp-node-head
  { background:var(--c-pale-cream); color:var(--text-on-gold); }
.sp-node.sel { background:#3A342A; }
.sp-node-kind { flex:none; font-size:11px; color:rgba(15,15,15,0.62); }
.sp-node.sel .sp-node-kind { color:var(--text-on-gold); }
.sp-node-body { padding:6px 8px; min-height:20px; overflow:hidden; }
.sp-node-val { font-size:15px; color:var(--text-strong); }
.sp-node-flag { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-strong); cursor:pointer; }
/* уголок-сворачивалка в шапке: прячет поля-настройки ноды (состояние запоминается) */
.sp-node-fold { flex:none; width:14px; text-align:center; font-size:11px; color:rgba(15,15,15,0.7); cursor:pointer; }
.sp-node-fold:hover { color:var(--text-on-gold); }
.sp-node.folded .sp-node-fields { display:none; }
/* ФОРМА ГНЕЗДА = вид данных: ромб — число, квадрат — да/нет, круг — кость, полоска — текст,
   треугольник — порядок действий. Форму видно сразу: не подошла — значит, ведёшь не туда. */
.sp-node-sock { position:absolute; top:50%; margin-top:-6px; width:12px; height:12px; transform:rotate(45deg); }
.sp-node-sock.in { left:-6px; }
.sp-node-sock.out { right:-6px; cursor:crosshair; }
.sp-node-sock.sk-flag { transform:none; }
.sp-node-sock.sk-die { transform:none; border-radius:50%; }
.sp-node-sock.sk-text { transform:none; width:14px; height:7px; margin-top:-3px; }
.sp-node-sock.sk-exec { transform:none; width:12px; height:14px; margin-top:-7px; clip-path:polygon(0 0,100% 50%,0 100%); }
/* ноды-математики и условия: ВХОДЫ — строками слева (свой сокет), ВЫХОД — строкой снизу справа */
.sp-node.n-calc { width:162px; }
.sp-node-body.sp-calc-body { padding:3px 0 3px; }                 /* строки во всю ширину — сокеты точно на краю ноды */
.sp-calc-in { position:relative; height:24px; display:flex; align-items:center; }
.sp-calc-in-lbl { padding-left:12px; font-size:12px; color:#F8EAB9; }
/* строка ВЫХОДА — снизу, справа, другим фоном (разделяем фоном, не линией) → видно, что это вывод.
   Подложки внутри ноды — прозрачная чернота, чтобы не спорить с цветом семейства. */
.sp-calc-out { position:relative; height:26px; margin-top:2px; display:flex; align-items:center; justify-content:flex-end; gap:5px; padding-right:12px; background:rgba(0,0,0,0.32); }
.sp-calc-out-cap { font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--c-ancient-bone); }
.sp-calc-out-val { font-size:12px; font-weight:700; color:#F0C067; }
.sp-calc-num { width:100%; box-sizing:border-box; }
.sp-node-sock.in.vis { top:auto; bottom:6px; margin-top:0; }      /* вход детали «показывать если» (снизу слева) */
.sp-node-sock.in.two { top:16px; margin-top:0; }                  /* второй вход-данные: «всего» у повторителя, «длина» у трека */
.sp-node-sock.in.full { top:auto; bottom:6px; margin-top:0; }     /* «трек полон → включить флаг» (снизу слева) */
/* ноды с полями-строками (Кубик с таблицей исходов, Переключатель, Список/Слот) — шире */
.sp-node.n-wide { width:auto; min-width:300px; max-width:360px; }
/* выпадашки и поля ВНУТРИ ноды не должны вылезать за её край: ужимаются по месту */
.sp-node .sp-br-row { flex-wrap:nowrap; }
.sp-node .sp-br-row .sp-dd { flex:1 1 auto; min-width:0; }
.sp-node .sp-br-row .sp-dd-trigger { width:100%; min-width:0; }
.sp-node .sp-br-row .sp-calc-in-lbl { flex:none; padding-left:0; white-space:nowrap; }
.sp-node-cap { padding:5px 10px; font-size:11px; color:var(--c-ancient-bone); background:rgba(0,0,0,0.32); }
.sp-tbl-row { background:rgba(0,0,0,0.32); margin:3px 0; padding:2px 0; }
.sp-pick-box { max-height:150px; overflow-y:auto; padding:4px 10px; display:flex; flex-direction:column; gap:4px; }
.sp-node-cards { width:100%; box-sizing:border-box; height:90px; resize:vertical; background:var(--surface-inset); color:var(--text-strong); font-size:12px; padding:4px 6px; border:none; box-shadow:none; }
/* общая розетка ЧЕРТЕЖА в шапке рамки: ссылка на чертёж целиком (для «Списка» и «Слота») */
.sp-sec-sock { flex:none; width:14px; height:14px; transform:rotate(45deg); background:#C1913C; cursor:crosshair; margin-left:8px; }
/* БЕЛЫЙ ПРОВОД ПОРЯДКА: «при нажатии» → действие → «потом» → действие (что делает кнопка) */
.sp-node.n-act { width:190px; }
.sp-node-sock.in.exec { top:9px; margin-top:0; }
.sp-node-sock.out.exec { top:9px; margin-top:0; }
.sp-node-sock.out.sheet { top:auto; bottom:6px; margin-top:0; cursor:grab; }  /* «на лист» у экземпляра (снизу справа) */
.sp-node-sock.out.fld { top:auto; bottom:6px; margin-top:0; }                 /* «настроить у экземпляра» у детали */
/* ПРАВКА ИМЕНИ/ТЕКСТА ПРЯМО НА НОДЕ: двойной клик по заголовку (в «Свойствах» этих полей нет) */
.sp-node-name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-node-name.can-edit { cursor:text; }
.sp-node-nameed { flex:1 1 auto; min-width:0; box-sizing:border-box; background:var(--surface-inset); color:var(--text-strong); font-size:12px; padding:1px 4px; border:none; box-shadow:none; }
/* нода «ВЕТКА»: строки «если [a] [знак] [b] → выдать [значение]» + «+ ещё условие» + «иначе» */
.sp-node.n-branch { width:auto; min-width:320px; }
.sp-node.n-branch .sp-node-body { padding:4px 0 4px; }
.sp-br-row { position:relative; display:flex; align-items:center; gap:5px; padding:3px 12px; min-height:28px; }
.sp-br-elserow { background:var(--surface-inset); margin-top:2px; }
.sp-br-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--c-ancient-bone); white-space:nowrap; }
.sp-br-arrow { font-size:11px; color:var(--c-ancient-bone); white-space:nowrap; }
.sp-br-slot { position:relative; margin-left:8px; display:inline-flex; align-items:center; }
.sp-br-slot .sp-node-sock.in { left:-8px; }
.sp-br-num { width:46px; box-sizing:border-box; text-align:center; }
.sp-br-txt { width:78px; box-sizing:border-box; font-size:12px; padding:2px 5px; background:var(--surface-inset); color:var(--text-body); border:none; border-radius:0; outline:none; }
/* переключатель строки: сравниваем ЧИСЛА (123) или ТЕКСТ (Abc) */
.sp-br-mode { flex:none; background:var(--surface-panel); color:var(--c-ancient-bone); font-family:var(--font-display); font-size:10px; padding:2px 5px; cursor:pointer; border:none; border-radius:0; }
.sp-br-mode:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* нода «Источник» — данные персонажа (атрибут, пул, опыт, предметы, счёт экземпляров) */
.sp-node.n-ext { width:auto; min-width:210px; }
.sp-ext-row { padding:5px 10px; }
/* РАМКА ФУНКЦИИ — своя нода, собранная из других: входы слева, операции, один выход справа */
/* функция — это РАСЧЁТ, поэтому она в семействе «счёт» (оранжевое), но помечена знаком ƒ */
.sp-sec.sp-sec-fn { background:rgba(34,20,8,0.80); }
.sp-sec.sp-sec-fn .sp-sec-head { background:#B0701E; }
.sp-sec.sp-sec-fn.sel .sp-sec-head { background:var(--c-pale-cream); }
.sp-sec.sp-sec-fn .sp-sec-head input.sp-sec-title { color:var(--text-on-gold); }
.sp-sec-fnmark { flex:none; color:var(--text-on-gold); font-family:var(--font-display); font-size:15px; padding:0 6px 0 2px; }
/* крестик окна функции: закрывает поле, саму функцию не трогает */
.sp-sec-x { flex:none; width:20px; height:20px; padding:0; line-height:1; font-size:12px;
  background:transparent; color:var(--text-on-gold); cursor:pointer; }
.sp-sec-x:hover { background:var(--c-pale-cream); color:var(--text-on-gold); }
.sp-node.n-fn { width:auto; min-width:200px; }
/* поля-настройки прямо на ноде (старт/мин/макс, клеток, сегментов, размеры) — свои строки */
.sp-nf-row { position:relative; display:flex; align-items:center; gap:6px; padding:2px 10px; min-height:26px; }
.sp-nf-cap { flex:1 1 auto; font-size:12px; color:var(--c-ancient-bone); }
.sp-nf-num { flex:none; width:64px; box-sizing:border-box; text-align:center; height:24px; font-size:12px; }
.sp-nf-btns { display:flex; flex-wrap:wrap; gap:3px; padding:2px 10px 4px; }
.sp-nf-btns button { padding:2px 6px; font-size:11px; }
.sp-nf-btns button.on { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sp-nf-note { padding:3px 10px 5px; font-size:11px; color:var(--text-muted); }
.sp-nf-text { width:calc(100% - 20px); margin:2px 10px 5px; box-sizing:border-box; height:60px; resize:vertical;
  background:rgba(0,0,0,0.32); color:var(--text-strong); font-size:12px; padding:4px 6px; border:none; box-shadow:none; }
/* окно «Шаблоны систем»: карточка готовой системы (разделение фоном, без линий и скруглений) */
.sp-tpl-card { background:var(--surface-card); padding:10px 12px; margin-bottom:8px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.sp-tpl-name { font-family:var(--font-display); font-weight:700; text-transform:uppercase; color:var(--text-strong); font-size:14px; }
.sp-tpl-hint { color:var(--text-muted); font-size:12px; line-height:1.5; margin:0; }
/* окно «Экземпляры»: раскрывающийся блок на каждый чертёж (разделение фоном, без линий) */
/* строка-шапка чертежа: сам заголовок + плюсик «новый экземпляр» справа */
.sp-inst-headrow { display:flex; align-items:stretch; gap:0; }
.sp-inst-plus { flex:none; width:34px; margin-top:6px; padding:0; font-size:16px; line-height:1;
  background:var(--surface-card-head); color:var(--text-strong); cursor:pointer; }
.sp-inst-plus:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* уголок раскрытия настроек экземпляра + сама панель настроек под строкой */
.sp-inst-gear { flex:none; width:18px; padding:0; font-size:11px; line-height:1; background:transparent; color:var(--text-muted); cursor:pointer; }
.sp-inst-gear:hover { background:transparent; color:var(--c-harvest-gold); filter:none; }
.sp-inst-cfg { background:var(--surface-inset); padding:6px 8px; }
.sp-inst-head { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; padding:7px 10px; margin-top:6px;
  background:var(--surface-card-head); color:var(--text-strong); font-family:var(--font-display);
  font-size:12px; text-transform:uppercase; cursor:pointer; border:none; border-radius:0; text-align:left; }
.sp-inst-head:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sp-inst-arrow { flex:none; font-size:11px; }
.sp-inst-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-inst-cnt { flex:none; font-size:11px; color:var(--c-ancient-bone); }
.sp-inst-head:hover .sp-inst-cnt { color:var(--text-on-gold); }
.sp-inst-row { margin-left:10px; }
/* НАША подсказка вместо системной (см. ui-tip.js): элементу ставится data-tip, плашка следует
   за курсором. Без рамок и скруглений — по правилам проекта. */
/* ЭМУЛЯТОР ИГРОКА: конструктор — слой 80, а лист игрока 70 и диалог броска 80, поэтому без
   подъёма интерфейс игрока оказывался ПОД конструктором и его не было видно. Пока идёт
   эмуляция (класс на body) поднимаем всё «игроцкое» выше конструктора. */
/* ЭКРАН эмулятора внутри окна «Эмулятор игрока»: окно работает как монитор игрока —
   растянул окно, и интерфейс игрока перестроился под новый размер, как у него на экране.
   transform обязателен: он делает эту область точкой отсчёта для слоёв игрока (они
   position:fixed) — без него они лягут на весь экран поверх конструктора. Он же создаёт
   отдельный слой, поэтому изнутри окна ничего наружу не вылезает. */
.sp-emu-screen { position:relative; flex:1 1 auto; min-height:0; overflow:hidden;
  transform:translateZ(0); background:var(--surface-inset); }
.sp-emu-screen .ed-overlay, .sp-emu-screen .player-char, .sp-emu-screen .mule-bar { position:absolute; }
body.sp-emu .ed-overlay { z-index:200; }
body.sp-emu .ed-overlay.roll-dialog { z-index:220; }
body.sp-emu .player-char, body.sp-emu .mule-bar { z-index:210; }
/* ОКНО «ЛИСТ ПЕРСОНАЖА» у мастера. Внутри — тот же экран игрока (.sp-emu-screen), поэтому
   окно устроено колонкой: шапка сверху, экран забирает всю оставшуюся высоту. Своих полей
   у окна нет (padding:0) — лист сам знает, как ему разложиться. Разделение — фоном. */
.ed-box.sp-charwin { width:min(94vw, 560px); height:min(86vh, 820px); padding:0; gap:0; }
.ed-box.sp-charwin .win-head { min-height:32px; padding:0 var(--sp-5); flex:0 0 auto; }
.ed-box.sp-charwin .win-title { font-size:15px; }
.ed-box.sp-charwin .win-head .ic-btn { width:32px; height:32px; }
/* полоса-напоминание с выходом: всегда сверху, чтобы из эмулятора можно было выйти в один клик */
.sp-emu-bar { position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:300;
  display:flex; align-items:center; gap:12px; padding:7px 14px;
  background:var(--c-harvest-gold); color:var(--text-on-gold);
  font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.sp-emu-bar button { background:var(--surface-panel); color:var(--text-body); border:none; border-radius:0;
  font-family:var(--font-display); font-size:12px; text-transform:uppercase; padding:4px 10px; cursor:pointer; }
.sp-emu-bar button:hover { background:var(--c-espresso); color:var(--text-strong); }
.sp-tip { position:fixed; z-index:2000; pointer-events:none; max-width:280px;
  background:var(--surface-panel); color:var(--text-body); font-size:12px; line-height:1.45;
  padding:6px 9px; box-shadow:var(--shadow-popover); white-space:pre-line;
  border:none; border-radius:0; }
.sp-br-wired { font-size:11px; font-weight:700; color:#C1913C; padding:0 4px; white-space:nowrap; }
.sp-br-del { flex:none; background:transparent; color:var(--text-faint); font-size:15px; line-height:1; padding:2px 5px; cursor:pointer; border:none; }
.sp-br-del:hover { background:var(--danger); color:var(--text-strong); }
.sp-br-add { margin:3px 12px; background:var(--surface-panel); color:var(--text-body); font-family:var(--font-display); font-size:11px; text-transform:uppercase; padding:4px 9px; cursor:pointer; border:none; border-radius:0; }
.sp-br-add:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* деталь с невыполненным условием «показывать если»: у игрока не рисуется (player-sheet),
   у мастера (предпросмотр чертежа / редактор листа) — тускло, чтобы видеть и настраивать */
.sp-preview-part [data-off] { opacity:0.4; }
.sheet-ed-full [data-off]:not(.sp-bp-badge-off) { opacity:0.4; }
/* деталь с невыполненным условием «показывать если»: у игрока не рисуется (player-sheet),
   у мастера (предпросмотр чертежа / редактор листа) — тускло, чтобы видеть и настраивать */
.sp-preview-part [data-off] { opacity:0.4; }
.sheet-ed-full [data-off]:not(.sp-bp-badge-off) { opacity:0.4; }
/* окно предпросмотра внутри чертежа: карточка «как на листе» со свободной раскладкой */
.sp-preview { position:absolute; z-index:2; background:var(--surface-card); }
.sp-preview-head { padding:4px 8px; background:#6E5A3A; color:var(--text-strong); font-size:12px; cursor:move; }
.sp-preview-body { padding:8px; }
.sp-preview-card { position:relative; overflow:hidden; background:var(--surface-inset); }
/* деталь в предпросмотре: тонкая ПУНКТИРНАЯ рамка-мерка (только в редакторе — игрок не видит).
   контраст любому фону: светлый пунктир + тонкая тёмная подложка-кольцо */
.sp-preview-part { position:absolute; cursor:grab; outline:1px dashed #F8EAB9; box-shadow:0 0 0 1px rgba(15,15,15,0.55); }
.sp-preview-part > * { pointer-events:none; }
.sp-preview-rz { position:absolute; right:0; bottom:0; width:12px; height:12px; background:var(--c-harvest-gold); cursor:nwse-resize; }
/* умные направляющие выравнивания в карточке (как в Фигме): тонкая линия во всю карточку при совпадении */
.sp-guide { position:absolute; z-index:6; pointer-events:none; background:#C1913C; }
.sp-guide.v { top:0; bottom:0; width:1px; }
.sp-guide.h { left:0; right:0; height:1px; }
.sp-ctx { position:fixed; z-index:200; background:var(--surface-tooltip); padding:4px; display:flex; flex-direction:column; min-width:180px; }
.sp-ctx-item { text-align:left; background:transparent; color:var(--text-body); font-size:13px; padding:7px 10px; cursor:pointer; }
.sp-ctx-item:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* Попап «+ Деталь» / «+ Значение» чертежа: колонка видов (на базе col-pop) */
.col-pop.sp-part-pop { grid-template-columns:1fr; width:240px; gap:2px; }
.sp-part-pop button.sp-part-add { width:100%; height:auto; text-align:left; padding:6px 8px;
  background:var(--surface-inset); color:var(--text-body); font-size:13px; box-shadow:none; }
.sp-part-pop button.sp-part-add:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); box-shadow:none; }
.sp-part-pop .sp-part-hint { display:block; font-size:11px; color:var(--text-faint); }
.sp-part-pop button.sp-part-add:hover .sp-part-hint { color:var(--text-on-gold); }
.sp-ent-row { display:flex; align-items:center; gap:var(--sp-3); padding:4px 6px; background:var(--surface-inset); margin-top:4px; }
.sp-ent-ic { width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.sp-ent-name { color:var(--text-body); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Окно сущностей по чертежу («Заклинания», «Оружие»…): строка = чип «на лист» + живой предпросмотр + крестик */
.sp-bpwin-row { display:flex; align-items:center; gap:var(--sp-3); padding:8px 10px; margin-top:var(--sp-2); background:var(--surface-inset); }
.sp-bpwin-row .sp-ent-row { flex:none; margin-top:0; background:var(--surface-slot); }
.sp-bpwin-prev { display:flex; align-items:center; gap:8px; flex:1 1 auto; flex-wrap:wrap; min-width:0; cursor:pointer; padding:4px 6px; }
.sp-bpwin-prev:hover { background:rgba(197,168,126,0.10); }
/* Мастерская: полоска «перетащи на лист» (чипы сущностей) над инлайн-настройкой — разделение фоном */
.sp-ws-drag { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; margin-bottom:var(--sp-4); background:var(--surface-inset); padding:var(--sp-3); }
.sp-ws-drag-hint { width:100%; font-size:11px; color:var(--text-faint); }
.sp-ws-drag .sp-ent-row { margin-top:0; max-width:180px; background:var(--surface-slot); }
/* сущность/деталь уже перетянута на лист: серая полупрозрачная, повторно не тащится (одиночная) */
.sp-ent-row.placed { cursor:default; }
.sp-ent-row.placed .sp-ent-ic { opacity:0.35; filter:grayscale(0.85); }
.sp-ent-row.placed .sp-ent-name { color:var(--text-faint); }
/* крестик у серой (размещённой) сущности в Мастерской: убрать её блок с листа → снова активна */
.sp-chip-x { flex:none; margin-left:auto; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:var(--danger); border-radius:50%; cursor:pointer; }
/* инлайн-настройка внутри Мастерской: коробка редактора без всплывающего вида — на всю ширину, без тени */
.sp-ws-editor .ed-box, .ed-box-inline { width:100%; max-width:none; box-shadow:none; padding:0; background:transparent; gap:var(--sp-5); }
/* перетаскиваемые строки мастерской и «призрак» под курсором при переносе на лист */
.sp-draggable { cursor:grab; }
.sp-draggable:active { cursor:grabbing; }
.sp-drag-ghost { position:fixed; z-index:900; pointer-events:none; background:var(--c-harvest-gold); color:var(--text-on-gold); font-size:13px; font-weight:700; padding:4px 8px; white-space:nowrap; }
/* пунктирная граница видимой зоны листа (маркер-инструмент по прямой просьбе): только пунктир */
.sheet-zone-outline { border:2px dashed var(--c-pale-cream); }
/* вдохновение: ряд ромбиков (заливкой, без обводки); число ромбиков задаётся мастером */
.sp-insp-row { display:flex; gap:4px; align-items:center; }
.sp-insp-dot { width:12px; height:12px; background:var(--c-harvest-gold); transform:rotate(45deg); }
/* окно навыков у игрока (как окно инвентаря): фикс. ширина, прокрутка при переполнении */
.skills-view { position:absolute; width:300px; max-height:80vh; overflow-y:auto; }
/* Конструктор системы: затемнение-«прожектор» вокруг листа ОТКЛЮЧЕНО — на холсте много окон,
   и оно гасило/прикрывало их. Лист теперь живёт только в своей зоне (границы показывает пунктир).
   Элемент оставлен пустым, чтобы при желании вернуть подсветку выхода за зону по-умному позже. */
.sheet-zone-mask { pointer-events:none; }

/* Редактор фона инвентаря (мастер): рабочее поле, картинка, ориентиры-ячейки, уголки-ручки. */
.invbg-canvas { position:relative; margin:var(--sp-5) auto 0; overflow:hidden; background:var(--surface-inset); }
.invbg-img { position:absolute; z-index:0; background-position:center; background-repeat:no-repeat; background-size:100% 100%; cursor:move; }
.inv-grid .inv-cell.invbg-cell { background:rgba(197,168,126,0.28); }
.invbg-handle { position:absolute; z-index:6; width:14px; height:14px; background:var(--c-harvest-gold); cursor:nwse-resize; }
.invbg-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
/* подсветка выбранного элемента (заливкой, без обводки) — двигается стрелками клавиатуры */
.invbg-sel { position:absolute; z-index:2; background:rgba(193,145,60,0.20); pointer-events:none; }
/* выбранный угловой якорь — светлее и чуть крупнее (заливкой, без обводки) */
.invbg-handle.sel { background:var(--c-pale-cream); transform:scale(1.35); }
/* геометрия сетки в редакторе */
.invbg-geom { display:flex; flex-wrap:wrap; gap:var(--sp-5); }
.invbg-num { display:flex; flex-direction:column; gap:2px; }
.invbg-num-cap { font-size:11px; text-transform:uppercase;  color:var(--text-muted); }
.invbg-num .num-input { width:84px; }
/* меню настроек заголовка/кнопки (ПКМ) */
.invbg-cmenu { display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-5); min-width:280px; }
.invbg-mrow { display:flex; align-items:center; gap:var(--sp-4); }
.invbg-mrow.invbg-mrow-col { flex-direction:column; align-items:stretch; gap:3px; }
.invbg-mrow .invbg-num-cap { flex:none; }
/* поле «Текст» — на всю ширину меню и повыше, чтобы было видно */
.invbg-text { width:100%; box-sizing:border-box; font-size:15px; padding:9px 10px; }
.invbg-bgbox { display:flex; flex-direction:column; gap:var(--sp-4); background:var(--surface-panel); padding:var(--sp-4); }
.invbg-op { flex:1; }
/* закреплённая снизу строка с кнопкой «Сохранить», чтобы всегда была видна */
.invbg-foot { position:sticky; bottom:0; background:var(--surface-card); z-index:2; }
/* подложка под заголовком, когда мастер включил фон */
.inv-bg-title.has-bg { padding:4px 10px; }
/* простой список инвентаря (галочка снята) — окно поуже, строки как навыки */
.ed-box.inv-view.inv-list-mode { width:320px; }
.inv-list-mode .tpl-skill.rollable { cursor:context-menu; }
/* Контекстное меню по предмету (правая кнопка) — заливкой, без обводок */
.ctx-menu { position:fixed; z-index:700; background:var(--surface-card); box-shadow:var(--shadow-popover);
  display:flex; flex-direction:column; min-width:120px; }
.ctx-item { display:flex; align-items:center; gap:var(--sp-3); justify-content:flex-start; text-align:left;
  background:var(--surface-card); color:var(--text-body); padding:var(--sp-4) var(--sp-5); }
.ctx-item:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }

/* Прокачка за опыт: золотой плюсик у атрибута/навыка + окно выбора нового навыка */
.xp-plus { flex:none; color:var(--c-harvest-gold); }
.xp-plus.faded { opacity:0.4; }
.ed-box.skill-pick-box { max-width:680px; width:90vw; }
.skill-pick-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:var(--sp-4); }
.skill-pick { display:flex; align-items:center; gap:var(--sp-4); text-align:left; cursor:pointer;
  background:var(--surface-panel); padding:var(--sp-4); box-shadow:var(--inset-well); transition:filter var(--dur) var(--ease); }
.skill-pick:hover { filter:brightness(1.3); }

/* Пул иконок (выбор формы в редакторе атрибутов) */
.tpl-pool { display:flex; flex-wrap:wrap; gap:3px; background:var(--surface-panel); padding:var(--sp-5);
  box-shadow:var(--inset-well); }
.tpl-pool .ic { width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-slot); cursor:pointer; box-shadow:var(--inset-well); }
.tpl-pool .ic:hover { box-shadow:0 0 0 2px var(--c-harvest-gold); }
.tpl-pool .ic[data-selected="true"] { box-shadow:0 0 0 2px var(--c-harvest-gold); }

/* Свотч текущего цвета + попап палитры дизайна */
.ic-swatch { width:28px; height:28px; flex:none; padding:0; border:none; cursor:pointer; box-shadow:var(--inset-well); }
.ic-swatch:hover { box-shadow:0 0 0 2px var(--c-harvest-gold); }
.col-pop { position:absolute; z-index:90; display:none; grid-template-columns:repeat(8, 24px); gap:4px;
  padding:var(--sp-5); background:var(--surface-card); box-shadow:var(--shadow-popover); }
.col-pop.open { display:grid; }
.col-pop button { width:24px; height:24px; padding:0; border:none; cursor:pointer; box-shadow:var(--inset-well); }
.col-pop button:hover { box-shadow:0 0 0 2px var(--c-harvest-gold); }
/* «прозрачный фон» — белый квадрат с красным перекрестием (перекрестие рисуем заливкой-градиентом, без обводок) */
.col-pop .col-transp { background:#fff; position:relative; }
.col-pop .col-transp::after { content:""; position:absolute; inset:2px; background:
  linear-gradient(45deg, transparent 42%, #d64545 42%, #d64545 58%, transparent 58%),
  linear-gradient(-45deg, transparent 42%, #d64545 42%, #d64545 58%, transparent 58%); }
/* ПАЛИТРА С ПРОЗРАЧНОСТЬЮ: сетка цветов, под ней подпись с текущим процентом
   и ползунок. Сама плашка становится колонкой, а сеткой остаётся только ряд
   цветов — иначе ползунок встал бы в сетку как ещё один «цвет». */
.col-pop.col-pop-v.open { display:flex; flex-direction:column; gap:var(--sp-3); }
.col-pop-grid { display:grid; grid-template-columns:repeat(8, 24px); gap:4px; }
.col-pop-op { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.col-pop-op-cap { color:var(--text-faint); font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.col-pop-op-val { color:var(--c-pale-cream); font-family:var(--font-display); font-size:11px; }
.col-pop-v .slider { width:100%; }
.col-pop-v .slider.off { opacity:.35; cursor:default; }
/* Попап выбора формы иконки */
.col-pop.ic-pop { grid-template-columns:repeat(6, 36px); }
.ic-pop .ic { width:34px; height:34px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface-slot); cursor:pointer; box-shadow:var(--inset-well); }
.ic-pop .ic:hover { box-shadow:0 0 0 2px var(--c-harvest-gold); }
/* Строка цветов в редакторе атрибута */
.tpl-colorbar { display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:center; }
.tpl-colorbar .cb-item { display:inline-flex; align-items:center; gap:var(--sp-3); }
.tpl-colorbar .cb-cap { font-size:11px; text-transform:uppercase;  color:var(--text-faint); }

/* ============================================================
   Набор игроков, расписание сессий и календарь доступности
   ============================================================ */

/* — Разделы в окне настроек новеллы (разделяем фоном, без линий) — */
.nset-section { display:flex; flex-direction:column; gap:var(--sp-5); background:var(--surface-panel); padding:var(--sp-6); }
.nset-sec-title { font-family:var(--font-display); text-transform:uppercase;  color:var(--text-strong); font-size:15px; margin:0; }
.nset-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); }
.nset-hint { font-size:12px; color:var(--text-muted); margin:0; }

/* — Набор: счётчик мест и слоты — */
.recruit-count { font-family:var(--font-display); font-weight:700; color:var(--c-harvest-gold); font-size:18px; }
.slot-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.slot-row { display:flex; align-items:center; gap:var(--sp-4); min-height:36px; padding:6px 10px; background:var(--surface-card); color:var(--text-strong); font-size:14px; }
.slot-row .slot-num { color:var(--text-faint); font-variant-numeric:tabular-nums; min-width:18px; }
.slot-row .slot-name { flex:1; text-transform:uppercase;  }
/* Свободный слот — пунктиром (по явной просьбе: незанятые рисуются пунктиром) */
.slot-row.empty { background:transparent; outline:2px dashed var(--c-leather); outline-offset:-2px; color:var(--text-faint); }
.slot-row.empty .slot-name { color:var(--text-faint); font-style:italic;  }

/* — Заявки на вступление — */
.req-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.req-row { display:flex; align-items:center; gap:var(--sp-4); padding:6px 10px; background:var(--surface-slot); color:var(--text-strong); font-size:14px; }
.req-row .req-name { flex:1; text-transform:uppercase;  }
.req-row .ic-btn.ok { color:var(--avail-free); }

/* ===== СЦЕНА ДИАЛОГА (кинематографичные портреты, вырастают снизу) ===== */
.stage-overlay { position:fixed; inset:0; z-index:40; pointer-events:none; }
.stage-overlay[hidden] { display:none; }
/* затемнение поверх всей игры — заливкой, без рамок (немного, чтобы читалась сцена под ним) */
.stage-backdrop { position:absolute; inset:0; background:rgba(8,6,5,0.62); z-index:0;
  pointer-events:auto; animation:stageFade .25s var(--ease); }
@keyframes stageFade { from { opacity:0; } to { opacity:1; } }
/* стороны: игроки слева, персонажи мастера справа — портреты прибиты к НИЗУ, не вплотную к стенке */
.stage-side { position:absolute; bottom:0; width:0; height:0; z-index:1; }
.stage-left { left:3vw; }
.stage-right { right:3vw; }
/* ДВА РЯДА без наложений: передний (кому дано слово) стоит в ряд по низу; задний (молчащие) —
   мельче и ПОДНЯТ выше, чтобы его было видно из-за переднего и можно было кликнуть. */
.stage-row { position:absolute; display:flex; align-items:flex-end; gap:2.2vh;
  transition:bottom .28s var(--ease); }
.stage-left .stage-row { left:0; flex-direction:row; }
.stage-right .stage-row { right:0; flex-direction:row-reverse; }
.stage-row.front { bottom:0; z-index:2; }
.stage-row.back { bottom:20vh; z-index:1; }
.stage-row.back.low { bottom:0; }        /* впереди никого — задний ряд просто стоит на полу */
.stage-fig { position:relative; pointer-events:none; }
.stage-fig.clickable { pointer-events:auto; cursor:pointer; }
.stage-fig-img { display:block; width:auto; max-width:26vw; object-fit:contain; object-position:bottom;
  user-select:none; -webkit-user-drag:none; transition:filter .28s var(--ease), height .28s var(--ease); }
/* передний ряд — крупно и золотой ореол ВОКРУГ СИЛУЭТА (drop-shadow идёт по прозрачности портрета) */
.stage-fig.on .stage-fig-img { height:30vh;
  filter:drop-shadow(0 0 10px rgba(193,145,60,0.95)) drop-shadow(0 0 32px rgba(193,145,60,0.5)); }
/* задний ряд — мельче и притушён */
.stage-fig.back .stage-fig-img { height:19vh; filter:brightness(0.55) saturate(0.85); }
.stage-fig.back:hover .stage-fig-img { filter:brightness(0.8) saturate(0.9); }
/* запасной прямоугольник, если у персонажа нет портрета */
.stage-fig-ph { width:16vh; height:22vh; background:var(--surface-inset); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:56px; color:var(--text-faint); }
.stage-fig.back .stage-fig-ph { width:11vh; height:15vh; font-size:34px; }
/* подпись-имя у говорящего — плашка заливкой у основания портрета (без рамок) */
.stage-name { position:absolute; bottom:2.4vh; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:17px;
  color:var(--c-harvest-gold); background:rgba(8,6,5,0.55); padding:3px 12px; }
/* облачко реплики у говорящего: у игрока (слева) — справа от портрета, у мастера (справа) — слева */
.stage-bubble { position:absolute; top:3vh; display:flex; animation:stageBub 2.4s ease-in-out infinite; }
.stage-bubble.bub-right { right:-34px; }
.stage-bubble.bub-left { left:-34px; }
@keyframes stageBub { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
/* крестик (мастер — завершить диалог для всех, игрок — выйти из диалога) */
.stage-close { position:absolute; top:var(--sp-7); right:var(--sp-7); z-index:200; width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center; background:var(--surface-card); color:var(--text-muted);
  pointer-events:auto; }
.stage-close:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* стрелка-вниз (слева от крестика) — свернуть диалог в угол, разговор при этом продолжается */
.stage-min { position:absolute; top:var(--sp-7); right:calc(var(--sp-7) + 52px); z-index:200; width:40px; height:40px; padding:0;
  display:flex; align-items:center; justify-content:center; background:var(--surface-card); color:var(--text-muted); pointer-events:auto; }
.stage-min:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* тот, кто говорит СЕЙЧАС — свечение по силуэту чуть сильнее (выезжает в самый перёд) */
.stage-fig.talking .stage-fig-img { filter:drop-shadow(0 0 14px rgba(193,145,60,1)) drop-shadow(0 0 42px rgba(193,145,60,0.65)); }
/* «плюс» мастера снизу по центру — добавить персонажа в диалог */
.stage-add { position:absolute; bottom:var(--sp-7); left:50%; transform:translateX(-50%); z-index:200;
  width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
  background:var(--surface-card); color:var(--c-harvest-gold); pointer-events:auto; }
.stage-add:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* список персонажей у «плюса» */
.stage-picker { position:absolute; bottom:72px; left:50%; transform:translateX(-50%); z-index:201; width:288px;
  max-width:calc(100vw - 32px); max-height:52vh; overflow-y:auto; background:var(--surface-panel); box-shadow:var(--shadow-popover);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); pointer-events:auto; }
.stage-picker[hidden] { display:none; }
.stage-pick-head { font-family:var(--font-display); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--text-faint); margin-top:var(--sp-2); }
.stage-pick-empty { font-size:12px; color:var(--text-faint); }
.stage-pick-row { display:flex; align-items:center; gap:var(--sp-4); background:var(--surface-card); padding:6px; cursor:pointer; }
.stage-pick-row:hover { filter:brightness(1.12); }
.stage-pick-row.on { background:var(--surface-inset); }
.stage-pick-thumb { width:40px; height:40px; flex:none; background:var(--surface-inset) center/cover no-repeat; }
.stage-pick-name { flex:1; color:var(--text-body); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-pick-on { flex:none; font-size:10px; text-transform:uppercase; color:var(--c-harvest-gold); }
/* пока сцена открыта — панели мастера, нижние кнопки и список говорящих поднимаем над затемнением */
body.stage-open .sp-fly { z-index:90; }
body.stage-open .game-foot { position:relative; z-index:90; }
body.stage-open .nv-side { z-index:90; }
/* угловая иконка-облачко снизу-слева: свёрнутый диалог (с многоточием, мигает) или приглашение войти */
.stage-corner { position:fixed; left:16px; bottom:76px; z-index:41; width:52px; height:52px; padding:0;
  display:flex; align-items:center; justify-content:center; background:var(--surface-card); box-shadow:var(--shadow-popover);
  pointer-events:auto; cursor:pointer; }
.stage-corner[hidden] { display:none; }
.stage-corner:hover { filter:brightness(1.14); }
.stage-corner.mini { animation:cornerBlink 1.1s ease-in-out infinite; }
@keyframes cornerBlink { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
.stage-corner-dots { position:absolute; right:5px; bottom:2px; font-weight:700; color:var(--c-harvest-gold); font-size:15px; line-height:1; display:none; }
.stage-corner.mini .stage-corner-dots { display:block; }
.req-row .ic-btn.ok:hover { background:var(--avail-free); color:var(--text-on-gold); }

/* — Расписание сессий — */
.sess-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.sess-row { display:flex; align-items:center; gap:var(--sp-3); padding:4px 6px 4px 10px; background:var(--surface-card); min-height:38px; }
.sess-row .sess-name { flex:1; min-width:0; background:transparent; height:30px; padding:0; color:var(--text-strong); font-family:var(--font-display); font-size:15px;  text-transform:uppercase; }
.sess-row .sess-name:focus { box-shadow:var(--ring); }
.sess-row .sess-date-btn { flex:none; height:30px; padding:0 10px; background:transparent; color:var(--c-harvest-gold); font-size:13px; text-transform:uppercase;  display:inline-flex; align-items:center; cursor:pointer; }
.sess-row .sess-date-btn.unset { color:var(--text-faint); }
.sess-row .sess-date-btn:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }

/* ============================================================
   Календарь (общий виджет .spc)
   ============================================================ */
.spc { display:flex; flex-direction:column; gap:var(--sp-3); width:100%; }
/* Часы «текущее время» в шапке календаря (включаются opts.clock) — по центру. */
.spc-clock { display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center; }
.spc-clock-time { font-family:var(--font-display); font-weight:700; font-size:30px;  color:var(--text-strong); font-variant-numeric:tabular-nums; line-height:1.05; }
.spc-clock-zone { font-size:11px; text-transform:uppercase;  color:var(--text-faint); }
.spc-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); }
.spc-title { flex:1; text-align:center; font-family:var(--font-display); text-transform:uppercase;  color:var(--text-strong); font-size:14px; }
.spc-nav { height:28px; width:28px; }
.spc-week { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-2); }
.spc-wd { text-align:center; font-size:10px; text-transform:uppercase;  color:var(--text-faint); padding:2px 0; }
.spc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:var(--sp-2); }
.spc-day { position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:var(--surface-inset); color:var(--text-body); font-size:13px; font-variant-numeric:tabular-nums; }
.spc-day.empty { background:transparent; }
.spc-day.clickable { cursor:pointer; }
.spc-day.clickable:hover { box-shadow:inset 0 0 0 2px var(--c-harvest-gold); }
.spc-day.today { background:var(--surface-slot); }
.spc-day.free { background:var(--avail-free); color:var(--c-pale-cream); }
.spc-day.busy { background:var(--avail-busy); color:var(--c-pale-cream); }
.spc-day.unknown { background:var(--avail-unknown); color:var(--c-pale-cream); }
.spc-day.golden { background:var(--c-harvest-gold); color:var(--text-on-gold); box-shadow:inset 0 0 0 2px var(--c-pale-cream); }
/* день игры (занят игрой, сквозная бронь сессии) — зелёный с золотыми полосками, поверх любой доступности */
.spc-day.booked { background-color:var(--avail-free); color:var(--c-pale-cream); background-image:repeating-linear-gradient(135deg, var(--c-harvest-gold) 0 4px, transparent 4px 9px); }
/* прошедшие дни (левее сегодня) — приглушены и недоступны для отметок */
.spc-day.past { opacity:0.4; cursor:default; }
/* сегодняшний день — золотой жирный номер (поверх всего, чтобы было видно текущую дату) */
.spc-day.today .spc-num { color:var(--c-harvest-gold); font-weight:700; }
.spc-star { position:absolute; top:1px; right:2px; font-size:9px; color:var(--text-on-gold); line-height:1; }
.spc-dot { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:5px; height:5px; background:var(--c-harvest-gold); }
.spc-day.golden .spc-dot, .spc-day.unknown .spc-dot { background:var(--surface-inset); }
/* Общий слой: полоска сегментов доступности участников по нижней кромке дня.
   Зелёный сегмент = «свободен», тёмный = ещё не свободен. Сегменты разделены
   только просветом фона — никаких линий и обводок (правило проекта). */
.spc-seg { position:absolute; left:2px; right:2px; bottom:2px; height:5px; display:flex; gap:1px; pointer-events:none; }
.spc-segbar { flex:1 1 0; min-width:0; background:var(--surface-inset); }
.spc-segbar.on { background:var(--avail-free); }
.spc-day.has-seg .spc-dot { bottom:auto; top:3px; }
/* Своя подсказка дня (плавающая, в стиле проекта на компоненте .tooltip). Подписи статусов —
   цветные плашки в палитре календаря: зелёная «свободны», красная «заняты», приглушённая
   «не ответили», золотая «занято игрой». Блоки разделяются фоном — без линий и обводок. */
.spc-tip { display:none; position:fixed; z-index:1000; width:210px; pointer-events:none; }
.spc-tip .spc-tip-booked { background:var(--surface-card); }
.spc-tip-h { display:inline-block; padding:1px 7px; margin-bottom:4px; font-family:var(--font-display);
  font-weight:700; text-transform:uppercase;  font-size:11px; color:var(--c-pale-cream); }
.spc-tip-h.free { background:var(--avail-free); }
.spc-tip-h.busy { background:var(--avail-busy); }
.spc-tip-h.wait { background:var(--surface-slot); color:var(--text-muted); }
.spc-tip-h.gold { background:var(--c-harvest-gold); color:var(--text-on-gold); }
/* подпись «Сегодня: ДД.ММ.ГГГГ» под календарём */
.spc-today { font-size:11px; text-transform:uppercase;  color:var(--text-muted); }

/* — Легенда под календарём — */
.spc-legend { display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-2); }
.spc-leg { display:inline-flex; align-items:center; gap:var(--sp-3); font-size:11px; text-transform:uppercase;  color:var(--text-muted); }
.spc-leg .sw { width:14px; height:14px; flex:none; }
.spc-leg .sw.free { background:var(--avail-free); }
.spc-leg .sw.busy { background:var(--avail-busy); }
.spc-leg .sw.unknown { background:var(--avail-unknown); }
.spc-leg .sw.golden { background:var(--c-harvest-gold); box-shadow:inset 0 0 0 2px var(--c-pale-cream); }
.spc-leg .sw.booked { background-color:var(--avail-free); background-image:repeating-linear-gradient(135deg, var(--c-harvest-gold) 0 3px, transparent 3px 7px); }

/* — Контекстное меню статуса дня (правый клик): заливка карточки + тень поповера, без обводок — */
.spc-ctx { position:fixed; z-index:1100; min-width:150px; background:var(--surface-card); box-shadow:var(--shadow-popover, 0 6px 20px rgba(0,0,0,0.55)); display:flex; flex-direction:column; }
.spc-ctx-item { display:flex; align-items:center; gap:var(--sp-3); padding:9px 12px; background:transparent; color:var(--text-body); font-size:13px; text-align:left; cursor:pointer; width:100%; }
.spc-ctx-item:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.spc-ctx-sw { width:14px; height:14px; flex:none; }
.spc-ctx-sw.free { background:var(--avail-free); }
.spc-ctx-sw.busy { background:var(--avail-busy); }
.spc-ctx-sw.unknown { background:var(--avail-unknown); }
.spc-ctx-lbl { flex:1; min-width:0; }

/* — Список сессий (для игрока возле календаря и для всех) — */
.sched-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.sched-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:6px 10px; background:var(--surface-card); font-size:13px; }
.sched-row .sched-name { text-transform:uppercase;  color:var(--text-strong); }
.sched-row .sched-date { color:var(--c-harvest-gold); font-variant-numeric:tabular-nums; }
.sched-row.done { opacity:0.55; }
.sched-row.done .sched-date { color:var(--text-muted); }

/* ============================================================
   Панель календаря игрока возле чата (фикс. снизу слева)
   ============================================================ */
.nov-cal-btn { width:40px; height:40px; padding:0; background:#57574f; color:#f8eab9; border:none; cursor:pointer; box-shadow:var(--shadow-popover); order:1; display:flex; align-items:center; justify-content:center; }
.nov-cal-btn:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
.nov-cal { position:fixed; bottom:70px; right:132px; width:320px; max-width:calc(100vw - 32px); max-height:calc(100vh - 100px); overflow-y:auto; background:var(--surface-panel); box-shadow:var(--shadow-popover); display:flex; flex-direction:column; gap:var(--sp-5); padding:var(--sp-6); z-index:300; }
.nov-cal[hidden] { display:none; }
.nov-cal-btn[hidden] { display:none; }
.nov-cal .nc-cal-title { font-family:var(--font-display); text-transform:uppercase;  color:var(--text-strong); font-size:14px; margin:0; }

/* ============================================================
   «Тихий предзагрузчик» контента (novella-preload.js):
   скромная пометка «Загрузка N / M» — внизу справа, над кнопками
   чата/голоса; исчезает сама, когда весь контент докачан.
   ============================================================ */
.preload-badge { position:fixed; right:14px; bottom:64px; z-index:15; background:var(--surface-card); color:var(--text-muted); font-family:var(--font-display); font-size:11px; text-transform:uppercase; padding:5px 9px; box-shadow:var(--shadow-popover); pointer-events:none; }
.preload-badge[hidden] { display:none; }