/* Sparks & Omens · веб-мастерская героев. «Свет и Тень»: бумага для игроков, чернила за ширмой мастера.
   Без CDN: шрифты лежат в fonts/ (tools/fetch_web_fonts.py), без них страница остаётся на Georgia. */
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/alegreya-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/alegreya-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/alegreya-400-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/alegreya-400-italic-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/alegreya-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/alegreya-700-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/alegreya-sc-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/alegreya-sc-500-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/alegreya-sc-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/alegreya-sc-700-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant SC"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/cormorant-sc-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant SC"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/cormorant-sc-700-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* «Свет» — страницы игроков. Палитра «Таро»: слоновая кость, чёрный, золото, терракота тюльпанов */
/* окна и меню на экранах прямо на сукне (вход, комната) — снова «лист»: светлый или тёмный по выбору человека */
:root, [data-theme="light"], body.on-felt:not([data-theme="shade"]) main :is(.modal, .more-menu, .busy) {
  --bg: #F5EEDD; --bg-2: #FBF6EA; --panel: #FBF6EA; --line: #D9C9A3; --frame: #A8823A;
  --paper: #FBF6EA; --paper-2: #EFE4CB; --ink: #18130E; --text: #18130E; --muted: #66594A;
  --gold: #8A6527; --gold-2: #7A5A1E; --gold-hi: #D9BC74; --terra: #A4462F;
  --accent-bg: rgba(168,130,58,.13); --red: #A4462F; --danger-fg: #A4462F;
  --btn-bg: #18130E; --btn-fg: #F5EEDD; --btn-hover: #3A2E22;
  --header-bg: rgba(245,238,221,.93); --logo-filter: none; --logo-blend: multiply;
  --shadow: rgba(60,40,15,.14); --card-drop: drop-shadow(0 2px 2px rgba(27,25,21,.25)) drop-shadow(0 10px 14px rgba(27,25,21,.28));
  --card-lift: drop-shadow(0 3px 3px rgba(27,25,21,.25)) drop-shadow(0 18px 22px rgba(27,25,21,.32));
  color-scheme: light;
}
/* «Тень» — тёмная тема по выбору человека: оборот карты, чёрное с золотом. Те же значения — у поверхностей, которые
   тёмные в любой теме: рама и плавающие панели над картой в редакторе, поле доски связей (сукно, мел, маркер) */
[data-theme="shade"], .me-frame, .me-float, .me-hint, .boardedit .bd-board, body.on-felt[data-theme="shade"] main :is(.modal, .more-menu, .busy) {
  --bg: #15110D; --bg-2: #1E1913; --panel: #1E1913; --line: #4B3E29; --frame: #C9A961;
  --paper: #F5EEDD; --paper-2: #E6D9BC; --ink: #18130E; --text: #F5EEDD; --muted: #CDBFA5;
  --gold: #C9A961; --gold-2: #E1C784; --gold-hi: #E1C784; --terra: #C9684C;
  --accent-bg: rgba(201,169,97,.14); --red: #C9684C; --danger-fg: #EBA48F;
  --btn-bg: #C9A961; --btn-fg: #15110D; --btn-hover: #E1C784;
  --header-bg: rgba(21,17,13,.92); --logo-filter: invert(1); --logo-blend: screen;
  --shadow: rgba(0,0,0,.45); --card-drop: drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 10px 14px rgba(0,0,0,.55));
  --card-lift: drop-shadow(0 3px 3px rgba(0,0,0,.5)) drop-shadow(0 18px 24px rgba(0,0,0,.6));
  color-scheme: dark;
}
:root {
  /* китайский: латиница и кириллица остаются на Alegreya, иероглифы берутся из CJK-шрифтов системы */
  --cjk-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "PingFang SC", "Microsoft YaHei";
  --cjk-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB";
  --serif: "Alegreya", Georgia, "Times New Roman", var(--cjk-serif), serif;
  --display: "Cormorant SC", "Cormorant Garamond", Georgia, var(--cjk-serif), serif;
  --sc: "Alegreya SC", "Alegreya", Georgia, var(--cjk-serif), serif;
  --radius: 14px;        /* поля, панели, окна — мягкие углы вместо прямых */
  --radius-lg: 22px;
  --pill: 999px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--text); background: var(--bg);
}
a { color: var(--gold-2); }
button, input, textarea { font: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 32px;
  padding: 10px 32px; background: var(--header-bg); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; text-decoration: none; }
/* знак SPARKS & OMENS — текстом, а не картинкой: чёткий на любом экране */
.wordmark { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: .12em; line-height: 1; color: var(--gold); padding: 10px 0; }
.wordmark:hover { color: var(--gold-2); }
.nav { display: flex; gap: 28px; flex: 1; }
.nav { gap: 6px; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--muted); font-family: var(--sc); letter-spacing: .06em;
  padding: 6px 16px; font-size: 19px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s; }
.nav a:hover { color: var(--text); background: var(--accent-bg); }
.nav a.on { color: var(--btn-fg); background: var(--btn-bg); }
.nav svg { flex: none; }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; }
.link:hover { color: var(--text); }

main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }
/* React (web/) монтируется в #root: пусть шапка, main и подвал остаются детьми body-флекса — подвал прижат к низу, как у старой страницы */
#root { display: contents; }

/* подвал */
.foot { border-top: 1px solid var(--line); padding: 14px 24px; display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.foot .bug-link { color: var(--muted); font-size: 14px; text-decoration: underline dotted; text-underline-offset: 3px; }
.foot .bug-link:hover { color: var(--text); }
.foot img { height: 46px; width: auto; filter: var(--logo-filter); mix-blend-mode: var(--logo-blend); }

/* ---------- общие элементы ---------- */
h1, h2, h3 { font-weight: 600; margin: 0; }
.title, .landing h1, .landing h2, .room-h, .gm-hero h1 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }
.eyebrow { font-family: var(--serif); font-style: italic; font-size: 16px; letter-spacing: 0; color: var(--gold); }
.title { font-size: 36px; line-height: 1.05; margin: 6px 0 4px; }
.lead { color: var(--muted); white-space: pre-line; margin: 6px 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 22px; border-radius: var(--pill);
  border: 1.5px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--serif); font-weight: 400; font-size: 17px; letter-spacing: .02em;
  cursor: pointer; text-decoration: none; transition: transform .08s, background .15s;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--frame); }
.btn.ghost:hover { background: var(--accent-bg); }
.btn.danger { background: transparent; border-color: var(--red); color: var(--danger-fg); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.paper { background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: 0 10px 30px var(--shadow); }
.muted { color: var(--muted); }
.paper .muted, .rule-body .muted { color: #5A5246; }
.center { text-align: center; }
/* двойная рамка, как на картах Таро */
.frame, .landing-card, .room-made, .gm-hero, .login .paper, .rule-body {
  border: 1.5px solid var(--frame); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 6px var(--panel), inset 0 0 0 7px var(--frame), 0 10px 30px var(--shadow);
}
.rule-body, .login .paper { box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--frame), 0 10px 30px var(--shadow); border-color: var(--ink); }
/* знаки: солнце — всё игроцкое, луна — всё мастерское */
.sigil { display: inline-block; flex: none; vertical-align: -3px; }

/* ---------- вход ---------- */
.login { max-width: 420px; margin: 10vh auto 0; text-align: center; }
.login .paper { padding: 34px 30px; }
.login h1 { font-size: 30px; margin-bottom: 4px; }
.login input { width: 100%; margin: 18px 0 12px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--ink); background: #fbf7ee; color: var(--ink); text-align: center; letter-spacing: .1em; }

/* ---------- старт ---------- */
.start { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; min-height: 60vh; }
.start h1 { font-size: 52px; line-height: 1.02; }
.start .lead { font-size: 20px; max-width: 34ch; }
.choice-langs { display: flex; gap: 12px; margin: 22px 0 10px; }
.lang-pill { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.lang-pill.on { border-color: var(--gold); color: var(--gold-2); background: var(--accent-bg); }
.start-art { position: relative; height: 420px; }
.start-art img { position: absolute; width: 190px; border-radius: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.start-art img:nth-child(1) { left: 6%; top: 40px; transform: rotate(-9deg); }
.start-art img:nth-child(2) { left: 33%; top: 0; transform: rotate(1deg); z-index: 2; }
.start-art img:nth-child(3) { left: 60%; top: 46px; transform: rotate(9deg); }
.resume { margin-top: 22px; }

/* ---------- мастер сборки ---------- */
.wizard { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.q-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.q-head .title { font-size: 30px; }
.q-back { flex: none; margin-top: 4px; }
.progress { height: 3px; background: var(--line); border-radius: 3px; margin: 0 0 22px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); transition: width .3s; }

/* галерея */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.card {
  position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 10px;
  cursor: pointer; text-align: center; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card.on { border-color: var(--gold); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(0,0,0,.5); transform: translateY(-3px); }
.card.on .name { color: var(--gold-2); }
.card img { display: block; width: 100%; height: 190px; object-fit: contain; border-radius: 6px; }
.card .name { margin-top: 8px; font-weight: 600; font-size: 17px; line-height: 1.15; }
.card .sub { font-size: 14px; color: var(--muted); }
.card .check { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--gold); background: rgba(21,19,15,.7); }
.card.on .check { background: var(--gold); }
.card.on .check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.card.noimg { display: flex; flex-direction: column; justify-content: center; min-height: 110px; padding: 16px; text-align: left; }
.card.noimg .name { margin-top: 0; }
.card.noimg .sub { margin-top: 4px; }

.detail-dock { position: sticky; bottom: 16px; z-index: 5; }
.detail { position: sticky; bottom: 16px; margin-top: 22px; display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; }
.detail img { width: 150px; max-height: 230px; object-fit: contain; border-radius: 6px; }
.detail h3 { font-size: 26px; }
.detail p { margin: 6px 0 0; white-space: pre-line; color: #3a3026; max-height: 12em; overflow: auto; }

/* портреты */
.portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.portraits button { padding: 0; border: 1px solid var(--line); border-radius: 50%; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: #f2ece0; transition: transform .15s, box-shadow .15s; }
.portraits button:hover { transform: scale(1.04); box-shadow: 0 0 0 3px var(--gold); }
.portraits img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* кнопки-варианты */
.options { display: grid; gap: 12px; max-width: 720px; }
.opt { text-align: left; padding: 16px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--gold); background: var(--accent-bg); }
.opt b { display: block; font-size: 19px; }
.opt span { color: var(--muted); font-size: 16px; white-space: pre-line; }

/* текст */
.text-q { max-width: 680px; }
.text-q textarea, .text-q input {
  width: 100%; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--frame); background: var(--paper);
  color: var(--ink); font-size: 19px; resize: vertical;
}
.text-q textarea { min-height: 120px; }
.text-q .row { margin-top: 14px; }

/* подтверждение */
.summary { white-space: pre-line; font-size: 19px; line-height: 1.55; margin-bottom: 20px; }
.summary b { font-size: 22px; }

/* боковая панель героя */
.hero-side { position: sticky; top: 100px; }
.hero-side .panel { padding: 18px; }
.hero-side h3 { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.hero-thumbs { display: flex; gap: 8px; margin-bottom: 14px; }
.hero-thumbs img { width: 62px; height: 92px; object-fit: contain; border-radius: 4px; }
.hero-thumbs img.round { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; align-self: center; }
.trail { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.trail li { display: grid; gap: 1px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.trail small { color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.trail span { font-size: 16px; line-height: 1.25; }
.trail .empty { color: var(--muted); border: 0; }

/* готово */
.done { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.pdf-frame { width: 100%; height: 82vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.done-side .panel { display: grid; gap: 14px; }
.done-side .token { width: 160px; height: 160px; border-radius: 50%; margin: 0 auto; display: block; background: #f2ece0; object-fit: cover; }
.done-side .btn { width: 100%; }

/* мои герои */
.empty-state { margin-top: 40px; text-align: center; color: var(--muted); }

/* правила: общие куски (арт карты с лентой названия, текст статьи) — ещё и у ширмы */
.art-face { position: relative; display: block; container-type: inline-size; }
.art-face img { display: block; width: 100%; height: auto; }
.art-title { position: absolute; transform: translateY(-50%); text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: clip; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; font-size: 7.2cqw; }
.rule-art.art-face { float: right; }
.rule-body { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 26px 30px; box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; }
.rule-art { float: right; width: 240px; margin: 0 0 16px 24px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.rule-text { white-space: pre-line; font-size: 18.5px; line-height: 1.55; }
.rule-text b { font-size: 1.08em; }

/* ---------- страница правил (отдельная вкладка): вариант «Пергамент» ---------- */
/* в шапке вместо меню сайта — пять разделов правил */
.rb-nav { display: none; gap: 2px; flex: 1; justify-content: flex-end; flex-wrap: nowrap; }
.rules-mode .rb-nav { display: flex; }
.rules-mode .nav, .rules-mode .room-badge, .rules-mode #logout { display: none !important; }
.rb-nav a { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--muted); text-decoration: none;
  padding: 8px 9px; border-bottom: 2px solid transparent; white-space: nowrap; }
.rb-nav a:hover { color: var(--text); }
.rb-nav a.on { color: var(--text); border-bottom-color: var(--gold); }
.rb-nav a.gm-tab::before { content: "☾ "; color: var(--gold); }       /* книга мастера — значком, цвет страницы по теме */
@media (max-width: 1180px) { .rb-nav { overflow-x: auto; justify-content: flex-start; } }

.rb { display: flex; flex-direction: column; gap: 24px; }
.rb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rb-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.rb-eyebrow { font-family: var(--sc); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.rb-title { font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1.05; margin-top: 4px; }
.rb-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rb-search { display: flex; align-items: center; gap: 10px; min-width: 300px; height: 44px; padding: 0 14px;
  border: 1px solid var(--ink); background: var(--bg-2); color: var(--muted); }
.rb-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: 16px; }
.rb-search input:focus { outline: none; }
.rb-search:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* плитки шагов / типов карт */
.rb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rb-tile { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid var(--ink); color: var(--text); text-decoration: none; }
.rb-tile small { font-family: var(--sc); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.rb-tile b { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.2; }
.rb-tile:hover { background: var(--accent-bg); }
.rb-tile.on { background: #141310; border-color: #141310; color: #F5EEDD; }
.rb-tile.on small { color: #D9BC74; }
.rb-tile.off { border-style: dashed; color: var(--muted); }

/* Лист персонажа: шаги 1–2 и рамка шага 3 «Происхождение» (особое или Местность + Общество) с картой «как устроено» */
.rb-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3.6fr); gap: 10px; align-items: stretch; }
.rb-steps > .rb-tile { justify-content: flex-start; }
.rb-origin { border: 1px solid var(--ink); background: var(--bg-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rb-origin-head { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
.rb-origin-head small { font-family: var(--sc); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; }
.rb-origin-head span { font-size: 15px; color: var(--muted); }
.rb-origin-tiles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: stretch; }
.rb-or, .rb-plus { align-self: center; font-family: var(--display); font-weight: 700; color: var(--terra); }
.rb-or { font-style: italic; font-size: 19px; }
.rb-plus { font-style: normal; font-size: 26px; color: var(--gold-2); }
.rb-howto summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--gold-2); min-height: 32px; }
.rb-howto .rule-text { font-size: 15.5px; line-height: 1.5; padding-top: 6px; }

/* «Коротко» */
.rb-short { background: var(--bg-2); border: 1px solid var(--ink); padding: 18px 24px; }
.rb-short span { font-family: var(--sc); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); font-weight: 700; }
.rb-short p { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.3; }
.rb-empty { color: var(--muted); }

/* I. Правила: карточки-шпаргалки; открытая растягивается на всю ширину */
.rb-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.rb-group h2 { font-family: var(--display); font-weight: 700; font-size: 30px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.rb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rb-card { border: 1px solid var(--ink); background: var(--bg-2); display: flex; flex-direction: column; }
.rb-card > .rb-card-head { flex: 1 0 auto; }      /* в ряду карточки одной высоты — название по центру */
.rb-card.open { grid-column: 1 / -1; background: var(--bg); }
.rb-card-head { width: 100%; min-height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; padding: 14px 20px;
  border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.rb-card-head small { font-family: var(--display); font-size: 16px; color: var(--gold-2); }
.rb-card-head b { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.15; }
.rb-group h2 .rb-same { font: 500 13px/1 var(--sc, var(--serif)); letter-spacing: .08em; color: var(--muted); margin-left: 8px; }
.rb-card-head:hover { background: var(--accent-bg); }
.rb-card.open .rb-card-head { background: #141310; color: #F5EEDD; }
/* тёмная тема: «чёрные» плашки правил на чёрной странице поднимаются золотом, иначе выбранное не видно */
[data-theme="shade"] .rb-tile.on { background: #2E2617; border-color: #C9A961; }
[data-theme="shade"] .rb-card.open .rb-card-head { background: #2E2617; box-shadow: inset 0 -1px 0 #C9A961; }
[data-theme="shade"] .rb-sec-h { background: #2E2617; }
[data-theme="shade"] .rb-card, [data-theme="shade"] .rb-tile, [data-theme="shade"] .rb-short,
[data-theme="shade"] .rb-search, [data-theme="shade"] .rb-row { border-color: var(--line); }   /* рамки карточек видны и на тёмной странице */
.rb-card.open .rb-card-head small { color: #D9BC74; }
.rb-card-body { padding: 20px 24px 24px; }

/* II–V. Список: карта среднего размера и описание сразу; раскрытая строка — карта крупнее и полный текст.
   Короткие карты (расы, происхождения, террейны, роли) — целиком, без кнопки. */
.rb-sec { display: flex; flex-direction: column; gap: 0; }
.rb-sec + .rb-sec { margin-top: 24px; }
.rb-sec-h { background: #141310; color: #E3C27E; font-family: var(--sc); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; padding: 12px 22px 10px; margin: 0; }
.rb-list { border: 1px solid var(--ink); background: var(--bg-2); }
.rb-row, .rb-card { scroll-margin-top: 90px; }      /* под липкой шапкой */
.rb-row { display: flex; gap: 26px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.rb-row:last-child { border-bottom: 0; }
.rb-row.open { background: var(--bg); }
.rb-art { flex: none; width: 132px; filter: var(--card-drop); transition: width .15s; }
.rb-art img, .rb-art .art-face { display: block; width: 100%; }
.rb-art > i { display: flex; aspect-ratio: 7 / 12; align-items: center; justify-content: center; background: #141310; border: 1px solid #C9A961;
  font-style: normal; font-family: var(--display); font-weight: 700; font-size: 34px; color: #C9A961; }
.rb-row.open .rb-art { width: 200px; }
.rb-row.flat .rb-art { width: 150px; }
.rb-row.land .rb-art { width: 230px; }
.rb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rb-kind { display: block; font-family: var(--sc); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.rb-top h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.1; }
.rb-row.open .rb-top h3 { font-size: 40px; }
.rb-row .rb-toggle { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink);
  background: transparent; color: var(--text); cursor: pointer; }
.rb-row .rb-toggle svg { transition: transform .15s; }
.rb-row .rb-toggle:hover { background: var(--accent-bg); }
.rb-row.open .rb-toggle svg { transform: rotate(180deg); }
.rb-row.open .rb-lead { display: none; }             /* раскрыто — полный текст ниже повторяет выжимку */
.rb-lead { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.rb-lead p { margin: 0; }
.rb-tagline { font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--muted); }
.rb-desc { font-size: 16.5px; }
.rb-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-stats span { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--ink); padding: 2px 12px; background: var(--bg-2); }
.rb-stats small { font-size: 13px; color: var(--muted); }
.rb-stats b { font-family: var(--display); font-weight: 700; font-size: 21px; }
.rb-sig { font-size: 15.5px; }
.rb-sig small { font-family: var(--sc); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; }
.rb-concept { border-left: 2px solid var(--terra); padding: 2px 0 2px 14px; }
.rb-concept small { font-family: var(--sc); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--terra); font-weight: 700; }
.rb-concept p { font-size: 16.5px; }
.rb-row .rule-text { font-size: 17px; max-width: 900px; }
.rb-row-body { padding: 4px 0 4px; }
.rb-open { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.rb-open-art { flex: 0 0 220px; filter: var(--card-drop); }
.rb-open .rule-text { flex: 999 1 420px; min-width: 0; }

@media (max-width: 900px) {
  .rb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-search { min-width: 0; flex: 1 1 240px; }
}
@media (max-width: 640px) {
  .rb-title { font-size: 36px; }
  .rb-nav { flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .rb-nav a { font-size: 17px; padding: 6px 8px; }
  .rb-cards { grid-template-columns: 1fr; }
  .rb-row { gap: 14px; padding: 14px 12px; }
  .rb-art, .rb-row.flat .rb-art { width: 92px; }
  .rb-row.open .rb-art { width: 130px; }
  .rb-row.land { flex-direction: column; }
  .rb-row.land .rb-art { width: 100%; max-width: 320px; }
  .rb-top h3 { font-size: 26px; }
  .rb-tagline { font-size: 18px; }
  .rb-desc, .rb-concept p { font-size: 15.5px; }
  .rb-row.open .rb-top h3 { font-size: 30px; }
  .rb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-origin { grid-column: 1 / -1; }
  .rb-origin-tiles { grid-template-columns: 1fr; }
  .rb-or, .rb-plus { justify-self: center; }
  .rb-open-art { flex-basis: 100%; max-width: 220px; margin: 0 auto; }
}

/* мастер */
.gm-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 28px; }
.gm-new { display: grid; gap: 14px; justify-items: start; }
.lang-pill:disabled { opacity: .4; cursor: not-allowed; }

.gm-top { margin-bottom: 18px; }
.gm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.felt {
  --big: 150px; --mid: 118px; --small: 100px;
  border-radius: var(--radius); padding: 26px 20px 28px; background-color: var(--felt-c); background-image: var(--felt-img, none); background-size: 420px 420px; background-blend-mode: multiply; border: 1px solid var(--frame);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.28), inset 0 0 0 7px #C9B58A, inset 0 0 90px rgba(0,0,0,.55), 0 14px 40px var(--shadow); display: grid; gap: 16px; justify-items: center;
}
.felt-banner { text-align: center; color: #f4f2ee; text-shadow: 0 0 3px #161616, 0 0 3px #161616, 0 0 8px #161616; padding: 4px 10px; }
.felt-banner h1 { font-size: 26px; line-height: 1.15; }
.felt-banner p { margin: 4px 0 0; font-style: italic; font-size: 17px; }
.felt-label { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #f4f2ee; text-shadow: 0 0 4px #161616, 0 0 4px #161616; margin-bottom: -8px; }
.felt-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.tcard { position: relative; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); transition: transform .15s, filter .15s; }
.tcard:hover { transform: translateY(-4px) rotate(-.6deg); }
.tcard.on { transform: translateY(-6px); filter: drop-shadow(0 0 0 #c9b58a) drop-shadow(0 0 8px rgba(226,207,159,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.tcard.big { width: var(--big); }
.tcard.big.lying { width: calc(var(--big) * 1.49); }
.tcard.mid { width: var(--mid); }
.tcard.small { width: var(--small); }
.gallery .card, .rules-gallery .card { position: relative; }
.gallery .card .dlc, .rules-gallery .card .dlc { position: absolute; top: 10px; left: 10px; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: rgba(22,22,22,.85); color: #f4f2ee; border: 1px solid var(--gold); }
.dlc-tag { font-size: 12px; padding: 1px 8px; border-radius: 4px; border: 1px solid var(--gold); color: var(--gold-2); vertical-align: 3px; font-weight: 400; }
.tcard .dlc, .picker .dlc { position: absolute; top: 5%; right: 7%; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(22,22,22,.85); color: #f4f2ee; }
.blank-card { display: grid; place-items: center; aspect-ratio: 520/775; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 8px; }
.drawer { position: sticky; top: 100px; max-height: calc(100vh - 116px); overflow: auto; }
.drawer-card { display: grid; gap: 10px; }
.drawer-art { width: 62%; margin: 0 auto 6px; }
.drawer-card h2 { font-size: 26px; }
.drawer-actions .btn { padding: 8px 16px; font-size: 16px; }
.drawer-where { font-style: italic; color: var(--gold-2); margin: 0; }
.drawer-card p { margin: 0; }
.specs { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 2px 10px; border-radius: 999px; border: 0; background: var(--accent-bg); font-size: 15px; }
.gm-layout.solo { grid-template-columns: minmax(0, 1fr); }
.gm-layout.solo .felt { --big: 200px; --mid: 150px; --small: 128px; padding: 32px 28px 34px; gap: 20px; }
.card-modal-box { width: min(1080px, 100%); max-height: 92vh; display: grid; grid-template-columns: minmax(240px, 380px) minmax(0, 1fr); gap: 28px; align-items: start; padding: 26px 30px; }
.card-modal-art { position: sticky; top: 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.card-modal .drawer-card { gap: 12px; font-size: 18px; line-height: 1.55; }
.card-modal .drawer-card h2 { font-size: 32px; margin: 0; }
.card-modal .specs, .card-modal .chip { font-size: 17px; }
.card-modal .drawer-text { font-size: 18px; line-height: 1.6; color: var(--text); }
.card-modal .card-flow { white-space: normal; }
.card-flow p { margin: 0 0 .7em; }
.card-flow b { color: var(--gold-2); font-weight: 700; }
.card-flow .ct-h { margin: 1.1em 0 .45em; font: 700 20px/1.2 var(--display); color: var(--gold); letter-spacing: .02em; }
.card-flow .ct-h:first-child { margin-top: .2em; }
.card-flow .ct-s { margin: .9em 0 .35em; font: 600 15px/1.2 var(--sc); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.player-card .pc-syn { font-size: 21px; line-height: 1.55; margin: 0; }
.player-card { width: min(860px, 100%); }
.card-modal details summary { cursor: pointer; color: var(--gold); letter-spacing: .05em; }
.drawer details summary { cursor: pointer; color: var(--gold); letter-spacing: .05em; }
.drawer-text { white-space: pre-line; font-size: 16px; line-height: 1.5; margin-top: 8px; color: var(--muted); }
.modal { position: fixed; inset: 0; z-index: 35; background: rgba(24,19,14,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; }
.modal-box { width: min(1100px, 100%); max-height: 88vh; overflow: auto; background: var(--panel); color: var(--text); border: 1.5px solid var(--frame); border-radius: var(--radius-lg); padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.picker { margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.picker.wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.picker .card { padding: 6px; }
.picker .art-face img { height: auto; }

/* ---------- мастер: противники ---------- */
.gm-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.gm-tabs a { padding: 8px 18px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; letter-spacing: .04em; }
.gm-tabs a.on { color: var(--gold-2); border-color: var(--gold); }
.foes-block { margin-top: 30px; }
.foes-head { margin-bottom: 6px; }
.foes-quick { margin: 4px 0 14px; gap: 8px; }
.foes-quick .lang-pill { padding: 6px 14px; font-size: 15px; text-decoration: none; }
.foes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.foe-mini { display: grid; gap: 8px; padding: 16px; }
.foe-mini-head { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.foe-mini-head b { font-size: 19px; line-height: 1.15; }
.foe-mini-head small { display: block; color: var(--muted); font-size: 14px; }
.token { position: relative; display: inline-block; flex: none; width: 64px; height: 64px; }
.token.small { width: 58px; height: 58px; }
.token.big { width: 92px; height: 92px; }
.token-av { position: absolute; inset: 2%; width: 96%; height: 96%; object-fit: contain; }
.token-fr { position: absolute; inset: 0; width: 100%; height: 100%; }
.token-plain, .token-plain::after { position: absolute; clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); }
.token-plain { inset: 0; background: var(--gold); }
.token-plain::after { content: ""; inset: 3px; background: #1b1712; }
.token-sil { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 24px; }
.token.has-av .token-sil { display: none; }
.token.has-fr .token-plain { display: none; }
.squad-who .token-sil, .sq-row .token-sil { font-size: 16px; }
.token.big .token-sil { font-size: 34px; }
.token-pick { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 12px 12px; color: #3c342a; font-size: 15px; }
.token-pick button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #2a241c; background: transparent; cursor: pointer; color: #2a241c; }
.tok-report { font-size: 14px; color: var(--muted); max-width: 520px; }
.tok-report summary { cursor: pointer; }
.tok-report p { margin: 6px 0 0; }
.tok-report code { color: var(--gold-2); }
.foe-line { font-size: 15px; color: var(--muted); }
.foe-mini .chip { font-size: 13px; padding: 1px 8px; }
.chip.free, .mod.free { border-color: var(--gold); color: var(--gold-2); }
.foe-acts { gap: 8px; }
.foe-acts .btn { padding: 5px 12px; font-size: 14px; }
.foe-warn { font-size: 14px; color: var(--gold-2); }
.foe-err { font-size: 15px; color: var(--danger-fg); margin-top: 8px; }
.foe-spread { font-style: italic; }

.foe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.foe-form { display: grid; gap: 16px; }
.foe-step { display: grid; gap: 12px; }
.foe-step .btn { padding: 6px 14px; font-size: 15px; }
.foe-part { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; }
.foe-part h3 { font-size: 24px; margin: 0; }
.foe-part p { margin: 2px 0 10px; font-size: 15px; }
.foe-part-art.blank { aspect-ratio: 520/775; display: grid; place-items: center; text-align: center; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; }
.foe-quick { margin-top: 10px; gap: 8px; }
.foe-quick .lang-pill, .pills .lang-pill, .foe-free .lang-pill { padding: 6px 14px; font-size: 15px; }
.foe-free { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }
.arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.arch { text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; display: grid; gap: 2px; }
.arch b { font-size: 17px; }
.arch small { color: var(--muted); font-size: 13px; line-height: 1.2; }
.arch span { font-size: 12px; color: var(--muted); letter-spacing: .01em; }
.arch.sug { border-color: #6e5f43; }
.arch.on { border-color: var(--gold); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--gold) inset; }
.foe-fields { gap: 16px; }
.foe-fields label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.foe-fields input, .foe-step textarea { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.foe-fields input#name { width: min(360px, 70vw); }
.foe-fields input#count { width: 90px; }
.foe-step textarea { width: 100%; resize: vertical; }
.budget { display: flex; align-items: center; gap: 4px; font-size: 15px; color: var(--gold-2); }
.budget i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--gold); display: block; }
.budget i.on { background: var(--gold); }
.budget i.over { border-color: var(--red); }
.budget i.on.over { background: var(--red); }
.budget span { margin-left: 6px; }
.budget.over span { color: var(--danger-fg); }
.mod-group { border-top: 1px solid var(--line); padding-top: 8px; }
.mod-group summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--text); }
.mod-group summary span { font-size: 17px; }
.mod-group summary small { color: var(--muted); font-size: 13px; }
.mod-group summary small.on { color: var(--gold-2); }
.mod-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.mod { text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; display: flex; gap: 8px; justify-content: space-between; align-items: center; }
button.mod:disabled { opacity: .38; cursor: not-allowed; }
button.mod.free:disabled { opacity: 1; cursor: default; }
.mod b { font-size: 15px; }
.mod small { display: block; color: var(--muted); font-size: 13px; line-height: 1.25; margin-top: 2px; }
.mod.on { border-color: var(--gold); background: var(--accent-bg); }
.cost { display: inline-block; min-width: 20px; text-align: center; font-size: 12px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: var(--ink); margin-left: 4px; vertical-align: 1px; }
.cost.back { background: #4e6b4a; color: #e6f0dd; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px; background: var(--gold); color: var(--ink); margin-left: 4px; vertical-align: 1px; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold-2); cursor: pointer; }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.small { font-size: 14px; }

.foe-side { position: sticky; top: 100px; }
.foe-side .panel { padding: 0; overflow: hidden; background: var(--paper); color: var(--ink); border-color: #2b241b; }
.statblock .sb-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: #2a241c; color: #f4ecd9; }
.statblock .sb-head h2 { font-size: 24px; line-height: 1.05; margin: 0; }
.statblock .sb-head small { color: #d8c9a6; font-size: 14px; }
.statblock .sb-head > div { flex: 1; min-width: 0; }
.sb-count { font-size: 24px; color: var(--gold); }
.sb-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #b9a77f; }
.sb-stats div { text-align: center; padding: 8px 4px 6px; border-right: 1px solid #d8c9a6; border-bottom: 1px solid #d8c9a6; }
.sb-stats div:nth-child(3n) { border-right: 0; }
.sb-stats b { display: block; font-size: 21px; line-height: 1.1; }
.sb-stats small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6a5d49; }
.sb-line { padding: 8px 16px 0; font-size: 15px; color: #3c342a; }
.sb-mods { list-style: none; margin: 0; padding: 6px 16px 10px; font-size: 15px; line-height: 1.35; }
.sb-mods li { padding: 4px 0; border-bottom: 1px dotted #c9b58a; }
.sb-mods li:last-child { border-bottom: 0; }
.sb-note { margin: 0; padding: 0 16px 10px; font-style: italic; font-size: 14px; color: #4b4237; }
.sb-gm { margin: 0; padding: 10px 16px; border-top: 1px solid #d8c9a6; font-size: 14px; white-space: pre-wrap; }
.foe-side .foe-err, .foe-side .foe-warn { padding: 0 16px 12px; margin: 0; }
.foe-side .foe-err { color: #a33b2a; }
.foe-side .foe-warn { color: #6a5020; }
.foe-side .muted { color: #6a5d49; }

/* загрузка и уведомления */
.busy { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(21,19,15,.45); }
.busy span { padding: 14px 22px; border-radius: 999px; background: var(--panel); border: 1px solid var(--gold); color: var(--gold-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: 90vw; padding: 12px 20px; border-radius: 999px; background: #1F1C16; border: 1px solid #C9B58A; color: #F4EFE3; box-shadow: 0 8px 24px rgba(0,0,0,.35); }

@media (max-width: 900px) {
  .wizard, .done, .start, .gm-layout, .gm-hero, .foe-layout { grid-template-columns: 1fr; }
  .foe-side { position: static; }
  .drawer { position: static; max-height: none; }
  .card-modal-box { grid-template-columns: 1fr; padding: 18px; }
  .card-modal-art { position: static; width: min(260px, 70%); margin: 0 auto; }
  .gm-layout.solo .felt { --big: 150px; --mid: 118px; --small: 100px; }
  .hero-side { position: static; order: -1; }
  .start-art { height: 300px; }
  .start-art img { width: 140px; }
  .start h1 { font-size: 40px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .top { gap: 14px; padding: 10px 14px; flex-wrap: wrap; }
  .nav { order: 3; flex: 1 1 100%; gap: 18px; overflow-x: auto; }
  main { padding: 18px 14px 80px; }
  .title, .q-head .title { font-size: 25px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .card img { height: 150px; }
  .detail { grid-template-columns: 90px 1fr; bottom: 8px; padding: 14px; }
  .detail img { width: 90px; }
  .detail .btn { grid-column: 1 / -1; }
  .pdf-frame { height: 60vh; }
  .rule-art { float: none; display: block; width: 70%; margin: 0 auto 16px; }
  .rule-body { padding: 18px; }
  .felt { --big: 96px; --mid: 88px; --small: 76px; padding: 14px 8px; }
  .felt-banner h1 { font-size: 20px; }
  .gm-top .btn { padding: 7px 12px; font-size: 15px; }
  .nav a { font-size: 18px; }
  .wordmark { font-size: 22px; }
  .foe-part { grid-template-columns: 84px 1fr; gap: 12px; }
  .arch-grid { grid-template-columns: 1fr 1fr; }
  .mod-list { grid-template-columns: 1fr; }
  .foes-grid { grid-template-columns: 1fr; }
}

/* лента названия сверху (Террейн) — метка DLC уходит вниз, чтобы не закрывать название */
.rules-gallery .card .dlc.low { top: auto; bottom: 10px; }
.tcard.lying .dlc { top: auto; bottom: 7%; }

/* ---------- комнаты ---------- */
.code { font-family: var(--display); font-weight: 700; letter-spacing: .16em; color: var(--gold-2); }
.room-badge { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); font-size: 15px; font-family: var(--sc);
  border: 1px solid var(--frame); border-radius: 999px; padding: 4px 14px; }
.room-badge b { font-family: var(--display); font-size: 21px; line-height: 1; letter-spacing: .18em; color: var(--gold-2); font-weight: 700; }
.room-badge .link { font-size: 14px; text-decoration: underline; font-family: var(--serif); }

/* вход: логотип, две карты «Свет / Тень», три шага, Piglets Group */
.landing { max-width: 1000px; margin: 2vh auto 0; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.landing-logo { width: min(440px, 80%); height: auto; display: block; filter: var(--logo-filter); mix-blend-mode: var(--logo-blend); }
.landing-lead { margin: -14px 0 0; max-width: 600px; text-align: center; font-size: 21px; font-style: italic; color: var(--muted); }
.divider { display: flex; align-items: center; gap: 18px; width: 100%; color: var(--text); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--frame); }
.divider span { font-family: var(--sc); letter-spacing: .3em; font-size: 15px; }
.landing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; width: 100%; }
.landing-card { position: relative; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; gap: 14px; padding: 38px 38px 34px; text-align: center; color: var(--text); }
.landing-card > * { position: relative; }
.landing-card .sigil { align-self: center; }
.landing-card h2 { font-size: 40px; line-height: 1; margin: 0; }
.landing-card p { margin: 0; }
.landing-card label { font-family: var(--sc); letter-spacing: .14em; font-size: 14px; margin-top: 6px; }
.landing-card input, .lock-form input, .pw-box input { width: 100%; padding: 12px 14px 9px; border: 0; border-bottom: 2px solid var(--frame); border-radius: 0;
  background: transparent; color: var(--text); font-size: 20px; text-align: center; }
.landing-card input:focus-visible, .lock-form input:focus-visible, .pw-box input:focus-visible { outline: none; border-bottom-color: var(--gold); box-shadow: 0 2px 0 var(--gold); }
.landing-card input::placeholder { color: var(--muted); opacity: .8; }
.landing-card .code-input { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: .35em; text-transform: uppercase; padding-left: .35em; }
.landing-card .btn { margin-top: 8px; min-height: 52px; font-size: 19px; }
/* карта мастера: тёмная, сукно в реверсе */
.landing-card[data-theme="shade"] { --panel: #16140F; background: var(--panel); }
.landing-card[data-theme="shade"]::before { content: ""; position: absolute; inset: 9px; pointer-events: none;
  background: url(img/cloth-default.webp) 0 0 / 420px repeat; filter: invert(1); opacity: .4; }
.landing-card[data-theme="shade"] input { background: rgba(22,20,15,.6); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; }
.steps li { display: flex; gap: 14px; align-items: baseline; }
.steps b.num { font-family: var(--display); font-weight: 700; font-size: 34px; color: var(--gold); line-height: 1; min-width: 1.4em; }
.piglets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; width: 100%; margin-top: 10px; }
.piglets figure { margin: 0; padding: 18px; background: var(--paper); border: 1.5px solid var(--frame);
  box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--frame); }
.piglets figure img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.piglets-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.piglets-text .logo { width: 280px; max-width: 100%; height: auto; filter: var(--logo-filter); mix-blend-mode: var(--logo-blend); }
.piglets-text h2 { font-size: 38px; line-height: 1.05; }
.piglets-text p { margin: 0; color: var(--muted); }
.screen-gate { max-width: 480px; margin: 0 auto; }
.room-made { max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: 14px; padding: 38px; }
.room-code-big { font-family: var(--display); font-weight: 700; font-size: 76px; letter-spacing: .22em; padding: 6px 0 6px .22em; color: var(--gold-2); user-select: all; }
.room-h { font-size: 32px; margin: 0; }
a.spread-card { text-decoration: none; color: inherit; display: block; }
a.spread-card:hover { border-color: var(--gold); }
.lock-form { display: grid; gap: 10px; margin-top: 16px; }
.pw-box { max-width: 460px; display: grid; gap: 14px; }
.pw-box p { margin: 0; }
.gm-tabs .spacer { flex: 1; }
.gm-tabs .link { font-size: 15px; }
.gm-tabs a { font-family: var(--sc); font-size: 18px; letter-spacing: .1em; }
.player-table .tcard { cursor: zoom-in; }
@media (max-width: 900px) {
  .landing-grid, .piglets { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .landing-card { padding: 30px 24px 26px; }
  .landing-card h2 { font-size: 34px; }
  .room-code-big { font-size: 50px; }
  .room-badge { order: 2; }
}

/* переключатель языка интерфейса */
.ui-lang { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--frame); border-radius: 999px; padding: 2px 6px;
  font-family: var(--sc); font-size: 15px; color: var(--muted); white-space: nowrap; }
.ui-lang button { border: 0; background: none; color: var(--text); border-radius: 999px; padding: 3px 8px;
  font: inherit; letter-spacing: .12em; cursor: pointer; }
.ui-lang button[lang="zh-CN"] { letter-spacing: 0; font-family: var(--cjk-sans); }
.ui-lang button:hover { background: var(--accent-bg); }
.ui-lang button.on { background: var(--accent-bg); color: var(--gold-2, var(--text)); font-weight: 600; }
/* тема: кружок ☀ / ☾ рядом с языком — выбор человека, хранится в ls_theme */
.theme-btn { flex: none; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--frame); border-radius: 50%;
  background: none; color: var(--gold-2); font-size: 17px; line-height: 1; cursor: pointer; }
.theme-btn:hover { background: var(--accent-bg); }
/* шапка с языком и темой: на средних экранах плотнее, на узких — переносится, а не уезжает за край */
@media (min-width: 641px) and (max-width: 1500px) {
  .top { gap: 14px; padding: 10px 20px; flex-wrap: wrap; row-gap: 6px; }
  .nav a { padding: 6px 11px; }
}
@media (max-width: 900px) { .ui-lang, .theme-btn { order: 2; } }

/* шаги сборки героя: карточки крупнее, по 4 в ряд */
.wizard .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wizard .gallery .card img { height: 260px; }
.wizard .gallery .card .name { font-size: 19px; }
@media (max-width: 900px) {
  .wizard .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wizard .gallery .card img { height: 190px; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- карты выглядят картами: без подложки, с тенью, поднимаются при наведении ---------- */
.gallery .card:not(.noimg), .rules-gallery .card:not(.noimg) {
  background: none; border: 0; box-shadow: none; padding: 0; transform: none;
}
.gallery .card:not(.noimg) img, .gallery .card:not(.noimg) .art-face,
.rules-gallery .card:not(.noimg) .art-face, .rules-gallery .card:not(.noimg) > img {
  filter: var(--card-drop); transition: filter .15s, transform .15s;
}
.gallery .card:not(.noimg):hover img, .rules-gallery .card:not(.noimg):hover .art-face, .rules-gallery .card:not(.noimg):hover > img {
  filter: var(--card-lift); transform: translateY(-4px);
}
.gallery .card:not(.noimg).on { background: none; box-shadow: none; transform: none; }
.gallery .card:not(.noimg).on img {
  transform: translateY(-6px);
  filter: drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 0 6px var(--gold)) var(--card-lift);
}
.gallery .card:not(.noimg) .name { margin-top: 12px; font-family: var(--sc); font-size: 16px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.gallery .card:not(.noimg).on .name { color: var(--gold-2); }
.gallery .card:not(.noimg) .check { top: 8px; right: 8px; }
.card.noimg { box-shadow: 0 6px 14px var(--shadow); }
.wizard .gallery .card:not(.noimg) img { height: 280px; }
.rules-gallery .card:not(.noimg) .name { font-family: var(--sc); font-size: 16px; color: var(--muted); }

/* общая карта колоды (сборка расклада, выбор, персонажи) */
.pcard { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text);
  filter: var(--card-drop); transition: transform .15s, filter .15s; }
.pcard:hover { transform: translateY(-5px) rotate(-.4deg); filter: var(--card-lift); }
.pcard.on { transform: translateY(-6px); filter: drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 0 8px var(--gold)) var(--card-lift); }
.pcard .art-face img, .pcard > img { display: block; width: 100%; height: auto; }
.pcard .blank-card { min-height: 150px; }
.pcard .dlc { position: absolute; top: 6%; right: 8%; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: rgba(22,22,22,.85); color: #f4f2ee; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 20px; margin-top: 18px; }
.deck-grid.wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.modal-box .deck-grid { max-height: none; }

/* сборка расклада */
.builder .progress { margin-top: 18px; }
.build-trail { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 26px; }
.trail-card { width: 46px; height: 69px; padding: 0; border: 1px dashed var(--line); background: transparent; color: var(--muted);
  border-radius: 4px; cursor: pointer; display: grid; place-items: center; font-family: var(--sc); font-size: 14px; overflow: hidden; }
.trail-card.lying { width: 69px; height: 46px; }
.trail-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trail-card:has(img) { border: 0; box-shadow: 0 3px 8px var(--shadow); }
.trail-card.on { outline: 2px solid var(--gold); outline-offset: 2px; }
.trail-card:disabled { opacity: .4; cursor: default; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 44px; margin: 10px 0 28px; }
.three .pcard { animation: deal .35s ease-out both; }
.three .pcard:nth-child(2) { animation-delay: .08s; }
.three .pcard:nth-child(3) { animation-delay: .16s; }
@keyframes deal { from { opacity: 0; transform: translateY(18px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .three .pcard { animation: none; } }
.center-row { justify-content: center; }

/* библиотека заготовок мастера */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 18px; }
.kit-item { display: block; text-decoration: none; color: inherit; }
a.kit-item.panel:hover { border-color: var(--gold); }
.kit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.kit-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.kit-form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field > span { font-family: var(--sc); font-size: 15px; letter-spacing: .1em; color: var(--gold); }
.field > span i { font-family: var(--serif); letter-spacing: 0; }
.field input, .field textarea, .field select, .role-slot select, .roller input {
  width: 100%; padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; }
.field textarea { resize: vertical; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills .lang-pill { padding: 6px 14px; font-size: 15px; }
.small { font-size: 14px; }
.slot-row { display: flex; gap: 18px; align-items: flex-start; }
.slot-row .pcard { width: 130px; flex: none; }
.slot-empty { width: 130px; aspect-ratio: 520/775; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: 14px; }
.slot-side { display: grid; gap: 10px; align-content: start; }
.slot-side p { margin: 0; }
.role-list { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.role-slot { width: 140px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.role-slot .pcard { width: 120px; }
.role-slot select { font-size: 14px; padding: 5px 6px; }
.role-add { width: 120px; aspect-ratio: 520/775; border: 1px dashed var(--gold); border-radius: 6px; background: transparent; color: var(--gold-2);
  font-family: var(--sc); font-size: 16px; letter-spacing: .1em; cursor: pointer; }
.role-add:hover { background: var(--accent-bg); }

/* лист персонажа */
.npc-sheet { display: grid; gap: 10px; }
.npc-sheet p { margin: 0; font-size: 16px; }
.npc-head { display: flex; gap: 14px; align-items: center; }
.npc-head h3 { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.npc-head small { color: var(--muted); }
.paper .npc-head small { color: #5A5246; }
.npc-cards { display: flex; flex: none; }
.npc-cards .mini { width: 58px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.npc-cards .mini + .mini { margin-left: -26px; transform: rotate(5deg); }
.npc-cards .mini.secret { filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)) brightness(.55); }
.npc-cards .mini .art-title { display: none; }
.npc-sheet.compact .npc-cards .mini { width: 50px; }
.paper .foe-line { color: #4A443A; }

/* карточка проверки: светлый лист даже за ширмой */
.check-card { background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--ink), 0 10px 22px var(--shadow); padding: 20px 22px 18px; display: grid; gap: 8px; }
.check-card .eyebrow { color: #6E5222; }
.check-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.check-thr { display: grid; justify-items: center; line-height: 1; border: 1.5px solid var(--ink); border-radius: 50%; width: 62px; height: 62px; place-content: center; }
.check-thr b { font-family: var(--display); font-size: 28px; }
.check-thr small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.check-card h3 { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.check-scene { margin: 0; font-style: italic; color: #4A443A; font-size: 16px; }
.check-rule { margin: 0; font-size: 14px; color: #4A443A; border-top: 1px solid #CDBF9F; padding-top: 8px; }
.check-out { margin: 4px 0 0; display: grid; gap: 2px; font-size: 15px; }
.check-out dt { font-family: var(--sc); font-weight: 700; font-size: 14px; letter-spacing: .06em; margin-top: 6px; }
.check-out dd { margin: 0; }
.check-out .light_success, .check-out .double { color: #6E5222; }
.check-out .dark_success, .check-out .dark_fail { color: #1B1915; }
a.check-mini { transition: transform .15s; }
a.check-mini:hover { transform: translateY(-3px); }
.levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.level { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); color: var(--text); cursor: pointer; }
.level b { font-family: var(--display); font-size: 28px; line-height: 1; }
.level small { font-size: 13px; color: var(--muted); }
.level.on { border-color: var(--gold); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--gold) inset; }
.check-once { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--muted); }
.check-once input { margin-top: 5px; }
.outcomes { display: grid; gap: 12px; }
.outcome { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); border-left-width: 4px; }
.outcome small { color: var(--muted); font-size: 13px; }
.outcome textarea { width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; resize: vertical; }
.outcome.light_success, .outcome.double { border-left-color: #E2CF9F; }
.outcome.light_fail { border-left-color: #A79A7E; }
.outcome.dark_success { border-left-color: #6E5F43; }
.outcome.dark_fail { border-left-color: #C4614F; }
.roller { display: grid; gap: 12px; }
.roller label { display: flex; gap: 6px; align-items: center; }
.roller input[type=number] { width: 64px; }
.roller input[type=checkbox] { width: auto; }
.roll-out { display: grid; gap: 6px; }
.roll-out p { margin: 0; }
.dice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.die { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 22px; }
.die.light { background: #F4EFE3; color: #1B1915; border: 1.5px solid #1B1915; }
.die.shade { background: #1B1915; color: #F4EFE3; border: 1.5px solid #C9B58A; }
.die.six { width: auto; padding: 0 8px; background: transparent; border: 1px dashed var(--gold); color: var(--gold-2); font-size: 18px; }
.dice .sum { font-size: 18px; }

@media (max-width: 900px) {
  .kit-layout { grid-template-columns: 1fr; }
  .kit-side { position: static; order: -1; }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 12px; }
}

/* стол: добавить Участника / роль */
.felt-person { display: grid; justify-items: center; gap: 4px; }
.felt-side { font-family: var(--sc); font-size: 12px; letter-spacing: .12em; color: #f4f2ee; background: rgba(22,20,15,.78); border: 1px solid rgba(201,181,138,.6); border-radius: 999px; padding: 1px 10px; }
.felt-add { display: grid; place-content: center; gap: 4px; aspect-ratio: 520/775; border: 1.5px dashed rgba(244,242,238,.7); border-radius: 8px;
  background: rgba(22,20,15,.35); color: #f4f2ee; font-size: 28px; line-height: 1; cursor: pointer; text-shadow: 0 0 4px #161616; }
.felt-add small { font-family: var(--sc); font-size: 12px; letter-spacing: .1em; }
.felt-add:hover { background: rgba(22,20,15,.6); border-color: #C9B58A; color: #E2CF9F; }
.felt-add.mid { width: var(--mid); }
.felt-add.small { width: var(--small); }
/* скрытый конфликт: карта за основным Конфликтом, выглядывает справа; ＋ — добавить (только мастер) */
.cf-stack { position: relative; display: inline-flex; margin-right: calc(var(--big) * .26); }
.cf-stack > .tcard { position: relative; z-index: 1; }
.cf-under { position: absolute; z-index: 0; top: 7%; left: 26%; }
.cf-under > .tcard { filter: brightness(.62) saturate(.6); transition: filter .15s, transform .15s; }
.cf-stack.revealed .cf-under > .tcard { filter: none; }
.cf-under:hover > .tcard, .cf-under > .tcard.on { filter: none; transform: translateX(6px); }
.hc-badge { position: absolute; right: 6px; top: 6px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(22,20,15,.82); border: 1px solid rgba(201,181,138,.6); font-size: 13px; pointer-events: none; }
.cf-add { display: grid; place-content: end; justify-items: end; gap: 2px; width: var(--big); aspect-ratio: 520/775; padding: 0 8px 10px 0;
  border: 1.5px dashed rgba(244,242,238,.55); border-radius: 8px; background: rgba(22,20,15,.35); color: #f4f2ee; cursor: pointer; font-size: 18px; }
.cf-add small { font-family: var(--sc); font-size: 11px; letter-spacing: .08em; }
.cf-add:hover { background: rgba(22,20,15,.6); border-color: #C9B58A; color: #E2CF9F; }
.cf-add:focus-visible { outline: 2px solid #C9B58A; outline-offset: 2px; }
.hc-note { margin: 0 0 10px; opacity: .82; }
.hc-opt { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 8px; }
.cf.cf-hidden { border-style: dashed; }
.cf-note { margin: 0 0 8px; }
@media (max-width: 700px) { .cf-stack { margin-right: calc(var(--big) * .18); } .cf-under { left: 18%; } }
.who { display: grid; gap: 8px; text-align: center; color: var(--muted); }
.who .pcard { width: 100%; }
.drawer-actions .btn small { font-size: 12px; }

/* персонаж: Участник и роли в один ряд, теги, моб */
.npc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 22px; align-items: start; }
.npc-slot { display: grid; gap: 7px; justify-items: center; text-align: center; }
.npc-slot .pcard { width: 100%; }
.npc-slot select { width: 100%; font-size: 14px; padding: 5px 6px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); }
.slot-add { width: 100%; aspect-ratio: 520/775; display: grid; place-content: center; gap: 6px; border: 1.5px dashed var(--gold); border-radius: 8px;
  background: transparent; color: var(--gold-2); font-size: 34px; line-height: 1; cursor: pointer; }
.slot-add small { font-family: var(--sc); font-size: 14px; letter-spacing: .08em; padding: 0 8px; }
.slot-add:hover { background: var(--accent-bg); }
.pills.tight { gap: 4px; justify-content: center; }
.pills.tight .lang-pill { padding: 3px 9px; font-size: 13px; }
.tag-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.tag-edit input { flex: 1; min-width: 200px; border: 0; background: transparent; color: var(--text); font: inherit; padding: 4px; }
.tag-edit input:focus { outline: none; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 12px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-2); }
.tag-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; padding: 2px 4px; }
.npc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.npc-tags span { border-radius: 999px; padding: 1px 10px; font-size: 14px; background: var(--accent-bg); color: var(--text); }
.paper .npc-tags span { color: #6E5222; }
.npc-desc { white-space: pre-line; }
.npc-foe .foe-mini { margin: 0; }
.pick-foe { display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.pick-foe:hover .foe-mini { border-color: var(--gold); }

/* библиотека проверок */
.lib-group { margin-top: 18px; display: grid; gap: 10px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.lib-item { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); color: var(--text); cursor: pointer; font: inherit; }
.lib-item small { color: var(--muted); font-size: 13px; }
.lib-item:hover { border-color: var(--gold); background: var(--accent-bg); }

/* порог: выбор уровня + ручная правка */
.thr-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.thr-edit input { width: 72px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 22px; padding: 4px; border-radius: var(--radius); border: 1px solid var(--gold); background: var(--bg-2); color: var(--text); }
.thr-edit .step { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold-2); font-size: 18px; cursor: pointer; }
@media (max-width: 640px) { .npc-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }

/* статблок: свои цифры */
.sb-stats .sb-cell { display: block; width: 100%; text-align: center; padding: 8px 4px 6px; border: 0; border-right: 1px solid #d8c9a6; border-bottom: 1px solid #d8c9a6;
  background: transparent; color: inherit; font: inherit; cursor: text; }
.sb-stats .sb-cell:nth-child(3n) { border-right: 0; }
.sb-stats .sb-cell:hover { background: rgba(110,82,34,.08); }
.sb-stats .sb-cell b { display: block; font-size: 21px; line-height: 1.1; }
.sb-stats .sb-cell small { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6a5d49; }
.sb-stats .edited b { color: #8a3b1e; }
.sb-stats .edited small::after { content: " ✎"; }
.sb-stats .sb-cell input { width: 100%; max-width: 90px; font: inherit; font-size: 19px; text-align: center; border: 1px solid #6E5222; border-radius: 4px; background: #fff; color: #1B1915; padding: 1px 4px; }

/* Конфликт: что нужно решить */
.cf { margin-top: 6px; padding: 18px 22px; }
.cf summary { display: flex; gap: 16px; align-items: center; cursor: pointer; list-style: none; }
.cf summary::-webkit-details-marker { display: none; }
.cf summary > span:last-child { display: grid; gap: 2px; }
.cf-art { width: 64px; flex: none; filter: var(--card-drop); }
.cf-art .art-title { display: none; }
.cf-title { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.cf[open] summary { margin-bottom: 14px; }
.cf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.cf-field { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); }
.cf-field.filled { border-left-color: var(--gold); }
.cf-field b { font-family: var(--sc); letter-spacing: .06em; font-size: 16px; color: var(--gold-2); }
.cf-field small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.cf-field textarea { margin-top: 4px; width: 100%; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; resize: vertical; }

/* карта локации */
.map-mini { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.map-mini img { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; }
.map-mini .map-ph { width: 96px; height: 72px; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 4px; font-size: 28px; }
.map-mini b { display: block; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.map-drop { display: grid; place-items: center; min-height: 360px; border: 2px dashed var(--gold); border-radius: 8px; cursor: pointer; overflow: hidden; background: var(--bg-2); }
.map-drop.over { background: var(--accent-bg); }
.map-drop.has { border-style: solid; border-width: 1px; min-height: 0; }
.map-drop img { display: block; width: 100%; height: auto; }
.map-drop span { display: grid; gap: 8px; text-align: center; font-size: 40px; color: var(--gold-2); padding: 20px; }
.map-drop small { font-size: 14px; color: var(--muted); font-family: var(--serif); }
.places { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.places li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; }
.places .pn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: var(--gold-2); margin-top: 4px; }
.places .pf { display: grid; gap: 6px; }
.places input, .places textarea { width: 100%; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; }
.places input { font-weight: 700; }
.places textarea { resize: vertical; font-size: 16px; }
.places .pa { display: grid; gap: 4px; }
.places .step { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.places .step:disabled { opacity: .3; cursor: default; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .cf-grid { grid-template-columns: 1fr; } }

/* карта ваншота — стили редактора в конце файла (блок «Редактор карты») */

.help-q { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--frame);
  color: var(--btn-fg); font-weight: 700; line-height: 1; text-decoration: none; background: var(--btn-bg); flex: none; align-self: center; }
.help-q:hover { background: var(--btn-hover); }

.lib-box { max-width: 1100px; }
.lib-filter { margin-top: 10px; align-items: center; }
.lib-group[hidden], .lib-item[hidden] { display: none; }

.places .psrc { display: block; font-size: 12px; letter-spacing: .06em; color: var(--gold); margin-bottom: 2px; }

.lib-item .tactic { color: var(--text); opacity: .8; font-size: 13px; line-height: 1.35; }

/* сквады: пачка врагов и сложность */
.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.squad-card { display: grid; gap: 10px; padding: 16px; text-decoration: none; color: var(--text); }
.squad-card b { font-size: 19px; }
.squad-who { display: grid; gap: 6px; font-size: 15px; }
.sq-who { display: flex; gap: 8px; align-items: center; }
.sq-side { position: sticky; top: 96px; }
.squad-who .token.small { width: 30px; height: 30px; }
.tier { display: inline-block; padding: 2px 12px; border-radius: 999px; font-family: var(--display); font-size: 16px; letter-spacing: .04em; border: 1px solid currentColor; }
.tier-none { color: var(--muted); }
.tier-easy { color: #8FB57A; }
.tier-medium { color: #D7B35A; }
.tier-hard { color: #D98547; }
.tier-edge { color: #E07850; }
.tier-deadly { color: #E04A45; }
.tier-hopeless { color: #B98AD9; }
[data-theme="light"] .tier-easy { color: #3E6B2B; }
[data-theme="light"] .tier-medium { color: #7A5A12; }
[data-theme="light"] .tier-hard { color: #9A4A14; }
[data-theme="light"] .tier-edge { color: #A3482A; }
[data-theme="light"] .tier-deadly { color: #8E1F1A; }
[data-theme="light"] .tier-hopeless { color: #5B2A7A; }
.tier-scale { position: relative; display: flex; height: 30px; margin: 18px 0 30px; border-radius: 6px; overflow: visible; }
.tier-seg { position: relative; height: 100%; background: currentColor; opacity: .85; border-right: 2px solid var(--panel); }
.tier-seg:first-child { border-radius: 6px 0 0 6px; }
.tier-seg:last-of-type { border-radius: 0 6px 6px 0; border-right: 0; }
.tier-seg small { position: absolute; top: 34px; left: 2px; white-space: nowrap; font-size: 12px; color: var(--muted); }
.tier-mark { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1px; background: var(--text); }
.tier-mark b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 15px; }
.sq-tier { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.sq-tier .tier { font-size: 22px; padding: 4px 16px; }
.sq-party { gap: 10px; margin-top: 12px; align-items: center; }
.sq-party b { min-width: 22px; text-align: center; font-size: 20px; }
.sq-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 36px 28px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sq-row:last-child { border-bottom: 0; }
.sq-row .token.small { width: 40px; height: 40px; }
.sq-name { text-decoration: none; color: var(--text); min-width: 0; }
.sq-name small { display: block; color: var(--muted); font-size: 14px; }
.sq-n { display: flex; gap: 6px; align-items: center; }
.sq-n b { min-width: 20px; text-align: center; }
.sq-n small { color: var(--muted); font-size: 13px; }
.sq-pts { font-family: var(--display); font-size: 20px; text-align: right; color: var(--gold-2); }
.btn.small { padding: 2px 10px; min-height: 0; }
.sq-legend { margin-top: 12px; font-size: 15px; }
.sq-legend summary { cursor: pointer; color: var(--gold-2); }
@media (max-width: 640px) {
  .sq-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
  .sq-name { grid-column: 2 / 5; }
  .sq-n { grid-column: 2; }
  .sq-side { position: static; }
  .tier-seg small { font-size: 10px; }
}

/* рамка с закрашенной серединой — аватар поверх, в круге */
.token.solid .token-av, .token.solid .token-sil { z-index: 2; inset: 20%; width: 60%; height: 60%; border-radius: 50%; object-fit: cover; }
.token.solid.has-av .token-sil { display: none; }
.check-line { display: flex; gap: 10px; align-items: center; margin-top: 10px; cursor: pointer; }
.check-line input { width: 18px; height: 18px; accent-color: var(--gold); }
.print-box { max-width: 560px; }

.sq-flag { margin: 8px 0; font-size: 15px; }

/* предметы */
.item-mini { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--text); }
.item-mini b { display: block; font-size: 18px; }
.item-mini small { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.item-art { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: 30px; overflow: hidden; }
.item-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.item-preview img { display: block; width: 100%; max-width: 340px; margin: 12px auto 0; border-radius: 6px; box-shadow: 0 6px 18px var(--shadow); background: #fff; }

/* стикеры на карте */
#stk { position: absolute; inset: 0; }
.mstk { position: absolute; height: auto; cursor: move; user-select: none; touch-action: none; }
.stk-box { max-width: 1100px; }
.stk-group { margin-top: 16px; }
.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 8px; }
.stk-pick { display: grid; gap: 4px; justify-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fbf8f1; cursor: pointer; }
.stk-pick img { width: 90px; height: 90px; object-fit: contain; }
.stk-pick small { color: #3c342a; font-size: 12px; text-align: center; line-height: 1.2; }
.stk-pick:hover { border-color: var(--gold); }

/* ---------- Онлайн-стол (table.js): вне боя — «Свет», в бою — «Тень» ---------- */
body.tb-wide main { max-width: none; padding: 0; }
body.tb-wide .foot { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb { display: flex; flex-direction: column; height: calc(100dvh - var(--tb-top, 80px)); min-height: 640px; background: var(--bg); color: var(--text); }
.tb-lbl { font: 500 12px/1.1 var(--sc); letter-spacing: .1em; text-transform: lowercase; color: var(--muted); }
.tb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.tb-back { min-width: 44px; padding: 6px 12px; }
.tb-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tb-name { font: 700 22px/1.1 var(--display); }
.tb-scenes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tb-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 18px;
  border: 1px solid var(--line); background: transparent; color: var(--text); font: 400 14px var(--serif); cursor: pointer; }
.tb-chip:hover { background: var(--accent-bg); }
.tb-chip.on { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.tb-chip.sq { width: 36px; padding: 0; border-radius: 8px; }
.tb-chip.big { min-height: 44px; border-radius: 8px; padding: 0 14px; font-size: 15px; }
.tb-chip:disabled { opacity: .4; cursor: not-allowed; }
.tb-select select { min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 400 14px var(--serif); padding: 0 8px; max-width: 220px; }
.tb-turn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tb-turn button { min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--text); font: 700 15px var(--serif); cursor: pointer; }
.tb-turn button.on { background: var(--btn-bg); color: var(--btn-fg); }
.tb-turnpill { padding: 9px 16px; border-radius: 22px; background: var(--accent-bg); border: 1px solid var(--line); font: 700 15px var(--serif); }
.tb-turnpill.gm { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.tb-last { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 22px; border: 1px solid var(--line); min-height: 44px; }
.tb-last img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.tb-last i { font-style: normal; font-size: 13px; color: var(--muted); }
.tb-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px; min-height: 30px; }
.tb-omens { display: flex; align-items: center; gap: 6px; }
.tb-omens b { font: 700 24px var(--display); color: var(--gold-2); min-width: 22px; text-align: center; }
.tb-code { font: 500 14px var(--sc); letter-spacing: .14em; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); }

.tb-body { flex: 1; display: flex; min-height: 0; }
.tb-left, .tb-right { flex: none; background: var(--panel); overflow-y: auto; display: flex; flex-direction: column; }
.tb-left { width: 268px; border-right: 1px solid var(--line); }
.tb-right { width: 330px; border-left: 1px solid var(--line); }
.tb-sec { padding: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tb-sec[hidden] { display: none; }
.tb-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb-logsec { flex: 1; min-height: 260px; }
#tb-cards { flex: none; max-height: 38%; overflow-y: auto; }
.tb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tb-stage { flex: 1; min-height: 320px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; background: var(--bg); }

.tb-board { position: relative; flex: none; border: 1px solid var(--frame); background: #6d6a62; overflow: hidden; touch-action: none; user-select: none; --u: 10px; }
.tb-cloth { position: absolute; inset: 0; background-position: center; pointer-events: none; }
.tb-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.tb-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tb-ink path { fill: none; stroke: #151310; stroke-linecap: round; stroke-linejoin: round; }
.tb-stk { position: absolute; height: auto; pointer-events: none; }
.tb-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(27,25,21,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(27,25,21,.28) 1px, transparent 1px);
  background-size: calc(var(--u) * 5) calc(var(--u) * 5); }
.tb-flag { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
.tb-flag.on .lab { background: #1b1915; color: #fbf8f1; }
.tb-flag.tb-hiddenp { opacity: .45; }
.tb-flag.tb-hiddenp .lab { border-style: dashed; }
.tb-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 60%; padding: 14px 18px; border-radius: 8px;
  background: rgba(251,248,241,.94); color: #1b1915; text-align: center; font-size: 15px; }

.tb-tok { position: absolute; width: calc(var(--u) * 5); height: calc(var(--u) * 5); transform: translate(-50%, -50%); padding: 0; border: 0;
  background: transparent; cursor: pointer; z-index: 2; touch-action: none; }
.tb-tok.can { cursor: grab; }
.tb-tok.dragging { cursor: grabbing; z-index: 5; filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); }
.tb-tok.s-foe { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); }
.tb-tok.s-big { width: calc(var(--u) * 6.6); height: calc(var(--u) * 6.6); }
.tb-tok.s-npc { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.tb-board[data-scene="map"] .tb-tok { width: calc(var(--u) * 4); height: calc(var(--u) * 4); }
.tb-face { width: 100%; height: 100%; border-radius: 50%; display: block; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.tb-tok .token.tb-ftok { width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.tb-tok .token.tb-ftok .token-sil { font-size: calc(var(--u) * 2); }
.tb-npc { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 18%; background: #fbf8f1; border: 3px solid #1b1915;
  color: #1b1915; font: 700 calc(var(--u) * 2) var(--display); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.tb-tok.me .tb-face { box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 7px rgba(201,181,138,.35); }
.tb-tok.last .tb-face { box-shadow: 0 0 0 3px #fbf8f1, 0 0 0 6px var(--gold); }
.tb-tok.sel { outline: 3px dashed var(--gold-2); outline-offset: 4px; border-radius: 50%; }
.tb-tok.hid { opacity: .45; }
.tb-tok.down .tb-face, .tb-tok.down .token, .tb-tok.down .tb-npc { filter: grayscale(1) brightness(.6); }
.tb-tag { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 600 12px/1 var(--serif); padding: 3px 7px; border-radius: 3px; background: rgba(251,248,241,.94); color: #1b1915; }
[data-theme="shade"] .tb-tag { background: rgba(22,20,15,.88); color: #f4efe3; }
.tb-tag.opt { opacity: 0; transition: opacity .12s; }               /* подписи мобов и персонажей — по наведению и у выбранного */
.tb-tok:hover .tb-tag.opt, .tb-tok:focus-visible .tb-tag.opt, .tb-tok.sel .tb-tag.opt, .tb-tok.dragging .tb-tag.opt { opacity: 1; z-index: 6; }
.tb-tok:hover { z-index: 4; }
.tb-tok.hurt::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed #a33b2a; pointer-events: none; }
.tb-tag.hl { background: var(--btn-bg); color: var(--btn-fg); }

.tb-dock { flex: none; border-top: 1px solid var(--line); background: var(--panel); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; max-height: 46%; overflow-y: auto; }
.tb-dockrow { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.tb-hint { align-items: center; justify-content: space-between; }
.tb-hint p { margin: 0; max-width: 620px; }
.tb-hero { display: flex; gap: 12px; align-items: center; min-width: 240px; }
.tb-hav { width: 76px; height: 76px; border-radius: 50%; flex: none; }
.tb-hinfo { display: flex; flex-direction: column; gap: 3px; }
.tb-hname { font: 700 22px/1.1 var(--display); color: var(--gold-2); }
.tb-tracks { display: flex; flex-direction: column; gap: 8px; }
.tb-trk { display: flex; align-items: center; gap: 6px; }
.tb-trk .tb-lbl { width: 96px; }
.tb-pip { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text); background: transparent; padding: 0; cursor: pointer; }
span.tb-pip { cursor: default; }
.tb-pip.on { background: var(--text); }
.tb-pip.sq { border-radius: 4px; }
[data-theme="shade"] .tb-pip { border-color: var(--gold); }
[data-theme="shade"] .tb-pip.on { background: var(--gold); }
.tb-sparks { font: 700 20px var(--display); color: var(--gold-2); min-width: 44px; text-align: center; }
.tb-roll { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.tb-stats, .tb-rollrow, .tb-marks, .tb-dacts, .tb-attack { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tb-rollbtn { margin-left: auto; min-height: 48px; padding: 0 26px; font-size: 17px; }
.tb-warn { margin: 0; color: var(--danger-fg); }
.tb-change { align-self: flex-start; font-size: 13px; color: var(--muted); }
.tb-dinfo { display: flex; flex-direction: column; gap: 6px; min-width: 220px; max-width: 460px; }
.tb-desc { margin: 0; color: var(--muted); white-space: pre-line; }
.tb-pips { display: flex; gap: 6px; flex-wrap: wrap; max-width: 300px; }
.tb-dacts { margin-left: auto; max-width: 520px; justify-content: flex-end; }
.tb-dacts .btn { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.tb-hint .tb-dacts { flex-direction: row; margin-left: 0; }
.tb-pickhero { display: flex; flex-direction: column; gap: 10px; }
.tb-picks { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tb-pickbtn { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; min-height: 56px; border-radius: 30px; border: 1px solid var(--line);
  background: transparent; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.tb-pickbtn:hover { background: var(--accent-bg); border-color: var(--gold); }
.tb-pickbtn img { width: 44px; height: 44px; border-radius: 50%; }
.tb-pickbtn span { display: flex; flex-direction: column; }
.tb-pickbtn small { color: var(--muted); }

.tb-item { display: flex; align-items: center; gap: 6px; border-radius: 6px; }
.tb-item.on { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--gold); }
.tb-itemname { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; border: 0; background: transparent;
  color: var(--text); font: 400 15px var(--serif); text-align: left; cursor: pointer; }
.tb-itemname span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-itemname small { color: var(--muted); }
.tb-lav { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.tb-itemname .token.tb-ltok { width: 30px; height: 30px; }
.tb-itemname .token.tb-ltok .token-sil { font-size: 14px; }
.tb-lnpc { width: 30px; height: 30px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); font: 700 14px var(--display); }
.tb-mini { min-height: 30px; padding: 0 9px; border-radius: 15px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 400 13px var(--serif); cursor: pointer; white-space: nowrap; }
.tb-mini:hover { background: var(--accent-bg); }
.tb-eye { width: 34px; height: 34px; border: 0; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.tb-eye.off { color: var(--muted); }
.tb-group { display: flex; flex-direction: column; gap: 2px; }
.tb-grouph { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; padding: 4px 0; }
.tb-grouph span { flex: 1 1 100%; font-weight: 700; }

.tb-showcard { padding: 12px; border-radius: 8px; background: var(--btn-bg); color: var(--btn-fg); display: flex; flex-direction: column; gap: 6px; }
.tb-showcard img { width: 100%; border-radius: 4px; }
.tb-showcard p { margin: 0; white-space: pre-line; line-height: 1.4; }
.tb-showt { font: 700 18px var(--display); }
.tb-spread > summary { cursor: pointer; list-style: none; }
.tb-spread > summary::-webkit-details-marker { display: none; }
.tb-spread > summary .tb-lbl::before { content: "▸ "; }
.tb-spread[open] > summary .tb-lbl::before { content: "▾ "; }
.tb-spl { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tb-sp { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; }
.tb-sp img, .tb-spimg { width: 52px; aspect-ratio: 520 / 775; object-fit: cover; border-radius: 4px; box-shadow: var(--card-drop); background: #fbf8f1; display: block; }
.tb-sp.lying img { aspect-ratio: 640 / 454; }
.tb-spk { font: 500 11px/1.1 var(--sc); letter-spacing: .08em; text-transform: lowercase; color: var(--muted); }
.tb-spn { font: 700 15px/1.2 var(--display); margin: 2px 0 3px; }
.tb-sp p { margin: 0; font-size: 14px; line-height: 1.35; }
.tb-hand { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-card { margin: 0; width: 120px; display: flex; flex-direction: column; gap: 4px; }
.tb-card img { width: 100%; border-radius: 6px; box-shadow: var(--card-drop); background: #fbf8f1; }
.tb-card figcaption { font-size: 13px; text-align: center; }
.tb-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.tb-entry { padding: 9px 11px; border-radius: 8px; background: var(--accent-bg); display: flex; flex-direction: column; gap: 5px; }
.tb-entry.secret { opacity: .75; border: 1px dashed var(--line); }
.tb-eh { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tb-eb { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.tb-d { padding: 2px 8px; border-radius: 4px; font-weight: 700; border: 1px solid var(--line); }
.tb-d.light { background: #fbf8f1; color: #1b1915; border-color: #1b1915; }
.tb-d.dark { background: #0d0c09; color: #f4efe3; border-color: #4a4230; }
.tb-er { font-size: 13px; color: var(--gold-2); }
.tb-entry.o-dark .tb-er { color: var(--danger-fg); }
.tb-gmroll { display: flex; flex-direction: column; gap: 6px; }
.tb-gmroll input:not([type=checkbox]) { min-height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 0 8px; font: 400 14px var(--serif); }
.tb-gmroll input[name=dice] { width: 96px; }
.tb-gmroll input[name=mod] { width: 64px; }
.tb-gmroll .btn { min-height: 36px; padding: 0 14px; margin-left: auto; }
.tb-check { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
.tb-cardrow { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px dashed var(--line); }

@media (max-width: 1100px) {
  .tb { height: auto; min-height: 0; }
  .tb-body { flex-direction: column; }
  .tb-left, .tb-right { width: auto; border: 0; border-top: 1px solid var(--line); max-height: none; }
  .tb-left { order: 3; }
  .tb-right { order: 2; }
  .tb-main { order: 1; }
  .tb-stage { flex: none; min-height: 0; padding: 4px; align-items: flex-start; }
  .tb-dock { max-height: none; }
}
@media (max-width: 640px) {
  .tb-head { gap: 8px; padding: 8px 12px; }
  .tb-name { font-size: 18px; }

  .tb-turn button { padding: 0 10px; font-size: 14px; }
  .tb-roll { min-width: 0; flex: 1 1 100%; }
  .tb-hero { min-width: 0; }
  .tb-trk .tb-lbl { width: 84px; }
  .tb-pip { width: 20px; height: 20px; }
  .tb-dacts { margin-left: 0; }
  .tb-tag { font-size: 10px; }
  .tb-board .tb-tok, .tb-board[data-scene="map"] .tb-tok { width: max(34px, calc(var(--u) * 5)); height: max(34px, calc(var(--u) * 5)); }
}

/* ---------- Барный режим (React: web/src/screens/bar): лист героя на телефоне и ширма на телевизоре. Таро: бумага, чернила, двойная рамка ---------- */
body.bar-mode .top, body.bar-mode .foot { display: none; }
body.bar-mode main { max-width: none; padding: 0; }
body.bar-mode { background: #F4F4F1; }
body.bar-mode[data-theme="shade"] { background: #121212; }
/* Лист героя на телефоне: плоский чёрно-белый, две страницы («Герой», «Умения») */
/* плоские чёрно-белые экраны (лист, телефон мастера, ТВ): свои переменные; --card — плитки, --invfg — текст на чернилах,
   --inv-mid / --inv-sub — подписи на чернилах, --icon — фильтр значков (в тёмной теме чёрные значки выворачиваются) */
.ls, .tv2 { --ink: #111111; --mid: #6B6B6B; --line: #DADADA; --bg: #F4F4F1; --card: #FFFFFF; --invfg: #FFFFFF; --inv-mid: #9A9A9A; --inv-sub: #DADADA;
  --track: #DADADA; --zone: #8A8A8A; --pip-inv: #4A4A4A; --ring-track: var(--track); --ring-ink: var(--ink);
  --icon: grayscale(1) contrast(1.3); --icon-inv: grayscale(1) invert(1) contrast(1.3); --veil: rgba(17,17,17,.55); }
[data-theme="shade"] :is(.ls, .tv2) { --ink: #F2F2F0; --mid: #A3A3A3; --line: #3A3A3A; --bg: #121212; --card: #1E1E1E; --invfg: #111111; --inv-mid: #5E5E5E; --inv-sub: #333333;
  --track: #3A3A3A; --zone: #6E6E6E; --pip-inv: #BDBDBD; --icon: grayscale(1) invert(1) contrast(1.3); --icon-inv: grayscale(1) contrast(1.3); --veil: rgba(0,0,0,.7); }
.ls {
  max-width: 480px; margin: 0 auto; min-height: 100dvh; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg); color: var(--ink); font-family: "Archivo", "Helvetica Neue", Arial, "Noto Sans", var(--cjk-sans), system-ui, sans-serif; }
.ls button { font: inherit; color: inherit; cursor: pointer; }
.ls-k { font-size: 10px; font-weight: 600; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.ls-head { display: flex; align-items: center; gap: 8px; }
.ls-back { width: 34px; height: 40px; display: grid; place-items: center; margin-left: -8px; color: var(--ink); text-decoration: none; font-size: 22px; }
.ls-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ls-name b { font-size: 22px; line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-ev { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.ls-ev b { font-size: 24px; line-height: 1; font-weight: 800; }
.ls-shown { background: var(--ink); color: var(--invfg); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ls-shown .ls-k { color: var(--inv-mid); }
.ls-shown b { font-size: 16px; }
.ls-shown p { margin: 0; font-size: 13px; line-height: 1.4; white-space: pre-line; }
.ls-ruler { position: relative; height: 40px; flex: none; }
.ls-zones { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: grid; }
.ls-zones span { position: relative; }
.ls-zones span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--track); }
.ls-zones span:nth-child(2)::after { background: var(--zone); }
.ls-zones span:nth-child(3)::after { background: var(--ink); }
.ls-zones b { display: block; text-align: center; font-size: 12px; font-weight: 800; line-height: 1; }
.ls-tick { position: absolute; top: 29px; transform: translateX(-50%); font-size: 10px; font-weight: 600; line-height: 1; }
.ls-dial { position: relative; width: 100%; aspect-ratio: 390 / 372; flex: none; }
.ls-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-ava { position: absolute; left: 50%; top: 50%; width: 50%; transform: translate(-50%, -50%); filter: grayscale(1); }
.ls-cw { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ls-cw.tl { left: 0; top: 0; }
.ls-cw.tr { right: 0; top: 0; align-items: flex-end; }
.ls-cw.bl { left: 0; bottom: 0; flex-direction: column-reverse; }
.ls-cw.br { right: 0; bottom: 0; align-items: flex-end; flex-direction: column-reverse; }
.ls-cw b, .ls-special b { font-size: 30px; line-height: 1; font-weight: 800; }
.ls-cw small, .ls-special small { font-size: 14px; color: var(--mid); }
.ls-pm { display: flex; gap: 4px; }
.ls-pm button { width: 34px; height: 30px; padding: 0; border: 2px solid var(--ink); background: var(--card); font-size: 16px; font-weight: 800; line-height: 1; }
.ls-pm button:active { background: var(--ink); color: var(--invfg); }
.ls-pm button:disabled { opacity: .3; }
.ls-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--card); flex: none; }
.ls-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; }
.ls-stats img { width: 20px; height: 20px; object-fit: contain; filter: var(--icon); }
.ls-stats b { font-size: 18px; line-height: 1; font-weight: 800; }
.ls-stats .ls-k { font-size: 8.5px; color: var(--ink); text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ls-stats .hi { background: var(--ink); color: var(--invfg); }
.ls-stats .hi img { filter: var(--icon-inv); }
.ls-stats .hi .ls-k { color: var(--invfg); }
.ls-special { display: flex; align-items: center; gap: 10px; background: var(--card); padding: 8px 10px; }
.ls-special .ls-k { flex: 1; color: var(--ink); }
.ls-art img.cv { width: 100%; height: 100%; object-fit: cover; }
.ls-ready { margin-top: -2px; }
.ls-gh { margin: 4px 0 -3px; }
.ls-art { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; overflow: hidden; flex: none; }
.ls-art img { width: 28px; height: 28px; object-fit: contain; filter: grayscale(1) contrast(1.3); }   /* арт карт — не выворачивать */
.ls-art.big { width: 88px; height: 88px; }
.ls-art.big img { width: 64px; height: 64px; }
.ls-sig { border: 0; background: var(--ink); color: var(--invfg); padding: 12px; display: flex; gap: 12px; text-align: left; align-items: flex-start; }
.ls-sig .ls-art { width: 60px; height: 60px; border-color: var(--invfg); }
.ls-sig .ls-art img.cv { filter: grayscale(1); }
.ls-sig .ls-k { color: var(--inv-mid); }
.ls-sig b { color: var(--invfg); display: block; font-size: 18px; line-height: 1.1; font-weight: 800; margin: 4px 0 5px; }
.ls-sigtext { display: block; font-size: 12.5px; line-height: 1.4; color: var(--inv-sub); }
.ls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ls-tile { display: flex; gap: 9px; align-items: center; min-height: 58px; padding: 8px; border: 2px solid var(--ink); background: var(--card); text-align: left; }
.ls-tile b { display: block; font-size: 12.5px; line-height: 1.15; font-weight: 800; }
.ls-tile i { display: block; font-style: normal; font-size: 10px; line-height: 1.2; color: var(--mid); margin-top: 2px; }
.ls-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-grid.three .ls-tile { flex-direction: column; text-align: center; min-height: 86px; gap: 5px; }
.ls-tile.used, .ls-sig.used { opacity: .4; }
.ls-tile.used b, .ls-sig.used b { text-decoration: line-through; }
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-chips button { min-height: 36px; padding: 0 12px; border: 2px solid var(--ink); background: var(--card); font-weight: 700; font-size: 13px; }
.ls-chips button.used { opacity: .4; text-decoration: line-through; }
.ls-link { align-self: center; border: 0; background: transparent; color: var(--mid); font-size: 13px; text-decoration: underline; min-height: 32px; }
.ls-veil { position: fixed; inset: 0; z-index: 20; background: var(--veil); display: flex; align-items: flex-end; justify-content: center; }
.ls-sheet { width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto; background: var(--card); border-top: 3px solid var(--ink); padding: 18px 18px 20px; }
.ls-sheethead { display: flex; gap: 14px; align-items: flex-start; }
.ls-sheethead > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ls-sheethead b { font-size: 22px; line-height: 1.1; font-weight: 800; }
.ls-sheethead em { font-style: normal; font-size: 14px; font-weight: 800; }
.ls-originart { display: flex; margin-top: 12px; }
.ls-originart img { width: 50%; }
.ls-text { margin: 14px 0 16px; font-size: 14px; line-height: 1.45; }
.ls-text p { margin: 0 0 6px; white-space: pre-line; }
.ls-handimg { width: 100%; max-height: 60dvh; object-fit: contain; margin-bottom: 14px; }
.ls-acts { display: flex; gap: 8px; }
.ls-act { flex: 1; height: 44px; border: 2px solid var(--ink); background: var(--card); font-weight: 800; font-size: 14px; }
.ls-act.pri { background: var(--ink); color: var(--invfg); }
.ls-pick { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.ls-pickbtn { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px 8px 8px; border: 2px solid var(--ink); background: var(--card); text-align: left; }
.ls-pickbtn img { width: 48px; height: 48px; filter: grayscale(1); }
.ls-pickbtn span { display: flex; flex-direction: column; }
.ls-pickbtn small { color: var(--mid); }
@media (max-width: 370px) {
  .ls-cw b { font-size: 24px; }
  .ls-pm button { width: 30px; height: 28px; }
}

/* Общий экран на ТВ (React: web/src/screens/bar/Tv.tsx): «табло» на карте локации, круги героев и сообщения на карте места, бой — тёмный.
   Размеры — в долях экрана 1920×1080 (--p), чтобы любой телевизор показывал одно и то же. */
.tv2 { --p: min(calc(100vw / 1920), calc(100vh / 1080)); --inv: var(--ink);
  position: relative; width: 100vw; height: 100dvh; overflow: hidden; display: grid; box-sizing: border-box;
  background: var(--bg); color: var(--ink); font-family: "Archivo", "Helvetica Neue", Arial, "Noto Sans", var(--cjk-sans), system-ui, sans-serif; }
/* бой на ТВ — не тёмный экран, а плашка «⚔ Бой» и толстая рамка по краю: видно в обеих темах */
.tv2.m-fight { box-shadow: inset 0 0 0 calc(10 * var(--p)) var(--ink); }
.tv-fightbadge { display: inline-flex; align-items: center; gap: .3em; padding: calc(10 * var(--p)) calc(24 * var(--p)); border: calc(4 * var(--p)) solid var(--ink);
  font-size: calc(44 * var(--p)); line-height: 1; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tv2 * { box-sizing: border-box; }
.tv-k { font-size: calc(15 * var(--p)); font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
.tv2 .tv-stage { min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; grid-area: stage; }
.tv2 .tv-stage .tb-board { border: calc(3 * var(--p)) solid var(--ink); border-radius: 0; }
.tv2 .tv-stage .tb-tok { cursor: default; }
.tv2 .tv-stage .tb-tok.last .tb-face { box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 8px #111111; }
.tv2.m-map { grid-template-columns: calc(680 * var(--p)) minmax(0, 1fr); grid-template-areas: "side stage"; gap: calc(56 * var(--p));
  padding: calc(48 * var(--p)) calc(48 * var(--p)) calc(48 * var(--p)) calc(56 * var(--p)); }
.tv-side { grid-area: side; min-height: 0; display: flex; flex-direction: column; gap: calc(22 * var(--p)); }
.tv-place { margin: calc(-8 * var(--p)) 0 0; font-size: calc(68 * var(--p)); line-height: 1.02; font-weight: 800; letter-spacing: -.01em; }
.tv-table { border-top: calc(3 * var(--p)) solid var(--ink); padding-top: calc(12 * var(--p)); }
.tv-row { display: grid; grid-template-columns: calc(230 * var(--p)) minmax(0, 1fr) minmax(0, 1fr) calc(54 * var(--p)) calc(84 * var(--p));
  align-items: center; gap: calc(12 * var(--p)); padding: calc(12 * var(--p)) 0; border-bottom: 1px solid var(--track); }
.tv-row.tv-k { font-size: calc(13 * var(--p)); padding-top: 0; }
.tv-who { display: flex; align-items: center; gap: calc(12 * var(--p)); min-width: 0; }
.tv-who img { width: calc(60 * var(--p)); height: calc(60 * var(--p)); border-radius: 50%; background: var(--card); flex: none; }
.tv-who b { display: block; font-size: calc(26 * var(--p)); line-height: 1; }
.tv-who em { font-style: normal; font-size: calc(12 * var(--p)); }
.tv-cells { display: flex; gap: calc(3 * var(--p)); flex-wrap: wrap; }
.tv-cells i { display: block; width: calc(19 * var(--p)); height: calc(16 * var(--p)); background: var(--track); }
.tv-cells i.on { background: var(--ink); }
.tv-cells i.dia { width: calc(15 * var(--p)); transform: skewX(-12deg); }
.tv-cells i.sq { width: calc(16 * var(--p)); background: transparent; border: calc(2 * var(--p)) solid var(--ink); }
.tv-cells i.sq.on { background: var(--ink); }
.tv-sp { font-size: calc(30 * var(--p)); }
.tv-hints p { display: flex; gap: calc(16 * var(--p)); margin: calc(12 * var(--p)) 0 0; font-size: calc(21 * var(--p)); line-height: 1.35; font-weight: 600; }
.tv-hints p b { min-width: calc(22 * var(--p)); }
.tv-code { margin-top: auto; display: flex; align-items: center; gap: calc(18 * var(--p)); border-top: calc(3 * var(--p)) solid var(--ink); padding-top: calc(16 * var(--p)); }
.tv-code b { font-size: calc(36 * var(--p)); letter-spacing: .12em; line-height: 1; }
.tv2.m-room { grid-template-columns: calc(260 * var(--p)) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) calc(120 * var(--p));
  grid-template-areas: "col stage" "say say"; column-gap: calc(40 * var(--p)); row-gap: calc(28 * var(--p)); padding: calc(28 * var(--p)) calc(40 * var(--p)) 0; }
.tv-col { grid-area: col; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(26 * var(--p)); }
.tv-dial { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--p)); }
.tv-ring { position: relative; width: var(--d, calc(196 * var(--p))); height: var(--d, calc(196 * var(--p))); border-radius: 50%; flex: none; }
.tv-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-ring img { position: absolute; left: 19%; top: 19%; width: 62%; height: 62%; border-radius: 50%; background: var(--card); }
.tv-dial b { font-size: var(--dn, calc(28 * var(--p))); line-height: 1; }
.tv-dial.last .tv-ring { outline: calc(4 * var(--p)) solid var(--ink); outline-offset: calc(6 * var(--p)); }
.tv-lastlbl { font-size: calc(13 * var(--p)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: var(--inv); color: var(--invfg); padding: calc(5 * var(--p)) calc(8 * var(--p)); }
.tv2.m-room.has-checks { grid-template-columns: calc(260 * var(--p)) minmax(0, 1fr) calc(340 * var(--p)); grid-template-areas: "col stage chk" "say say say"; }
.tv-checks { grid-area: chk; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(12 * var(--p)); }
.tv-say { grid-area: say; margin: 0 calc(-40 * var(--p)); background: var(--inv); color: var(--invfg); display: flex; align-items: center; gap: calc(28 * var(--p)); padding: 0 calc(48 * var(--p)); }
.tv-say .tv-k { color: inherit; opacity: .65; flex: none; }
.tv-say p { flex: 1; margin: 0; font-size: calc(32 * var(--p)); line-height: 1.25; font-weight: 600; }
.tv-say .tv-code { margin: 0; border: 0; padding: 0; flex: none; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--p)); }
.tv-say .tv-code .tv-k { font-size: calc(12 * var(--p)); }
.tv-say .tv-code b { font-size: calc(26 * var(--p)); }
.tv2.m-fight { grid-template-columns: calc(260 * var(--p)) minmax(0, 1fr) calc(270 * var(--p)); grid-template-rows: calc(96 * var(--p)) minmax(0, 1fr);
  grid-template-areas: "turn turn turn" "col stage foes"; column-gap: calc(24 * var(--p)); row-gap: calc(20 * var(--p)); padding: calc(20 * var(--p)) calc(36 * var(--p)) calc(36 * var(--p)); }
.tv-turn { grid-area: turn; display: flex; align-items: center; justify-content: center; gap: calc(24 * var(--p)); }
.tv-turn > b { background: var(--inv); color: var(--invfg); padding: calc(14 * var(--p)) calc(40 * var(--p)); font-size: calc(56 * var(--p)); line-height: 1; }
.tv-turn span { font-size: calc(22 * var(--p)); line-height: 1.3; font-weight: 600; }
.tv-turn em { font-style: normal; color: var(--mid); }
.tv-foes { grid-area: foes; min-height: 0; display: flex; flex-direction: column; gap: calc(12 * var(--p)); }
.tv-foe { display: flex; align-items: center; gap: calc(12 * var(--p)); background: var(--card); padding: calc(10 * var(--p)) calc(12 * var(--p)); }
.tv-foe .token.tv-ftok { width: calc(58 * var(--p)); height: calc(58 * var(--p)); flex: none; }
.tv-foe b { display: block; font-size: calc(21 * var(--p)); line-height: 1.1; }
.tv-foe em { display: inline-block; margin-top: calc(6 * var(--p)); font-style: normal; font-size: calc(14 * var(--p)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: calc(5 * var(--p)) calc(8 * var(--p)); border: calc(2 * var(--p)) solid var(--mid); color: var(--mid); }
.tv-foe.st-hurt em { border-color: var(--ink); color: var(--ink); }
.tv-foe.st-wound em { background: var(--zone); border-color: var(--zone); color: #111111; }
.tv-foe.st-dying em { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tv-foe.st-down { opacity: .45; }
.tv-foe.st-down b { text-decoration: line-through; }
.tv-none { color: var(--mid); font-size: calc(18 * var(--p)); margin: 0; }
.tv-hint { margin-top: auto; background: var(--inv); color: var(--invfg); padding: calc(16 * var(--p)) calc(18 * var(--p)); }
.tv-hint .tv-k, .tv-shown .ls-k { color: inherit; opacity: .65; }
.tv-hint p { margin: calc(10 * var(--p)) 0 0; font-size: calc(21 * var(--p)); line-height: 1.35; font-weight: 600; }
.tv-shown { background: var(--inv); color: var(--invfg); padding: calc(16 * var(--p)) calc(18 * var(--p)); display: flex; flex-direction: column; gap: calc(6 * var(--p)); width: 100%; }
.tv-shown .ls-k { font-size: calc(13 * var(--p)); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.tv-shown b { font-size: calc(24 * var(--p)); line-height: 1.15; }
.tv-shown p { margin: 0; font-size: calc(18 * var(--p)); line-height: 1.4; white-space: pre-line; }
.tv-shown img { max-height: 30vh; object-fit: contain; align-self: flex-start; }
.tv-full { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border: 1.5px solid var(--mid); background: transparent; color: var(--mid); opacity: .3; cursor: pointer; }
.tv-full:hover, .tv-full:focus-visible { opacity: 1; }
body.bar-tv { overflow: hidden; }

/* Лист на телефоне: вкладки, карта; телефон мастера */
.ls-tabs { position: sticky; bottom: 10px; z-index: 6; margin-top: auto; flex: none; height: 60px; background: var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px; gap: 5px; }
.ls-tabs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls-tabs button { border: 0; background: transparent; color: var(--invfg); font-weight: 800; font-size: 15px; }
.ls-tabs button.on { background: var(--card); color: var(--ink); }
.ls-shown.say { background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.ls-shown.say .ls-k { color: var(--mid); }
.ls-ev b.ls-status { font-size: 15px; margin-top: 4px; }
.ls-mapwrap { position: relative; flex: none; }
.ls-mapview { height: max(280px, calc(100dvh - 290px)); overflow: auto; border: 2px solid var(--ink); background: #DADADA; -webkit-overflow-scrolling: touch; }
.ls-board { position: relative; cursor: crosshair; }
.ls-board .tb-tok.me .tb-face { box-shadow: 0 0 0 3px #111111, 0 0 0 6px #FFFFFF; }
.ls-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.ls-zoom button { width: 44px; height: 44px; border: 2px solid #111111; background: #FFFFFF; color: #111111; font-size: 20px; font-weight: 800; padding: 0; }
.ls-zoomtxt { position: absolute; left: 8px; bottom: 10px; background: #FFFFFF; color: #111111; padding: 4px 6px; }
.ls-hint { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--mid); }
/* бой на телефоне мастера: плашка «⚔ Бой» в шапке и черта сверху — в любой теме */
.gmp.is-fight { box-shadow: inset 0 5px 0 var(--ink); }
.ls-fightbadge { align-self: flex-end; padding: 2px 8px; background: var(--ink); color: var(--invfg); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; }
.ls-themebtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--card); color: var(--ink); padding: 0; font-size: 18px; line-height: 1; }
.gmp .ls-act { background: transparent; color: var(--ink); }
.gmp .ls-act.pri { background: var(--ink); color: var(--bg); }
.gmp .ls-chips button { background: var(--card); color: var(--ink); border-color: var(--ink); }
.gmp .ls-back { color: var(--ink); }
.gm-bar { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.gm-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--ink); height: 44px; }
.gm-seg button { border: 0; background: transparent; color: var(--ink); font-weight: 800; font-size: 13px; padding: 0 4px; }
.gm-seg button.on { background: var(--ink); color: var(--bg); }
.gm-seg[aria-disabled] { opacity: .35; }
.gm-scene { display: flex; flex-direction: column; gap: 4px; }
.gm-scene select { height: 42px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: inherit; font-weight: 700; padding: 0 8px; }
.gm-stage { border: 2px solid var(--ink); background: #DADADA; overflow: hidden; }
.gm-stage .tb-board { position: relative; cursor: crosshair; }
.gm-stage .tb-tok.sel { outline: 3px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 6px #111111; border-radius: 50%; }
.gm-list { display: flex; flex-direction: column; gap: 6px; }
.gm-row { display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 4px 6px; background: var(--card); }
.gm-row.sel { outline: 3px solid var(--ink); outline-offset: -3px; }
.gm-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; text-align: left; padding: 0; color: var(--ink); min-height: 44px; }
.gm-who b { display: block; font-size: 14px; line-height: 1.1; }
.gm-who em { display: block; font-style: normal; font-size: 11px; color: var(--mid); margin-top: 2px; }
.gm-who .token.gm-ftok, .gm-who .tb-npc { width: 36px; height: 36px; flex: none; }
.gm-eye { height: 34px; padding: 0 7px; border: 1.5px solid var(--mid); background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; }
.gm-pm { width: 34px; height: 34px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-weight: 800; font-size: 16px; padding: 0; }
.gm-hp { min-width: 34px; text-align: center; font-size: 14px; }
.gm-now { display: flex; gap: 10px; align-items: center; background: var(--ink); color: var(--bg); padding: 10px 12px; }
.gm-now > div { flex: 1; min-width: 0; }
.gm-now .ls-k { color: var(--inv-mid); }
.gm-now b { display: block; font-size: 15px; line-height: 1.2; margin-top: 4px; }
.gm-now button { height: 40px; padding: 0 12px; border: 2px solid var(--bg); background: transparent; color: var(--bg); font-weight: 800; font-size: 13px; }
.gm-check { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 10px; background: var(--card); border: 2px solid var(--line); }
.gm-check.act { border-color: var(--ink); }
.gm-check > span { flex: 1; min-width: 0; }
.gm-check b { display: block; font-size: 13.5px; line-height: 1.2; }
.gm-check em { display: block; font-style: normal; font-size: 11.5px; color: var(--mid); margin-top: 3px; }
.gm-check button { height: 40px; min-width: 104px; padding: 0 10px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 800; font-size: 12.5px; }
.gm-check.act button { background: var(--ink); color: var(--bg); }
.gm-say { width: 100%; box-sizing: border-box; border: 2px solid var(--ink); background: var(--card); color: var(--ink); padding: 8px 10px; font: inherit; font-weight: 600; font-size: 15px; line-height: 1.35; resize: vertical; }
.ls-shown.check p { font-weight: 600; }
.tv-foes .tv-shown, .tv-checks .tv-shown, .tv-side .tv-shown { flex: none; }
.gm-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--card); border: 2px solid var(--ink); margin-top: 4px; }
.gm-field { display: flex; flex-direction: column; gap: 4px; }
.gm-field input, .gm-dc input { height: 44px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; padding: 0 10px; box-sizing: border-box; }
.gm-stats button.on { background: var(--ink); color: var(--bg); }
.gm-dc { display: flex; gap: 4px; flex-wrap: wrap; }
.gm-dc input { width: 64px; text-align: center; }
.gm-dc button { min-width: 40px; height: 44px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-weight: 800; font-size: 14px; padding: 0 6px; }
.gm-dc button.on { background: var(--ink); color: var(--bg); }
.gm-checks3 { display: flex; flex-direction: column; gap: 8px; }
.gm-checks3 label { display: flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 600; font-size: 14px; }
.gm-checks3 input { width: 22px; height: 22px; accent-color: var(--ink); }
.gm-wide { width: 100%; flex: none; }
.ls-act[disabled] { opacity: .4; }
.gm-note { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px; background: var(--card); border: 2px solid var(--line); }
.gm-note.act { border-color: var(--ink); }
.gm-note.done { opacity: .5; }
.gm-note p { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.3; }
.gm-num { font-weight: 800; font-size: 13px; color: var(--mid); min-width: 18px; }
.gm-note button { height: 36px; padding: 0 10px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-weight: 800; font-size: 12.5px; }
.gm-note.act button[data-noteshow] { background: var(--ink); color: var(--bg); }
.gm-note .gm-x { width: 36px; padding: 0; border-color: var(--line); font-size: 18px; }

/* ---------- Редактор карты (gm-kit.js · renderSpreadMap): стол мастера — рама, рейка инструментов, карточки мест ---------- */
body.map-wide main { max-width: 1580px; }
/* столешница редактора карты и доски связей — следует теме; --well — углубления (группы, поля ввода) */
.mapedit { --desk: #FBF6EA; --desk-2: #F2E9D3; --rim: rgba(138,101,39,.28); --rim-2: rgba(138,101,39,.55); --well: rgba(60,40,15,.06); --ins-bg: rgba(251,246,234,.97); }
[data-theme="shade"] .mapedit, .boardedit .bd-board { --desk: #1B1813; --desk-2: #14120E; --rim: rgba(201,181,138,.22); --rim-2: rgba(201,181,138,.45); --well: rgba(0,0,0,.25); --ins-bg: rgba(26,21,17,.97); }
.mapedit .mi { display: block; flex: none; }

/* шапка: название карты — заголовок, а не поле формы */
.me-head { display: flex; align-items: flex-end; gap: 18px; margin: 4px 0 20px; flex-wrap: wrap; }
.me-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); text-decoration: none; font-size: 15px; align-self: center; }
.me-back:hover { color: var(--text); border-color: var(--gold); }
.me-title { flex: 1; min-width: 240px; display: grid; gap: 2px; }
.me-name { width: 100%; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.15; letter-spacing: .02em;
  color: var(--text); background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 0 0 2px; border-radius: 0; }
.me-name:hover { border-bottom-color: var(--line); }
.me-name:focus { outline: none; border-bottom: 1px solid var(--gold); }
.me-name::placeholder { color: var(--muted); opacity: .6; }
.me-status { font-size: 14px; color: var(--muted); align-self: center; min-width: 0; }
.me-status:not(:empty) { padding: 4px 12px; border-radius: 999px; background: var(--accent-bg); }
.me-print { display: inline-flex; align-items: center; gap: 8px; align-self: center; }
#mprint[aria-disabled] { opacity: .55; }

.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }

/* стол: тёмная столешница, на ней рама с картой */
.me-desk { background: linear-gradient(180deg, var(--desk), var(--desk-2)); border: 1px solid var(--rim); border-radius: 16px;
  padding: 16px; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px var(--shadow); }
.me-stage { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }

/* рейка инструментов */
.me-rail { display: grid; gap: 10px; position: sticky; top: 96px; z-index: 6; }
.me-group { display: grid; gap: 4px; padding: 5px; border-radius: 12px; background: var(--well); border: 1px solid var(--rim); }
.me-tool { position: relative; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.me-tool:hover { color: var(--text); background: var(--accent-bg); }
.me-tool.on { color: var(--btn-fg); background: var(--gold); box-shadow: 0 0 0 1px var(--gold-2) inset, 0 4px 14px rgba(201,181,138,.25); }
.me-tool.danger:hover { color: var(--danger-fg); background: rgba(196,97,79,.14); }
.me-tool.pen i { display: block; border-radius: 50%; background: currentColor; }
.me-tool[data-tip]::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: 5;
  padding: 4px 10px; border-radius: 6px; background: #0B0A08; color: var(--paper); font-size: 13px; border: 1px solid var(--rim-2); }
.me-tool[data-tip]:hover::after, .me-tool[data-tip]:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* рама: паспарту, тонкая золотая линия, уголки */
.me-frame { position: relative; padding: 12px; justify-self: center; width: min(100%, calc((100vh - 310px) * 1.414 + 24px)); min-width: min(100%, 560px); background: #0C0B08; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--rim-2), 0 18px 40px rgba(0,0,0,.55); }
.me-frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201,181,138,.3); pointer-events: none; }
.me-corner { position: absolute; width: 22px; height: 22px; z-index: 3; pointer-events: none; border-color: var(--gold); border-style: solid; border-width: 0; }
.me-corner::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.me-corner.tl { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; } .me-corner.tl::after { left: 4px; top: 4px; }
.me-corner.tr { right: -1px; top: -1px; border-right-width: 2px; border-top-width: 2px; } .me-corner.tr::after { right: 4px; top: 4px; }
.me-corner.bl { left: -1px; bottom: -1px; border-left-width: 2px; border-bottom-width: 2px; } .me-corner.bl::after { left: 4px; bottom: 4px; }
.me-corner.br { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; } .me-corner.br::after { right: 4px; bottom: 4px; }

.map-board { position: relative; aspect-ratio: 1414 / 1000; background: #fbf8f1; touch-action: none; user-select: none; overflow: hidden; }
.map-board::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 60px rgba(40,30,15,.28), inset 0 0 160px rgba(40,30,15,.12); }
.map-board > svg, .map-board > #stk, .map-board > #flags { z-index: 2; }
.map-board[data-tool="pencil"] { cursor: crosshair; }
.map-board[data-tool="eraser"] { cursor: cell; }
.map-board[data-tool="place"] { cursor: copy; }
.map-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-board svg path { fill: none; stroke: #151310; stroke-linecap: round; stroke-linejoin: round; }
.map-board .cloth-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
#stk, #flags { position: absolute; inset: 0; }
#flags { pointer-events: none; }

/* флажки мест на онлайн-столе и ТВ (table.js, React-поле web/src/screens/table/board.tsx): бумажная бирка с номером */
.mflag { position: absolute; transform: translate(-3px, -100%); display: flex; align-items: flex-end; gap: 22px; cursor: grab; }
.mflag:active { cursor: grabbing; }
.mflag .pole { width: 3px; height: 40px; background: #1b1915; border-radius: 1px; position: relative; }
.mflag .pole::after { content: ""; position: absolute; left: 3px; top: 0; width: 22px; height: 16px; background: #1b1915; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mflag .lab { margin-bottom: 22px; padding: 3px 11px 3px 4px; background: #FBF8F1; color: #1b1915; border: 1px solid #1b1915; border-radius: 999px;
  font-size: 14px; white-space: nowrap; display: flex; gap: 7px; align-items: center; box-shadow: 0 2px 0 rgba(27,25,21,.85), 0 6px 14px rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s; }
.mflag .lab b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1b1915; color: #fbf8f1;
  font-size: 11px; font-family: var(--display); }
.mflag.is-stk { flex-direction: column; align-items: center; transform: translate(-50%, -50%); }
.mflag .pstk { width: 64px; height: auto; pointer-events: none; }
.mflag.is-stk .lab { margin: 2px 0 0; }
/* метки мест: раскладка — в map-marks.css (общая с печатью); здесь только то, что нужно редактору.
   Онлайн-стол и ТВ рисуют места своими .mflag (правила ниже, у их блоков) */
.map-board { container-type: inline-size; }
#flags .pmark { --u: calc(100cqw / 297); cursor: grab; pointer-events: auto; }
#flags .pmark:active { cursor: grabbing; }
#flags .pmark .pstk { pointer-events: none; }
#flags .pmark .mk, #flags .pmark .lab { pointer-events: auto; }
#flags .pmark .lab { box-shadow: 0 calc(.5 * var(--u)) 0 rgba(27,25,21,.85); transition: box-shadow .12s; }
#flags .pmark.hl .lab, #flags .pmark.hover .lab { box-shadow: 0 0 0 3px rgba(201,181,138,.9), 0 8px 18px rgba(0,0,0,.25); }
#flags .pmark.hl.is-stk .mk::after { content: ""; position: absolute; inset: -4px; border: 1.5px dashed #6E5222; border-radius: 4px; pointer-events: none; }
#flags .pmark.pending .lab { box-shadow: 0 0 0 3px var(--red); }
.mstk { position: absolute; height: auto; cursor: move; user-select: none; touch-action: none; }
.mstk.on { outline: 1.5px dashed #6E5222; outline-offset: 4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }

/* плавающие панели поверх карты: стикер и подсказка */
.me-float { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 2px;
  padding: 4px 6px; border-radius: 12px; background: rgba(14,13,10,.92); border: 1px solid var(--rim-2); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.me-float .me-tool { width: 34px; height: 34px; }
.me-float .me-tool[data-tip]::after { left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.me-float .me-tool[data-tip]:hover::after { transform: translate(-50%, 0); }
.me-float-lab { font-family: var(--sc); font-size: 13px; letter-spacing: .12em; color: var(--gold); padding: 0 8px 0 6px; }
.me-hint { position: absolute; left: 24px; bottom: 24px; z-index: 4; margin: 0; max-width: calc(100% - 48px); pointer-events: none;
  padding: 5px 12px; border-radius: 999px; background: rgba(14,13,10,.86); color: var(--paper); font-size: 14px; border: 1px solid var(--rim); }
.me-hint:empty { display: none; }

/* низ стола: сукно */
.me-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 14px 0 0 68px; padding: 0 4px; }
.cloth-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.cloth-ctl .mi { width: 18px; height: 18px; color: var(--gold); }
.cloth-ctl input[type=range] { -webkit-appearance: none; appearance: none; width: 130px; height: 18px; background: transparent; cursor: pointer; }
.cloth-ctl input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--line)); }
.cloth-ctl input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line); }
.cloth-ctl input[type=range]::-moz-range-progress { height: 3px; background: var(--gold); }
.cloth-ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.cloth-ctl input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold); }
.me-a4 { font-family: var(--sc); font-size: 12px; letter-spacing: .16em; color: var(--muted); opacity: .7; }

/* места: карточки, раскрыта одна */
.me-places { position: sticky; top: 96px; max-height: calc(100vh - 116px); display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, var(--desk), var(--desk-2)); border: 1px solid var(--rim); border-radius: 16px; padding: 16px 12px 14px 16px; }
.me-places-head { display: flex; align-items: center; padding-right: 4px; }
.me-count { font-family: var(--display); font-weight: 700; color: var(--gold-2); font-size: 16px; }
.me-list { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 0 4px 0 0; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.places.me-list li.pl { position: relative; display: block; border: 1px solid var(--rim); border-radius: 12px; background: rgba(255,255,255,.015); padding: 8px 8px 8px 10px;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.me-list li.pl:hover { border-color: var(--rim-2); }
.me-list li.pl.open { background: rgba(201,181,138,.06); border-color: var(--rim-2); padding-bottom: 12px; }
.me-list li.pl.pending { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,181,138,.18); }
.pl-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.me-list li.pl.open .pl-head { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
.me-list .pn { width: 28px; height: 28px; margin: 0; font-size: 15px; }
.me-list li.pl.off .pn { border-style: dashed; color: var(--muted); border-color: var(--line); }
.pl-name { min-width: 0; }
.me-list .psrc { margin: 0; font-size: 11px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-list .pl-name input { width: 100%; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent;
  font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--text); }
.me-list .pl-name input:hover { border-bottom-color: var(--line); }
.me-list .pl-name input:focus { outline: none; border-bottom-color: var(--gold); }
.pl-flag { color: var(--line); display: grid; } .pl-flag.on { color: var(--gold); } .pl-flag .mi { width: 17px; height: 17px; }
/* у свёрнутой карточки кнопки порядка всплывают поверх правого края, не отнимая места у названия */
.me-list .pa { display: flex; gap: 0; }
.me-list li.pl:not(.open) .pa { position: absolute; right: 6px; top: 6px; padding: 2px 2px 2px 18px; border-radius: 8px; opacity: 0; pointer-events: none;
  transition: opacity .15s; background: linear-gradient(90deg, transparent, var(--desk) 16px); }
.me-list li.pl:not(.open):hover .pa, .me-list li.pl:not(.open) .pa:focus-within { opacity: 1; pointer-events: auto; }
.me-list .step { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.me-list .step .mi { width: 16px; height: 16px; }
.me-list .step:hover:not(:disabled) { color: var(--text); background: var(--accent-bg); }
.me-list .step.danger:hover { color: var(--danger-fg); background: rgba(196,97,79,.14); }
.me-list .step:disabled { opacity: .25; cursor: default; }
.pl-peek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; margin: 2px 0 0 38px; max-width: calc(100% - 38px);
  padding: 0; border: 0; background: none; text-align: left; color: var(--muted); font-size: 14px; line-height: 1.4; cursor: pointer; }
.pl-peek em { opacity: .6; }
.pl-peek:hover { color: var(--text); }
.pl-body { display: none; margin: 8px 0 0 38px; gap: 10px; }
.me-list li.pl.open .pl-body { display: grid; }
.me-list .pl-body textarea { width: 100%; resize: vertical; min-height: 76px; padding: 9px 11px; font-size: 15px; line-height: 1.45;
  border: 1px solid var(--rim); border-radius: 8px; background: var(--well); color: var(--text); }
.me-list .pl-body textarea:focus { outline: none; border-color: var(--gold); }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.prow-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 13px; line-height: 1.2;
  border: 1px solid var(--rim-2); background: transparent; color: var(--text); cursor: pointer; white-space: nowrap; }
.chip .mi { width: 15px; height: 15px; color: var(--gold); }
.chip:hover { background: var(--accent-bg); border-color: var(--gold); }
.chip.on { background: var(--gold); color: var(--btn-fg); border-color: var(--gold); } .chip.on .mi { color: var(--btn-fg); }
.chip.ghost { border-color: transparent; color: var(--muted); } .chip.ghost:hover { color: var(--text); border-color: var(--rim-2); }
.chip.pick-img { flex-direction: column; justify-content: center; gap: 4px; width: 84px; height: 62px; padding: 4px; border-radius: 8px;
  border-style: dashed; white-space: normal; text-align: center; font-size: 11px; color: var(--muted); }
.chip.pick-img .mi { width: 20px; height: 20px; }
.pimg { position: relative; display: block; width: 84px; height: 62px; }
.pimg img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--rim-2); display: block; }
.pimg-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--rim-2); background: var(--desk-2); color: var(--muted); cursor: pointer; }
.pimg-x .mi { width: 12px; height: 12px; } .pimg-x:hover { color: var(--danger-fg); }
/* «Вид на карте» в раскрытой карточке места */
.pl-look { display: grid; gap: 7px; padding: 10px 10px 8px; border-radius: 10px; background: var(--well); border: 1px solid var(--rim); }
.look-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.look-line > span { font-family: var(--sc); letter-spacing: .06em; }
.look-line output { font-size: 12px; text-align: right; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.look-line input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; }
.look-line input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--line)); }
.look-line input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: var(--line); }
.look-line input[type=range]::-moz-range-progress { height: 3px; background: var(--gold); }
.look-line input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.look-line input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold); }
.seg { display: inline-flex; justify-self: start; border: 1px solid var(--rim-2); border-radius: 8px; overflow: hidden; }
.seg button { width: 32px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-right: 1px solid var(--rim);
  background: transparent; color: var(--text); cursor: pointer; font-size: 15px; }
.seg button:last-child { border-right: 0; }
.seg button .mi { width: 16px; height: 16px; }
.seg button:hover { background: var(--accent-bg); }
.seg button.on { background: var(--gold); color: var(--btn-fg); }
.look-reset { justify-self: start; margin-top: 2px; }
.me-add { display: flex; gap: 8px; flex-wrap: wrap; }
.me-addbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 10px;
  border: 1px dashed var(--rim-2); background: transparent; color: var(--gold-2); cursor: pointer; font-size: 15px; white-space: nowrap; }
.me-addbtn:hover { background: var(--accent-bg); border-style: solid; }
.me-addbtn .mi { width: 16px; height: 16px; }
.me-note { border-top: 1px solid var(--rim); padding-top: 10px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.me-note p { margin: 0; line-height: 1.4; }
.me-note .check-line { font-size: 14px; color: var(--text); }

@media (max-width: 1100px) { .map-wrap { grid-template-columns: 1fr; } .me-places { position: static; max-height: none; } .me-list { overflow: visible; } }
@media (max-width: 700px) {
  .me-desk { padding: 10px; }
  .me-stage { grid-template-columns: 1fr; }
  .me-rail { position: static; display: flex; flex-wrap: wrap; }
  .me-group { display: flex; }
  .me-tool[data-tip]::after { display: none; }
  .me-foot { margin-left: 0; }
  .me-name { font-size: 28px; }
}
@media (max-width: 900px) { .me-title { order: 3; flex-basis: 100%; } }

/* =========================================================================
   Комната в стиле «Таро»: партии — веер жетонов, герои — чёрные карты с аркой,
   расклады — светлые карточки. Терракота тюльпанов — только для опасного и «⋯».
   ========================================================================= */
.room-top { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.room-top .title { font-size: 44px; margin: 0; }
.room-top .code { color: var(--gold-2); letter-spacing: .14em; }
.room-sec { margin-top: 46px; }
.sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sec-head .note { color: var(--muted); font-size: 16px; }
.sec-head .btn { min-height: 38px; padding: 4px 18px; font-size: 16px; }
.sec-head > .btn, .sec-acts { margin-left: auto; }
.sec-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- партии: веер круглых жетонов ---------- */
.parties { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.party { position: relative; display: grid; gap: 14px; padding: 22px 22px 18px; border-radius: var(--radius-lg);
  background: var(--panel); border: 1px solid var(--line); }
.party-name { font-family: var(--display); font-size: 27px; line-height: 1.05; margin: 0; overflow-wrap: anywhere; }
.party-meta { color: var(--muted); font-size: 15px; margin-top: 2px; }
.fan { display: flex; align-items: center; min-height: 76px; padding-left: 14px; }
.fan img { width: 76px; height: 76px; border-radius: 50%; margin-left: -14px; background: var(--paper-2);
  border: 3px solid var(--panel); box-shadow: 0 4px 10px var(--shadow); object-fit: cover; }
.fan img:nth-child(odd) { transform: translateY(-4px) rotate(-3deg); }
.fan img:nth-child(even) { transform: translateY(3px) rotate(3deg); }
.fan .fan-empty { color: var(--muted); font-style: italic; margin-left: -14px; }
.party-names { color: var(--text); font-size: 16px; line-height: 1.4; }
.party .btn { justify-self: start; min-height: 38px; padding: 4px 18px; font-size: 16px; }
.party-new { display: grid; place-items: center; gap: 6px; min-height: 196px; border-radius: var(--radius-lg);
  border: 1.5px dashed var(--frame); background: transparent; color: var(--gold-2); cursor: pointer;
  font-family: var(--sc); font-size: 18px; letter-spacing: .06em; transition: background .15s; align-content: center; }
.party-new:hover { background: var(--accent-bg); }
.party-new b { font-family: var(--display); font-size: 44px; line-height: .8; font-weight: 700; }

/* ---------- герои: вертикальная карта-таро с аркой ---------- */
.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 26px; }
.hero-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 20px 20px; color: #F5EEDD; background: #18130E;
  border-radius: 140px 140px 20px 20px;
  /* двойная золотая рамка, как на картах колоды; повторяет арку */
  box-shadow: inset 0 0 0 1.5px #A8823A, inset 0 0 0 7px #18130E, inset 0 0 0 8px rgba(217,188,116,.55),
              0 16px 34px rgba(60,40,15,.24); }
.hero-card .token { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; background: #F5EEDD;
  box-shadow: 0 0 0 3px #18130E, 0 0 0 4.5px #A8823A; margin-top: 6px; }
.hero-card h3 { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; margin: 16px 0 0; overflow-wrap: anywhere; }
.hero-card .h-arch { display: block; color: #D9BC74; font-family: var(--sc); font-size: 17px; letter-spacing: .06em; margin-top: 4px; }
.hero-card .kin { color: #CDBFA5; font-size: 15px; line-height: 1.35; margin: 4px 0 0; }
.hero-card .in-parties { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.hero-card .in-parties span { font-size: 13px; padding: 1px 10px; border-radius: var(--pill); border: 1px solid rgba(217,188,116,.5); color: #E8DCC0; }
.hero-card .acts { display: flex; gap: 8px; width: 100%; margin-top: auto; padding-top: 18px; }
.hero-card .acts .btn { flex: 1; min-height: 40px; padding: 4px 12px; font-size: 15px; letter-spacing: .06em; }
.hero-card .btn.gold { background: #D9BC74; border-color: #D9BC74; color: #18130E; }
.hero-card .btn.gold:hover { background: #E8D095; border-color: #E8D095; }
.hero-card .btn.ghost { color: #F5EEDD; border-color: rgba(217,188,116,.6); }
.hero-card .btn.ghost:hover { background: rgba(217,188,116,.14); }
.hero-card .btn:disabled { opacity: .45; }
.hero-card .lock-mark { position: absolute; top: 18px; left: 50%; transform: translate(-50%, -50%); font-size: 14px;
  background: #18130E; padding: 0 8px; border-radius: var(--pill); }

/* меню «⋯» — правка, пароль, удаление */
.more { position: absolute; top: 14px; right: 14px; }
.more > summary { list-style: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #F5EEDD; border: 1px solid rgba(217,188,116,.6); font-size: 20px; line-height: 1; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover, .more[open] > summary { background: rgba(217,188,116,.16); }
.hero-card .more { top: auto; right: auto; position: relative; }
.more-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; min-width: 196px; padding: 6px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 36px rgba(24,19,14,.28); text-align: left; }
.party .more-menu { bottom: auto; top: calc(100% + 8px); }
.more-menu button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 9px 14px; border: 0; border-radius: 10px;
  background: none; color: inherit; font: inherit; font-size: 16px; cursor: pointer; text-align: left; }
.more-menu button:hover, .more-menu button:focus-visible { background: rgba(168,130,58,.13); outline: none; }
.more-menu button.danger { color: var(--terra); }
.party .more > summary { color: var(--text); border-color: var(--line); }
.party .more > summary:hover, .party .more[open] > summary { background: var(--accent-bg); }

/* ---------- расклады ---------- */
.spreads { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.spread-card { display: grid; gap: 4px; border-radius: var(--radius-lg); }
.spread-card h3 { font-family: var(--display); font-size: 24px; line-height: 1.12; color: var(--text); }
.spread-card a { text-decoration: none; }
.spread-card p { margin: 2px 0 12px; font-size: 15px; }
.spread-card .btn { min-height: 38px; padding: 4px 16px; font-size: 15px; }

/* ---------- окно партии ---------- */
.party-box { width: min(760px, 100%); padding: 26px 28px; }
.party-box .title { font-size: 30px; }
.party-box label.field { display: grid; gap: 6px; margin: 16px 0 6px; font-family: var(--sc); color: var(--muted); }
.party-box input[type=text] { padding: 11px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text); font-family: var(--display); font-size: 24px; font-weight: 700; }
.party-box input[type=text]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pick-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; margin: 10px 0 20px; }
.pick-hero { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: 18px;
  border: 1.5px solid var(--line); background: var(--bg-2); cursor: pointer; text-align: center; font-size: 15px; line-height: 1.2; }
.pick-hero input { position: absolute; opacity: 0; pointer-events: none; }
.pick-hero img { width: 78px; height: 78px; border-radius: 50%; background: var(--paper-2); object-fit: cover; }
.pick-hero:has(input:checked) { border-color: var(--btn-bg); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--btn-bg); }
.pick-hero:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); font-size: 14px; }
.pick-hero:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.pick-count { color: var(--muted); font-size: 15px; }

@media (max-width: 640px) {
  .room-top .title { font-size: 34px; }
  .heroes { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hero-card { padding: 20px 12px 14px; border-radius: 96px 96px 16px 16px; }
  .hero-card .token { width: 118px; height: 118px; }
  .hero-card h3 { font-size: 23px; }
  .hero-card .acts { flex-wrap: wrap; }
  .hero-card .acts .btn.gold { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fan img { transform: none !important; } }

/* вкладки ширмы — те же «пилюли», что и в шапке */
.gm-tabs a:not(.help-q) { border-radius: var(--pill); border-bottom: 0; margin-bottom: 6px; }
.gm-tabs a.on:not(.help-q) { background: var(--accent-bg); }
.gm-tabs a.help-q { padding: 0; margin-bottom: 0; color: var(--btn-fg); font-family: var(--serif); letter-spacing: 0; font-size: 17px; }


/* =========================================================================
   Ширма: страница расклада — шапка с режимами, разделы, «На стол»
   ========================================================================= */
.more-menu a { display: flex; padding: 9px 14px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 16px; }
.more-menu a:hover, .more-menu a:focus-visible { background: rgba(168,130,58,.13); outline: none; }
.more.drop .more-menu { bottom: auto; top: calc(100% + 8px); min-width: 260px; }
.more.drop { position: relative; top: auto; right: auto; }
.more.drop[open] { z-index: 9; }               /* меню поверх липкой навигации .sp-nav (z 6) */
.more.drop > summary.btn { width: auto; height: auto; border-radius: var(--pill); font-size: 16px; min-height: 40px; padding: 4px 18px; }
.more.drop > summary { color: var(--text); border-color: var(--line); }

.sp-head { display: grid; gap: 6px; margin-bottom: 14px; }
.sp-back { color: var(--muted); text-decoration: none; font-size: 16px; justify-self: start; }
.sp-back:hover { color: var(--text); }
.sp-titlebar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sp-title { font-size: 38px; margin: 0; flex: 1 1 420px; min-width: 0; }
.mode-switch { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg-2); }
.mode-switch a { padding: 8px 20px; border-radius: var(--pill); text-decoration: none; color: var(--muted); font-size: 17px; white-space: nowrap; }
.mode-switch a:hover { color: var(--text); }
.mode-switch a.on { background: var(--btn-bg); color: var(--btn-fg); }
.sp-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.sp-acts .btn { min-height: 40px; padding: 4px 18px; font-size: 16px; }

.sp-nav { position: sticky; top: 74px; z-index: 6; display: flex; gap: 4px; overflow-x: auto; margin: 0 -8px 18px; padding: 8px;
  background: var(--header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.sp-nav::-webkit-scrollbar { display: none; }
.sp-nav button { flex: none; border: 0; background: none; color: var(--muted); padding: 6px 14px; border-radius: var(--pill); cursor: pointer; font-size: 16px; }
.sp-nav button:hover { color: var(--text); background: var(--accent-bg); }
#sp-cards, .kit-head, #sec-conflict { scroll-margin-top: 140px; }

.felt-banner p { font-size: 18px; }
.kit-head { margin-top: 48px; }
.foes-block > .kit-head:first-child { margin-top: 40px; }
.cf.panel { margin-top: 48px; }

.stat-line { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; }
.stat-line small { color: var(--muted); font-size: 13px; }
.stat-line b { font-weight: 700; }
.npc-foe-line { display: grid; gap: 4px; font-size: 15px; padding-top: 8px; border-top: 1px solid var(--line); }
.npc-side { font-style: italic; font-size: 15px; color: var(--muted); }
.npc-side.side-villain, .npc-side.side-enemy, .npc-side.side-traitor { color: var(--terra); }
.npc-side.side-ally, .npc-side.side-mentor, .npc-side.side-client { color: var(--gold-2); }
.foe-mini .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.foe-mini .chip.free { color: var(--gold-2); }

/* режим «На стол» */
.play-felt { border-radius: var(--radius-lg); background-color: var(--felt-c); background-image: var(--felt-img, none); background-size: 420px 420px; background-blend-mode: multiply; padding: 34px 28px;
  display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 1.5px var(--frame), inset 0 0 60px rgba(0,0,0,.45); }
.play-felt p { margin: 0; max-width: 62ch; color: #F5EEDD; font-style: italic; font-size: 19px;
  text-shadow: 0 0 3px #161616, 0 0 3px #161616, 0 0 10px #161616; }
.party-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.party-opt { position: relative; display: grid; gap: 6px; padding: 20px 20px 16px; border-radius: var(--radius-lg); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--panel); transition: border-color .15s, background .15s; }
.party-opt:hover { border-color: var(--frame); }
.party-opt input { position: absolute; opacity: 0; pointer-events: none; }
.party-opt:has(input:checked) { border-color: var(--gold-hi); background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--gold-hi); }
.party-opt:has(input:checked)::after { content: "Играет"; position: absolute; top: 16px; right: 16px; padding: 1px 12px; border-radius: var(--pill);
  background: var(--btn-bg); color: var(--btn-fg); font-size: 14px; }
html[lang="en"] .party-opt:has(input:checked)::after { content: "Playing"; }
.party-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.party-opt .fan img { border-color: var(--panel); }
.party-opts .party-new { min-height: 150px; text-decoration: none; }
.play-warn { color: var(--terra); margin: 12px 0 0; }
.play-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.play-way { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--panel); }
.play-way h3 { font-family: var(--display); font-size: 26px; line-height: 1.1; }
.play-way p { margin: 0; color: var(--muted); }
.play-way .row { margin-top: 6px; }
.play-way .small { font-size: 15px; }

@media (max-width: 640px) {
  .sp-title { font-size: 28px; }
  .sp-nav { top: 0; }
}
.party-opt .party-name { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; padding-right: 80px; }
.party-opt .fan { flex-wrap: wrap; min-height: 60px; row-gap: 6px; }
.party-opt .fan img { width: 58px; height: 58px; margin-left: -12px; }

/* ---------- случайные встречи ---------- */
.enc-type { display: inline-block; font-size: 13px; padding: 0 10px; border-radius: var(--pill); background: var(--accent-bg); color: var(--text); white-space: nowrap; }
.enc-type.enc-fight, .enc-type.enc-danger { background: rgba(164,70,47,.16); color: var(--danger-fg); }
.enc-type.enc-find { color: var(--gold-2); }
.enc-type.enc-omen { font-style: italic; }
.enc-n { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--gold-2); min-width: 1.6em; text-align: center; }
.enc-card { display: grid; gap: 6px; }
.enc-card-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.enc-card h3 { font-family: var(--display); font-size: 23px; line-height: 1.1; }
.enc-card p { margin: 0; font-size: 16px; }
.enc-label { font-style: italic; color: var(--gold-2); margin-right: 4px; }
.enc-roll { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.enc-result:not(:empty) { margin-bottom: 16px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1.5px solid var(--gold-hi); background: var(--accent-bg); }
.enc-table { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 22px; }
.enc-table li { border-bottom: 1px solid var(--line); }
.enc-table a { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; align-items: baseline; gap: 0 10px;
  padding: 9px 8px; color: var(--text); text-decoration: none; border-radius: 12px; }
.enc-table a:hover { background: var(--accent-bg); }
.enc-table .enc-n { grid-row: span 2; font-size: 19px; }
.enc-table .enc-name { font-weight: 700; }
.enc-table .enc-type { justify-self: start; }
.enc-table .enc-setup { grid-column: 2 / -1; color: var(--muted); font-size: 15px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.enc-table li.on a { background: var(--accent-bg); box-shadow: inset 0 0 0 1.5px var(--gold-hi); }
.enc-empty { display: grid; justify-items: start; gap: 10px; max-width: 70ch; }
.enc-pick { width: min(820px, 100%); }
.enc-pick-list { display: grid; gap: 6px; margin: 14px 0 18px; max-height: 56vh; overflow: auto; }
.enc-pick-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.enc-pick-item:has(input:checked:not(:disabled)) { border-color: var(--gold-hi); background: var(--accent-bg); }
.enc-pick-item.taken { opacity: .5; cursor: default; }
.enc-pick-item input { margin-top: 6px; accent-color: var(--gold); }
.enc-pick-item small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
@media (max-width: 640px) { .enc-table { grid-template-columns: 1fr; } }

/* китайский интерфейс (html lang="zh-CN"): без разрядки и капители, без поддельного курсива у иероглифов.
   Коды комнат — латиница, им разрядка остаётся. */
:root:lang(zh) { --sc: "Alegreya", Georgia, var(--cjk-serif), serif; }
body:lang(zh), body :lang(zh) { letter-spacing: normal !important; font-variant: normal; font-synthesis: weight; }
body:lang(zh) { line-height: 1.6; }
body :lang(zh):is(.code) { letter-spacing: .16em !important; }
body :lang(zh):is(.room-badge b) { letter-spacing: .18em !important; }
body :lang(zh):is(.room-code-big) { letter-spacing: .22em !important; }
body :lang(zh):is(.landing-card .code-input) { letter-spacing: .35em !important; }
body :lang(zh):is(.tb-code) { letter-spacing: .14em !important; }
body :lang(zh) :is(.btn, .lang-pill, .nav a, .gm-tabs a) { word-break: keep-all; }

/* =========================================================================
   Онлайн-стол v2: поле во всю высоту, справа — вкладки (герой/выбранное, броски, расклад, рука/карточки),
   шапка в одну строку, последний бросок — плашкой на поле. Вне боя — «Свет», в бою — «Тень».
   ========================================================================= */
.tb-lbl { font: italic 400 14px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--muted); }
.tb-head { flex-wrap: nowrap; gap: 12px; padding: 10px 16px; min-height: 66px; }
.tb-back { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: 18px; }
.tb-back:hover { background: var(--accent-bg); }
.tb-title { gap: 2px; min-width: 0; flex: 0 1 auto; }
.tb-name { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-mode { font-style: italic; font-size: 14px; color: var(--muted); white-space: nowrap; }
.tb-mode.battle { color: var(--terra); }
.tb-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg-2); flex: none; }
.tb-seg > button, .tb-segsel select { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--pill); background: transparent;
  color: var(--muted); font: 400 15px var(--serif); cursor: pointer; white-space: nowrap; }
.tb-seg > button:hover { color: var(--text); }
.tb-seg > button.on, .tb-segsel.on select { background: var(--btn-bg); color: var(--btn-fg); }
.tb-segsel select { appearance: none; -webkit-appearance: none; padding-right: 28px; max-width: 180px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.tb-turn { display: inline-flex; grid-template-columns: none; border-radius: var(--pill); overflow: visible; }
.tb-turn button { min-height: 38px; font-weight: 700; }
.tb-turnpill { border-radius: var(--pill); white-space: nowrap; }
.tb-last { border-radius: var(--pill); min-height: 44px; padding: 3px 12px 3px 4px; gap: 8px; flex: none; }
.tb-last:has(> .muted) { padding: 3px 14px; }
.tb-last img { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--gold-hi); }
.tb-last span { display: flex; flex-direction: column; line-height: 1.05; }
.tb-last small { font-size: 12px; color: var(--muted); font-style: italic; }
.tb-last b { font-size: 15px; white-space: nowrap; }
.tb-omens { flex: none; gap: 4px; padding: 3px 4px 3px 14px; border-radius: var(--pill); border: 1px solid var(--line); }
.tb-omens > span { font-size: 14px; color: var(--muted); margin-right: 4px; }
.tb-omens button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent-bg); color: var(--text); font-size: 18px; cursor: pointer; }
.tb-omens button:hover { background: var(--btn-bg); color: var(--btn-fg); }
.tb-omens b { font-size: 24px; min-width: 26px; }
.tb-menu { flex: none; }
.tb-menu > summary { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; list-style: none;
  border: 1px solid var(--line); color: var(--text); font-size: 20px; }
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu[open] > summary, .tb-menu > summary:hover { background: var(--accent-bg); }
.tb-menu .more-menu { right: 0; left: auto; min-width: 250px; z-index: 30; }

/* поле */
.tb-left { width: 280px; }
.tb-right { width: 372px; overflow: hidden; }
.tb-stage { padding: 16px; background:
  radial-gradient(ellipse at center, transparent 55%, rgba(60,40,15,.08) 100%), var(--bg); }
[data-theme="shade"] .tb-stage { background: radial-gradient(ellipse at center, #241e16 0%, var(--bg) 75%); }
.tb-board { border: 0; border-radius: 16px; box-shadow: 0 0 0 1.5px var(--frame), 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 22px 44px rgba(40,25,8,.22); }
[data-theme="shade"] .tb-board { box-shadow: 0 0 0 1.5px var(--frame), 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 22px 50px rgba(0,0,0,.6); }
.tb-board[data-scene="map"] .tb-tok { width: max(38px, calc(var(--u) * 5)); height: max(38px, calc(var(--u) * 5)); }
.tb-tok { width: max(40px, calc(var(--u) * 5)); height: max(40px, calc(var(--u) * 5)); }
.tb-tok.s-foe { width: max(36px, calc(var(--u) * 4.6)); height: max(36px, calc(var(--u) * 4.6)); }
.tb-tok.s-big { width: max(52px, calc(var(--u) * 6.6)); height: max(52px, calc(var(--u) * 6.6)); }
.tb-tok.s-npc { width: max(34px, calc(var(--u) * 4.2)); height: max(34px, calc(var(--u) * 4.2)); }
.tb-face { box-shadow: 0 0 0 2px #fbf8f1, 0 4px 10px rgba(0,0,0,.45); filter: none; }
.tb-tok.me .tb-face { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 0 7px rgba(217,188,116,.35), 0 4px 10px rgba(0,0,0,.45); }
.tb-tok.last .tb-face { box-shadow: 0 0 0 3px #fbf8f1, 0 0 0 6px var(--gold), 0 4px 10px rgba(0,0,0,.45); }
.tb-tok.sel { outline: 2px dashed var(--gold-hi); outline-offset: 5px; }
.tb-tag { top: calc(100% + 5px); font: 600 12px/1 var(--serif); padding: 4px 9px; border-radius: var(--pill);
  background: rgba(251,246,234,.96); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
[data-theme="shade"] .tb-tag { background: rgba(24,19,14,.92); box-shadow: 0 0 0 1px rgba(201,169,97,.5); }
.tb-tag.hl { background: var(--btn-bg); color: var(--btn-fg); }
.tb-flag .lab { border-radius: var(--pill); }
.tb-empty { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* последний бросок на поле */
.tb-lastroll { position: absolute; left: 28px; bottom: 28px; z-index: 8; width: min(330px, calc(100% - 56px)); display: grid; gap: 6px;
  padding: 10px; border-radius: 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 14px 34px rgba(0,0,0,.3); }
.tb-lastroll[hidden] { display: none; }
.tb-lastroll .tb-entry { background: transparent; padding: 2px 4px; }
.tb-lr-acts { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }

/* правая панель: вкладки */
.tb-shownsec { padding: 12px 14px 0; }
.tb-shownsec[hidden] { display: none; }
.tb-shownsec .tb-sec-h { margin-bottom: 6px; }
.tb-showcard { border-radius: 16px; padding: 14px; box-shadow: 0 0 0 1px var(--gold-hi) inset; }
.tb-showcard img { border-radius: 10px; }
.tb-tabs { flex: none; display: flex; gap: 2px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tb-tabs::-webkit-scrollbar { display: none; }
.tb-tab { flex: 1 0 auto; display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px;
  border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: 400 15px var(--serif); cursor: pointer; margin-bottom: -1px; }
.tb-tab span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-tab:hover { color: var(--text); }
.tb-tab.on { color: var(--text); border-bottom-color: var(--gold-hi); font-weight: 700; }
.tb-tab i { font-style: normal; font-size: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); display: grid; place-items: center;
  background: var(--terra); color: #fff; font-weight: 700; }
.tb-tab i.quiet { background: var(--accent-bg); color: var(--text); }
.tb-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tb-pane[hidden] { display: none; }
.tb-panehint { margin: 0; color: var(--muted); font-size: 15px; font-style: italic; list-style: none; }

/* вкладка «герой / выбранное»: всё в одну колонку */
.tb-dock { border: 0; padding: 0; max-height: none; overflow: visible; background: none; gap: 14px; }
.tb-dockrow { flex-direction: column; gap: 16px; align-items: stretch; }
.tb-hint p { margin: 0; font-size: 16px; }
.tb-howto { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; display: grid; gap: 6px; }
.tb-desel { align-self: flex-start; border: 0; background: none; color: var(--muted); font: 400 14px var(--serif); padding: 0; cursor: pointer; }
.tb-desel:hover { color: var(--text); }
.tb-hero { min-width: 0; gap: 14px; }
.tb-hav { width: 84px; height: 84px; box-shadow: 0 0 0 2px var(--frame); }
.tb-hname { font-size: 26px; }
.tb-stat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 0; }
.tb-stat4.two { grid-template-columns: repeat(2, auto); justify-content: start; gap: 6px 16px; }
.tb-stat4 div { display: grid; gap: 1px; }
.tb-stat4 dt { font-size: 12px; color: var(--muted); font-style: italic; }
.tb-stat4 dd { margin: 0; font: 700 19px/1.1 var(--display); }
.tb-tracks { gap: 10px; padding: 14px; border-radius: 16px; background: var(--accent-bg); }
.tb-trk .tb-lbl { width: 108px; flex: none; }
.tb-trk { flex-wrap: wrap; }
.tb-pip { width: 24px; height: 24px; }
.tb-roll { min-width: 0; gap: 10px; }
.tb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tb-stats .tb-chip.big { justify-content: space-between; border-radius: 12px; }
.tb-rollrow .tb-chip { border-radius: var(--pill); }
.tb-rollbtn { margin-left: 0; width: 100%; min-height: 50px; }
.tb-roll > .tb-rollrow:last-of-type { flex-direction: row; }
.tb-dinfo { min-width: 0; max-width: none; }
.tb-dacts { margin-left: 0; justify-content: flex-start; max-width: none; }
.tb-attack { width: 100%; }
.tb-attack .tb-select { flex: 1; }
.tb-attack select { width: 100%; max-width: none; }
.tb-pickhero { gap: 12px; }
.tb-picks { flex-direction: column; align-items: stretch; }
.tb-pickbtn { border-radius: 18px; }
.tb-change { margin-top: 4px; }

/* лог */
.tb-log { overflow: visible; gap: 10px; }
.tb-entry { border-radius: 14px; padding: 10px 12px; }
.tb-entry.o-light { box-shadow: inset 3px 0 0 var(--gold-hi); }
.tb-entry.o-dark { box-shadow: inset 3px 0 0 var(--terra); }
.tb-entry.o-double { box-shadow: inset 3px 0 0 var(--gold-hi), 0 0 0 1px var(--gold-hi); }
.tb-d { border-radius: 8px; }
.tb-gmroll { padding: 12px; border-radius: 16px; background: var(--accent-bg); }
.tb-gmroll input:not([type=checkbox]) { border-radius: 10px; background: var(--bg-2); }

/* мастер: слева */
.tb-left .tb-sec { gap: 4px; }
.tb-left .tb-sec-h { margin-bottom: 2px; }
.tb-item { border-radius: 12px; gap: 2px; }
.tb-itemname { padding: 4px 6px; gap: 10px; }
.tb-itemname .tb-iname { display: flex; flex-direction: column; white-space: normal; line-height: 1.15; overflow: visible; }
.tb-itemname .tb-iname small { font-size: 13px; }
.tb-lav, .tb-itemname .token.tb-ltok, .tb-lnpc { width: 34px; height: 34px; }
.tb-lnpc { border-radius: 10px; }
.tb-eye { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.tb-eye:hover { background: var(--accent-bg); }
.tb-eye.on { color: var(--gold-2); }
.tb-grouph { flex-wrap: wrap; gap: 6px; padding: 6px 4px 2px; }
.tb-grouph > span:first-child { flex: 1 1 100%; }
.tb-groupacts { display: flex; gap: 4px; }

@media (max-width: 1100px) {
  .tb-head { flex-wrap: wrap; }
  .tb-right { width: auto; overflow: visible; }
  .tb-pane { overflow: visible; }
  .tb-stage { padding: 8px; }
  .tb-lastroll { left: 14px; bottom: 14px; }
}
@media (max-width: 640px) {
  .tb-head { gap: 8px; }
  .tb-name { font-size: 19px; }
  .tb-last small { display: none; }
  .tb-omens > span { display: none; }
  .tb-board { border-radius: 10px; }
  .tb-lastroll { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; }
}
.tb-itemname > .tb-lnpc, .tb-itemname > .token, .tb-itemname > .tb-lav { flex: none; }
.tb-itemname > .tb-iname { flex: 1; min-width: 0; }
.tb-lastroll { left: auto; right: 28px; top: 28px; bottom: auto; width: min(300px, calc(100% - 56px)); }
.tb-tab { flex: 1 1 auto; min-width: 0; padding: 0 10px; }
.tb-tab span { max-width: 110px; }
.tb-trk { gap: 4px; flex-wrap: nowrap; }
.tb-trk .tb-lbl { width: 96px; }
.tb-pip { width: 22px; height: 22px; }
.tb-trk:has(.tb-pip:nth-of-type(9)) { flex-wrap: wrap; }
@media (max-width: 1100px) { .tb-lastroll { right: 14px; top: 14px; } }
@media (max-width: 640px) { .tb-lastroll { position: absolute; left: auto; right: 8px; top: 8px; bottom: auto; width: min(260px, calc(100% - 16px)); }
  .tb-lastroll .tb-eh b { font-size: 14px; } }
@media (max-width: 640px) { .tb-lastroll { display: none !important; } }   /* на телефоне броски — во вкладке прямо под полем, со счётчиком */

/* ---------- заготовки карты локации ---------- */
.mp-box { width: min(1080px, 100%); max-height: 90vh; padding: 26px 28px; }
.mp-opts { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 6px; }
.mp-sec { margin-top: 18px; }
.mp-sec h3 { display: inline; font-family: var(--display); font-size: 22px; }
.mp-sec > summary { cursor: pointer; margin-bottom: 10px; }
.mp-sub { margin-top: 12px; }
.mp-sub > b { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 18px; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 10px; }
.mp-card { display: grid; gap: 8px; }
.mp-pick { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 8px 20px var(--shadow); transition: box-shadow .15s, transform .15s; }
.mp-pick:hover, .mp-pick:focus-visible { box-shadow: 0 0 0 2px var(--gold-hi), 0 12px 26px var(--shadow); transform: translateY(-2px); outline: none; }
.mp-thumb { display: block; width: 100%; height: auto; }
.mp-txt { display: grid; gap: 2px; }
.mp-txt b { font-size: 17px; }
.mp-txt span { color: var(--muted); font-size: 15px; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .mp-pick { transition: none; } .mp-pick:hover { transform: none; } }

/* ---------- фон карты локации и боевая карта места ---------- */
.me-bg button { width: auto; height: auto; padding: 6px 12px; font-size: 13px; }
.map-board > #gridl, .map-board > .bgrid { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#gridl svg, .bgrid { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-bgfill { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tb-gridsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bt-panel { gap: 18px; overflow-y: auto; }
.bt-sec { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.bt-sec .look-line { grid-template-columns: 110px minmax(0, 1fr) 44px; }
.bt-seg { display: flex; width: 100%; }
.bt-seg button { flex: 1; width: auto; height: auto; padding: 7px 6px; font-size: 13px; }
.bt-seg.small button { font-size: 12px; padding: 5px 6px; }
.bt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bt-row:empty { display: none; }
.bt-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.bt-places { display: flex; flex-direction: column; gap: 4px; }
.bt-place { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; }
.bt-place:hover { background: rgba(255,255,255,.04); color: var(--text); }
.bt-place.has { color: var(--text); }
.bt-place.has .mi { color: var(--gold); }
.bt-place .mi { width: 16px; height: 16px; flex: none; }
.chip.pick-img.on { border-color: var(--gold); color: var(--gold-2); }

/* ---------- онлайн-стол: настоящий стол под сукном, вокруг — полупрозрачные панели ---------- */
.tb { --felt: #2c4535; --felt-2: #1b2d22; --wood: #6b4528; --wood-2: #3e2614; --glass: rgba(251,246,234,.8); --glass-line: rgba(217,201,163,.75);
  background: radial-gradient(ellipse at 50% 30%, #3a3228 0%, #1c1712 70%); }
[data-theme="shade"] .tb { --felt: #1f3427; --felt-2: #0f1c14; --wood: #4a2e1a; --wood-2: #22140a; --glass: rgba(24,19,14,.74); --glass-line: rgba(201,169,97,.35);
  background: radial-gradient(ellipse at 50% 30%, #241c15 0%, #0d0a07 70%); }
.tb-head { background: var(--glass); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--glass-line); position: relative; z-index: 4; }
/* столешница: деревянный борт и сукно, панели лежат поверх неё */
.tb-body { margin: 12px 14px 14px; padding: 12px; gap: 12px; border: 14px solid transparent; border-radius: 30px; min-height: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.10), transparent 62%) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E") padding-box,
    radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-2) 100%) padding-box,
    repeating-linear-gradient(100deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,255,255,.05) 9px 10px, transparent 10px 17px) border-box,
    linear-gradient(160deg, var(--wood) 0%, var(--wood-2) 55%, var(--wood) 100%) border-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,220,160,.18), inset 0 10px 40px rgba(0,0,0,.45); }
.tb-left, .tb-right { background: var(--glass); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--glass-line); border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.3); }
.tb-left .tb-sec, .tb-tabs { border-color: var(--glass-line); }
.tb-stage, [data-theme="shade"] .tb-stage { background: transparent; padding: 18px; }
/* карта лежит на сукне листом: без рамки-паспарту, с тенью */
.tb-board, [data-theme="shade"] .tb-board { border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.45), 0 3px 0 -1px rgba(255,255,255,.06), 0 22px 46px rgba(0,0,0,.55); }
.tb-lastroll { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tb-head .tb-seg, .tb-head .tb-omens, .tb-head .tb-last, .tb-head .tb-back, .tb-head .tb-menu > summary { background: transparent; }

/* бой / вне боя: тема не меняется — бой виден по плашке «⚔ Бой» в шапке, терракотовой черте под шапкой
   и красному сукну («Авто»; своё сукно игрок выбирает сам) */
.tb.is-fight .tb-head { box-shadow: inset 0 -3px 0 var(--terra); }
.fight-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--pill); background: var(--terra); color: #fff;
  font: 600 13px/1.5 var(--sc); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.tb-fight > button.on { background: var(--btn-bg); color: var(--btn-fg); }
.tb-fight > button[data-fight="1"].on { background: var(--terra); color: #fff; }

/* жетон партии: лица героев стопкой */
.tb-tok.s-party, .tb-board[data-scene="map"] .tb-tok.s-party { width: max(54px, calc(var(--u) * 6.4)); height: max(54px, calc(var(--u) * 6.4)); }
.tb-party { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fbf6ea 0 58%, #18130e 59% 64%, #c9a961 65% 72%, transparent 73%); box-shadow: 0 4px 10px rgba(0,0,0,.45); }
.tb-party img { position: absolute; width: 46%; height: 46%; border-radius: 50%; box-shadow: 0 0 0 2px #fbf6ea; top: 27%; left: calc(14% + var(--i) * 12%); }
.tb-party img:nth-child(n+3) { top: 34%; }
.tb-party i { position: absolute; right: 2%; bottom: 2%; font: 700 11px var(--serif); font-style: normal; background: #18130e; color: #fbf6ea;
  border-radius: var(--pill); padding: 1px 5px; }
.tb-tok.k-party.me .tb-party { box-shadow: 0 0 0 3px var(--gold-hi), 0 4px 10px rgba(0,0,0,.45); }
.tb-members { display: grid; gap: 6px; margin: 8px 0; }
.tb-member { display: flex; align-items: center; gap: 8px; }
.tb-member img { width: 30px; height: 30px; border-radius: 50%; }
.tb-member span { flex: 1; min-width: 0; }
.tb-member.off { opacity: .75; }

/* лоток бросков */
.tb-tray { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--glass-line); }
.tb-who { display: flex; align-items: center; gap: 8px; }
.tb-who select { flex: 1; max-width: none; }
.tb-ld { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.tb-ld b { display: block; font-size: 16px; }
.tb-ld small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.25; }
.tb-ld.on { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi); }
.tb-ldd { display: flex; gap: 2px; flex: none; }
.tb-ldd .tb-die { width: 30px; height: 30px; }
.tb-ld:not(.on) .tb-ldd { opacity: .45; filter: grayscale(1); }
.tb-tick { margin-left: auto; width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--line); display: grid; place-items: center;
  font-style: normal; font-weight: 700; flex: none; }
.tb-ld.on .tb-tick { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.tb-dice { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tb-dbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.tb-dbtn:hover { background: var(--bg-2); border-color: var(--line); }
.tb-dbtn.on { background: var(--bg-2); border-color: var(--gold-hi); }
.tb-dbtn .tb-die { width: 34px; height: 34px; transition: transform .12s; }
.tb-dbtn:active .tb-die { transform: rotate(-14deg) scale(.92); }
.tb-dbtn small { font-size: 11.5px; color: var(--muted); }
.tb-dbtn > i { position: absolute; top: -3px; right: -1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--pill);
  background: var(--terra); color: #fff; font: 700 11.5px/19px var(--serif); font-style: normal; }
.tb-dminus { position: absolute; top: -3px; left: -1px; width: 19px; height: 19px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg);
  font: 700 13px/19px var(--serif); text-align: center; }
.tb-mod { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.tb-mod b { min-width: 30px; text-align: center; font: 700 17px var(--display); }
.tb-aim select { min-width: 150px; }
.tb-dmg, .tb-trlabel { min-height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); padding: 0 10px;
  font: 400 14px var(--serif); width: 110px; }
.tb-trlabel { flex: 1; width: auto; }
.tb-aimhint { margin: -2px 0 0; }
.tb-trfoot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-trsum { flex: 1 1 100%; font-size: 14px; color: var(--muted); }
.tb-trfoot .tb-rollbtn { flex: 1; }
.tb-trfoot .tb-x { order: 2; }

/* кубики картинкой */
.tb-die { width: 26px; height: 26px; flex: none; vertical-align: middle; }
.tb-die path { fill: var(--paper); stroke: #18130e; stroke-width: 1.3; stroke-linejoin: round; }
.tb-die text { font: 700 8.5px var(--serif); fill: #18130e; }
.tb-die.d100 text, .tb-die.d20 text { font-size: 7.5px; }
.tb-die.light path { fill: #fbf6ea; stroke: #a8823a; }
.tb-die.dark path { fill: #18130e; stroke: #c9a961; }
.tb-die.dark text { fill: #f5eedd; }
.tb-eb { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tb-eb .tb-die { width: 30px; height: 30px; }
.tb-adv { display: inline-flex; align-items: center; gap: 1px; font-weight: 700; }
.tb-adv.down { color: var(--danger-fg); }
.tb-total { margin-left: 4px; font: 700 20px var(--display); }
.tb-loss { color: var(--danger-fg); }

/* ---------- сукно стола: цвет и рисунок — общая настройка «Оформление» (ls_felt, ls_felt_pattern) ---------- */
[data-theme] .tb, body .tb { --felt: color-mix(in srgb, var(--felt-c) 88%, #fff); --felt-2: color-mix(in srgb, var(--felt-c) 62%, #000); }
.tb-body { position: relative; isolation: isolate; }
.tb-body.has-terrain::before { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 0;
  background: var(--felt-img, none) center / 560px auto repeat; mix-blend-mode: soft-light; opacity: .6; }
.tb-body > * { position: relative; z-index: 1; }
.tb-feltpick { display: grid; gap: 8px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tb-menu .more-menu { min-width: 300px; }

/* ---------- запросы мастеру ---------- */
.deck-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.deck-tabs button { padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--pill); background: transparent; color: var(--muted); cursor: pointer; font: inherit; }
.deck-tabs button.on { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.ask-tools { margin-top: 12px; gap: 14px; }
.ask-tools .toc-search { max-width: 240px; }
.ask-card .picker { max-height: 46vh; overflow: auto; padding: 4px; }
.ask-field { display: grid; gap: 6px; margin-top: 14px; color: var(--muted); }
.ask-field textarea, .ask-field input { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: inherit; }
.req-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--terra); color: #fff; font: 600 12px/1 var(--serif); letter-spacing: 0; vertical-align: 2px; }
.req-badge[hidden] { display: none; }
.req-list { display: grid; gap: 12px; margin-top: 14px; }
.req { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.req-art .art-face img { width: 96px; height: auto; display: block; }
.req-art .blank-card { display: grid; place-items: center; width: 96px; aspect-ratio: 2 / 3; border: 1px solid var(--line); border-radius: 8px; padding: 6px; text-align: center; font-size: 13px; }
.req-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.req-head b { font-size: 18px; }
.req-st { margin-left: auto; font-size: 14px; color: var(--muted); }
.req-st.new { color: var(--terra); font-weight: 600; }
.req-st.added { color: var(--gold-2); }
.req.added, .req.rejected { opacity: .7; }
.req-comment { margin: 8px 0 0; white-space: pre-wrap; }
.req-acts { margin-top: 10px; gap: 10px; align-items: center; }
@media (max-width: 560px) { .req { grid-template-columns: 64px 1fr; gap: 12px; } .req-art .art-face img, .req-art .blank-card { width: 64px; } .req-st { margin-left: 0; } }
/* вкладки ширмы: с «Запросами» и значком им тесно — не ломаем слова, а переносим ряд целиком */
.gm-tabs { flex-wrap: wrap; align-items: center; }
.gm-tabs a, .gm-tabs .link { white-space: nowrap; }


/* ---------- доска связей расклада (board.js) ---------- */
.boardedit .mode-switch button { padding: 8px 18px; border-radius: var(--pill); border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; white-space: nowrap; }
.boardedit .mode-switch button.on { background: var(--btn-bg); color: var(--btn-fg); }
.bd-layout { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; height: calc(100vh - 250px); min-height: 520px; }
.bd-layout.rail-off { grid-template-columns: minmax(0, 1fr); }
.bd-layout.rail-off .bd-rail { display: none; }
.bd-rail, .bd-ins { background: var(--desk-2); border: 1px solid var(--rim); border-radius: var(--radius); padding: 14px; overflow: auto; }
.bd-rail-h { font-family: var(--sc); font-size: 13px; letter-spacing: .12em; color: var(--muted); margin: 14px 0 8px; }
.bd-rail-h:first-child { margin-top: 0; }
.bd-sec { border-bottom: 1px solid var(--rim); padding: 2px 0 8px; }
.bd-sec:last-child { border-bottom: 0; }
.bd-sec > summary.bd-rail-h { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; user-select: none; }
.bd-sec > summary::-webkit-details-marker { display: none; }
.bd-sec > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; }
.bd-sec[open] > summary::before { transform: rotate(45deg) translate(-2px, -1px); }
.bd-sec > summary:hover { color: var(--gold-2); }
.bd-n { margin-left: auto; font: 500 12px/1 var(--serif); letter-spacing: 0; color: var(--muted); background: rgba(217,188,116,.1); border-radius: 999px; padding: 3px 8px; }
.bd-sec-in { display: grid; gap: 6px; }
.bd-party select { width: 100%; }
.bd-node.bd-hero { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--text); }
.bd-hero-tok { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--paper); box-shadow: 0 0 0 2px var(--paper), 0 6px 12px rgba(0,0,0,.6); }
.bd-hero-tok img { width: 100%; height: 100%; object-fit: cover; }
.bd-hero b { font: 700 13px/1.05 var(--display); text-align: center; }
.bd-hero-ins { display: flex; gap: 12px; align-items: center; }
.bd-hero-ins img { width: 72px; height: 72px; border-radius: 50%; flex: none; }
.bd-node.bd-encounter { width: 160px; min-height: 80px; padding: 12px 11px 10px; border-radius: 4px; background: #E6D8B8; border-left: 5px solid var(--gold); box-shadow: 0 6px 12px rgba(0,0,0,.5); transform: rotate(1deg); }
.bd-encounter > b, .bd-squad > b { display: block; font: 700 15px/1.1 var(--display); margin-bottom: 4px; }
.bd-encounter .bd-text { display: block; font-size: 12px; line-height: 1.3; color: #4b4237; }
.bd-node.bd-squad { width: 170px; padding: 12px 11px 10px; border-radius: 6px; background: #2A1712; border: 1px solid var(--terra); color: var(--paper); box-shadow: 0 8px 16px rgba(0,0,0,.6); }
.bd-squad .bd-kind { color: #EBA48F; }
.bd-ins .enc-type { align-self: flex-start; }
.bd-sq-who { display: flex; flex-wrap: wrap; gap: 4px; }
.bd-sq-who > span { display: inline-flex; align-items: flex-end; gap: 1px; }
.bd-sq-who .token { width: 30px; height: 30px; flex: none; }
.bd-sq-who small { font-size: 10px; color: #EBA48F; }
.bd-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; margin-bottom: 5px; padding: 6px 10px; border: 1px solid var(--rim);
  border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; text-align: left; cursor: pointer; text-decoration: none; }
.bd-add:hover { border-color: var(--gold); }
.bd-add small { margin-left: auto; color: var(--muted); font-size: 12px; }
.bd-add.used { opacity: .55; cursor: default; }
.bd-add.used:hover { border-color: var(--rim); }
.bd-add .sw { width: 14px; height: 14px; flex: none; border-radius: 3px; }
.sw-room { border: 1.5px dashed var(--gold); } .sw-clue { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rim-2); }
.sw-secret { background: #3A1E14; border: 1px solid var(--terra); } .sw-note { border: 1px dashed var(--muted); }
.bd-flt { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 30px; cursor: pointer; }
.bd-flt input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }

.bd-board { position: relative; min-width: 0; border: 1px solid var(--rim); border-radius: var(--radius); overflow: hidden; background: var(--desk); }
.bd-scroll { position: absolute; inset: 0; overflow: auto; }
.bd-size { position: relative; }
.bd-field { position: absolute; left: 0; top: 0; width: 4000px; height: 3000px; transform-origin: 0 0; touch-action: none;
  background-image: radial-gradient(rgba(245,238,221,.06) 1px, transparent 1px); background-size: 14px 14px; font-family: var(--serif); }
.bd-field.linking .bd-node { cursor: crosshair; }
.bd-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--pill);
  background: var(--desk-2); border: 1px solid var(--rim); }
.bd-zoom button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; }
.bd-zoom button:hover { background: var(--accent-bg); }
.bd-zoom span { min-width: 46px; text-align: center; font-size: 13px; color: var(--muted); }
.bd-zoom .bd-fit { width: auto; padding: 0 14px; border-radius: var(--pill); border-left: 1px solid var(--rim); font-size: 14px; white-space: nowrap; }
.bd-sizes { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--rim); border-radius: var(--pill); justify-self: start; }
.bd-sizes button { min-width: 44px; height: 36px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font: 600 15px var(--serif); cursor: pointer; }
.bd-sizes button.on { background: var(--btn-bg); color: var(--btn-fg); }
.bd-wh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bd-linking { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 16px; border-radius: var(--pill);
  background: var(--gold); color: #15110D; font-size: 15px; pointer-events: none; }
.bd-empty { position: absolute; left: 60px; top: 60px; width: 420px; display: grid; gap: 12px; color: var(--muted); }
.bd-empty .btn { justify-self: start; }

.bd-threads { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.bd-thread .bd-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.bd-label { font: italic 14px var(--serif); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--desk); stroke-width: 4px; }

.bd-room { position: absolute; border: max(1.5px, calc(1.5px / var(--z, 1))) dashed rgba(201,169,97,.55); border-radius: 12px; background: rgba(201,169,97,.035); }
.bd-room.on { border-color: var(--gold); }
/* подпись комнаты: растёт с рамкой (--rfs) и при отдалении не мельчает меньше ~13px на экране (--z — масштаб доски) */
.bd-room-tab { position: absolute; left: .4em; top: .3em; display: inline-flex; align-items: center; gap: .35em;
  padding: .15em .6em .15em .35em; max-width: calc(100% - .8em); white-space: normal; overflow-wrap: anywhere; align-items: flex-start;
  background: var(--desk); color: var(--text); font-family: var(--sc); font-size: max(var(--rfs, 14px), calc(13px / var(--z, 1)));
  line-height: 1.2; letter-spacing: .04em; cursor: grab; border-radius: .35em; }
.bd-room-tab .mi { width: 1.05em; height: 1.05em; flex: none; color: var(--gold); }
.players .bd-room-tab { cursor: default; }
.bd-resize { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 55%, var(--gold) 55% 65%, transparent 65% 75%, var(--gold) 75% 85%, transparent 85%); }

.bd-node { position: absolute; cursor: grab; user-select: none; color: var(--ink);
  /* размер S·M·L (--s) и увеличение при наведении (--h): от середины верхнего края, булавка остаётся на месте */
  transform-origin: 50% 0; scale: calc(var(--s, 1) * var(--h, 1)); transition: scale .15s ease; }
/* при наведении — крупнее; на отдалённой доске — почти до натурального размера, чтобы прочитать */
.bd-field:not(.dragging):not(.linking) .bd-node:hover, .bd-node:focus-visible { --h: clamp(1.3, calc(1 / var(--z, 1)), 4); z-index: 20; }
.bd-field.dragging .bd-node { transition: none; }
@media (prefers-reduced-motion: reduce) { .bd-node { transition: none; } }
.players .bd-node { cursor: default; }
.bd-node:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.bd-node.on { outline: 2px solid var(--gold); outline-offset: 3px; }
.bd-pin { position: absolute; left: 50%; top: -7px; margin-left: -7px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; z-index: 2; cursor: crosshair;
  background: var(--gold); box-shadow: 0 2px 3px rgba(0,0,0,.7), inset -2px -2px 0 rgba(0,0,0,.28); }
.bd-pin::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; }      /* попасть пальцем */
.bd-pin.t { background: var(--terra); }
.bd-stage { position: absolute; top: -10px; right: -8px; z-index: 3; padding: 3px 6px; border-radius: 4px; background: #15110D; border: 1px solid var(--gold);
  color: var(--gold); font: 600 11px/1 var(--serif); white-space: nowrap; }
.bd-stage.t { border-color: var(--terra); color: #EBA48F; }
.bd-eye { position: absolute; left: -8px; top: -10px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: #15110D; border: 1px solid var(--rim-2);
  color: var(--muted); display: grid; place-items: center; }
.bd-eye .mi { width: 14px; height: 14px; }
.bd-kind { display: block; font: 600 10px/1 var(--sc); letter-spacing: .14em; text-transform: uppercase; color: #7A3A22; margin-bottom: 6px; }

.bd-npc { width: 84px; height: 128px; padding: 4px; border-radius: 6px; background: var(--paper); box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.bd-npc-in { height: 100%; border: 1px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 0 5px; overflow: hidden; }
.bd-npc-art { flex: 1; width: 100%; border-bottom: 1px solid var(--ink); overflow: hidden; }
.bd-npc-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transform: scale(1.35); transform-origin: 50% 30%; }
.bd-npc b { font: 700 13px/1 var(--display); text-align: center; padding: 0 2px; max-height: 26px; overflow: hidden; }
.bd-npc-foot { display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; padding: 0 2px; }
.bd-npc-foot small { font-size: 9px; color: var(--muted); line-height: 1; }
.bd-badge { font: 600 8px/1 var(--sc); letter-spacing: .06em; color: var(--paper); background: var(--ink); padding: 2px 3px; border-radius: 2px;
  max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-badge.t { background: #7A3A22; }
.bd-participant { width: 64px; height: 96px; padding: 3px; border-radius: 4px; background: var(--paper-2); box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.bd-part-in { height: 100%; border: 1px solid var(--ink); display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.bd-part-art { flex: 1; min-height: 0; width: 100%; overflow: hidden; display: block; border-bottom: 1px solid var(--ink); }
.bd-part-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.3); transform-origin: 50% 30%; display: block; }
.bd-part-in b { font: 700 10px/1.05 var(--display); padding: 3px 2px; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.bd-item { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); }
.bd-item-disc { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--gold), 0 6px 12px rgba(0,0,0,.6);
  display: grid; place-items: center; font-size: 26px; }
.bd-item-disc img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bd-item-disc .bd-pin { top: -10px; }
.bd-item b { font: 700 13px/1.05 var(--display); text-align: center; }
.bd-clue { width: 124px; min-height: 80px; padding: 13px 10px 9px; background: var(--paper-2); box-shadow: 0 6px 12px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
.bd-clue .bd-text { font-size: 13px; line-height: 1.3; display: block; }
.bd-secret { width: 240px; padding: 14px; border-radius: 6px; background: #3A1E14; border: 1px solid var(--terra); color: var(--paper); box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.bd-secret .bd-kind { color: #EBA48F; }
.bd-secret > b { display: block; font: 700 19px/1.1 var(--display); margin-bottom: 8px; }
.bd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 13px; line-height: 1.25; }
.bd-pair small { display: block; color: #EBA48F; font-size: 11px; }
.bd-note { width: 220px; padding: 10px 12px; border-radius: 6px; border: 1px dashed var(--muted); background: #211C15; color: var(--muted); font-size: 14px; line-height: 1.35; }
.bd-note .bd-kind { color: var(--muted); }
.bd-back { width: 84px; height: 128px; border-radius: 6px; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold); font: 700 34px var(--display);
  background-color: #15110D; background-image: repeating-linear-gradient(45deg, rgba(201,169,97,.14) 0 1px, transparent 1px 10px), repeating-linear-gradient(-45deg, rgba(201,169,97,.14) 0 1px, transparent 1px 10px); }
.bd-back.bd-participant { width: 64px; height: 96px; } .bd-back.bd-item { width: 60px; height: 60px; border-radius: 50%; }
.bd-back.bd-clue { width: 124px; height: 80px; transform: none; } .bd-back.bd-secret { width: 240px; height: 110px; }

/* инспектор — плавающая панель над правым краем доски: только когда что-то выбрано */
.bd-ins { display: flex; flex-direction: column; gap: 14px; position: absolute; right: 12px; top: 12px; bottom: 70px; width: 340px; z-index: 6;
  box-shadow: 0 18px 40px var(--shadow); background: var(--ins-bg); backdrop-filter: blur(4px); }
.bd-ins[hidden] { display: none; }
.bd-ins-x { position: absolute; right: 8px; top: 6px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.bd-ins-x:hover { background: var(--accent-bg); color: var(--text); }
.bd-ins > .eyebrow:first-of-type, .bd-ins > .bd-ins-title:first-of-type { padding-right: 34px; }
.bd-ins-title { font: 700 26px/1.1 var(--display); margin: 0; }
.bd-help { margin: 0; padding-left: 18px; color: var(--muted); font-size: 15px; display: grid; gap: 8px; }
.bd-f { display: grid; gap: 5px; }
.bd-f > span { font-family: var(--sc); font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.bd-f.t > span { color: var(--danger-fg); }
.bd-f input, .bd-f textarea, .bd-f select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rim-2); background: var(--desk); color: var(--text); font-size: 15px; }
.bd-tick { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--rim); border-radius: 10px; cursor: pointer; font-size: 15px; }
.bd-tick input { accent-color: var(--gold); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.bd-tick small { display: block; color: var(--muted); font-size: 13px; }
.bd-kinds { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bd-kinds legend { font-family: var(--sc); font-size: 13px; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.bd-kinds label { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 8px; border: 1px solid var(--rim); border-radius: 10px; font-size: 14px; cursor: pointer; }
.bd-kinds label.on { border-color: var(--gold); background: var(--accent-bg); }
.bd-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.bd-kinds label:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.bd-links { display: grid; gap: 2px; }
.bd-links button { display: flex; align-items: center; gap: 8px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--rim); background: transparent; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.bd-links em { font-style: normal; color: var(--muted); min-width: 84px; }
.bd-ins .npc-sheet { color: var(--text); }

@media (max-width: 1100px) {
  .bd-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bd-board { height: 72vh; }
  .bd-rail { order: 2; } .bd-ins { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 60vh; }
}
/* запросы мастеру в комнате: переключатель «Новые / Все» */
#room-requests .sec-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#room-requests .mode-switch { margin-left: auto; }
#room-requests .mode-switch button { padding: 6px 16px; border-radius: var(--pill); border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
#room-requests .mode-switch button.on { background: var(--btn-bg); color: var(--btn-fg); }
/* страница «Запросы» и значок в меню */
.ask-field select { width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font: inherit; }
.nav .req-badge { vertical-align: 4px; }
/* «Попросить карту»: описание выбранной карты */
.ask-info { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--accent-bg); }
.ask-info-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ask-info-head b { font-size: 19px; }
.ask-syn { font-size: 17px; margin: 8px 0; }
.ask-info p { margin: 6px 0; }
.ask-info .drawer-text { white-space: pre-wrap; max-height: 260px; overflow: auto; font-size: 15px; }
.ask-info details { margin-top: 8px; }
.ask-info summary { cursor: pointer; color: var(--gold-2); }

/* ---------- лист героя: выбор вида и четыре новых вида ---------- */
.ls-layoutbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--card); color: var(--ink); padding: 0; }
.ls-layoutbtn svg { width: 24px; height: 24px; }
.ls-layouts { display: flex; flex-direction: column; gap: 8px; }
.ls-lh { font-size: 22px; font-weight: 800; }
.ls-lopt { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px; border: 2px solid var(--ink); background: var(--card); text-align: left; }
.ls-lopt.on { background: var(--ink); color: var(--invfg); }
.ls-lopt.on small { color: var(--inv-mid); }
.ls-lopt > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ls-lopt b { font-size: 16px; font-weight: 800; }
.ls-lopt small { font-size: 12px; color: var(--mid); }
.ls-lopt i { font-style: normal; font-weight: 800; font-size: 18px; }
.ls-lic { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.ls-lic svg { width: 40px; height: 40px; }
/* счётчики рядами клеток */
.ls-rows { display: flex; flex-direction: column; gap: 8px; }
.ls-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px auto; align-items: center; gap: 8px; }
.ls-row b { font-size: 20px; font-weight: 800; line-height: 1; text-align: right; }
.ls-row b small { font-size: 11px; color: var(--mid); }
.ls-pips { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; height: 16px; }
.ls-pips i { background: var(--track); position: relative; overflow: hidden; }
.ls-pips i.on { background: var(--ink); }
.ls-pips i.half::before { content: ""; position: absolute; inset: 0 50% 0 0; background: var(--ink); }
.ls-pm button { touch-action: manipulation; }
/* «Таро»: карта героя в рамке */
.ls-tarot { border: 3px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; background: var(--card); padding: 14px 12px 6px; margin: 4px;
  display: flex; flex-direction: column; gap: 12px; }
.ls-arch { align-self: center; width: 62%; aspect-ratio: 3 / 3.4; border: 2px solid var(--ink); border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px;
  overflow: hidden; display: grid; place-items: center; background: var(--bg); }
.ls-arch img { width: 88%; filter: grayscale(1); }
.ls-stats.big { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: transparent; }
.ls-stats.big > div { background: var(--card); border: 2px solid var(--ink); flex-direction: row; justify-content: center; gap: 6px; padding: 9px 4px; }
.ls-stats.big > div.hi { background: var(--ink); }
.ls-stats.big .ls-k { font-size: 10px; }
.ls-stats.big b { font-size: 20px; }
/* «Счётчики»: четыре большие плитки */
.ls-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ls-bigc { background: var(--card); border: 2px solid var(--ink); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ls-bigc b { font-size: 46px; line-height: .95; font-weight: 800; }
.ls-bigc b small { font-size: 18px; color: var(--mid); }
.ls-bigc.hp { background: var(--ink); color: var(--invfg); }
.ls-bigc.hp .ls-k, .ls-bigc.hp b small { color: var(--inv-mid); }
.ls-bigc.hp .ls-pips i { background: var(--pip-inv); }
.ls-bigc.hp .ls-pips i.on, .ls-bigc.hp .ls-pips i.half::before { background: var(--invfg); }
.ls-bigc.hp .ls-pm button { border-color: var(--invfg); background: var(--ink); color: var(--invfg); }
.ls-pm.wide { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ls-pm.wide button { width: auto; height: 46px; font-size: 24px; }
/* альбомные виды: на весь экран без прокрутки, колонки */
.ls.wide { max-width: none; height: 100dvh; min-height: 0; overflow: hidden; padding: 8px 14px 10px; gap: 8px; }
.ls.wide .ls-head { flex: none; }
.ls.wide .ls-wshown { flex: none; max-height: 30dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ls-cols { flex: 1; min-height: 0; display: grid; gap: 14px; }
.ls-cols.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ls-cols.three { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.25fr); }
.ls-col, .ls-side { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.ls-scroll { overflow-y: auto; padding-right: 2px; }
.ls-side { overflow-y: auto; }
.ls-mini { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.ls-ring { position: relative; width: 96px; height: 96px; }
.ls-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-ring img { position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%, -50%); filter: grayscale(1); }
.ls.wide .ls-row { grid-template-columns: 74px minmax(0, 1fr) 38px auto; gap: 6px; }
.ls.wide .ls-row .ls-k { font-size: 9px; }
.ls.wide .ls-row b { font-size: 16px; }
.ls.wide .ls-pm button { width: 30px; height: 28px; }
.ls.wide .ls-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls.wide .ls-sig { padding: 9px; }
.ls.wide .ls-sigtext { font-size: 11.5px; }
.ls.wide .ls-tabs { flex: none; }
.l-table .ls-col .ls-mapwrap { flex: 1; min-height: 0; }
.l-table .ls-col .ls-mapview { height: 100%; }
.l-table .ls-hint { display: none; }
.ls-rotate { display: none; }
@media (orientation: portrait) {
  .ls.wide > :not(.ls-rotate):not(.ls-veil) { display: none; }
  .ls.wide .ls-rotate { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 30px; }
  .ls-rotate svg { width: 80px; height: 80px; transform: rotate(90deg); }
  .ls-rotate b { font-size: 22px; font-weight: 800; }
  .ls-rotate span { color: var(--mid); font-size: 14px; }
  .ls-rotate .ls-act { flex: none; padding: 0 22px; }
}
.ls.wide .ls-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 46px; bottom: 0; }
.ls.wide .ls-mapview { height: calc(100dvh - 170px); }
.ls.wide .ls-mapwrap { flex: 1; min-height: 0; }
.ls-row > .ls-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-stats.big > div { flex-direction: column; gap: 3px; padding: 8px 2px 7px; }
.ls-stats.big .ls-k { font-size: 9.5px; }
/* «Всё на одном»: узкая колонка героя — счётчик в две строки (подпись, число, −/+; ниже клетки) */
.l-table .ls-mini { grid-template-columns: 1fr; justify-items: center; }
.l-table .ls-ring { width: 78px; height: 78px; }
.l-table .ls-mini .ls-rows { width: 100%; }
.l-table .ls-row { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "k b pm" "p p p"; row-gap: 4px; }
.l-table .ls-row > .ls-k { grid-area: k; }
.l-table .ls-row > b { grid-area: b; }
.l-table .ls-row > .ls-pm { grid-area: pm; }
.l-table .ls-row > .ls-pips { grid-area: p; height: 10px; }
.l-table .ls-mini { gap: 6px; }
.ls-scroll { padding-top: 4px; }
.l-table .ls-col .ls-mapwrap { display: flex; flex-direction: column; }
.l-table .ls-col .ls-mapview { flex: 1; height: auto; min-height: 0; }
.ls-pm button { flex: none; }
.l-table .ls-row > .ls-pm button { width: 32px; height: 28px; }

/* «За стол»: онлайн или живой стол */
.join-box { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.join-opt { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text); font: inherit; cursor: pointer; }
.join-opt:hover, .join-opt:focus-visible { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi); outline: none; }
.join-opt b { display: block; font: 700 20px var(--display); margin-bottom: 3px; }
.join-opt small { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.4; }
.join-opt em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--gold-2); }
.join-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); }
.join-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ls-switch { text-decoration: none; color: inherit; margin-top: 6px; border-style: dashed; }
.more-menu .tb-menulink { display: flex; padding: 9px 14px; border-radius: 10px; color: inherit; text-decoration: none; }
.more-menu .tb-menulink:hover { background: var(--accent-bg); }
.join-heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.join-hero { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2);
  color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.join-hero:hover, .join-hero:focus-visible, .join-hero.last { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi); outline: none; }
.join-hero img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.join-hero b { display: block; font: 700 17px var(--display); }
.join-hero small { display: block; color: var(--muted); font-size: 13px; }
.join-opt.watch { padding: 10px 14px; }
.join-opt.watch b { font-size: 17px; }

/* печать на выбор */
.pr-box { max-width: 620px; max-height: 92vh; overflow-y: auto; }
.pr-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.pr-sec { border-top: 1px solid var(--line); padding: 10px 0 6px; }
.pr-h { font: italic 15px var(--serif); color: var(--muted); margin-bottom: 6px; }
.pr-row { display: flex; align-items: center; gap: 12px; padding: 7px 4px; border-radius: 10px; cursor: pointer; }
.pr-row:hover { background: var(--accent-bg); }
.pr-row input { width: 18px; height: 18px; flex: none; accent-color: var(--btn-bg); }
.pr-row > span { flex: 1; min-width: 0; }
.pr-row b { display: block; font-weight: 600; }
.pr-row small { display: block; color: var(--muted); font-size: 13px; }
.pr-tag { flex: none; font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px;
  border-radius: var(--pill); border: 1px solid var(--line); color: var(--muted); }
.pr-tag.gm { border-color: var(--terra); color: var(--terra); }
.pr-sub { margin: 2px 0 0 34px; font-size: 14px; }
#go-print.disabled { opacity: .45; pointer-events: auto; cursor: not-allowed; }

/* печать «Сыграно» — зелёный штамп наискось */
.spread-card { position: relative; }
.played-stamp { --ink-g: #2f7a45; position: absolute; top: 14px; right: 16px; z-index: 2; display: inline-flex; flex-direction: column; align-items: center;
  padding: 5px 14px 4px; border: 3px double var(--ink-g); border-radius: 8px; color: var(--ink-g); transform: rotate(-9deg);
  font-family: var(--display); line-height: 1; pointer-events: none; opacity: .92; mix-blend-mode: multiply;
  background: radial-gradient(circle at 30% 40%, rgba(47,122,69,.07), transparent 70%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.6 1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -1.6 1.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.played-stamp b { font-size: 19px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.played-stamp small { font-family: var(--serif); font-size: 11px; letter-spacing: .08em; margin-top: 2px; }
[data-theme="shade"] .played-stamp { --ink-g: #5fbf7a; mix-blend-mode: normal; }
.spread-card.is-played h3 { padding-right: 120px; }
.sp-titlebar .played-stamp { position: relative; top: auto; right: auto; margin: 0 6px; transform: rotate(-7deg); }

/* ---------- доска связей: проверка и три оформления (сукно · мел · маркеры) ---------- */
.bd-node.bd-check { width: 150px; padding: 11px 11px 9px; border-radius: 4px; background: #F7F1E2; color: var(--ink); box-shadow: 0 6px 12px rgba(0,0,0,.5);
  background-image: repeating-linear-gradient(transparent 0 17px, rgba(60,90,140,.18) 17px 18px); border-top: 4px solid #7A3A22; }
.bd-check-in { display: flex; align-items: flex-start; gap: 6px; }
.bd-check-in b { flex: 1; font: 700 15px/1.1 var(--display); }
.bd-thr { flex: none; min-width: 30px; height: 30px; border-radius: 50%; border: 2px solid #7A3A22; color: #7A3A22; display: grid; place-items: center; font: 700 15px/1 var(--display); }
.bd-node.bd-check small { display: block; margin-top: 5px; font-size: 11px; color: #4b4237; }
.bd-styles button { min-width: 0; }

.th-felt .bd-board { background: #1F3A2A; }
.th-felt .bd-field { background-color: #24432F;
  background-image: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,255,255,.07), transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 220px 220px; box-shadow: inset 0 0 160px rgba(0,0,0,.45); }
.th-felt .bd-label { fill: #F4ECD8; stroke: #24432F; }
.th-felt .bd-room { border-color: rgba(226,194,122,.55); background: rgba(0,0,0,.08); }
.th-felt .bd-room-tab { background: #1C3526; }

.th-chalk .bd-board { background: #2A3631; border: 12px solid #6E4B2C; box-shadow: inset 0 0 0 2px #4E331C, 0 6px 18px rgba(0,0,0,.45); }
.th-chalk .bd-field { background-color: #2D3B34;
  background-image: radial-gradient(ellipse 22% 14% at 18% 22%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 30% 12% at 70% 60%, rgba(255,255,255,.045), transparent 70%),
    radial-gradient(ellipse 18% 20% at 40% 85%, rgba(255,255,255,.04), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 260px 260px; }
.th-chalk .bd-label { fill: #F4F1E8; stroke: #2D3B34; font-style: italic; font-size: 16px; opacity: .92; }
.th-chalk .bd-room { border: max(2px, calc(2px / var(--z, 1))) dashed rgba(244,241,232,.5); background: rgba(255,255,255,.02); border-radius: 18px 10px 22px 8px; }
.th-chalk .bd-room.on { border-color: #F4F1E8; }
.th-chalk .bd-room-tab { background: #2D3B34; color: #F4F1E8; font-style: italic; }
.th-chalk .bd-room-tab .mi { color: #F5E08C; }
.th-chalk .bd-node.bd-hero, .th-chalk .bd-item { color: #F4F1E8; }
.th-chalk .bd-empty { color: rgba(244,241,232,.75); }

.th-marker .bd-board { background: #F4F5F2; border: 12px solid #C7CBD1; box-shadow: inset 0 0 0 2px #E4E7EB, 0 6px 18px rgba(0,0,0,.35); }
.th-marker .bd-field { background-color: #F7F8F5;
  background-image: linear-gradient(115deg, rgba(255,255,255,.9) 10%, transparent 30%, transparent 60%, rgba(255,255,255,.6) 75%, transparent 90%),
    linear-gradient(rgba(30,60,120,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30,60,120,.05) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px; }
.th-marker .bd-label { fill: #1F2328; stroke: #F7F8F5; font-style: italic; font-size: 15px; }
.th-marker .bd-room { border: max(2px, calc(2px / var(--z, 1))) dashed #7A818A; background: rgba(30,79,184,.025); }
.th-marker .bd-room.on { border-color: #1E4FB8; }
.th-marker .bd-room-tab { background: #F7F8F5; color: #1F2328; }
.th-marker .bd-room-tab .mi { color: #D11F1F; }
.th-marker .bd-node.bd-hero, .th-marker .bd-item { color: #1F2328; }
.th-marker .bd-empty { color: #4B5563; }
.boardedit :is(.bd-flt, .bd-kinds, .bd-links) svg { border-radius: 3px; padding: 0 3px; box-sizing: content-box; }
.th-marker :is(.bd-flt, .bd-kinds, .bd-links) svg { background: #F7F8F5; }
.th-chalk :is(.bd-flt, .bd-kinds, .bd-links) svg { background: #2D3B34; }
.th-felt :is(.bd-flt, .bd-kinds, .bd-links) svg { background: #24432F; }

/* ---------- доска связей за онлайн-столом: окно поверх стола; мастеру — встроенный редактор ---------- */
.modal.tbb { padding: 14px; z-index: 40; }
.tbb-box { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; background: var(--panel); color: var(--text);
  border: 1.5px solid var(--frame); border-radius: var(--radius-lg); padding: 12px 14px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.tbb-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tbb-head h2 { font: 700 24px/1.1 var(--display); margin: 0; color: var(--text); }
.tbb-zoom { position: static; }
.tbb-frame { flex: 1; width: 100%; border: 0; border-radius: var(--radius); background: var(--bg); }
.tbb-view { position: relative; flex: 1; min-height: 0; }
.tbb-view .bd-board { position: absolute; inset: 0; }
.tbb-empty { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 10px 16px; border-radius: 10px; background: rgba(0,0,0,.45); color: #f4f2ee; }
.tbb-view .bd-node { cursor: default; }
body.bd-embed .top, body.bd-embed .foot, body.bd-embed .gm-tabs, body.bd-embed .me-back { display: none !important; }
body.bd-embed #app { max-width: none; padding: 8px 10px; margin: 0; }
body.bd-embed .me-head { margin: 0 0 8px; }
body.bd-embed .me-name { font-size: 20px; }
body.bd-embed .bd-layout { height: calc(100vh - 76px); }
.tb-boardbtn { min-height: 42px; padding: 0 18px; color: var(--text); font: 400 15px var(--serif); cursor: pointer; white-space: nowrap; align-items: center; }
.tb-boardbtn:hover { background: var(--btn-bg); color: var(--btn-fg); }

/* ---------- доска связей на ТВ ---------- */
.tv2.m-board { display: flex; flex-direction: column; gap: calc(14 * var(--p, 1px)); padding: calc(28 * var(--p)) calc(36 * var(--p)); background: var(--bg); color: var(--ink); }
.tvb-head { display: flex; align-items: center; gap: 18px; }
.tvb-head h1 { margin: 0; font: 700 calc(44 * var(--p, 1px))/1.1 var(--display); color: var(--ink); }
.tvb-head .tv-k { color: var(--mid); }
.tvb-stage { position: relative; flex: 1; min-height: 0; }
.tvb-stage .bd-board { position: absolute; inset: 0; overflow: hidden; }
.tvb-stage .bd-field { transform-origin: 0 0; background: none; box-shadow: none; }     /* фон — у рамки: поле вписано и не закрывает её целиком */
.tvb-stage .bd-node { cursor: default; }
.tvb-empty { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 14px 22px; border-radius: 12px; background: rgba(0,0,0,.5); color: #f4f2ee; font-size: 22px; }
.gm-tvpick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }

/* ---------- доска связей: во всю ширину, плотная шапка, режим «на весь экран» ---------- */
body.board-wide main { max-width: none; padding: 14px 22px 30px; }
.bd-head { align-items: center; gap: 12px; margin: 0 0 12px; }
.bd-head .me-title { min-width: 200px; }
.bd-head .me-name { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-head .mode-switch button { padding: 6px 14px; font-size: 15px; }
.bd-tools { display: inline-flex; gap: 6px; }
.bd-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--rim); border-radius: var(--pill);
  background: transparent; color: var(--text); font: 400 15px var(--serif); cursor: pointer; white-space: nowrap; }
.bd-tool:hover, .bd-tool[aria-pressed="true"] { border-color: var(--gold); background: var(--accent-bg); }
.bd-tool .mi { width: 18px; height: 18px; }
body.bd-focus .bd-layout { position: fixed; inset: 0; z-index: 30; height: auto; min-height: 0; padding: 10px; gap: 10px; background: var(--bg); }
body.bd-focus .bd-tools { position: fixed; right: 18px; top: 18px; z-index: 31; padding: 4px; border-radius: var(--pill); background: var(--header-bg); }
body.bd-focus .bd-ins { top: 64px; }
body.bd-embed .bd-head .me-title { display: none; }
@media (max-width: 1100px) { .bd-tool span { display: none; } }
/* запросы мастеру: ответ «Хорошо / Подумаю / Нет» */
.req-answer { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.req-answer .btn { min-height: 0; padding: 6px 16px; }
.req-answer .ans-no:not(.ghost) { background: var(--terra); border-color: var(--terra); color: #fff; }
.req-st.yes { color: var(--gold-2); font-weight: 600; }
.req-st.maybe { color: var(--muted); font-style: italic; }
.req-st.no { color: var(--terra); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.req.yes, .req.no { opacity: 1; }
.req.no { opacity: .75; }

/* ---------- статистика игроков (stats.js): телефон мастера и онлайн-стол, видит только мастер ---------- */
.ls-tabs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ls-tabs.four button { font-size: 13px; }
.st { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; font-size: 15px; }
.st-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; gap: 3px; }
.st > .st-seg { display: grid; }
.st-seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--pill); background: transparent; color: var(--text); font: 700 13px var(--serif); cursor: pointer; white-space: nowrap; }
.st-seg button.on { background: var(--gold); color: var(--bg); }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-k { font: 500 11px var(--sc); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-note, .st-quiet { margin: 0; font-size: 13px; color: var(--muted); }
.st-private { font-style: italic; }
.st-off { display: inline-flex; align-items: center; gap: 6px; }
.st-off button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.st-off button:disabled { opacity: .35; cursor: default; }
.st-off b { min-width: 22px; text-align: center; color: var(--gold); }
.st-chart { display: block; width: 100%; height: auto; overflow: visible; }
.st-chart text { font: 700 12px var(--serif); fill: var(--text); }
.st-chart .st-axis { font: 500 10px var(--sc); letter-spacing: .08em; text-transform: uppercase; fill: var(--muted); }
.st-chart .st-axis.up { fill: var(--terra); } .st-chart .st-axis.mean { fill: var(--gold); }
.st-zero { stroke: var(--muted); stroke-width: 1; }
.st-bar { fill: var(--gold); } .st-bar.shade { fill: var(--terra); } .st-bar.hot { fill: var(--text); }
.st-val.shade, .st-val.harder, .st-val.harder_soft { fill: var(--terra); }
.st-band { fill: var(--accent-bg); }
.st-mean { stroke: var(--gold); stroke-width: 2; }
.st-soft { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.st-up { stroke: var(--terra); stroke-width: 1; stroke-dasharray: 5 4; }
.st-down { stroke: var(--text); stroke-width: 1; stroke-dasharray: 5 4; opacity: .7; }
.st-line { fill: none; stroke: var(--text); stroke-width: 1.5; opacity: .6; }
.st-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 2; }
.st-dot.harder, .st-dot.harder_soft { fill: var(--terra); }
.st-dot.easier, .st-dot.easier_soft { fill: var(--bg); stroke: var(--text); }
.st-names { display: flex; border-top: 1px solid var(--line); padding-top: 6px; }
.st-names span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.st-names b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.st-names em { font-style: normal; font-size: 11px; color: var(--muted); }
.st-hints { display: flex; flex-direction: column; gap: 4px; }
.st-hint { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.st-hint i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--gold); align-self: center; }
.st-hint.shade i, .st-hint.harder i, .st-hint.harder_soft i { background: var(--terra); }
.st-hint.hot i { background: var(--text); }
.st-hint.easier i, .st-hint.easier_soft i { background: transparent; border: 1.5px solid var(--text); }
.st-hint b { min-width: 3.5em; }
.st-sec { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.st-link { min-height: 32px; border: 0; background: transparent; color: var(--muted); font: 400 12px var(--serif); text-decoration: underline; cursor: pointer; }
.st-fix { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-fix span { color: var(--muted); font-size: 13px; margin-right: auto; }
.st-fix button, .st-heroes button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: transparent; color: var(--text); font: 700 13px var(--serif); cursor: pointer; }
.st-heroes { display: flex; flex-wrap: wrap; gap: 6px; }
.st-heroes button { flex: 1; min-height: 44px; }
.st-heroes button.on { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.st-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-res button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text); font: 400 13px var(--serif); cursor: pointer; text-align: left; }
.st-res button b { color: var(--gold); }
.st-res button.act { border-style: dashed; justify-content: center; color: var(--gold); }
.st-res button:disabled { opacity: .4; cursor: default; }
.gmp .st { padding: 0 2px 12px; }
.ls .st { --text: var(--ink); --muted: var(--mid); }
.tb-pane .st { font-size: 14px; }

/* ---------- теги архетипов: общий блок (правила, выбор героя) и подпись под картой ---------- */
.atb { display: flex; flex-direction: column; gap: 8px; max-width: 900px; margin: 4px 0; padding: 10px 14px; background: #FFFDF7; color: #18130E;
  border: 1px solid var(--line); border-left: 4px solid var(--atb-accent, var(--gold)); border-radius: 12px; }
.atb-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.atb-role { font-family: var(--sc, var(--serif)); font-size: 15px; line-height: 1.5; color: #FBF6EA; padding: 0 12px; border-radius: 999px; }
.atb-tag, .atb-dmg { font-size: 14.5px; line-height: 1.6; padding: 0 11px; border: 1px solid #18130E; border-radius: 999px; }
.atb-tag.jack { background: #D9BC74; border-color: #8A6527; font-weight: 700; }
.atb-dmg { color: #66594A; }
.atb-dmg b { color: #18130E; }
.atb-dmg.magic { border-color: #7A5A1E; } .atb-dmg.magic b { color: #7A5A1E; }
.atb-dmg.pure { border-color: #A4462F; } .atb-dmg.pure b { color: #A4462F; }
.atb-dmg.mixed { border-style: dashed; }
.atb-lv { display: inline-flex; align-items: center; gap: 7px; margin-right: 12px; font-size: 13.5px; color: #66594A; }
.atb-dots { display: inline-flex; gap: 3px; }
.atb-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid; }
.atb-lv b { font-size: 15px; }
.atb-card { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 4px; }
.atb-card-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.atb-card .atb-role { font-size: 12.5px; padding: 0 8px; }
.atb-card-lv { display: flex; gap: 5px; }
.atb-card-lv i { width: 22px; height: 22px; border-radius: 50%; color: #FBF6EA; font-style: normal; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.detail .atb { margin: 8px 0; }
/* на тёмной странице блок тегов остаётся светлой карточкой; чёрная плашка «Особый» под картой — с тонкой каймой */
[data-theme="shade"] .atb { border-color: #4B3E29; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
[data-theme="shade"] :is(.atb-card .atb-role, .rtb-card span) { box-shadow: 0 0 0 1px rgba(245,238,221,.3); }
.rtb .atb-row { gap: 8px 10px; }
.rtb-seg { display: inline-flex; border: 1px solid var(--rtb); border-radius: 999px; overflow: hidden; }
.rtb-seg span { font-size: 14.5px; line-height: 1.6; padding: 0 11px; color: #8B7E6C; }
.rtb-seg span + span { border-left: 1px solid var(--rtb); }
.rtb-seg span.on { background: var(--rtb); color: #FBF6EA; }
.rtb-card { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; }
.rtb-card span { font-size: 12px; line-height: 1.6; padding: 0 7px; border-radius: 999px; color: #FBF6EA; }
.rb-row.open .atb { margin-bottom: 6px; }

/* Сноска «Что значат теги» — правила (архетипы, расы) и выбор героя */
.tag-legend { margin: 14px 0 18px; border: 1px solid var(--line); background: var(--bg-2); }
.tag-legend > summary { cursor: pointer; padding: 10px 16px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--gold-2); }
.tag-legend .tl-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 28px; padding: 4px 16px 14px; }
.tag-legend .tl-wide { grid-column: 1 / -1; }
.tag-legend h4 { margin: 8px 0 6px; font: 600 13px/1.2 var(--sc, var(--serif)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tag-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tag-legend li { font-size: 15.5px; line-height: 1.35; color: var(--text); }
.tag-legend li > span { display: inline-block; margin-right: 6px; white-space: nowrap; }
.tag-legend .atb-tag, .tag-legend .atb-dmg { color: #18130E; background: #FFFDF7; }
.tag-legend .atb-role { color: #FBF6EA; }
.tag-legend .atb-lvname { font-weight: 700; }
@media (max-width: 900px) { .tag-legend .tl-body { grid-template-columns: 1fr; } }

/* Модификаторы мобов — одна таблица */
.rb-mods-note { color: var(--muted); font-size: 16px; margin: 4px 0 12px; }
.rb-mods-wrap { overflow-x: auto; }
.rb-mods { width: 100%; border-collapse: collapse; font-size: 16px; }
.rb-mods th, .rb-mods td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.rb-mods thead th { font: 600 13px/1.2 var(--sc, var(--serif)); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rb-mods .rb-mods-g th { padding-top: 18px; font-family: var(--display); font-size: 19px; color: var(--text); border-bottom: 1px solid var(--ink); }
.rb-mods .rb-mods-g small { font-size: 13px; color: var(--muted); font-weight: 400; }
.rb-mods td:first-child { white-space: nowrap; }
.rb-mods-c { width: 1%; white-space: nowrap; }
@media (max-width: 640px) { .rb-mods td:first-child { white-space: normal; } }

/* ======================================================================================================
   СУКНО — фон всего сайта. Цвет (body[data-felt]) и рисунок (--felt-img) выбирает человек в «Оформлении»
   (src/ui/Decor.tsx, ключи ls_felt и ls_felt_pattern). Шапка — деревянный борт, страницы лежат на сукне листом
   (светлым или тёмным — ls_theme), вход и комната — прямо на сукне (body.on-felt). Бар-режим (телефон, ТВ) — без сукна.
   ====================================================================================================== */
body { --felt-c: #24382C; }
body[data-felt="bordo"] { --felt-c: #4A1A1E; }
body[data-felt="midnight"] { --felt-c: #1A2742; }
body[data-felt="graphite"] { --felt-c: #22201E; }
body[data-felt="tobacco"] { --felt-c: #4A3522; }
body:not(.bar-mode) { background-color: var(--felt-c); }
/* сукно — слоем под страницей (ниже он растянут на всю высоту body и едет вместе с прокруткой) */
body:not(.bar-mode)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--felt-c);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,230,170,.16) 0%, rgba(255,230,170,0) 70%),
    radial-gradient(ellipse 130% 100% at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%),
    var(--felt-img, none);
  background-size: 100% 100%, 100% 100%, 520px 520px;
  background-blend-mode: normal, normal, multiply;
}

/* шапка — деревянный борт стола */
body:not(.bar-mode) .top {
  --text: #F5EEDD; --muted: #E8D6B6; --gold: #E6CF8F; --gold-2: #F0DCA0; --gold-hi: #F0DCA0;
  --frame: rgba(230,207,143,.5); --line: rgba(0,0,0,.4); --accent-bg: rgba(240,220,160,.14);
  --btn-bg: #D9BC74; --btn-fg: #2E1B10; --btn-hover: #E8D095;
  color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, #4A2E1C 0%, #2E1B10 100%);
  border-bottom: 2px solid #1A0F08;
  box-shadow: inset 0 1px 0 rgba(255,210,160,.2), 0 6px 16px rgba(0,0,0,.45);
}

/* страница — лист, лежащий на сукне (кроме онлайн-стола, редактора доски и экранов прямо на сукне) */
body:not(.bar-mode):not(.tb-wide):not(.bd-embed):not(.on-felt) main {
  width: calc(100% - 48px); margin: 28px auto 36px; padding: 34px 40px 64px;
  background: var(--bg); border-radius: 18px;
  box-shadow: inset 0 0 0 9px var(--bg), inset 0 0 0 10px var(--frame),
    0 2px 2px rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.4), 0 46px 70px rgba(0,0,0,.28);
}
body.board-wide:not(.bar-mode) main { width: calc(100% - 28px); padding: 18px 22px 30px; }
@media (max-width: 640px) {
  body:not(.bar-mode):not(.tb-wide):not(.bd-embed):not(.on-felt) main { width: calc(100% - 16px); margin: 10px auto 20px; padding: 22px 14px 40px; border-radius: 14px; }
}

/* подвал — на сукне */
body:not(.bar-mode) .foot { --muted: #CDBFA5; --text: #F5EEDD; border-top: 0; color: var(--muted); }
body:not(.bar-mode) .foot img { filter: invert(1) sepia(.45); mix-blend-mode: screen; }

/* ---------- экраны прямо на сукне: вход и комната ---------- */
body.on-felt main {
  --text: #F5EEDD; --muted: #DCCFB4; --gold: #E6CF8F; --gold-2: #F0DCA0; --gold-hi: #F0DCA0;
  --frame: rgba(230,207,143,.55); --line: rgba(230,207,143,.28); --accent-bg: rgba(240,220,160,.12);
  --btn-bg: #E6CF8F; --btn-fg: #2E1B10; --btn-hover: #F0DCA0; --red: #E08A70; --danger-fg: #F0A890;
  --panel: rgba(14,10,7,.55); --bg-2: rgba(14,10,7,.42); --shadow: rgba(0,0,0,.45);
  --logo-filter: invert(1) sepia(.45); --logo-blend: screen;
  color: var(--text);
}
body.on-felt .title, body.on-felt .landing-lead, body.on-felt .divider, body.on-felt .sec-head, body.on-felt .steps { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
/* карты на столе: тень, как у карт на сукне */
body.on-felt .landing-card { border-radius: 18px;
  box-shadow: 0 2px 2px rgba(0,0,0,.4), 0 18px 24px rgba(0,0,0,.4), 0 40px 60px rgba(0,0,0,.3); }
body.on-felt .landing-card[data-theme="light"] { --panel: #FBF6EA; transform: rotate(-1deg);
  box-shadow: inset 0 0 0 10px var(--panel), inset 0 0 0 11px #A8823A, 0 2px 2px rgba(0,0,0,.4), 0 18px 24px rgba(0,0,0,.4), 0 40px 60px rgba(0,0,0,.3); }
body.on-felt .landing-card[data-theme="shade"] { transform: rotate(1.2deg); }
body.on-felt .piglets figure { box-shadow: 0 2px 2px rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.4); }
body.on-felt .hero-card { box-shadow: 0 2px 2px rgba(0,0,0,.4), 0 16px 26px rgba(0,0,0,.45); }
body.on-felt .party, body.on-felt .spread-card { border-color: rgba(230,207,143,.3);
  box-shadow: inset 0 1px 0 rgba(255,230,180,.08), 0 12px 24px rgba(0,0,0,.35); backdrop-filter: blur(2px); }
body.on-felt .party-new { border-color: rgba(230,207,143,.5); color: var(--muted); }
body.on-felt .room-top .code { color: #2E1B10; background: linear-gradient(180deg, #F0DCA0, #B8954C); padding: 2px 14px 0; border-radius: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #6E5A30, 0 8px 14px rgba(0,0,0,.45); }
body.on-felt .empty-state { color: var(--muted); }

/* ---------- выбор сукна: страница «Настройки» (.big) и «⋯» онлайн-стола ---------- */
.decor-pick { display: grid; gap: 8px; }
.decor-lbl { font-family: var(--sc); font-size: 13px; letter-spacing: .1em; color: #66594A; margin-top: 4px; }
.decor-now { letter-spacing: 0; font-family: var(--serif); font-style: italic; color: #18130E; }
.decor-row { display: flex; flex-wrap: wrap; gap: 8px; }
.decor-sheet { flex: 1; min-height: 40px; border-radius: 999px; border: 1px solid #D9C9A3; background: #F5EEDD; color: #18130E; font: inherit; font-size: 15px; cursor: pointer; }
.decor-sheet.shade { background: #1E1913; color: #F5EEDD; border-color: #4B3E29; }
.decor-sheet.on { box-shadow: 0 0 0 2px #A8823A; }
.decor-col { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.decor-col i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.3); }
.decor-col.on i { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 0 0 3px #FBF6EA, 0 0 0 5px #A8823A; }
.decor-pats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-height: 236px; overflow-y: auto; padding: 4px; }
.decor-pat { aspect-ratio: 1; min-height: 40px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; display: grid; place-items: center;
  background-color: color-mix(in srgb, var(--c) 55%, #fff); background-size: cover; background-blend-mode: multiply; color: #E6CF8F; font-size: 18px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.decor-pat.on { box-shadow: 0 0 0 2px #FBF6EA, 0 0 0 4px #A8823A; }
.decor-col:focus-visible, .decor-pat:focus-visible, .decor-sheet:focus-visible { outline: 2px solid #8A6527; outline-offset: 2px; }
/* то же меню на онлайн-столе — внутри «⋯» */
.tb-feltpick .decor-lbl { color: var(--muted); }
.tb-feltpick .decor-now { color: var(--text); }
.tb-feltpick .decor-col.on i, .tb-feltpick .decor-pat.on { box-shadow: 0 0 0 2px var(--panel, #fff), 0 0 0 4px var(--gold-hi); }
.tb-feltpick { width: 300px; max-width: 80vw; }
/* в «⋯» онлайн-стола кнопки меню растянуты на всю ширину — у выбора сукна свои размеры */
.more-menu .decor-pick .decor-col { display: grid; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: none; }
.more-menu .decor-pick .decor-pat { display: grid; width: auto; padding: 0; border-radius: 8px;
  background-color: color-mix(in srgb, var(--c) 55%, #fff); background-size: cover; background-blend-mode: multiply; }
.more-menu .decor-pick .decor-col:hover, .more-menu .decor-pick .decor-col:focus-visible { background: none; }

/* ---------- шапка: шестерёнка «Настройки» вместо языка и темы ---------- */
.settings-btn { text-decoration: none; color: var(--gold-2); margin-left: auto; }   /* при переносе шапки — всё равно справа */
.settings-btn.on { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

/* ---------- страница «Настройки»: язык, лист, сукно ---------- */
.settings { max-width: 820px; margin: 0 auto; }
.settings-back { font-size: 16px; padding: 6px 0; margin-bottom: 6px; }
.settings .title { font-size: 44px; }
.settings-sec { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.settings-h { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; margin: 0 0 16px; }
.settings-langs { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-lang { min-height: 48px; padding: 0 26px; border-radius: var(--pill); border: 1px solid var(--frame); background: transparent;
  color: var(--text); font: inherit; font-size: 19px; cursor: pointer; }
.settings-lang[lang="zh-CN"] { font-family: var(--cjk-sans); }
.settings-lang:hover { background: var(--accent-bg); }
.settings-lang.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.settings-note { font-size: 15px; margin: 12px 0 0; }
.decor-pick.big { gap: 12px; }
.decor-pick.big .decor-lbl { font-size: 15px; color: var(--muted); margin-top: 10px; }
.decor-pick.big .decor-now { color: var(--text); }
.decor-pick.big .decor-sheet { flex: 0 1 220px; min-height: 48px; font-size: 17px; }
.decor-pick.big .decor-sheet.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.decor-pick.big .decor-col { width: 56px; height: 56px; }
.decor-pick.big .decor-col i { width: 44px; height: 44px; }
.decor-pick.big .decor-col.on i { box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }
.decor-pick.big .decor-pats { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; max-height: none; overflow: visible; padding: 4px; }
.decor-pick.big .decor-pat { aspect-ratio: auto; height: 104px; grid-template-rows: 1fr auto; padding: 0 0 6px; }
.decor-pick.big .decor-pat.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.decor-pat small { align-self: end; max-width: 92%; padding: 1px 7px; border-radius: 6px; background: rgba(14,10,7,.72); color: #F5EEDD;
  font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .decor-pick.big .decor-pats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .decor-pick.big .decor-pat { height: 92px; } }

/* ---------- шапка в две строки: знак по центру отдельной строкой, под ним меню ----------
   слева — комната, справа — шестерёнка «Настройки»; разделы правил встают на место меню */
body:not(.bar-mode) .top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "badge brand set" "nav nav nav"; align-items: center; gap: 2px 16px; padding: 8px 24px 6px;
}
body:not(.bar-mode) .top .brand { grid-area: brand; justify-self: center; padding: 6px 0 2px; }
body:not(.bar-mode) .top .room-badge { grid-area: badge; justify-self: start; }
body:not(.bar-mode) .top .settings-btn { grid-area: set; justify-self: end; margin-left: 0; }
body:not(.bar-mode) .top .nav, body:not(.bar-mode) .top .rb-nav { grid-area: nav; justify-content: center; flex-wrap: wrap; padding-top: 4px;
  border-top: 1px solid rgba(230,207,143,.18); }
@media (max-width: 640px) {
  body:not(.bar-mode) .top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand set" "nav nav" "badge badge"; padding: 8px 14px 6px; }
  body:not(.bar-mode) .top .brand { justify-self: start; }
  body:not(.bar-mode) .top .wordmark { font-size: 22px; }
  body:not(.bar-mode) .top .nav { justify-content: flex-start; flex-wrap: nowrap; }
  body:not(.bar-mode) .top .room-badge { justify-self: center; margin-bottom: 4px; }
}

/* ---------- оттенки листа: светлый и тёмный — настройка (ls_tone_light, ls_tone_dark → body[data-light], body[data-dark]) ----------
   «Слоновая кость» и «Чернила» — значения по умолчанию выше; здесь только то, что меняется */
body[data-light="parchment"]:not([data-theme="shade"]), body[data-light="parchment"] [data-theme="light"], body[data-light="parchment"].on-felt:not([data-theme="shade"]) main :is(.modal, .more-menu, .busy) {
  --bg: #EADCBC; --bg-2: #F4EAD3; --panel: #F4EAD3; --paper: #F4EAD3; --paper-2: #E0CFA8; --line: #C9B184; --muted: #5C4E3C; --header-bg: rgba(234,220,188,.93);
}
body[data-light="white"]:not([data-theme="shade"]), body[data-light="white"] [data-theme="light"], body[data-light="white"].on-felt:not([data-theme="shade"]) main :is(.modal, .more-menu, .busy) {
  --bg: #F4F3EF; --bg-2: #FFFFFF; --panel: #FFFFFF; --paper: #FFFFFF; --paper-2: #ECE9E1; --line: #D8D3C6; --muted: #5C574F; --header-bg: rgba(244,243,239,.93);
}
body[data-light="mist"]:not([data-theme="shade"]), body[data-light="mist"] [data-theme="light"], body[data-light="mist"].on-felt:not([data-theme="shade"]) main :is(.modal, .more-menu, .busy) {
  --bg: #E3E7E0; --bg-2: #F1F3EE; --panel: #F1F3EE; --paper: #F1F3EE; --paper-2: #D7DDD2; --line: #BFC7B8; --muted: #535C55; --header-bg: rgba(227,231,224,.93);
}
body[data-light="rose"]:not([data-theme="shade"]), body[data-light="rose"] [data-theme="light"], body[data-light="rose"].on-felt:not([data-theme="shade"]) main :is(.modal, .more-menu, .busy) {
  --bg: #F1E3DC; --bg-2: #FAF1EC; --panel: #FAF1EC; --paper: #FAF1EC; --paper-2: #E8D3C9; --line: #D9BDB0; --muted: #65504A; --header-bg: rgba(241,227,220,.93);
}
body[data-dark="graphite"][data-theme="shade"], body[data-dark="graphite"] [data-theme="shade"], body[data-dark="graphite"].on-felt[data-theme="shade"] main :is(.modal, .more-menu, .busy) {
  --bg: #1B1C1E; --bg-2: #25262A; --panel: #25262A; --line: #43444A; --muted: #C4C1BA; --header-bg: rgba(27,28,30,.92);
}
body[data-dark="midnight"][data-theme="shade"], body[data-dark="midnight"] [data-theme="shade"], body[data-dark="midnight"].on-felt[data-theme="shade"] main :is(.modal, .more-menu, .busy) {
  --bg: #10162A; --bg-2: #19213A; --panel: #19213A; --line: #33406A; --muted: #BEC4D8; --header-bg: rgba(16,22,42,.92);
}
body[data-dark="wine"][data-theme="shade"], body[data-dark="wine"] [data-theme="shade"], body[data-dark="wine"].on-felt[data-theme="shade"] main :is(.modal, .more-menu, .busy) {
  --bg: #1F1012; --bg-2: #2C181B; --panel: #2C181B; --line: #56313A; --muted: #D6C0B9; --header-bg: rgba(31,16,18,.92);
}
body[data-dark="forest"][data-theme="shade"], body[data-dark="forest"] [data-theme="shade"], body[data-dark="forest"].on-felt[data-theme="shade"] main :is(.modal, .more-menu, .busy) {
  --bg: #0F1A14; --bg-2: #17251D; --panel: #17251D; --line: #2E4A3A; --muted: #BFCDBF; --header-bg: rgba(15,26,20,.92);
}
/* кружки оттенков листа: светлые видны и на светлом листе */
.decor-col.tone i { box-shadow: inset 0 0 0 1px rgba(140,140,140,.55), 0 2px 4px rgba(0,0,0,.25); }

/* ======================================================================================================
   СТИЛИ ЦИФРОВОГО ЛИСТА, ТЕЛЕФОНА МАСТЕРА И ТВ (body[data-bar], ls_bar_style): Сукно, Пергамент, Тень;
   «Контраст» — прежний плоский чёрно-белый (светлый или тёмный — по листу сайта).
   ====================================================================================================== */
body.bar-mode[data-bar="felt"] { background: var(--felt-c); }
body.bar-mode[data-bar="felt"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--felt-c);
  background-image: radial-gradient(ellipse 90% 45% at 50% 25%, rgba(255,230,170,.14), rgba(255,230,170,0) 70%),
    radial-gradient(ellipse 130% 100% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%), var(--felt-img, none);
  background-size: 100% 100%, 100% 100%, 320px 320px; background-blend-mode: normal, normal, multiply; }
body.bar-mode[data-bar="parchment"] { background: #F5EEDD; }
body.bar-mode[data-bar="shade"] { background: #15110D; }

body[data-bar="felt"] :is(.ls, .tv2) { --ink: #F5EEDD; --mid: #D9CBAF; --line: rgba(230,207,143,.32); --bg: var(--felt-c); --card: rgba(14,10,7,.5);
  --invfg: #2E1B10; --inv-mid: #6E5A30; --inv-sub: #8A6527; --track: rgba(255,255,255,.14); --zone: #C9A961; --pip-inv: #6E5A30;
  --ring-track: rgba(255,255,255,.14); --ring-ink: #E6CF8F; --icon: grayscale(1) invert(1) sepia(.35); --icon-inv: grayscale(1) contrast(1.2); --veil: rgba(0,0,0,.6); }
body[data-bar="parchment"] :is(.ls, .tv2) { --ink: #18130E; --mid: #66594A; --line: #D9C9A3; --bg: #F5EEDD; --card: #FBF6EA;
  --invfg: #F5EEDD; --inv-mid: #CDBFA5; --inv-sub: #E6D9BC; --track: #E6D9BC; --zone: #C9A961; --pip-inv: #8A6527;
  --ring-track: #E6D9BC; --ring-ink: #8A6527; --icon: grayscale(1) contrast(1.2); --icon-inv: grayscale(1) invert(1) sepia(.3); --veil: rgba(24,19,14,.55); }
body[data-bar="shade"] :is(.ls, .tv2) { --ink: #F5EEDD; --mid: #CDBFA5; --line: #4B3E29; --bg: #15110D; --card: #1E1913;
  --invfg: #15110D; --inv-mid: #6E5A30; --inv-sub: #4B3E29; --track: #3A3024; --zone: #8A6527; --pip-inv: #C9A961;
  --ring-track: #3A3024; --ring-ink: #C9A961; --icon: grayscale(1) invert(1) sepia(.45); --icon-inv: grayscale(1) contrast(1.2); --veil: rgba(0,0,0,.7); }

/* общее для трёх новых стилей: шрифты книги, мягкие углы, монеты вместо квадратных кнопок */
body:not([data-bar="contrast"]) :is(.ls, .tv2) { font-family: var(--serif); }
body:not([data-bar="contrast"]) .ls-k { font-family: var(--sc); font-weight: 500; letter-spacing: .1em; text-transform: lowercase; font-size: 11px; }
body:not([data-bar="contrast"]) :is(.ls-name b, .ls-ev b, .ls-cw b, .ls-special b, .ls-stats b, .ls-sig b, .ls-tile b, .ls-sheethead b) { font-family: var(--display); font-weight: 700; }
body:not([data-bar="contrast"]) .ls-name b { font-size: 26px; }
body:not([data-bar="contrast"]) :is(.ls-cw b, .ls-special b) { font-size: 36px; }
body:not([data-bar="contrast"]) .ls-pm button { width: 28px; height: 28px; border-radius: 50%; font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1; }
body:not([data-bar="contrast"]) :is(.ls-stats > div, .ls-special, .ls-tile, .ls-sig, .ls-chips button, .ls-act, .ls-lopt, .ls-layoutbtn, .ls-pickbtn) { border-radius: 12px; }
body:not([data-bar="contrast"]) .ls-tabs { border-radius: 999px; padding: 5px; }
body:not([data-bar="contrast"]) .ls-tabs button { border-radius: 999px; font-family: var(--sc); letter-spacing: .06em; }
body:not([data-bar="contrast"]) .ls-zones span::after { border-radius: 2px; }

/* Сукно: дерево и латунь */
body[data-bar="felt"] .ls-head { margin: -10px -16px 0; padding: 10px 16px; background: linear-gradient(180deg, #4A2E1C, #2E1B10); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
body[data-bar="felt"] .ls-head :is(.ls-back, .ls-name b, .ls-ev b) { color: #F0DCA0; }
body[data-bar="felt"] .ls-pm button { border: 0; background: radial-gradient(circle at 35% 30%, #F0DCA0, #A8823A); color: #2E1B10; box-shadow: 0 1px 0 #6E5A30, 0 2px 4px rgba(0,0,0,.35); }
body[data-bar="felt"] .ls-stats > div { box-shadow: inset 0 0 0 1px rgba(230,207,143,.3); }
body[data-bar="felt"] .ls-tabs { background: linear-gradient(180deg, #4A2E1C, #2E1B10); box-shadow: 0 8px 18px rgba(0,0,0,.5); border: 0; }
body[data-bar="felt"] .ls-tabs button { color: #E8D6B6; background: transparent; }
body[data-bar="felt"] .ls-tabs button.on { background: linear-gradient(180deg, #F0DCA0, #C9A961); color: #2E1B10; }
body[data-bar="felt"] .ls-ava { filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
body[data-bar="felt"] .ls { background: transparent; }   /* сукно — слоем body::before, --bg только для текста на светлых плашках */

/* Пергамент: бумага, двойная золотая линейка */
body[data-bar="parchment"] .ls { background-image: radial-gradient(rgba(120,90,40,.07) 1px, transparent 1px); background-size: 6px 6px; }
body[data-bar="parchment"] .ls-head { padding-bottom: 8px; box-shadow: 0 3px 0 -1px #F5EEDD, 0 4px 0 -1px #A8823A; }
body[data-bar="parchment"] .ls-pm button { border: 1px solid #A8823A; background: #FBF6EA; color: #18130E; }
body[data-bar="parchment"] .ls-stats > div { box-shadow: inset 0 0 0 1px #D9C9A3; }
body[data-bar="parchment"] .ls-tabs { background: #18130E; border: 0; }
body[data-bar="parchment"] .ls-tabs button { color: #E6D9BC; background: transparent; }
body[data-bar="parchment"] .ls-tabs button.on { background: #F5EEDD; color: #18130E; }

/* Тень: оборот карты — чёрное с золотом */
body[data-bar="shade"] .ls { background: radial-gradient(ellipse 80% 45% at 50% 30%, #2A2118 0%, #15110D 60%, #0D0A07 100%); }
body[data-bar="shade"] .ls-head { padding-bottom: 8px; box-shadow: 0 1px 0 rgba(201,169,97,.35); }
body[data-bar="shade"] .ls-head :is(.ls-back, .ls-name b) { color: #E1C784; }
body[data-bar="shade"] .ls-pm button { border: 1px solid rgba(201,169,97,.7); background: transparent; color: #E1C784; }
body[data-bar="shade"] .ls-stats > div { box-shadow: inset 0 0 0 1px rgba(201,169,97,.35); }
body[data-bar="shade"] .ls-tabs { background: #1E1913; border: 0; box-shadow: inset 0 0 0 1px rgba(201,169,97,.35); }
body[data-bar="shade"] .ls-tabs button { color: #CDBFA5; background: transparent; }
body[data-bar="shade"] .ls-tabs button.on { background: #C9A961; color: #15110D; }

/* ======================================================================================================
   ОНЛАЙН-СТОЛ (body[data-tablestyle], ls_table_style): Дерево (как было), Ночь, Без борта
   ====================================================================================================== */
body[data-tablestyle="night"] .tb { --wood: #2A1C12; --wood-2: #120C07; --glass: rgba(24,19,14,.78); --glass-line: rgba(201,169,97,.3);
  --text: #F5EEDD; --muted: #CDBFA5; --line: #4B3E29; --panel: #1E1913; --bg-2: #241E17; --gold: #C9A961; --gold-2: #E1C784; --gold-hi: #E1C784;
  --btn-bg: #C9A961; --btn-fg: #15110D; --btn-hover: #E1C784; --accent-bg: rgba(201,169,97,.14); color: var(--text); }
body[data-tablestyle="night"] .tb-head { color: var(--text); }
body[data-tablestyle="flat"] .tb-body { border-width: 0; border-radius: 18px; margin: 10px 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(230,207,143,.25), inset 0 10px 40px rgba(0,0,0,.35); }
body[data-tablestyle="flat"] .tb-body.has-terrain::before { border-radius: 18px; }
body[data-tablestyle="flat"] :is(.tb-left, .tb-right) { box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ======================================================================================================
   ДОСКА СВЯЗЕЙ: сукно — общий цвет и рисунок; карточки (body[data-bdcards], ls_board_cards): Бумага, Тёмные, Контраст
   ====================================================================================================== */
.th-felt .bd-board { background: var(--felt-c); }
.th-felt .bd-field { background-color: var(--felt-c);
  background-image: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,255,255,.07), transparent 75%), var(--felt-img, none);
  background-size: 100% 100%, 420px 420px; background-blend-mode: normal, multiply; }
.th-felt .bd-label { stroke: var(--felt-c); }
.th-felt .bd-room-tab { background: color-mix(in srgb, var(--felt-c) 80%, #000); }
.th-felt :is(.bd-flt, .bd-kinds, .bd-links) svg { background: var(--felt-c); }

body[data-bdcards="dark"] .bd-board :is(.bd-npc, .bd-participant, .bd-clue, .bd-item-disc) { --paper: #1E1913; --paper-2: #2A2219; --ink: #C9A961; --muted: #CDBFA5; color: #F5EEDD; }
body[data-bdcards="dark"] .bd-board .bd-node.bd-encounter { background: #2A2219; color: #F5EEDD; }
body[data-bdcards="dark"] .bd-board .bd-node.bd-check { background: #1E1913; color: #F5EEDD; box-shadow: inset 0 0 0 1px rgba(201,169,97,.45), 0 6px 12px rgba(0,0,0,.5); }
body[data-bdcards="dark"] .bd-board .bd-node.bd-check small { color: #CDBFA5; }
body[data-bdcards="dark"] .bd-board .bd-badge { color: #15110D; background: #C9A961; }
body[data-bdcards="contrast"] .bd-board :is(.bd-npc, .bd-participant, .bd-clue, .bd-item-disc) { --paper: #FFFFFF; --paper-2: #FFFFFF; --ink: #111111; --muted: #4A4A4A; color: #111111; }
body[data-bdcards="contrast"] .bd-board :is(.bd-node.bd-encounter, .bd-node.bd-check) { background: #FFFFFF; color: #111111; }
body[data-bdcards="contrast"] .bd-board .bd-node.bd-check small { color: #4A4A4A; }

/* ---------- «Настройки»: кнопки стилей ---------- */
.pref-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pref-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 8px; border-radius: var(--pill);
  border: 1px solid var(--frame); background: transparent; color: var(--text); font: inherit; font-size: 17px; cursor: pointer; }
.pref-opt i { width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(140,140,140,.55); }
.pref-opt:hover { background: var(--accent-bg); }
.pref-opt.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pref-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pref-bar-felt i, .pref-bdsurf-felt i { background-color: var(--felt-c); background-image: var(--felt-img, none); background-size: 80px; background-blend-mode: multiply; }
.pref-bar-contrast i, .pref-bdcards-contrast i { background: linear-gradient(135deg, #FFFFFF 0 50%, #111111 50% 100%); }

/* ---------- лист на телефоне — одна страница без прокрутки: шапка и вкладки на месте, середина ужимается ----------
   (круг сжимается по высоте, список умений — своя прокрутка только если карт много, карта — в оставшемся месте) */
.ls:not(.wide) { height: 100dvh; min-height: 0; overflow: hidden; }
.ls:not(.wide) .ls-tabs { position: relative; bottom: auto; }
.ls:not(.wide) .ls-dial { flex: 1 1 auto; min-height: 170px; max-height: min(calc(100vw - 20px), 470px); aspect-ratio: auto; container-type: size; }
.ls:not(.wide) .ls-dial .ls-ava { width: min(50cqw, 53cqh); }
.ls-fill { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; }
.ls:not(.wide) .ls-mapwrap { flex: 1 1 0; min-height: 200px; display: flex; }
.ls:not(.wide) .ls-mapview { flex: 1; height: auto; touch-action: pan-x pan-y; }
@media (max-height: 740px) {
  .ls:not(.wide) { gap: 7px; padding-top: 6px; padding-bottom: 8px; }
  .ls-sigtext { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .ls-grid.three .ls-tile { min-height: 70px; }
  .ls-tabs { height: 52px; }
}
/* «Таро» на телефоне: арка героя чуть меньше, чтобы вкладки помещались на невысоких экранах */
@media (max-height: 880px) { .ls:not(.wide) .ls-arch { width: 54%; } .ls:not(.wide) .ls-tarot { gap: 9px; } }
@media (max-height: 760px) { .ls:not(.wide) .ls-arch { width: 48%; } }
@media (max-height: 700px) { .ls:not(.wide) .ls-arch { width: 44%; } }
.ls:not(.wide) .ls-tarot { flex: 1 1 auto; min-height: 0; }
.ls:not(.wide) .ls-arch { flex: 0 1 auto; min-height: 80px; }
.ls:not(.wide) .ls-arch img { max-height: 100%; object-fit: contain; }

/* ======================================================================================================
   «Настройки»: миниатюры сайта, цифрового листа и онлайн-стола — те же классы и переменные, что у настоящих
   экранов, уменьшенные transform'ом; на широком экране — колонка справа, приклеена при прокрутке
   ====================================================================================================== */
.settings:has(.settings-grid) { max-width: 1120px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 12px 40px; align-items: start; }
.settings-grid .settings-main { grid-column: 1; grid-row: 1; min-width: 0; }
.set-previews { grid-column: 2; grid-row: 1; position: sticky; top: 118px; display: grid; gap: 14px; margin-top: 30px; }
.pv { margin: 0; display: grid; gap: 6px; justify-items: center; }
.pv figcaption { font-family: var(--sc); font-size: 13px; letter-spacing: .08em; color: var(--muted); }
.pv-frame { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 6px 16px var(--shadow); }
.pv-frame > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
@media (max-width: 900px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .set-previews { grid-column: 1; grid-row: 1; position: static; margin-top: 18px; grid-auto-flow: column; justify-content: start; overflow-x: auto; padding-bottom: 6px; }
  .settings-grid .settings-main { grid-row: 2; }
  .set-previews .pv-frame { flex: none; }
}

/* сайт: сукно, деревянная шапка, лист */
.pv-site-frame { width: 220px; height: 140px; }
.pv-site { width: 440px; height: 280px; transform: scale(.5); background-color: var(--felt-c); background-image: var(--felt-img, none);
  background-size: 260px 260px; background-blend-mode: multiply; }
.pv-wood { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; background: linear-gradient(180deg, #4A2E1C, #2E1B10); box-shadow: 0 3px 8px rgba(0,0,0,.4); }
.pv-mark { width: 120px; height: 12px; border-radius: 6px; background: #E6CF8F; }
.pv-wood span { display: flex; gap: 8px; margin-left: auto; }
.pv-wood span i { width: 42px; height: 8px; border-radius: 4px; background: rgba(240,220,160,.55); }
.pv-sheet { position: absolute; left: 22px; right: 22px; top: 58px; bottom: 0; padding: 18px 20px; border-radius: 12px 12px 0 0; background: var(--bg);
  box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--frame), 0 8px 18px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 9px; }
.pv-sheet b { width: 55%; height: 18px; border-radius: 4px; background: var(--text); }
.pv-sheet span { height: 8px; border-radius: 4px; background: var(--muted); opacity: .6; }
.pv-sheet span.short { width: 60%; }
.pv-cards { display: flex; gap: 10px; margin-top: 4px; }
.pv-cards i { flex: 1; height: 54px; border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pv-sheet em { width: 110px; height: 22px; border-radius: 999px; background: var(--btn-bg); }

/* цифровой лист: настоящие классы листа, 300×430 → ×0.55 */
.pv-phone-frame { width: 165px; height: 237px; border-radius: 16px; }
.ls.mini-ls { width: 300px; height: 430px; min-height: 0; max-width: none; margin: 0; padding: 10px 16px 12px; gap: 10px; overflow: hidden; transform: scale(.55); }
body[data-bar="felt"] .ls.mini-ls { background-color: var(--felt-c); background-image: radial-gradient(ellipse 130% 100% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%), var(--felt-img, none);
  background-size: 100% 100%, 240px 240px; background-blend-mode: normal, multiply; }
.mini-ls .mini-dial { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.mini-ls .mini-dial svg { height: 100%; max-width: 70%; }
.mini-ls .mini-cnt { position: absolute; top: 0; display: flex; flex-direction: column; gap: 4px; }
.mini-ls .mini-cnt.l { left: 0; } .mini-ls .mini-cnt.r { right: 0; align-items: flex-end; }
.mini-ls .mini-cnt b { font-size: 28px; line-height: 1; font-weight: 800; }
body:not([data-bar="contrast"]) .mini-ls .mini-cnt b { font-family: var(--display); }
.mini-ls .mini-cnt b small { font-size: 14px; color: var(--mid); }
.mini-ls .ls-tabs { height: 46px; }

/* онлайн-стол: настоящие .tb и .tb-body, 560×340 → ×0.4 */
.pv-table-frame { width: 224px; height: 136px; }
.tb.mini-tb { width: 560px; height: 340px; min-height: 0; transform: scale(.4); padding-top: 4px; }
.mini-tb .tb-body { flex: 1; display: flex; gap: 12px; margin: 8px 10px 10px; min-height: 0; }
.mini-tb .mini-map { flex: 1; border-radius: 4px; background: #9a9890 url('/img/felt/default.webp') center / 200px; box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.mini-tb .mini-panel { width: 150px; padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.mini-panel b { height: 14px; width: 70%; border-radius: 4px; background: var(--text, #18130E); opacity: .8; }
.mini-panel span { height: 22px; border-radius: 8px; background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--glass-line); }
.mini-panel span.short { width: 60%; }

/* ======================================================================================================
   СВЕТЛЫЕ СУКНА (body[data-felttone="light"]) и ЧЁТКОСТЬ УЗОРА (body[data-feltsharp], ls_felt_sharp)
   чёткость: поверх рисунка — вуаль цветом сукна (едва, мягко) или второй слой рисунка (чётко)
   ====================================================================================================== */
body[data-felt="sand"] { --felt-c: #C9B78F; }
body[data-felt="sage"] { --felt-c: #A9B79D; }
body[data-felt="sky"] { --felt-c: #AABBCB; }
body[data-felt="rose"] { --felt-c: #C7A79E; }
body { --felt-veil: transparent; --felt-img2: none; --felt-vig: rgba(0,0,0,.5); }
/* светлое сукно: рисунок светлее (по умолчанию под вуалью) и виньетка мягче — иначе сукно серое и грязное */
body[data-felttone="light"] { --felt-vig: rgba(60,40,15,.22); --felt-veil: color-mix(in srgb, var(--felt-c) 45%, transparent); }
body[data-felttone="light"][data-feltsharp="faint"] { --felt-veil: color-mix(in srgb, var(--felt-c) 85%, transparent); }
body[data-felttone="light"][data-feltsharp="soft"] { --felt-veil: color-mix(in srgb, var(--felt-c) 68%, transparent); }
body[data-felttone="light"][data-feltsharp="crisp"] { --felt-veil: color-mix(in srgb, var(--felt-c) 15%, transparent); --felt-img2: none; }
body[data-feltsharp="faint"] { --felt-veil: color-mix(in srgb, var(--felt-c) 78%, transparent); }
body[data-feltsharp="soft"] { --felt-veil: color-mix(in srgb, var(--felt-c) 45%, transparent); }
body[data-feltsharp="crisp"] { --felt-img2: var(--felt-img, none); }

body:not(.bar-mode)::before {
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,230,170,.16) 0%, rgba(255,230,170,0) 70%),
    radial-gradient(ellipse 130% 100% at 50% 30%, rgba(0,0,0,0) 45%, var(--felt-vig) 100%),
    linear-gradient(var(--felt-veil), var(--felt-veil)), var(--felt-img2), var(--felt-img, none);
  background-size: 100% 100%, 100% 100%, 100% 100%, 520px 520px, 520px 520px;
  background-blend-mode: normal, normal, normal, multiply, multiply; }
body.bar-mode[data-bar="felt"]::before {
  background-image: radial-gradient(ellipse 90% 45% at 50% 25%, rgba(255,230,170,.14), rgba(255,230,170,0) 70%),
    radial-gradient(ellipse 130% 100% at 50% 40%, rgba(0,0,0,0) 45%, var(--felt-vig) 100%),
    linear-gradient(var(--felt-veil), var(--felt-veil)), var(--felt-img2), var(--felt-img, none);
  background-size: 100% 100%, 100% 100%, 100% 100%, 320px 320px, 320px 320px;
  background-blend-mode: normal, normal, normal, multiply, multiply; }
.felt, .play-felt { background-image: linear-gradient(var(--felt-veil), var(--felt-veil)), var(--felt-img2), var(--felt-img, none);
  background-size: 100% 100%, 420px 420px, 420px 420px; background-blend-mode: normal, multiply, multiply; }
.th-felt .bd-field { background-image: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,255,255,.07), transparent 75%),
    linear-gradient(var(--felt-veil), var(--felt-veil)), var(--felt-img2), var(--felt-img, none);
  background-size: 100% 100%, 100% 100%, 420px 420px, 420px 420px; background-blend-mode: normal, normal, multiply, multiply; }
.pv-site { background-image: linear-gradient(var(--felt-veil), var(--felt-veil)), var(--felt-img2), var(--felt-img, none);
  background-size: 100% 100%, 260px 260px, 260px 260px; background-blend-mode: normal, multiply, multiply; }
body[data-bar="felt"] .ls.mini-ls { background-image: radial-gradient(ellipse 130% 100% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%),
    linear-gradient(var(--felt-veil), var(--felt-veil)), var(--felt-img2), var(--felt-img, none);
  background-size: 100% 100%, 100% 100%, 240px 240px, 240px 240px; background-blend-mode: normal, normal, multiply, multiply; }
body[data-feltsharp="faint"] .tb-body.has-terrain::before { opacity: .18; }
body[data-feltsharp="soft"] .tb-body.has-terrain::before { opacity: .38; }
body[data-feltsharp="crisp"] .tb-body.has-terrain::before { opacity: .9; mix-blend-mode: overlay; }
/* кнопки чёткости: образец рисунка, приглушённый так же */
.pref-opt[class*="sharp-"] i { background-color: var(--c); background-size: 70px; background-blend-mode: multiply; }
.pref-opt.sharp-faint i { box-shadow: inset 0 0 0 40px color-mix(in srgb, var(--c) 78%, transparent), inset 0 0 0 1px rgba(140,140,140,.55); }
.pref-opt.sharp-soft i { box-shadow: inset 0 0 0 40px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 0 1px rgba(140,140,140,.55); }
.pref-opt.sharp-crisp i { filter: contrast(1.6); }
.pref-opt:disabled { opacity: .45; cursor: not-allowed; }

/* светлое сукно: на нём тёмный текст — вход, комната, подвал, лист «Сукно», доска */
body[data-felttone="light"].on-felt main {
  --text: #18130E; --muted: #3E3428; --gold: #6E4F17; --gold-2: #5A4012; --gold-hi: #8A6527;
  --frame: rgba(60,40,15,.5); --line: rgba(60,40,15,.28); --accent-bg: rgba(60,40,15,.1);
  --btn-bg: #18130E; --btn-fg: #F5EEDD; --btn-hover: #3A2E22; --red: #A4462F; --danger-fg: #A4462F;
  --panel: rgba(255,250,240,.55); --bg-2: rgba(255,250,240,.45); --shadow: rgba(60,40,15,.25); --logo-filter: none; --logo-blend: multiply; }
body[data-felttone="light"].on-felt :is(.title, .landing-lead, .divider, .sec-head, .steps) { text-shadow: none; }
body[data-felttone="light"].on-felt :is(.party, .spread-card) { border-color: rgba(60,40,15,.25); box-shadow: 0 8px 18px rgba(60,40,15,.2); }
body[data-felttone="light"].on-felt .party-new { border-color: rgba(60,40,15,.45); }
body[data-felttone="light"]:not(.bar-mode) .foot { --muted: #2E261C; --text: #18130E; }
body[data-felttone="light"]:not(.bar-mode) .foot img { filter: none; mix-blend-mode: multiply; }
body[data-felttone="light"][data-bar="felt"] :is(.ls, .tv2) { --ink: #18130E; --mid: #4A3D2C; --line: rgba(60,40,15,.3); --card: rgba(255,250,240,.6);
  --invfg: #F5EEDD; --inv-mid: #CDBFA5; --inv-sub: #E6D9BC; --track: rgba(0,0,0,.12); --ring-track: rgba(0,0,0,.12); --ring-ink: #6E4F17;
  --zone: #8A6527; --pip-inv: #CDBFA5; --icon: grayscale(1) contrast(1.2); --icon-inv: grayscale(1) invert(1) sepia(.3); }
body[data-felttone="light"] .th-felt .bd-board { --text: #18130E; --muted: #4A3D2C; }
body[data-felttone="light"] .th-felt .bd-label { fill: #18130E; }
body[data-felttone="light"].on-felt main { --muted: #2E261C; --gold: #5A4012; }
body[data-bar="felt"] .ls-head .ls-k { color: #D9CBAF; }

/* ======================================================================================================
   ШАПКА (body[data-header], ls_header): дерево (как было), чёрное дерево, кожа, сукно, как лист
   РАМКА ЛИСТА (body[data-frame], ls_frame): золотая (как было), двойная, тонкая, без рамки
   ====================================================================================================== */
body[data-header="ebony"]:not(.bar-mode) .top, body[data-header="ebony"] .pv-wood { background: linear-gradient(180deg, #2A1F17 0%, #0E0A07 100%); border-bottom-color: #000; }
body[data-header="leather"]:not(.bar-mode) .top, body[data-header="leather"] .pv-wood {
  background: repeating-linear-gradient(90deg, rgba(230,207,143,.45) 0 6px, transparent 6px 11px) left bottom 5px / 100% 1px no-repeat,
    radial-gradient(ellipse 80% 140% at 50% 0%, #7A3128 0%, #4A1A15 70%, #33110E 100%);
  border-bottom-color: #1E0907; }
body[data-header="felt"]:not(.bar-mode) .top, body[data-header="felt"] .pv-wood {
  background-color: color-mix(in srgb, var(--felt-c) 78%, #000); background-image: var(--felt-img, none);
  background-size: 300px 300px; background-blend-mode: multiply; border-bottom: 2px solid rgba(0,0,0,.45); }
body[data-header="felt"][data-felttone="light"]:not(.bar-mode) .top { --text: #18130E; --muted: #2E261C; --gold: #4A3410; --gold-2: #3A280C;
  --frame: rgba(40,25,5,.5); --accent-bg: rgba(40,25,5,.1); --btn-bg: #18130E; --btn-fg: #F5EEDD; --btn-hover: #3A2E22; }
/* как лист: шапка того же цвета, что страница, и те же цвета текста и кнопок */
body[data-header="sheet"]:not(.bar-mode) .top {
  --text: inherit; --muted: inherit; --gold: inherit; --gold-2: inherit; --gold-hi: inherit; --frame: inherit; --line: inherit;
  --accent-bg: inherit; --btn-bg: inherit; --btn-fg: inherit; --btn-hover: inherit;
  background: var(--header-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
body[data-header="sheet"] .pv-wood { background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
body[data-header="sheet"] .pv-mark { background: var(--gold); }
body[data-header="sheet"] .pv-wood span i { background: var(--muted); opacity: .6; }

/* рамка листа */
body[data-frame="double"]:not(.bar-mode):not(.tb-wide):not(.bd-embed):not(.on-felt) main {
  box-shadow: inset 0 0 0 8px var(--bg), inset 0 0 0 9px var(--frame), inset 0 0 0 12px var(--bg), inset 0 0 0 13px var(--frame),
    0 2px 2px rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.4), 0 46px 70px rgba(0,0,0,.28); }
body[data-frame="thin"]:not(.bar-mode):not(.tb-wide):not(.bd-embed):not(.on-felt) main {
  box-shadow: inset 0 0 0 9px var(--bg), inset 0 0 0 10px var(--line), 0 2px 2px rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.4), 0 46px 70px rgba(0,0,0,.28); }
body[data-frame="none"]:not(.bar-mode):not(.tb-wide):not(.bd-embed):not(.on-felt) main {
  box-shadow: 0 2px 2px rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.4), 0 46px 70px rgba(0,0,0,.28); }
/* карта «Присоединиться» на входе и лист в миниатюре — той же рамкой */
body.on-felt[data-frame="double"] .landing-card[data-theme="light"] { box-shadow: inset 0 0 0 9px var(--panel), inset 0 0 0 10px #A8823A, inset 0 0 0 13px var(--panel), inset 0 0 0 14px #A8823A,
  0 2px 2px rgba(0,0,0,.4), 0 18px 24px rgba(0,0,0,.4), 0 40px 60px rgba(0,0,0,.3); }
body.on-felt[data-frame="thin"] .landing-card[data-theme="light"] { box-shadow: inset 0 0 0 10px var(--panel), inset 0 0 0 11px #D9C9A3,
  0 2px 2px rgba(0,0,0,.4), 0 18px 24px rgba(0,0,0,.4), 0 40px 60px rgba(0,0,0,.3); }
body.on-felt[data-frame="none"] .landing-card[data-theme="light"] { box-shadow: 0 2px 2px rgba(0,0,0,.4), 0 18px 24px rgba(0,0,0,.4), 0 40px 60px rgba(0,0,0,.3); }
body[data-frame="double"] .pv-sheet { box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--frame), inset 0 0 0 8px var(--bg), inset 0 0 0 9px var(--frame), 0 8px 18px rgba(0,0,0,.4); }
body[data-frame="thin"] .pv-sheet { box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--line), 0 8px 18px rgba(0,0,0,.4); }
body[data-frame="none"] .pv-sheet { box-shadow: 0 8px 18px rgba(0,0,0,.4); }
/* образцы на кнопках */
.pref-header-felt i { background-color: color-mix(in srgb, var(--felt-c) 78%, #000); background-image: var(--felt-img, none); background-size: 80px; background-blend-mode: multiply; }
.pref-header-leather i { background: radial-gradient(circle at 40% 30%, #7A3128, #33110E); }
.pref-frame-gold i { background: #F5EEDD; box-shadow: inset 0 0 0 5px #F5EEDD, inset 0 0 0 7px #A8823A; }
.pref-frame-double i { background: #F5EEDD; box-shadow: inset 0 0 0 4px #F5EEDD, inset 0 0 0 5px #8A6527, inset 0 0 0 8px #F5EEDD, inset 0 0 0 9px #8A6527; }
.pref-frame-thin i { background: #F5EEDD; box-shadow: inset 0 0 0 5px #F5EEDD, inset 0 0 0 6px #D9C9A3; }
.pref-frame-none i { background: #F5EEDD; box-shadow: inset 0 0 0 1px rgba(140,140,140,.55); }

/* ---------- ещё сукна: тёмные пурпур, морская волна, олива, индиго; светлые лимон, лаванда, мята, персик ---------- */
body[data-felt="purple"] { --felt-c: #3D2147; }
body[data-felt="teal"] { --felt-c: #1C3F42; }
body[data-felt="olive"] { --felt-c: #3B3E1F; }
body[data-felt="indigo"] { --felt-c: #23244F; }
body[data-felt="lemon"] { --felt-c: #D9CF85; }
body[data-felt="lavender"] { --felt-c: #B8AECB; }
body[data-felt="mint"] { --felt-c: #A6CBB9; }
body[data-felt="peach"] { --felt-c: #D8B292; }

/* ======================================================================================================
   ТЕКСТУРА БОРТА (body[data-tabletex], ls_table_tex): орех (как было), дуб, красное дерево, эбен, мрамор —
   борт онлайн-стола и рамка экрана на ТВ
   ====================================================================================================== */
.tv2 { --wood: #6b4528; --wood-2: #3e2614; }
body[data-tabletex="oak"] :is(.tb, .tv2) { --wood: #A57A48; --wood-2: #6E4B2A; }
body[data-tabletex="mahogany"] :is(.tb, .tv2) { --wood: #6E2A1C; --wood-2: #3A120A; }
body[data-tabletex="ebony"] :is(.tb, .tv2) { --wood: #2A1F17; --wood-2: #0E0A07; }
body[data-tabletex="marble"] :is(.tb, .tv2) { --wood: #9A968F; --wood-2: #55524D; }
/* мрамор: вместо волокон дерева — прожилки */
body[data-tabletex="marble"] .tb-body {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.10), transparent 62%) padding-box,
    radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-2) 100%) padding-box,
    linear-gradient(125deg, transparent 0 30%, rgba(255,255,255,.35) 31%, transparent 33% 60%, rgba(40,40,40,.25) 61%, transparent 63%) border-box,
    linear-gradient(35deg, transparent 0 45%, rgba(255,255,255,.25) 46%, transparent 48%) border-box,
    linear-gradient(160deg, var(--wood) 0%, var(--wood-2) 55%, var(--wood) 100%) border-box; }
/* ТВ: борт стола рамкой по краю экрана */
body.bar-tv .tv2::before { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; padding: calc(16 * var(--p));
  background: repeating-linear-gradient(100deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px, rgba(255,255,255,.05) 9px 10px, transparent 10px 17px),
    linear-gradient(160deg, var(--wood) 0%, var(--wood-2) 55%, var(--wood) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
body.bar-tv[data-tabletex="marble"] .tv2::before {
  background: linear-gradient(125deg, transparent 0 30%, rgba(255,255,255,.35) 31%, transparent 33% 60%, rgba(40,40,40,.25) 61%, transparent 63%),
    linear-gradient(160deg, var(--wood) 0%, var(--wood-2) 55%, var(--wood) 100%); }
/* ТВ в стиле «Сукно»: сукно с рисунком под экраном видно (как у листа) */
body[data-bar="felt"] .tv2 { background: transparent; }
.pref-tabletex-marble i { background: linear-gradient(125deg, #8E8A84 0 40%, #D8D4CE 42%, #8E8A84 46% 70%, #55524D 72%, #8E8A84 74%); }
.pref-tabletex-oak i, .pref-tabletex-walnut i, .pref-tabletex-mahogany i, .pref-tabletex-ebony i {
  background-image: repeating-linear-gradient(100deg, rgba(0,0,0,.2) 0 2px, transparent 2px 6px); }
body.bar-tv .tv2.m-fight { box-shadow: inset 0 0 0 calc(26 * var(--p)) var(--ink); }   /* рамка боя — внутри борта */

/* сукно едет вместе со страницей (неподвижный фон отвлекал): слой на всю высоту body, а не на экран;
   свет лампы — только у верха страницы, затемнение краёв — по бокам */
body:not(.bar-mode) { position: relative; }
body:not(.bar-mode)::before { position: absolute; inset: 0;
  background-size: 100% 100vh, 100% 100%, 100% 100%, 520px 520px, 520px 520px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat; }