/* ANTIGEN · новый клиент. Одежда взята из прототипа v2 — «Свет фонаря».
 *
 * ПОЧЕМУ НЕ КОПИЯ. Стилей v2 — 1292 строки под другую разметку, и часть
 * их ссылалась на токены, которых никто не объявил: аудит нашёл 77 таких
 * ссылок на 18 имён, из них 20 без запасного значения — панель просто
 * исчезала, оставался голый текст. Владелец увидел это как «Низина
 * совершенно не заметна». Копировать такое нельзя, и копипаст запрещён
 * решением 28 августа. Здесь тот же язык, написанный заново под классы
 * нового клиента: каждый токен объявлен ровно один раз и ниже применён.
 *
 * ПАЛИТРА СНЯТА ПИПЕТКОЙ С НАШИХ ПЕРСОНАЖЕЙ (Р-123): /art/promo/cover.jpg
 * и /art/bg/shelter.jpg. Контраст фона с самым тёмным существом 3,85.
 *
 * ТРИ МАТЕРИАЛА И НИ ОДНИМ БОЛЬШЕ (К9): ДОСКА — оправа и вкладки;
 * ЛАТУНЬ — кант, кнопка, медальоны; ПЕРГАМЕНТ — таблички и подсказки.
 *
 * ЯРКОЕ ПРИНАДЛЕЖИТ СУЩЕСТВУ (К1). Конструктивная латунь тёмная
 * и приглушённая; горящее золото оставлено за двумя объектами кадра —
 * главной кнопкой и активным состоянием.
 */
:root {
  --night:#1B1226;    /* свет фонаря: фон лавки                     */
  --shelf:#2E2438;    /* доски полки                                */
  --nook:#191322;     /* тень в глубине; брус вкладок               */
  --void:#16111E;     /* поле вокруг макета                         */
  --lamp:#D89C42;     /* латунь и ореол лампы — главное действие    */
  --lampLit:#F6D08A;  /* сердцевина пламени: блик, губа             */
  --lampTop:#E0A950;
  --lampBot:#B7802F;
  --lampDeep:#6E4718;
  --lampInk:#2A1A08;  /* надпись на кнопке, 7,0:1 к латуни          */
  --paper:#F0E4CE;    /* кремовый живот существ — основной текст    */
  --mauve:#B9A6C0;    /* лиловая шерсть — второстепенный текст      */
  --dusk:#8B7896;     /* тень между полками — третичный текст       */
  --moss:#7FB07F;     /* мох на полках — доброе                     */
  --clay:#C4665C;     /* обожжённые горшки — беда                   */
  --brass:#9A7742;    /* тело канта                                 */
  --brassDeep:#33240F;/* канавка под кантом                         */
  --parch:#D2BD91;    /* пергамент таблички                         */
  --parchInk:#3B2A17; /* надпись на пергаменте, 7,5:1               */

  /* Кант турецкой школы: витьё как ТЕКСТУРА (прозрачные нити),
     форму держит фаска — свет сверху-слева, канавка справа-снизу.
     Чистый полосатый градиент в полную силу читался парикмахерским
     столбом и был ярчайшим пятном кадра. */
  --rope:
    repeating-linear-gradient(118deg,rgba(255,228,175,.15) 0 1.5px,
      rgba(0,0,0,.2) 1.5px 4px,rgba(0,0,0,.04) 4px 6.5px),
    linear-gradient(158deg,#8B6A34 0%,#6A4E25 34%,#43300F 64%,#7A5B2A 100%);
  /* Заклёпки по углам оправы — четырьмя radial-gradient, без единого
     лишнего элемента в разметке. */
  --rivets:
    radial-gradient(circle at 10px 10px,#E8CE96 0 2px,rgba(0,0,0,.5) 2px 3px,transparent 3px),
    radial-gradient(circle at calc(100% - 10px) 10px,#E8CE96 0 2px,rgba(0,0,0,.5) 2px 3px,transparent 3px),
    radial-gradient(circle at 10px calc(100% - 10px),#E8CE96 0 2px,rgba(0,0,0,.5) 2px 3px,transparent 3px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#E8CE96 0 2px,rgba(0,0,0,.5) 2px 3px,transparent 3px);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* Веб-шрифтов в проекте нет и не будет: берём самый широкий
     из системных, недостающую массу добираем обводкой в .имя. */
  --fat:"Arial Black","Arial Bold","Helvetica Neue",-apple-system,
        BlinkMacSystemFont,Roboto,sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; background:var(--void); color:var(--paper);
  font:15px/1.45 var(--sans); }
/* Оболочка ровно в экран: вкладки внизу всегда на месте, а содержимое
   при нужде прокручивается ВНУТРИ, а не уносит их за край. Прежде
   колонка росла от содержимого, и главная страница вылезала за экран.

   РОСТ БЕРЁТСЯ ИЗ ПЕРЕМЕННОЙ, А НЕ ИЗ `100dvh` (владелец, 31 августа:
   «вкладки не появляются на экране, они внизу»). В Телеграме вебвью
   высотой во весь экран, а видна только часть выше края шторки: `dvh`
   мерит вебвью, и брус вкладок вставал под нижний край телефона.
   Число называет сам Телеграм, ставит его `/tgview.js`; `100dvh`
   остаётся запасным — в обычном браузере он и верен. */
.app { max-width:560px; margin:0 auto; height:var(--окно, 100dvh); background:var(--night);
  display:flex; flex-direction:column; overflow-x:hidden; }

/* ---------- шапка ---------- */
/* ЗАГОЛОВОК ЭКРАНА — ПОСЕРЕДИНЕ (общее правило, владелец 28 августа):
   прижатый влево, он сливался со стрелкой «назад» и читался как её
   подпись. Сетка из трёх колонок: стрелка слева, кошелёк справа,
   название ровно по центру и не съезжает от их ширины. */
.top { display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center; gap:10px; padding:10px 12px;
  background:linear-gradient(180deg,#241A30,#1B1226);
  border-bottom:2px solid var(--brassDeep);
  box-shadow:0 1px 0 rgba(232,206,150,.15) inset; }
.top .back { background:none; border:0; color:var(--lamp); cursor:pointer;
  font:900 24px/1 var(--sans); padding:0 4px; justify-self:start; }
/* Место стрелки занято всегда: без неё название прыгало бы влево
   при переходе со вкладки на экран. */
.top .back[hidden] { display:block; visibility:hidden; }
.top .who { text-align:center; font:800 14px/1.1 var(--fat); color:var(--lamp);
  letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Валюта — капсула, из которой иконка ВЫЛЕЗАЕТ за край: турецкий
   стандарт, а не украшение. */
/* ДВЕ ВАЛЮТЫ В РЯД. Ширина шапки конечна, и вторая капсула не должна
   выдавливать имя питомника: обе сжимаются, а не переносятся. */
.кошели { display:flex; align-items:center; gap:6px; justify-self:end; }
/* Эссенция тише корма: корм тратится каждым тапом и потому кричит,
   эссенция копится неделями. Разный вес — это подсказка о ритме,
   а не украшение. */
.эссенция { padding-left:18px; font-size:14px; }
.эссенция .знак-эссенции { font-style:normal; font-size:15px;
  position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  color:var(--lampLit); }
/* ИСКРЫ ТРЕТЬИМ КОШЕЛЬКОМ (владелец, 31 августа). Тем же весом, что
   эссенция: обе копятся неделями, обе участвуют в решении «идти
   ли в лавку», и обе тише корма, который тратится каждым тапом.

   Три кошелька в ряд помещаются только сжатыми: отступы и кегль
   у тихой пары меньше, а имя питомника рядом ужимается многоточием
   (`minmax(0,1fr)` в сетке шапки) — оно длинное и потерпит. */
.искры { padding-left:18px; font-size:14px; }
.искры .знак-искр { font-style:normal; font-size:15px;
  position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  color:var(--lamp); }
.кошели .purse { padding-left:20px; padding-right:11px; }

.purse { display:flex; align-items:center; gap:8px; padding:5px 14px 5px 22px;
  border-radius:999px; position:relative; font:900 16px/1 var(--fat);
  background:linear-gradient(180deg,#3A2C42,#241A30);
  box-shadow:0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.18);
  outline:1px solid rgba(154,119,66,.5); }
/* ЗНАК КОРМА — МИСКА (владелец, 29 августа: «иконка еды на макетах лучше
   чем на сервере»). Была картинка `/art/icons/slop.png` — зелёная горка,
   которую читали как что угодно, кроме еды. Миска говорит сама за себя
   и не требует ни файла, ни загрузки. */
.знак-корма { font-style:normal; font-size:17px; line-height:1;
  position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)); }

main { flex:1 1 auto; min-height:0; padding:12px 12px 18px; min-width:0;
  overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; }

/* ---------- вкладки: брус со значками ----------
 * Как в v2: подсвеченное ребро сверху, латунная канавка под ним,
 * значок предметом из /art/ubor/. Активная вкладка — единственное
 * место кадра, кроме главной кнопки, где горит золото. */
/* `hidden` не действует на элемент с явным `display`. Правило «закрытый
   экран забирает кадр целиком» было объявлено в коде и не исполнялось
   именно поэтому: вкладки на Пороге не гасли ни разу. */
.tabs[hidden], .top[hidden] { display:none !important; }
.tabs { display:flex; position:sticky; bottom:0; z-index:5;
  padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(180deg,#3A2C40 0 2px,#251D30 3px,var(--nook));
  box-shadow:0 -2px 0 var(--brass), 0 -3px 0 var(--brassDeep),
             0 -10px 18px rgba(0,0,0,.5); }
.tabs button { flex:1; background:none; border:0; cursor:pointer;
  padding:8px 2px 10px; color:var(--dusk); font:700 10.5px/1.2 var(--sans);
  position:relative; }
/* БАБЛ НА ВКЛАДКЕ: сколько дел ждёт за дверью (12 сентября).
 *
 * Красный, а не латунный, и это нарочно. Латунь в этом кадре значит
 * «главное действие» — ею горит активная вкладка и главная кнопка;
 * ещё одно латунное пятно спорило бы с ними за взгляд. Красный здесь
 * не тревога, а единственный цвет, который в палитре больше ничего
 * не значит и потому читается как отметка.
 *
 * Стоит НАД значком и правее, частично на нём: так он не раздвигает
 * брус (его высоту задаёт значок с подписью) и не может уехать
 * за край — крайние вкладки прижаты, а бабл внутри кнопки. */
.tabs button { position:relative; }
.бабл { position:absolute; top:4px; left:calc(50% + 8px);
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:linear-gradient(180deg,#D4645B,#A84A42);
  color:#FFF1EC; font:900 11px/17px "Helvetica Neue",var(--sans);
  text-align:center; font-style:normal; letter-spacing:0;
  box-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 0 2px var(--nook); }
.ti { display:block; width:30px; height:30px; margin:0 auto 3px;
  background:center/contain no-repeat; opacity:.5; filter:grayscale(.55); }
/* ЗНАЧКИ ВКЛАДОК — СВОИ ФАЙЛЫ ПОД СВОЙ РАЗМЕР (10 сентября, П-3).
   Здесь стояли три листа Убранства как есть: yard_lantern.png 38 КБ,
   fair_flag.png 28 КБ, fair_cap.png 43 КБ — сто девять килобайт PNG,
   которые рисовались в квадрате 30×30 точек. По замеру загрузки это
   была пятая часть всего первого захода.
   Те же картинки, ужатые под 90 точек (тройная плотность экрана)
   и переведённые в webp, весят 7,7 КБ на троих. Видимой разницы нет:
   исходники и так уменьшались браузером в двадцать раз. */
.ti-pen { background-image:url(/art/icons/tab-yard_lantern.webp); }
.ti-world { background-image:url(/art/icons/tab-fair_flag.webp); }
.ti-folk { background-image:url(/art/icons/tab-fair_cap.webp); }
.tabs button.on { color:var(--lampLit); text-shadow:0 1px 3px rgba(0,0,0,.7); }
.tabs button.on .ti { opacity:1; filter:drop-shadow(0 0 7px rgba(246,208,138,.5)); }

/* ---------- панель: доска в оправе ---------- */
/* У панели есть материал и толщина: кант, фаска, внутренняя тень,
   заклёпки по углам. Не заливка. */
.сцена, .поле, .полка, .заявка, .лог, .намёк, .весть, .беда, .пусто,
.карточка, .порог, .счёт {
  border-radius:18px;
}
.сцена {
  position:relative; padding:11px; margin-bottom:12px;
  background:var(--rivets), var(--rope);
  box-shadow:0 6px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,228,175,.2);
  text-align:center;
}
.сцена .герой { width:100%; max-width:100%; height:auto; max-height:46dvh;
  object-fit:contain; cursor:pointer; border-radius:12px; display:block; margin:0 auto;
  background:radial-gradient(120% 90% at 50% 30%,#3B2F45,#1E1729);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
/* Пергаментная бирка с именем наполовину вылезает из рамы вниз. */
.сцена .имя {
  position:relative; margin:-14px auto -4px; width:max-content; max-width:88%;
  padding:7px 20px; border-radius:12px;
  background:linear-gradient(180deg,#E4D3A9,var(--parch));
  color:var(--parchInk); font:900 15px/1 var(--fat);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- места в питомнике ---------- */
.места { display:flex; gap:8px; margin:14px 0 0; overflow-x:auto;
  scrollbar-width:none; padding-bottom:4px; }
.места::-webkit-scrollbar { display:none; }
.место { width:66px; flex:none; border:0; cursor:pointer; border-radius:16px;
  padding:7px 4px 8px; position:relative; color:var(--paper);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.место.на { background:linear-gradient(180deg,#4B3A46,#332538);
  outline:2px solid var(--lamp); }
/* ОДНО ПРАВИЛО КАДРА НА ВСЕ АВАТАРЫ (владелец, 31 августа: «существо
   почти не видно»).

   Портрет — квадрат 1024×1024, существо в полный рост по центру,
   с полями сверху и снизу. В кружке 40×40 стояла подгонка руками:
   `width:158%` и сдвиг вниз на 6px. В круг попадала верхняя треть
   кадра — голова вместе со всем фоном вокруг неё, и существо занимало
   едва четверть кружка.

   Хуже было то, что таких подгонок в игре стояло ТРИ разных и ни одна
   не согласована с прочими: кружок ручными процентами, лицо боя
   и малыш в яслях — честным `cover`, который вписывает квадрат
   в квадрат один к одному, то есть показывает портрет ЦЕЛИКОМ вместе
   с полями.

   Теперь правило одно, а мера у каждого места своя — двумя
   переменными:
     `--фокус`    куда смотреть по высоте кадра;
     `--крупно`   насколько выйти за края, чтобы поля ушли из виду.

   Голова у портрета в полный рост приходится примерно на четверть
   высоты, отсюда 28% по умолчанию: чуть ниже макушки, чтобы в кадр
   попали глаза и пасть, а не темя. */
.морда img { width:100%; height:100%; display:block; max-width:none;
  object-fit:cover; object-position:50% var(--фокус,28%);
  transform:scale(var(--крупно,1.35)); transform-origin:50% var(--фокус,28%); }

.место .лицо { width:52px; height:52px; border-radius:50%; flex:none;
  overflow:hidden; background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 2px rgba(154,119,66,.6); }
/* Кружок вырос с 40 до 52: сорок точек на телефоне меньше ногтя,
   и там не разглядеть ничего при любом кадрировании. */
.место b { display:block; max-width:100%; font:800 10.5px/1.1 var(--sans);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.место.свободно { background:none; opacity:.75;
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.45); }
.место.свободно .лицо { background:rgba(255,255,255,.04); box-shadow:none; }

/* ---------- кнопка: предмет с губой и просадкой ---------- */
/* КНОПКА НЕ РАСТЁТ В ВЫСОТУ (владелец, 28 августа: «очень высокая
   кнопка вскрытия, она растёт от размера экрана»).
   Здесь стояло `flex:1 1 0` — задумано для РЯДА, где кнопки делят
   ширину. Но `main` — колонка, и та же строка означала «расти
   в высоту»: одинокая кнопка занимала весь остаток экрана.
   Делёж ширины оставлен ряду, где он и нужен. */
.кнопка { flex:0 0 auto; min-width:0; border:0; cursor:pointer;
  border-radius:16px; padding:14px 14px 17px; position:relative;
  color:var(--lampInk); font:900 16px/1.1 var(--fat);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:linear-gradient(180deg,var(--lampTop),var(--lampBot));
  box-shadow:0 4px 0 var(--lampDeep), 0 6px 10px rgba(0,0,0,.45),
             inset 0 1px 0 var(--lampLit);
  transition:transform .06s, box-shadow .06s; }
.кнопка:active { transform:translateY(3px);
  box-shadow:0 1px 0 var(--lampDeep), inset 0 1px 0 var(--lampLit); }
.кнопка small { font:700 11px/1.25 var(--sans); opacity:.78; }
.кнопка b { font:900 15px/1 var(--fat); }
.кнопка.мал { flex:0 0 auto; font-size:14px; padding:14px 13px 17px; }
.кнопка.главная { font-size:18px; }
/* Кнопка действия внизу экрана: небольшая и приклеенная к нижнему ряду.
   Она и так заметна — золото на тёмном, — и расти ей незачем. */
.кнопка.широкая { width:100%; margin-top:12px; padding:12px 14px 14px;
  font-size:15px; position:sticky; bottom:8px; z-index:4; }
/* Отказ — та же кнопка, но из доски: она ведёт туда, где берут корм,
   и потому обязана оставаться живой, а не гаснуть. */
.кнопка.беднота { color:var(--paper);
  background:linear-gradient(180deg,#3A2C42,#241A30);
  box-shadow:0 4px 0 #140E1C, inset 0 1px 0 rgba(232,206,150,.16); }
.действия { display:flex; gap:8px; align-items:stretch; margin-top:14px; }
.действия .кнопка, .acts-half .кнопка { flex:1 1 0; }
/* ПАРА «Покормить ×5» — одно тело, а не две кнопки ряда.
 * Место ряда делит пара целиком; внутри «×5» занимает столько,
 * сколько нужно, и стыкуется с левой половиной без зазора.
 *
 * ИМЯ СВОЁ: `пара` в бою — это строка «мой против чужого», сетка
 * из трёх колонок. Держалось оно только на большей точности селектора
 * `.действия .пара`, то есть на случайности: вынести кнопки из ряда —
 * и они получили бы боевую сетку. */
.пара-кнопок { display:flex; flex:1 1 0; min-width:0; align-items:stretch; }
.пара-кнопок > .кнопка { flex:1 1 auto; border-radius:16px 3px 3px 16px; }
.пара-кнопок > .кнопка.мал { flex:0 0 auto; padding-left:13px; padding-right:13px;
  border-radius:3px 16px 16px 3px; margin-left:3px; }

/* ---------- поле коконов ---------- */
.поле { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px;
  padding:11px; background:var(--rivets), var(--rope);
  box-shadow:0 6px 0 rgba(0,0,0,.4), inset 0 2px 0 rgba(255,228,175,.2); }
/* КОКОН — ПРЕДМЕТ В ЛУНКЕ, как в прототипе v2. Слои: лунка, контактная
   тень, само яйцо картинкой по ступени, латунная бирка с числом. */
.кокон { aspect-ratio:1; border-radius:13px; cursor:pointer; position:relative;
  display:grid; place-items:center; isolation:isolate;
  background:linear-gradient(180deg,#3A2D46,#221A2E 55%,#191322);
  box-shadow:inset 0 1.5px 0 rgba(228,194,136,.26), inset 0 -6px 10px rgba(0,0,0,.5),
             0 0 0 1px #120C1C, 0 3px 0 #130D1D, 0 5px 8px rgba(0,0,0,.45);
  transition:transform .08s, box-shadow .12s; }
/* Пустая лунка: вдавленная, без предмета и без нажатия. */
.кокон.пусто-клетка { cursor:default;
  background:radial-gradient(ellipse 54% 34% at 50% 62%,rgba(0,0,0,.4),transparent 78%),
             linear-gradient(180deg,#150F20,#221A2E);
  box-shadow:inset 0 4px 9px rgba(0,0,0,.8), inset 0 -1.5px 0 rgba(228,194,136,.12),
             0 0 0 1px rgba(0,0,0,.5); }
/* Контактная тень: без неё кокон висит, с ней лежит. */
.гнездо { position:absolute; left:50%; bottom:9%; width:56%; height:9%;
  transform:translateX(-50%); border-radius:50%; background:rgba(0,0,0,.62);
  filter:blur(3px); z-index:0; pointer-events:none; }
/* Масштаб 132% и маска по краю яйца — числа из v2: при contain яйцо вышло
   бы 56% клетки при норме 78%, а маска снимает холодный ореол запечённой
   виньетки. */
.яйцо { position:absolute; inset:2%; background-position:center;
  background-size:132% auto; background-repeat:no-repeat;
  mix-blend-mode:lighten; pointer-events:none; z-index:1;
  -webkit-mask-image:radial-gradient(ellipse 46% 49% at 50% 48.5%,#000 92%,transparent 100%);
          mask-image:radial-gradient(ellipse 46% 49% at 50% 48.5%,#000 92%,transparent 100%); }
.t1 .яйцо { background-image:url(/art/cocoons/t1.webp); }
.t2 .яйцо { background-image:url(/art/cocoons/t2.webp); }
.t3 .яйцо { background-image:url(/art/cocoons/t3.webp); }
.t4 .яйцо { background-image:url(/art/cocoons/t4.webp); }
.t5 .яйцо { background-image:url(/art/cocoons/t5.webp); }
.t6 .яйцо { background-image:url(/art/cocoons/t6.webp); }
.t7 .яйцо { background-image:url(/art/cocoons/t7.webp); }
/* Число ступени обязательно всегда: размером различимы 2,4 градации
   из десяти — форма цифру не заменяет. Стоит на латунной бирке:
   это ярлык на предмете, а не подпись под ним. */
/* БИРКА ТИРА НА КОКОНЕ. Называлась `.ступень` — тем же словом, что
   ступенька лестницы захода, и правила двух разных вещей перекрывали
   друг друга: бирка отдавала лестнице `position:absolute`, лестница
   бирке — `flex`. На лестнице сезона это же столкновение спрятало
   тридцать строк целиком (владелец, 31 августа). */
.бирка-тира { position:absolute; left:3px; bottom:3px; z-index:3;
  font:900 10.5px/1 var(--fat); font-variant-numeric:tabular-nums;
  color:#FBE9C4; background:linear-gradient(180deg,#4A3520,#241705);
  border-radius:7px; padding:2.5px 4.5px;
  box-shadow:0 0 0 1px rgba(228,194,136,.4), 0 1px 2px rgba(0,0,0,.7); }
.кокон.выбран { transform:scale(1.06); z-index:2;
  box-shadow:0 0 0 2.5px var(--lampLit), 0 0 14px rgba(246,208,138,.5),
             inset 0 1.5px 0 rgba(255,255,255,.3), 0 6px 14px rgba(0,0,0,.55); }
.кокон.парный { box-shadow:0 0 0 2px rgba(246,208,138,.55),
             inset 0 1.5px 0 rgba(228,194,136,.26), 0 3px 0 #130D1D; }
/* МЕТКА — ПЛАШКА НА КОКОНЕ, а её место на клетке = часть тела.
   Плашка 17 px, глиф 11 px: анатомический адрес меняет задачу с
   «опознать один из восьми» на «подтвердить ожидаемый», и две метки
   на клетке перестают спорить. Плашка с фаской — она ЛЕЖИТ на коконе,
   а не напечатана на нём. */
.мк { position:absolute; width:17px; height:17px; border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#FFFBF0,var(--paper) 55%,#C6B28F);
  color:#241B12; display:grid; place-items:center; z-index:3;
  font-size:11px; line-height:1;
  box-shadow:0 0 0 1.5px rgba(10,7,16,.85), inset 0 -1px 2px rgba(120,100,70,.5),
             0 2px 3px rgba(0,0,0,.6); }
/* Форма говорит редкость и читается без цвета. */
.мк.rare { border-radius:5px; }
.мк.anomaly { border-radius:3px; transform:rotate(45deg); }
.мк.anomaly span { display:block; transform:rotate(-45deg); }
.мк.сломана { background:linear-gradient(180deg,#9C89A6,#6E5C79); color:#1B1522;
  border-radius:7px; top:41%; left:50%; margin-left:-8.5px;
  box-shadow:0 0 0 1.5px rgba(196,102,92,.5), 0 2px 3px rgba(0,0,0,.6); }
/* Глиф не перехватывает наведение: подсказка принадлежит плашке,
   и курсор не должен проваливаться сквозь рисунок. */
.мк svg { width:11px; height:11px; display:block; fill:currentColor;
  pointer-events:none; }
.мк span { pointer-events:none; }
.мк svg.line { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
/* Анатомические адреса: метка стоит там, где признак сидит. */
.мк.extra { top:3%; left:50%; margin-left:-8.5px; }
.мк.ears  { top:9%; left:7%; }
.мк.coat  { top:9%; right:7%; }
.мк.eyes  { top:30%; left:50%; margin-left:-8.5px; }
.мк.mouth { top:52%; left:50%; margin-left:-8.5px; }
.мк.limbs { bottom:5%; left:50%; margin-left:-8.5px; }
.мк.tail  { bottom:20%; right:4%; }
.мк.body  { bottom:20%; left:4%; }

/* ---------- таблички: пергамент ---------- */
.намёк, .пусто, .весть, .беда, .счёт, .служебно {
  padding:10px 13px; margin-top:12px; font-size:13px; }
.намёк, .пусто, .счёт { background:linear-gradient(180deg,#2A2136,#221A2E);
  color:var(--mauve); box-shadow:inset 0 1px 0 rgba(232,206,150,.1); }
.весть { background:linear-gradient(180deg,#E4D3A9,var(--parch));
  color:var(--parchInk); font-weight:700;
  box-shadow:0 3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.беда { background:rgba(196,102,92,.16); color:var(--clay);
  box-shadow:inset 0 0 0 1px rgba(196,102,92,.35); }
.тихо { color:var(--dusk); font-size:12px; }
.служебно { position:fixed; left:0; right:0; bottom:58px; max-width:560px;
  margin:0 auto; text-align:center; color:var(--dusk); background:none; }

/* ---------- разделы и строки ---------- */
.раздел { font:800 12px/1 var(--fat); letter-spacing:.08em;
  text-transform:uppercase; color:var(--brass); margin:18px 0 8px; }
/* ПОДПИСЬ ПОД ЗАГОЛОВКОМ, А НЕ В СТРОКУ С НИМ (UI-40, 5 сентября).
   Заголовок набран прописными с разрядкой, и вложенная подпись
   наследовала и то и другое: «МАТЕРИАЛЫ ОДИНАКОВЫЕ ЛЕЖАТ В ОДНОМ
   СЛОТЕ» читалось одной кашей вместо заголовка и пояснения к нему. */
.раздел .тихо { display:block; margin-top:4px; text-transform:none;
  letter-spacing:0; font:700 10.5px/1.35 var(--sans); color:var(--mauve); }
.заявка { background:linear-gradient(180deg,var(--shelf),#241A30);
  padding:11px 13px; margin-bottom:8px; display:flex; flex-wrap:wrap;
  gap:6px 10px; align-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.заявка b { font:900 14px/1 var(--fat); }
.заявка .кнопка { margin-left:auto; }
.заявка .срок { font-variant-numeric:tabular-nums; cursor:help; }
.итог-боя { border-radius:14px; padding:12px 14px; margin-top:12px;
  font:900 16px/1.2 var(--fat); text-align:center; }
.итог-боя.победа { background:rgba(120,180,90,.18); color:var(--lampLit); }
.итог-боя.поражение { background:rgba(0,0,0,.3); color:var(--clay); }
.заявка.своя { flex-direction:column; align-items:stretch; }
.цели { display:flex; flex-wrap:wrap; gap:6px; }

/* ---------- «ПЕРВАЯ НЕДЕЛЯ» (Р-236, Р-260) ----------
   Тот же сарай и тот же луч, что на Пороге и во Дворе: три экрана
   первого часа игры должны выглядеть одним местом, а не тремя. */
/* Высота — по оставшемуся месту, а не 100dvh: у Порога шапки и вкладок
   нет, а здесь есть, и сцена в целый экран уводила нижнюю кнопку
   за край — на снимке живой игры её просто не было видно. */
.сцена-недели { position:relative; flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; margin:-12px; }
.фон-недели { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.42) saturate(.85); }
.сцена-недели::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 85% 55% at 50% 22%,transparent 20%,rgba(9,6,14,.86) 100%); }
.луч-недели { position:absolute; left:50%; top:-150px; width:300px; height:290px;
  transform:translateX(-50%); pointer-events:none; filter:blur(8px);
  background:conic-gradient(from 166deg at 50% 0, transparent 0deg,
    rgba(246,208,138,.34) 7deg, rgba(246,208,138,.34) 21deg, transparent 28deg); }
/* СОДЕРЖИМОЕ ПРОКРУЧИВАЕТСЯ, ФОН СТОИТ (11 сентября).
   Сцена клипует всё, что не влезло (`overflow:hidden` — иначе фон
   вылезал бы за края), и прокрутки у экрана не было вовсе. При семи
   плитками призов, карточке приза и полосе проводника сверху кнопка
   «Забрать подарок» уходила под брус вкладок — и достать её было
   нечем. Прокручиваем нутро, а не сцену: фон лежит под ним
   `position:absolute` и должен остаться на месте. */
.нутро-недели { position:relative; z-index:3; flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column; padding:26px 18px 20px; }
.над-недели { font:900 9.5px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lamp); text-align:center; }
.нутро-недели h2 { margin:9px 0 0; font:900 26px/1.1 var(--fat);
  color:var(--lampLit); text-align:center; text-shadow:0 2px 0 rgba(0,0,0,.6); }
.под-недели { margin:10px 0 0; font:700 12px/1.45 var(--sans);
  color:var(--paper); text-align:center; text-shadow:0 1px 3px #000; }
.низ-недели { margin-top:auto; padding-top:18px; }
/* Три состояния дня, и все три видны без подписей: взятый притушен
   и с галкой, сегодняшний обведён, будущий тусклый. */
/* MINMAX(0,1FR), А НЕ 1FR (F13, 9 сентября). `1fr` не сжимается ниже
   ширины СОДЕРЖИМОГО: на экране в 320 точек четыре плитки давали
   scrollWidth 331 при поле 284, четвёртая уезжала за край, и добраться
   до неё было нечем — горизонтальной прокрутки нет. `minmax(0,1fr)`
   разрешает колонке быть уже своего содержимого; остальное делает
   перенос подписи ниже. Правило общее, поэтому поправлены все сетки
   игры, а не одна разъехавшаяся. */
.дни-недели { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
  margin-top:16px; }
.день-недели { position:relative; aspect-ratio:1; border:0; cursor:pointer;
  border-radius:14px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; font:inherit; color:var(--paper);
  background:rgba(20,14,28,.72); box-shadow:inset 0 0 0 1px rgba(154,119,66,.45); }
.день-недели b { font:900 17px/1 var(--fat); color:var(--lampLit); }
.день-недели i { font-style:normal; display:block; height:26px; }
.день-недели i img { height:26px; width:auto; display:block; }
.день-недели i img.меченый { filter:drop-shadow(0 0 5px var(--lamp)); }
.глиф-приза { font-style:normal; font:900 22px/26px var(--fat); color:var(--lampLit); }
.день-недели small { font:800 8.5px/1.1 var(--sans); color:var(--mauve);
  text-align:center; padding:0 3px;
  /* Длинное слово приза распирало колонку изнутри: сетка сжимается,
     а слово — нет. Разрешаем перенос где угодно. */
  min-width:0; overflow-wrap:anywhere; hyphens:auto; }
.день-недели.нед-взят { opacity:.55; }
.день-недели.нед-взят::after { content:'\2714'; position:absolute; top:5px; right:6px;
  font:900 11px/1 var(--sans); color:#8FBF6A; }
.день-недели.сегодня { background:rgba(40,28,20,.9);
  box-shadow:inset 0 0 0 2.5px var(--lampLit), 0 0 18px rgba(246,208,138,.35); }
/* СЛЕДУЮЩИЙ, НО ЕЩЁ НЕ ДОСТУПНЫЙ (12 сентября). Обводка есть —
   по ней видно, какой подарок следующий, — но приглушённая и без
   ореола: золото в полную силу в этом кадре значит «нажми», и на
   недоступной плитке оно обещало. Часы на самой плитке говорят
   остальное. */
.день-недели.ждёт { background:rgba(28,22,36,.82); opacity:.8;
  box-shadow:inset 0 0 0 2px var(--brass); }
.день-недели.ждёт small { color:var(--lamp); font-size:9px; }
.день-недели.после { opacity:.45; }
.день-недели.раскрыт { box-shadow:inset 0 0 0 2px var(--lamp); opacity:1; }
/* Приз объясняется пергаментом: подарок без «зачем» — половина подарка. */
.приз-недели { margin-top:14px; padding:12px 14px; border-radius:14px;
  text-align:center; color:var(--parchInk);
  background:linear-gradient(180deg,#E8D6AE,var(--parch));
  box-shadow:0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.знак-приза { display:block; height:38px; }
.знак-приза img { height:38px; width:auto; display:inline-block; }
.знак-приза .глиф-приза { font:900 34px/38px var(--fat); color:#6A4C28; }
.приз-недели b { display:block; margin-top:6px; font:900 16px/1.2 var(--fat); }
.приз-недели > span:last-child { display:block; margin-top:4px;
  font:700 11.5px/1.35 var(--sans); opacity:.85; }

/* ---------- ПОРОГ: первый кадр игры (макет v3, 4 сентября) ----------
   Прежде это была форма на пустом фоне: два абзаца, поле и кнопка.
   Первое, что видит человек, должно быть местом, а не интерфейсом,
   и место это то же самое, где он потом живёт, — сарай Двора. */
.порог-сцена { position:relative; min-height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; margin:-12px; }
.порог-фон { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.42) saturate(.85); }
.порог-сцена::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 85% 55% at 50% 22%,transparent 20%,rgba(9,6,14,.86) 100%); }
/* Луч лампы сверху: он же во Дворе и на поле коконов — один свет
   на всю игру, а не три разных. */
.порог-луч { position:absolute; left:50%; top:-150px; width:300px; height:290px;
  transform:translateX(-50%); pointer-events:none; filter:blur(8px);
  background:conic-gradient(from 166deg at 50% 0, transparent 0deg,
    rgba(246,208,138,.34) 7deg, rgba(246,208,138,.34) 21deg, transparent 28deg); }
.порог-нутро { position:relative; z-index:3; flex:1;
  display:flex; flex-direction:column; padding:26px 18px 20px; }
.порог-над { font:900 9.5px/1 var(--sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lamp); text-align:center; }
.порог-нутро h2 { margin:9px 0 0; font:900 26px/1.1 var(--fat);
  color:var(--lampLit); text-align:center; text-shadow:0 2px 0 rgba(0,0,0,.6); }
.порог-под { margin:10px 0 0; font:700 12px/1.45 var(--sans);
  color:var(--paper); text-align:center; text-shadow:0 1px 3px #000; }
.порог-низ { margin-top:auto; padding-top:18px; }
/* Имя вписывают на ту же доску, что потом висит на витрине питомника:
   игрок сразу видит свою вывеску, а не поле ввода. */
.доска-имени { margin:22px auto 0; width:100%; max-width:330px;
  padding:14px 18px; border-radius:14px;
  background:linear-gradient(180deg,#6A4C28,#3A2712);
  box-shadow:0 6px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(246,208,138,.25); }
.доска-имени input { display:block; width:100%; border:0; background:none;
  text-align:center; font:900 22px/1.15 var(--fat); color:#F6D08A;
  text-shadow:0 2px 0 rgba(0,0,0,.5); }
/* Выбор касанием: три золотые кнопки «Забрать себе» были тремя
   равновесными главными действиями на одном экране. */
.трое { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.порог-один { display:flex; gap:12px; align-items:center; width:100%;
  padding:11px; border:0; border-radius:16px; cursor:pointer; text-align:left;
  background:rgba(20,14,28,.72); color:var(--paper); font:inherit;
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.45); }
.порог-один.выбран { background:rgba(40,28,20,.85);
  box-shadow:inset 0 0 0 2.5px var(--lampLit), 0 0 18px rgba(246,208,138,.35); }
.порог-лик { flex:0 0 84px; width:84px; height:84px; border-radius:50%;
  overflow:hidden; background:#1A1224; box-shadow:0 0 0 3px var(--brass); }
.порог-лик img { width:100%; height:100%; object-fit:cover; }
.порог-т { flex:1; min-width:0; }
.порог-т b { display:block; font:900 17px/1.15 var(--fat); color:var(--lampLit); }
.порог-ось { display:inline-block; margin-top:5px; padding:3px 9px;
  border-radius:9px; font:800 10.5px/1.2 var(--sans); color:var(--lampInk);
  background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.порог-признак { display:block; margin-top:6px; font:700 11px/1.3 var(--sans);
  color:var(--mauve); }
.порог-признак em { font-style:normal; color:var(--clay); font-weight:800; }

.карточка { background:linear-gradient(180deg,var(--shelf),#241A30);
  padding:12px; margin-bottom:12px; display:grid;
  grid-template-columns:88px 1fr; gap:12px; align-items:start;
  box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.лицо-бол { width:88px; border-radius:14px;
  box-shadow:0 2px 0 rgba(0,0,0,.4); }
.карточка .имя { font:900 16px/1 var(--fat); color:var(--lamp);
  text-shadow:0 2px 0 rgba(0,0,0,.4); }
.про { min-width:0; }
.числа { display:grid; grid-template-columns:1fr 1fr; gap:2px 10px;
  font-size:13px; margin:7px 0; color:var(--mauve); }
.числа b { color:var(--paper); }
.карточка .кнопка { grid-column:1 / -1; }
.метка-имя { display:block; padding:5px 9px; margin-top:5px; border-radius:10px;
  background:rgba(0,0,0,.28); font-size:12px; color:var(--paper); border:0;
  cursor:pointer; text-align:left; width:100%; }
/* ВЫБРАННАЯ ЦЕЛЬ. Правило стояло на `.on` латиницей, а разметка ставит
 * `на` кириллицей — выделение не появлялось никогда, и выбор из двух
 * кнопок читался списком из двух действий (владелец, 28 августа).
 * Страж это пропустил: он собирал из разметки только латинские имена. */
.метка-имя.на { outline:2px solid var(--lamp);
  background:rgba(0,0,0,.42); color:var(--lampLit); }
.метка-имя em { display:block; font:italic 400 10px/1.3 var(--sans);
  color:var(--clay); opacity:.9; }

/* Приметы существа: нажитое — чипами, ближайшая — намёком под ними.
   Чип, а не строка списка: примет за жизнь набирается восемь-девять,
   и списком они заняли бы полэкрана. */
.приметы { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.примета-метка { font:800 12px/1 var(--fat); padding:6px 10px; border-radius:10px;
  background:rgba(0,0,0,.28); color:var(--paper); cursor:help;
  box-shadow:inset 0 0 0 1px rgba(232,206,150,.18); }
.примета-дальше { margin-top:8px; }
.примета-дальше b { display:block; color:var(--lampLit); }

/* ---------- опись ---------- */
.полка { background:linear-gradient(180deg,var(--shelf),#241A30);
  padding:11px 13px; margin-bottom:8px;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.полка > b { font:800 12px/1 var(--fat); color:var(--brass);
  text-transform:uppercase; letter-spacing:.06em; }
.строки { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.строка { font-size:12px; padding:4px 9px; border-radius:9px;
  background:rgba(0,0,0,.28); color:var(--dusk); }
.строка.моя { background:linear-gradient(180deg,#E4D3A9,var(--parch));
  color:var(--parchInk); font-weight:700; }

/* ---------- ясли и Служба ---------- */
/* Плашка яслей: стоит первой в питомнике и только когда там кто-то есть.
   Латунный кант — то же выделение, что у главных действий: малыш ждёт
   решения, и это не фон. */
.зов-яслей { display:flex; align-items:center; gap:10px; width:100%; border:0;
  cursor:pointer; text-align:left; margin:0 0 10px; padding:10px 12px;
  border-radius:12px; background:linear-gradient(180deg,#33283F,#241A30);
  box-shadow:inset 0 0 0 1px var(--brass); }
.про-ясли { display:block; min-width:0; }
/* Зов на сведение — тот же вид, что у плашки яслей: оба говорят
   «решение созрело, вот дверь». Разный цвет канта развёл бы два
   одинаковых по смыслу сообщения на ровном месте. */
.зов-сведения { margin-bottom:10px; }
.зов-лавки { margin:12px 0; }
/* Заход — та же плашка: «решение созрело, вот дверь». Здесь решение
   в том, чтобы не оборвать серию. */
.зов-захода { margin-bottom:10px; }

/* ---------- заход: лестница серии ---------- */
/* Лестница показывается ЦЕЛИКОМ и в строку: вся её сила в том, что
   седьмой день видно с первого. Переносится по ширине, а не скроллится
   вбок — семь коротких ступеней помещаются, а горизонтальный скролл
   в списке из семи читается как поломка. */
.заход { display:flex; flex-direction:column; gap:12px; }

/* ТРОПА (2 сентября). Узлы идут столбцом, взятые гасим, а не прячем:
   взятый узел остаётся фермой материала, и убрать его с экрана значило
   бы соврать о том, что туда больше незачем ходить. Признак территории
   он при этом больше не даёт — об этом сказано словами в самой строке,
   потому что гашение такого не сообщает. */
.тропа { display:flex; flex-direction:column; gap:10px; }
.строка.взято { opacity:.55; }
.ступени { display:flex; flex-wrap:wrap; gap:6px; }
.ступень-захода { flex:1 1 auto; text-align:center; padding:8px 6px; border-radius:10px;
  background:rgba(0,0,0,.24); color:var(--mauve);
  font:800 12px/1.2 var(--sans); font-variant-numeric:tabular-nums;
  white-space:nowrap; }
/* Пройденное гасим, а не прячем: лестница без пройденных ступеней
   перестаёт показывать, сколько уже пройдено, — то есть то самое,
   что игрок теряет при обрыве. */
.ступень-захода.пройдена { opacity:.5; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.ступень-захода.сейчас { color:var(--lampLit); background:linear-gradient(180deg,#33283F,#241A30);
  box-shadow:inset 0 0 0 1px var(--brass); }
/* Плашка кладки — тот же вид, что ясли и заход: все трое говорят
   «решение созрело, вот дверь». */
.зов-кладки { margin-bottom:10px; }

/* Цель, которой служит рычаг кладки: то же слово, что на доске месяца
   и в заявке. Латунью, а не серым, — это не пояснение, а связь. */
.работа-цели { display:block; color:var(--lampLit); font-weight:800; }

/* ---------- гардероб и кузница ---------- */
/* Вещь карточкой: имя со следом, число прибавки, строка «на ком».
   След — тихим, потому что он про историю, а не про силу. */
.зов-вещей { margin:12px 0; }
.вещи { display:flex; flex-direction:column; gap:8px; margin:8px 0 12px; }
.вещь { background:rgba(0,0,0,.24); border-radius:14px; padding:10px 12px;
  display:flex; flex-direction:column; gap:4px; }
.вещь-имя { font:800 13px/1.25 var(--sans); color:var(--paper); }
.вещь-имя .тихо { display:block; font-weight:600; margin-top:2px; }
.вещь-числа { font:900 15px/1.1 var(--fat); color:var(--lampLit);
  font-variant-numeric:tabular-nums; }
.вещь-низ { display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap; }

/* ---------- цель сведения ---------- */
/* Четыре цели в строку и «без цели» пятой: выбор ДОЛЖЕН быть виден
   целиком, иначе игрок не сравнивает, а угадывает. Под кнопками —
   строка о том, кого приведут: без неё четыре слова неразличимы. */
.выбор-цели { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.цели { display:flex; flex-wrap:wrap; gap:6px; }
.цель { border:0; cursor:pointer; padding:7px 10px; border-radius:10px;
  background:rgba(0,0,0,.24); color:var(--mauve);
  font:800 12px/1.2 var(--sans); }
.цель.выбрана { color:var(--lampLit);
  background:linear-gradient(180deg,#33283F,#241A30);
  box-shadow:inset 0 0 0 1px var(--brass); }
/* Материал, на который не хватает эссенции: гасим, но не прячем —
   иначе исчезает объяснение, к чему копить. */
.цель.беднота { opacity:.45; }
/* Фильтр чужих заявок стоит НАД списком и отступает от него: между
   «чем смотрю» и «что вижу» должна быть пауза, иначе кнопки читаются
   первой строкой списка. */
.фильтр-заявок { margin:2px 0 10px; }

/* Цель на чужой заявке: принимающий видит, чего от него ждут. */
.цель-заявки { font:800 11px/1.2 var(--sans); color:var(--lampLit); cursor:help; }

/* ---------- задания: вкладка «Дела» ---------- */
/* Срок — это заголовок группы, а не подпись под ней: игрок сначала
   решает, во что успеет, и только потом читает сами задания. */
.срок-заданий { display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:14px 0 6px; font:800 13px/1.2 var(--sans); color:var(--lamp); }
/* Задание — плашка в один столбец: имя, ход, награда. Ход стоит между
   ними намеренно — это единственное, что меняется само, и глаз находит
   его на одном месте у всех заданий сразу. */
.задание { background:rgba(0,0,0,.24); border-radius:14px; padding:10px 12px;
  display:flex; flex-direction:column; gap:7px; margin-bottom:8px; }
.задание-имя { font:800 13px/1.25 var(--sans); color:var(--paper); }
.задание-имя .тихо { display:block; font-weight:600; margin-top:2px; }
.задание-ход { display:flex; align-items:center; gap:9px; }
.задание-ход .полоса { max-width:none; flex:1; }
.задание-приз { display:flex; align-items:center; justify-content:space-between;
  gap:10px; min-height:26px; }
/* СВЁРНУТАЯ СТРОКА. Заголовок — сам по себе кнопка во всю ширину:
   попасть по стрелке пальцем нельзя, а по строке можно всегда. Кнопка
   «Забрать» стоит рядом, а не внутри: кнопка в кнопке промахивается —
   нажатие на выдачу схлопывало бы строку. */
.задание-строка { display:flex; align-items:center; gap:10px; }
.задание-шапка { flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  padding:0; border:0; background:none; cursor:pointer; text-align:left;
  color:var(--paper); font:800 13px/1.25 var(--sans); }
/* ИМЯ ЗАДАНИЯ ПЕРЕНОСИТСЯ, А НЕ ОБРЕЗАЕТСЯ. На вкладке рядом с ним
   стоит «Забрать», и в одну строку длинное имя не влезало: игрок читал
   «Накормить, пока дёшев…» — то есть не читал условия задания вовсе.
   Две строки дешевле обрезанного смысла. */
.задание-шапка b { min-width:0; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* Ход прижат вправо, к стрелке: у всех заданий он на одном месте,
   и глаз читает столбик чисел, а не ищет их в строках разной длины. */
.задание-шапка .тихо { margin-left:auto; font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.задание-метка { white-space:nowrap; }
.задание-нутро { display:flex; flex-direction:column; gap:7px; }
.задание-нутро .полоса { max-width:none; }
/* Раскрытое отделено от соседей кантом: иначе описание одного задания
   читается как продолжение следующего. */
.задание.раскрыто { box-shadow:inset 0 0 0 1px rgba(228,194,136,.18); }
/* Готовое к получению отмечено кантом, а не заливкой: заливка спорила бы
   с главной кнопкой экрана, а кант читается как «отмечено». */
.задание.готово { box-shadow:inset 0 0 0 1px var(--brass); }
.задание.готово .полоса i { background:linear-gradient(90deg,#B7802F,var(--lamp)); }
/* Взятое гасится, но не исчезает: пустое место читалось бы как потеря,
   а гашёная строка — как сделанное. */
.задание.взято { opacity:.5; }

/* Ярмарка на «Делах»: одна строка и по ссылке на каждую цель. Ссылка
   несёт своё расстояние — без него выбирать, куда идти, пришлось бы
   вслепую. */
.цели-ярмарки { display:flex; flex-direction:column; gap:6px; margin:8px 0 14px; }
.ссылка-цели { display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border:0; border-radius:12px; cursor:pointer;
  background:rgba(0,0,0,.24); color:var(--paper); text-align:left;
  font:800 13px/1.2 var(--sans); }
.ссылка-цели .тихо { margin-left:auto; font-weight:600; }

/* Идущее сведение на «Мире» — СВОДКА, а не действие: без кнопки
   и приглушённое. Тем же весом, что заявка, оно спорило бы с живыми
   строками, у которых кнопка есть, — а решать по нему нечего. */
.заявка.идёт { opacity:.72; }

/* ---------- карта мира ---------- */
/* У мира есть МЕСТО, а не меню. Картинка держит пропорцию сама
   (`aspect-ratio`), поэтому доли областей не разъезжаются ни на каком
   телефоне: они привязаны к картинке, а не к экрану. */
/* КАРТА НЕ СЖИМАЕТСЯ. `main` — колонка гибких блоков, и по умолчанию
   каждый готов ужаться, когда содержимое длиннее окна. Карта с этим
   соглашалась: на длинном «Мире» панорама превращалась в полоску
   в несколько пикселей — картинка есть, дверей не видно. Держит
   пропорцию `flex:0 0 auto` плюс `aspect-ratio`; лишнее уезжает
   прокруткой, а не сплющивается. */
.карта-мира { position:relative; margin:0 0 10px; border-radius:16px;
  overflow:hidden; aspect-ratio:1226/515; flex:0 0 auto;
  box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 0 0 1px rgba(154,119,66,.45); }
.вид-мира { display:block; width:100%; height:100%; object-fit:cover; }
/* ЖИВЫЕ ТОЧКИ НА КАРТЕ (владелец, 31 августа: «одна картинка, можно
   добавить анимацию, будет красиво»).

   Двигается НЕ КАРТИНКА, а два пятна света поверх неё: тёплый ореол над
   фонарём лавки и мягкое дыхание над шатрами Ярмарки. Анимировать саму
   картинку нечем — она растровая; а два слоя поверх стоят дёшево
   и не мешают нажатиям (`pointer-events:none`).

   Координаты в процентах привязаны к КОНКРЕТНОЙ картинке — к фонарю
   и к гирлянде на ней. При замене арта их правят вместе с ним.

   ДЫХАНИЕ, А НЕ МИГАНИЕ: период больше трёх секунд и амплитуда меньше
   трети. Быстрая пульсация на экране, куда заходят каждый день,
   превращается в раздражитель, а не в уют. */
.огонёк { position:absolute; pointer-events:none; border-radius:50%;
  mix-blend-mode:screen; }
.огонёк.лавка { left:19.5%; top:44%; width:9%; padding-bottom:9%;
  background:radial-gradient(circle, rgba(255,206,128,.55), transparent 68%);
  animation: дыхание 3.6s ease-in-out infinite; }
.огонёк.ярмарка { left:80%; top:36%; width:16%; padding-bottom:12%;
  background:radial-gradient(circle, rgba(255,222,160,.32), transparent 70%);
  animation: дыхание 5.2s ease-in-out infinite .8s; }
@keyframes дыхание {
  0%, 100% { opacity:.55; transform:scale(.96); }
  50%      { opacity:1;   transform:scale(1.06); }
}
/* Кто просил покоя — получает покой. Правило общее для всей игры,
   и новый слой не исключение. */
@media (prefers-reduced-motion: reduce) {
  .огонёк { animation:none; opacity:.8; }
}

/* Область — полоса во всю высоту: пальцем в крышу избы не попасть,
   а в полосу попадают всегда. Сама она невидима — видно постройку,
   которую она накрывает. */
.место-мира { position:absolute; top:0; bottom:0; padding:0; border:0;
  background:none; cursor:pointer; display:flex; align-items:flex-end;
  justify-content:center; }
/* Нажатие подсвечивает область, а не двигает её: сдвиг на картинке
   читался бы как поломка кадра. */
.место-мира:active { background:rgba(246,208,138,.14); }
/* Бирка — латунная табличка у подножия постройки. Тень под ней жёсткая:
   картинка снизу светлая и тёмная в разных местах, и без подложки
   подпись где-то пропадала бы. */
.бирка-мира { display:flex; flex-direction:column; align-items:center;
  gap:1px; margin-bottom:6px; padding:4px 9px; border-radius:9px;
  background:linear-gradient(180deg,rgba(36,26,48,.92),rgba(20,14,30,.94));
  box-shadow:0 1px 0 rgba(0,0,0,.6), inset 0 0 0 1px rgba(154,119,66,.55);
  max-width:96%; }
.бирка-мира b { font:800 11.5px/1.15 var(--sans); color:var(--lampLit);
  white-space:nowrap; }
.бирка-мира em { font:600 10px/1.15 var(--sans); font-style:normal;
  color:var(--dusk); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; max-width:100%; }

/* ---------- Дела: блоки вместо дверей (Р-233, C4) ----------

   Вкладка была четырьмя дверьми, каждая честно называла состояние —
   и всё равно требовала зайти внутрь за самим делом. Теперь содержимое
   развёрнуто на месте, а каждый блок сворачивается. Пустой не
   раскрывается сам (владелец, 4 сентября): пустой раскрытый блок —
   это сообщение о том, что сообщения нет, и он отодвигает вниз то,
   ради чего пришли. */
/* БЛОК НЕ СЖИМАЕТСЯ. `main` — колонка гибких блоков, и по умолчанию
   каждый готов ужаться, когда содержимое длиннее окна. На вкладке
   из пяти блоков это видно сразу: плитки «Целей» срезало заголовком
   «Описи», а тело «Описи» — «Хозяйством». Тот же случай, что с картой
   мира; лишнее обязано уезжать прокруткой, а не сплющиваться. */
.блок-дел { flex:0 0 auto; border-radius:14px; margin-bottom:8px; overflow:hidden;
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.блок-гол { display:flex; align-items:center; gap:10px; width:100%; border:0;
  background:none; padding:10px 12px; color:var(--paper); text-align:left;
  cursor:pointer; }
.блок-т { flex:1; min-width:0; }
.блок-т b { display:block; font:900 14px/1.1 var(--fat); color:var(--lampLit); }
.блок-т small { display:block; font:700 11px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
.блок-стр { color:var(--brass); font-size:16px; font-style:normal;
  transition:transform .2s; }
.блок-дел.откр .блок-стр { transform:rotate(180deg); }
.блок-тело { padding:0 8px 8px; }
/* Строка внутри «Хозяйства» — та же дверь, что была вкладкой: за ней
   и правда лежит отдельный экран, и стрелка здесь честна. */
.строка-дел { display:flex; align-items:center; gap:10px; width:100%; border:0;
  padding:9px 10px; border-radius:12px; margin-bottom:6px; cursor:pointer;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35);
  color:var(--paper); text-align:left; }
/* Цели — плитками по две: четыре занятия читаются взглядом, а списком
   в столбик заняли бы полэкрана. */
.плитки-целей { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.плитка-цели { display:flex; flex-direction:column; gap:3px; border:0;
  padding:9px 10px; border-radius:12px; cursor:pointer; text-align:left;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35);
  color:var(--paper); }
.плитка-цели b { font:800 12px/1.15 var(--fat); color:var(--lampLit); }
.плитка-цели span { font:700 10.5px/1.25 var(--sans); color:var(--mauve); }
/* Опись: строка с крупным числом справа — по макету 4 сентября.
   Число крупно потому, что оно и есть ответ: сколько из сорока восьми
   найдено. Мелким рядом — из чего оно сложилось. */
.опись-числа { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:12px; margin-bottom:8px; background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); color:var(--paper); }
.опись-т { flex:1; min-width:0; }
.опись-т b { display:block; font:800 12.5px/1.15 var(--fat); }
.опись-т small { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
.опись-ч { flex:none; text-align:right; font:900 22px/1 var(--fat);
  color:var(--lampLit); }
.опись-ч small { display:block; font:700 10px/1.2 var(--sans);
  color:var(--dusk); margin-top:2px; }

/* Ступени признаков: имя, шкала, число. Шкала здесь не украшение —
   она единственное, что отвечает «далеко ли до следующей». */
.ступени-о > b { display:block; font:800 12.5px/1.15 var(--fat);
  color:var(--paper); padding:2px 2px 0; }
.ступени-о > .тихо { display:block; padding:2px 2px 6px; }
.ступень-о { display:flex; align-items:center; gap:8px; padding:4px 2px; }
.ступень-о .ступень-имя { flex:0 0 38%; font:700 11.5px/1.2 var(--sans);
  color:var(--paper); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.ступень-о .полоса { flex:1; height:7px; border-radius:4px;
  background:rgba(0,0,0,.4); overflow:hidden; max-width:none; }
.ступень-о .полоса i { display:block; height:100%;
  background:linear-gradient(90deg,var(--lampBot),var(--lampLit)); }
.ступень-о .н { font:800 11px/1.2 var(--sans); color:var(--lampLit);
  min-width:52px; text-align:right; }

/* Задание — строка макета, принятого владельцем 4 сентября: значок,
   имя, шкала, условие с наградой, ход или «Забрать».
   Значок опознаёт строку раньше, чем прочитано имя: девять заданий
   отличаются одним словом в начале и списком читаются как одно длинное. */
.квест { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:14px; margin-bottom:8px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.квест-ико { width:52px; height:52px; border-radius:12px; flex:none;
  display:grid; place-items:center; background:#F4EFE6;
  box-shadow:inset 0 0 0 2px rgba(154,119,66,.5); }
.квест-ико img { width:46px; height:46px; object-fit:contain; }
.квест-т { flex:1; min-width:0; }
.квест-т b { display:block; font:800 13px/1.15 var(--fat); }
.квест-т .полоса { display:block; margin-top:5px; height:6px; border-radius:3px;
  background:rgba(0,0,0,.35); overflow:hidden; max-width:none; }
.квест-т .полоса i { display:block; height:100%;
  background:linear-gradient(90deg,var(--lampBot),var(--lampLit)); }
/* Условие — в одну строку: строка задания обязана оставаться строкой.
   Полное условие видно в подсказке, а список из шести заданий по три
   строки каждое — это уже не список, а полотно. */
/* ПОДПИСЬ ЗАДАНИЯ ЧИТАЕТСЯ ЦЕЛИКОМ (UI-40, 5 сентября). Она стояла
   в одну строку с наградой и обрезалась многоточием ровно там, где
   начиналось объяснение: «Цена тапа растёт и сбросится, …», «Два
   одинаковых дают оди…». Обрезка съедала то, ради чего подпись
   и написана. Теперь подпись переносится, а награда идёт под ней. */
.квест-сч { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px;
  margin-top:3px; font:700 11px/1.3 var(--sans); color:var(--mauve); }
.квест-сч > span:first-child { flex:1 1 100%; min-width:0; }
.квест-наг { font:800 11px/1.2 var(--sans); color:var(--lampLit); white-space:nowrap; }
.квест-ход { flex:none; font:700 11px/1.2 var(--sans); color:var(--mauve);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Готовое зовёт кантом — и только оно: гори кант везде, он не значил бы
   ничего. Взятое гаснет, но не исчезает: сделанное видно. */
.квест.готов { box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px var(--lamp); }
.квест.взят { opacity:.6; }

/* ---------- Тропа: сцена с отрядом и узлы с наградой (макет 4 сентября) ----------

   Экран начинался названием территории и списком строк, где золотая
   кнопка «20 корма» выглядела наградой, хотя это цена входа. Теперь
   сверху отряд и его сила, а узел говорит всё до нажатия: роль босса,
   сила против нашей, цена и что лежит внутри. */
.сцена-тропы { position:relative; height:150px; border-radius:16px;
  overflow:hidden; margin-bottom:10px;
  box-shadow:0 5px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--brass); }
.тропа-фон { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.72); }
.тропа-плашка { position:absolute; left:10px; right:10px; bottom:10px;
  padding:7px 10px; border-radius:12px; background:rgba(27,18,38,.88);
  box-shadow:inset 0 0 0 1px var(--brass); color:var(--paper); }
.тропа-плашка b { display:block; font:900 13px/1.15 var(--fat);
  color:var(--lampLit); }
.тропа-плашка span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
/* ДОРОГА С ВЕХАМИ (вариант А, принят владельцем 4 сентября).
   У Тропы не было ни одного лица: пять строк текста подряд, и экран
   не мог получиться иначе как мрачным. Слева пунктирная тропа, на ней
   узлы портретами врагов — лица у нас есть, геномы противников приходят
   с сервера, а портрет типажа выводится из генома тем же правилом,
   что и везде. */
.дорога-тропы { position:relative; padding:6px 0 6px 60px; }
.дорога-тропы::before { content:''; position:absolute; left:28px; top:16px;
  bottom:16px; width:3px; border-radius:2px;
  background:repeating-linear-gradient(180deg,
    rgba(154,119,66,.7) 0 8px, transparent 8px 16px); }
.веха-тропы { position:relative; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:14px; margin-bottom:10px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
/* Лик врага сидит НА дороге, слева от строки: путь читается сверху вниз,
   и видно, кто ждёт на каждом шаге. */
.веха-лик { position:absolute; left:-50px; top:50%; transform:translateY(-50%);
  display:block; width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:#1A1224;
  box-shadow:0 0 0 3px var(--brass), 0 0 16px rgba(246,208,138,.35); }
.веха-лик img { width:100%; height:100%; object-fit:cover;
  object-position:50% 28%; transform:scale(1.35); transform-origin:50% 28%; }
/* Пройденный — в зелёном кольце: он не выключен, ходить в него можно
   и нужно, у него та же кнопка, что у нового. */
.веха-тропы.взята .веха-лик { box-shadow:0 0 0 3px #3E6B33; }
/* Закрытый в тумане, но ВИДЕН: понятно, кто там ждёт, и это повод идти
   дальше. Выключенным он выглядеть не должен. */
.веха-тропы.закрыта { opacity:.8; }
.веха-тропы.закрыта .веха-лик { filter:grayscale(.7) brightness(.55);
  box-shadow:0 0 0 2px rgba(154,119,66,.5); }
.веха-т { flex:1; min-width:0; }
.веха-т b { display:block; font:800 12.5px/1.2 var(--fat); }
.веха-под { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
/* Награда значками: что лежит в узле, видно не разворачивая. */
.веха-наг { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.веха-наг i { font-style:normal; padding:3px 7px; border-radius:8px;
  font:800 9.5px/1.2 var(--sans); color:var(--lampLit);
  background:rgba(0,0,0,.32); box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }
.веха-тропы .кнопка { margin-left:auto; flex:none; }

/* ---------- Круг: арена, лига и подбор по силе (макет 4 сентября) ----------

   Экран начинался двумя серыми абзацами статистики: ни места, ни
   ставки, ни понимания, кто перед тобой. Теперь сверху арена с лигой
   и рейтингом, а у каждого соперника сказано, чем этот бой опасен. */
.круг-шапка { position:relative; border-radius:18px; overflow:hidden;
  height:150px; margin-bottom:10px;
  box-shadow:0 5px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--brass); }
.круг-фон { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 55%; filter:brightness(.7) saturate(.9); }
.круг-лига, .круг-наши { position:absolute; left:12px; right:12px;
  padding:7px 10px; border-radius:12px; background:rgba(27,18,38,.86);
  box-shadow:inset 0 0 0 1px var(--brass); color:var(--paper); }
.круг-лига { top:10px; }
.круг-наши { bottom:10px; }
.круг-лига b, .круг-наши b { display:block; font:900 14px/1.15 var(--fat);
  color:var(--lampLit); }
.круг-лига em, .круг-наши em { display:block; font:700 10.5px/1.25 var(--sans);
  font-style:normal; color:var(--mauve); margin-top:2px; }
/* Соперник: лицо, питомник, роль и разница с нашей силой. */
.круг-соперник { display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:14px; margin-bottom:8px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
/* КНОПКИ РОВНО ПО ПРАВОМУ КРАЮ (владелец, 4 сентября). Текстовый
   столбец не тянулся, и кнопка вставала там, где кончалось имя
   соперника: у пяти строк — пять разных краёв. */
.круг-соперник .заявка-т { flex:1; min-width:0; }
.круг-соперник .кнопка { margin-left:auto; }
.круг-соперник .заявка-т b { display:block; font:800 12.5px/1.2 var(--fat); }
/* Питомник соперника — латунной меткой рядом с именем: чьё существо,
   видно раньше, чем прочитано имя. */
.лига-м { display:inline-block; margin-left:6px; padding:2px 6px;
  border-radius:6px; vertical-align:middle; font:800 9.5px/1.2 var(--sans);
  color:#2A1A08; background:var(--brass); }
.круг-соперник .заявка-т > span { display:block;
  font:700 10.5px/1.25 var(--sans); color:var(--mauve); margin-top:2px; }
/* Разница читается цветом раньше, чем числом: красный — сильнее нас. */
.круг-разница { font-weight:800 !important; }
.круг-разница.сильнее { color:#D08A6A !important; }
.круг-разница.слабее { color:#8FB57A !important; }
.круг-сила { flex:none; text-align:right; font:900 15px/1 var(--fat);
  color:var(--lampLit); }
.круг-сила small { display:block; font:700 9.5px/1.2 var(--sans);
  color:var(--dusk); margin-top:2px; }

/* ---------- Карточка — витрина (владелец, 4 сентября) ----------

   Карточка — единственный экран, посвящённый ОДНОМУ существу, и до сих
   пор существо на нём было такого же размера, как в любом списке.
   Витрина даёт ему то, чего нет больше нигде: размер и свет.

   Материалы свои: тёмная ниша, свет снизу, латунная табличка,
   вдавленные гнёзда под вещи. Ничего нового не заводится — то же
   дерево и та же латунь, что в Строю и на Мире. */
/* БЕЗ `overflow:hidden` (11 сентября, владелец: «страничка
   не скроллится, не могу посмотреть его характеристики»).
   Скругление стояло на всей витрине вместе с обрезкой, а внутри
   живёт раскрывающийся список признаков: раскрытый, он упирался
   в край карточки и обрезался — и прокрутки внутри не было.
   Обрезка нужна только нише с портретом: там картинка выходит
   за скругление. Ей её и оставляем. */
.витрина { border-radius:18px; padding:0 0 12px;
  background:linear-gradient(180deg,#241A30,#150F20 60%,#1B1226);
  box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 0 0 2px var(--brass); }
/* Свет падает СНИЗУ: существо стоит на подставке, а не висит на фоне. */
.витрина-ниша { position:relative; overflow:hidden;
  border-radius:16px 16px 0 0; height:34dvh; min-height:210px;
  max-height:300px;
  background:radial-gradient(120% 80% at 50% 108%,rgba(255,206,128,.42),
             rgba(255,206,128,.10) 45%,transparent 72%),
             linear-gradient(180deg,#1A1224,#0E0916); }
.витрина-ниша .герой { position:absolute; left:50%; bottom:26px;
  transform:translateX(-50%); max-height:calc(100% - 40px); width:auto;
  max-width:64%; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(246,208,138,.55))
         drop-shadow(0 12px 12px rgba(0,0,0,.7)); }
.витрина-свет { position:absolute; left:12%; right:12%; bottom:10px; height:16px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,206,128,.5),transparent 70%); }
/* Табличка экспоната: имя и три числа, по которым существо опознают. */
.витрина-табличка { position:relative; margin:-10px 14px 0; padding:8px 12px;
  border-radius:10px; text-align:center; color:#FBE9C4;
  background:linear-gradient(180deg,#8A6A3C,#5A4224);
  box-shadow:0 3px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,190,.4); }
.витрина-табличка b { display:block; font:900 18px/1.15 var(--fat); }
.витрина-табличка span { font:700 11px/1.25 var(--sans); color:#E8CE96; }
/* ГНЁЗДА ВЕЩЕЙ — НА САМОМ СУЩЕСТВЕ (владелец, 4 сентября; вариант Б
   из трёх). Ряд под витриной читался как отдельный склад, а вещь носит
   существо.

   СТОЛБИКОМ С ЛУЧИКАМИ, а не точками по телу: у двенадцати типажей
   позы разные, и гнездо, посаженное на голову одного, у другого
   попадёт в воздух. Столбик держится края ниши и не зависит от того,
   как существо нарисовано. */
.витрина-ниша .вещи { position:absolute; left:12px; top:50%;
  transform:translateY(-50%); display:flex; flex-direction:column; gap:16px;
  margin:0; z-index:2; }
/* ГНЕЗДО НА СВОЕЙ КАРТОЧКЕ — ЖИВОЕ (QA-06, 8 сентября): пустое ведёт
   в Гардероб, занятое снимает вещь. Подписи ему не заводим — имя живёт
   в подсказке по касанию, а пустое узнаётся пунктирным кольцом; это
   решение ниже по файлу, и спорить с ним ради одной кнопки незачем.
   Величину довели с 42 до 44: по гнезду теперь бьют пальцем. */
.витрина-ниша .вещь.живая { cursor:pointer; }
.витрина-ниша .вещь.живая:active { transform:translateY(1px); }
.витрина-ниша .вещь { position:relative; width:44px; height:44px; flex:none;
  border-radius:50%; padding:0; display:grid; place-items:center;
  background:rgba(20,14,28,.72);
  box-shadow:0 0 0 1px rgba(154,119,66,.6), inset 0 2px 6px rgba(0,0,0,.6); }
/* Лучик от гнезда к телу: связь «вещь на существе» показана линией,
   а не положением, — и потому не ломается при смене арта.

   ЛУЧИК НА `::before`, А НЕ НА `::after`: `::after` у пустого места
   уже занят — там кольцо, общий знак «сюда что-то входит», и оно
   стоит ниже по файлу. Мой лучик его перебивал бы, и пустое гнездо
   осталось бы без своего знака. */
.витрина-ниша .вещь::before { content:''; position:absolute; left:100%;
  top:50%; width:30px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,rgba(246,208,138,.55),rgba(246,208,138,0)); }
.витрина-ниша .вещь.занята { background:rgba(20,14,28,.9);
  box-shadow:0 0 0 2px var(--brass), 0 0 14px rgba(246,208,138,.35); }
.витрина-ниша .вещь.занята::before {
  background:linear-gradient(90deg,rgba(246,208,138,.85),rgba(246,208,138,0)); }
.витрина-ниша .вещь img { width:26px; height:26px; object-fit:contain; }
/* Имя вещи в кружок не влезает и не должно: место узнаётся формой,
   имя живёт в подсказке по касанию. */
.витрина-ниша .вещь em { display:none; }
/* Пустое гнездо молчит: знак «сюда что-то входит» — пунктирное кольцо,
   общее для всей игры, и заводить ему второй вид здесь незачем. */
/* Раздел-раскрывашка: `details` складывается сам, и потому одинаково
   работает в игре и на внешней странице, где нашего кода нет. */
.карт-свёрток { margin:12px 14px 0; }
.карт-раздел { display:flex; align-items:center; gap:8px; cursor:pointer;
  list-style:none; padding-bottom:5px; font:800 10.5px/1.2 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--brass);
  border-bottom:1px solid rgba(154,119,66,.35); }
.карт-раздел::-webkit-details-marker { display:none; }
.карт-раздел::after { content:'⌄'; margin-left:auto; font-size:13px;
  color:var(--brass); transition:transform .2s; }
.карт-свёрток[open] > .карт-раздел::after { transform:rotate(180deg); }
.карт-счёт { font-weight:700; color:var(--dusk); text-transform:none;
  letter-spacing:0; }
/* Признаки — медальонами по два в ряд. Пустое место названо: «уши ещё
   не собраны» — понятная задача, а пустая рамка молчит. */
.медальоны { display:grid; grid-template-columns:1fr 1fr; gap:6px;
  margin-top:8px; }
.медальон { display:grid; grid-template-columns:18px 1fr; gap:2px 8px;
  padding:7px 9px; border-radius:11px; min-height:0;
  text-align:left; align-items:center;
  background:linear-gradient(180deg,#2E2338,#1E1628);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.45); }
.медальон-глиф { grid-row:1 / span 2; width:18px; height:18px;
  display:grid; place-items:center; color:var(--dusk); }
.медальон-глиф svg { width:12px; height:12px; display:block; fill:currentColor; }
.медальон-глиф svg.line { fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; }
.витрина .медальон.занят .медальон-глиф { color:var(--lampInk); }
.витрина .медальон b { font:800 11.5px/1.2 var(--fat); color:var(--dusk); }
.витрина .медальон.занят { box-shadow:inset 0 0 0 1px var(--brass); }
.витрина .медальон.занят b { color:var(--paper); }
.витрина .медальон em { font:700 9.5px/1.15 var(--sans); font-style:normal;
  color:var(--dusk); display:block; overflow:visible; }
/* Абилки — светящимися знаками: двойной ромб у связки, одинарный
   у одиночки. Связка держится двумя признаками, и потеря любого
   её разрушает. */
.сигилы { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.сигил { display:grid; grid-template-columns:34px 1fr; grid-auto-rows:auto;
  gap:2px 10px; padding:8px 10px; border-radius:12px;
  background:rgba(0,0,0,.32);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.45); }
.сигил.связка { box-shadow:inset 0 0 0 2px var(--brass); }
.сигил i { grid-row:1 / span 2; align-self:center; font-style:normal;
  font-size:19px; text-align:center; color:var(--lampLit);
  text-shadow:0 0 10px rgba(246,208,138,.7); }
.сигил b { font:800 12.5px/1.2 var(--fat); color:var(--paper); }
.сигил span { font:700 10.5px/1.25 var(--sans); color:var(--mauve); }
.витрина-числа { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.витрина-числа span { flex:1; min-width:74px; text-align:center;
  padding:7px 4px; border-radius:10px; background:rgba(0,0,0,.28);
  font:700 10.5px/1.3 var(--sans); color:var(--mauve); }
.витрина-числа b { display:block; font:900 15px/1.1 var(--fat);
  color:var(--paper); }
/* Приметы — сургучом: их не выпадают и не покупают, их нарабатывают
   послужным списком. */
.сургучи { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.сургуч { font:800 10.5px/1.2 var(--sans); font-style:normal; padding:5px 10px;
  border-radius:12px; color:#F6E9CE;
  background:linear-gradient(180deg,#8C3A2E,#6B2A21);
  box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.витрина-нет, .витрина-дальше { margin-top:8px; font:700 11px/1.35 var(--sans);
  color:var(--mauve); }
.витрина-дальше b { display:block; color:var(--lampLit);
  font:800 12px/1.25 var(--fat); }
.витрина-строка { display:flex; flex-direction:column; gap:3px; margin-top:8px;
  font:700 11.5px/1.35 var(--sans); color:var(--mauve); }
.витрина-подпись { margin:14px 14px 0; padding-top:9px;
  border-top:1px solid rgba(154,119,66,.3);
  font:600 10.5px/1.35 var(--sans); color:var(--dusk); font-style:italic; }

/* ---------- Карточка: абилки, угол, подписи мест (C5) ----------

   АБИЛКИ — то, чем существо дерётся, и то, ради чего его собирают.
   До 4 сентября их не было на карточке вовсе: игрок видел признаки
   и не знал, что они дают. Связка и одиночка различаются знаком
   и подписью: связка держится ДВУМЯ признаками, и потеря любого
   её разрушает. */
.абилки { display:flex; flex-direction:column; gap:6px; }
.абилка { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:12px; background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); color:var(--paper); }
.абилка.связка { background:linear-gradient(180deg,#E4D3A9,var(--parch));
  color:var(--parchInk); box-shadow:0 2px 0 rgba(0,0,0,.35); }
.абилка-знак { flex:none; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; font-style:normal; font-size:15px;
  color:var(--lampLit); background:rgba(0,0,0,.3); }
.абилка.связка .абилка-знак { color:#6B4E23; background:rgba(59,42,23,.14); }
.абилка-т { flex:1; min-width:0; }
.абилка-т b { display:block; font:800 13px/1.15 var(--fat); }
.абилка-т span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
.абилка.связка .абилка-т span { color:#5B4630; }
/* Угол — роль в отряде, а не число: стоит под характеристиками
   отдельной строкой, чтобы не читаться как пятый стат. */
.угол-существа { margin-top:6px; }

/* Строка «кого отпустить»: лицо, имя с углом и сроком, что даст Служба,
   кнопка. Тот же орган, что заявка соседа, — и потому те же классы
   лица и текста: два похожих списка с разной вёрсткой читаются как два
   разных механизма. */
.полон-строка { display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:14px; margin-bottom:8px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.полон-строка .заявка-т { flex:1; min-width:0; }
.полон-строка .заявка-т b { display:block; font:800 12.5px/1.2 var(--fat); }
.полон-строка .заявка-т span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }

/* ---------- Замысел: заказ Ведомства (Р-233 + решение 4 сентября) ----------

   ПЕРГАМЕНТ — единственный светлый материал игры. Заказ приходит
   бумагой, а не всплывает окошком: это письмо от Ведомства, и читается
   оно как письмо. */
.замысел { padding:12px 13px; border-radius:16px; margin-bottom:10px;
  background:linear-gradient(180deg,#E4D3A9,var(--parch)); color:var(--parchInk);
  box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
/* Сошедшийся заказ горит кантом: остаётся одно — свести своих. */
.замысел.сошёлся { box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--lamp); }
.зам-шапка { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.зам-шапка b { flex:1; font:900 15px/1.15 var(--fat); }
.зам-размер { flex:none; padding:3px 8px; border-radius:8px;
  font:800 10px/1.2 var(--sans); color:#F4E7CC; background:#6B4E23; }
.зам-срок { flex:none; font:800 11px/1.2 var(--sans); color:#7A5A38; }
.зам-связка { padding:7px 9px; border-radius:11px; background:rgba(59,42,23,.10);
  font:700 11.5px/1.3 var(--sans); color:#4A3520; margin-bottom:9px; }
/* Строка признака: точка состояния, имя, где искать. Точка гаснет,
   пока признака нет у своих, — по ней видно ход, не читая. */
.зам-строки { display:flex; flex-direction:column; gap:5px; }
.зам-строка { display:flex; align-items:center; gap:8px;
  font:700 11.5px/1.25 var(--sans); color:#4A3520; }
/* ЗНАЧОК МЕСТА ВМЕСТО ТОЧКИ, И БЕЗ ЗЕЛЁНОГО (UI-40, 5 сентября).
   Точка говорила только «есть/нет» и делала это зелёным — цветом,
   которого в палитре игры нет (тот же случай, что с платой на Службе,
   Р-261). Глиф части тела говорит ещё и куда признак сядет, а «есть»
   отмечено латунью — цветом взятого во всей игре. */
.зам-знак { width:18px; height:18px; flex:none; display:grid;
  place-items:center; border-radius:50%; font-style:normal;
  color:var(--dusk); background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
.зам-знак svg { width:11px; height:11px; display:block; fill:currentColor; }
.зам-знак svg.line { fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; }
.зам-строка.зам-есть .зам-знак { color:var(--lampInk);
  background:linear-gradient(180deg,var(--lampTop),var(--lampBot));
  box-shadow:none; }
.зам-имя { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.зам-где { flex:none; font-weight:800; }
.зам-где.нет { color:#8A6A48; font-weight:700; }
.зам-ход { display:flex; align-items:center; gap:9px; margin-top:10px; }
.зам-ход .полоса { flex:1; height:8px; border-radius:4px; max-width:none;
  background:rgba(59,42,23,.18); overflow:hidden; }
.зам-ход .полоса i { display:block; height:100%;
  background:linear-gradient(90deg,#B98B3E,#E0B25E); }
.зам-ход .н { font:900 12px/1 var(--fat); }
.зам-приз { margin-top:9px; padding:7px 9px; border-radius:11px;
  background:rgba(59,42,23,.10); font:800 11.5px/1.3 var(--sans); color:#4A3520; }
.зам-низ { display:flex; align-items:center; gap:10px; margin-top:10px; }
/* ПОДСКАЗКА — КНОПКА, А НЕ НАДПИСЬ (8 сентября): она называет место
 * и туда же ведёт. Выглядит по-прежнему строкой на пергаменте — это
 * не главное действие карточки, — но берёт полную высоту пальца
 * и подчёркнута, чтобы по ней было видно, что она живая. */
.зам-что { flex:1; font:700 11px/1.3 var(--sans); color:#5B4630; }
button.зам-что { min-height:44px; display:flex; align-items:center; text-align:left;
  border:0; background:none; padding:0 2px; cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(91,70,48,.4);
  text-underline-offset:3px; }
button.зам-что:active { opacity:.6; }
.зам-низ .ссылка-строкой { flex:none; color:#7A5A38; margin:0; }
/* Былое: закрытый и сгоревший остаются оба — сгоревший заказ не позор,
   а срок, который вышел. */
.зам-былое { display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:12px; margin-bottom:6px; background:rgba(0,0,0,.24);
  font:700 11.5px/1.25 var(--sans); color:var(--mauve); }
.зам-былое b { color:var(--paper); font:800 12px/1.2 var(--fat); }
.зам-былое.тускло { opacity:.6; }
/* Полоска на вкладке «Дела»: что заказано и сколько собрано. Всё
   остальное — на своём экране. */
.зам-полоска { display:flex; align-items:center; gap:10px; width:100%; border:0;
  padding:9px 10px; border-radius:12px; margin-bottom:6px; cursor:pointer;
  text-align:left; color:var(--parchInk);
  background:linear-gradient(180deg,#E4D3A9,var(--parch));
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.зам-полоска .блок-т b { color:var(--parchInk); }
.зам-полоска .блок-т small { color:#5B4630; }
.зам-счёт { flex:none; font:900 13px/1 var(--fat); color:var(--parchInk); }
.зам-полоска .стрелка-яслей { color:#7A5A38; }

/* ---------- Мир: бирка Тропы и заявки карточками (Р-233) ----------

   ТРОПА СТОИТ НЕ ПОЛОСОЙ, А ТАБЛИЧКОЙ НА ДОРОГЕ. Полосы четырёх
   построек делят картинку целиком, и пятой между ними места нет.
   Дорога уходит вглубь кадра, и указатель стоит там, где она уходит.
   Латунный кант — единственный на карте: это вход, которого игрок
   до сих пор не видел вовсе. */
.бирка-тропы { position:absolute; left:50%; top:24%; transform:translateX(-50%);
  z-index:2; border:0; padding:0; background:none; cursor:pointer; }
.бирка-тропы .бирка-мира { margin:0;
  background:linear-gradient(180deg,#5A3F1E,#3A2810);
  box-shadow:0 2px 0 rgba(0,0,0,.6), inset 0 0 0 2px var(--lamp); }
.бирка-тропы .бирка-мира b { color:#FBE9C4; }
.бирка-тропы .бирка-мира em { color:var(--lampLit); max-width:none; }
/* Лицо в строке заявки: кадр общим правилом `.морда`, размер — здесь. */
.заявка-лицо { width:44px; height:44px; flex:none; border-radius:50%;
  overflow:hidden; display:block; background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 2px rgba(154,119,66,.6); }
/* Шапка сведения — лицо, имя с уровнем и цена: сводят конкретным
   существом, и решают, глядя на него (макет 4 сентября). */
.шапка-сведения { display:flex; align-items:center; gap:10px;
  margin-bottom:8px; }
.шапка-сведения .заявка-т b { display:block; font:800 13px/1.15 var(--fat);
  color:var(--paper); }
.шапка-сведения .заявка-т span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
.моя-заявка { display:flex; align-items:center; gap:10px; padding:9px 10px;
  border-radius:14px; margin-bottom:10px; background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px var(--brass); color:var(--paper); }
.моя-заявка .заявка-т { flex:1; min-width:0; }
.моя-заявка .заявка-т b { display:block; font:800 12.5px/1.15 var(--fat); }
.моя-заявка .заявка-т span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
/* Заявка соседа — карточка, а не строка списка: по ней принимают
   решение, а решают по существу, и лицо тут не украшение. */
.сосед { display:flex; flex-direction:column; gap:7px; padding:9px 10px;
  border-radius:14px; margin-bottom:8px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.сосед-верх { display:flex; align-items:center; gap:10px; }
.сосед-верх .заявка-т { flex:1; min-width:0; }
.сосед-верх .заявка-т b { display:block; font:800 12.5px/1.15 var(--fat); }
.сосед-верх .заявка-т > span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
.сосед-низ { display:flex; align-items:center; gap:8px; }
.сосед-низ .тихо { flex:1; font:700 10.5px/1.2 var(--sans); }
.сосед-низ .отказ { font:700 10.5px/1.2 var(--sans); color:var(--dusk);
  text-align:right; }
/* Что здесь нового — латунью: это единственная причина сводиться
   с чужим, и она обязана читаться раньше всего остального. */
.новое-в { display:inline-block; margin-top:4px; padding:3px 7px;
  border-radius:7px; font:800 9.5px/1.2 var(--sans); color:#2A1A08;
  background:var(--brass); }
.сосед.нельзя { opacity:.62; }

/* ---------- сезон: лестница на три недели ---------- */
/* Шапка сезона — три числа в столбик: уровень, полоса, остаток. Полоса
   между цифрами намеренно: она и есть перевод «сколько жетонов»
   в «сколько пути», а число рядом отвечает тем, кто считает. */
.сезон-шапка { display:flex; flex-direction:column; gap:6px;
  background:rgba(0,0,0,.24); border-radius:14px; padding:11px 13px;
  margin:8px 0 10px; }
.сезон-уровень { font:900 17px/1.1 var(--fat); color:var(--lampLit); }
.сезон-шапка .полоса { max-width:none; height:7px; }
/* Плашка сезона на «Делах» зовёт, только когда есть что забрать: кант
   на ней иначе горел бы постоянно и перестал бы значить что-либо. */
.зов-яслей.зовёт { box-shadow:inset 0 0 0 1px var(--brass); }

/* Подписи веток стоят НАД лестницей, а не в каждой строке: тридцать
   раз «Всем / По пропуску» — это тридцать раз один и тот же текст. */
.ветки { display:grid; grid-template-columns:34px 1fr 1fr; gap:8px;
  padding:0 4px 4px; }
.ветки .тихо:first-child { grid-column:2; }
/* ИМЕНА СВОИ, А НЕ ОБЩИЕ (найдено владельцем на боевом 31 августа:
   «пишет, что я могу забрать награды, но я их не вижу»).

   `.ступень` в игре уже занята ДВАЖДЫ: это бирка тира на коконе
   (`position:absolute`) и ступенька лестницы захода (`flex`). Третье
   правило с тем же именем перекрыло `display`, но НЕ перекрыло
   `position:absolute` от бирки — и все тридцать строк лестницы сезона
   легли одна на другую в углу родителя. Разметка была, данные были,
   на экране не было ничего.

   Страж стилей этого не ловил: класс описан, и описан трижды. Ловит
   он «класс есть в разметке, но не в стилях», а не «одно имя — три
   значения». Отсюда правило: экран, вводящий свои элементы, называет
   их своими именами. */
.лестница-сезона { display:flex; flex-direction:column; gap:6px; }
.ступень-сезона { display:grid; grid-template-columns:34px 1fr 1fr; gap:8px;
  align-items:stretch; }
.ступень-номер { display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(0,0,0,.28); color:var(--dusk);
  font:900 13px/1 var(--fat); font-variant-numeric:tabular-nums; }
/* Достигнутая ступень отмечена номером, а не всей строкой: подсветить
   строку целиком значило бы спорить с кнопкой «Забрать» внутри неё. */
.ступень-сезона.открыта .ступень-номер { background:linear-gradient(180deg,#3A2C42,#241A30);
  color:var(--lampLit); box-shadow:inset 0 0 0 1px var(--brass); }
.ступень-приз { display:flex; flex-direction:column; gap:5px; min-width:0;
  background:rgba(0,0,0,.24); border-radius:12px; padding:8px 10px; }
.ступень-приз .тихо { overflow:hidden; text-overflow:ellipsis; }
/* НАГРАДА ЗНАКОМ И ЧИСЛОМ. Знак крупнее числа: силуэт различается
   с одного взгляда, число читают, только когда уже поняли, чтó это.
   Цифры табличные — тридцать строк выстраиваются в столбик. */
.приз-знак { display:flex; align-items:baseline; gap:6px;
  font:900 14px/1.1 var(--fat); color:var(--paper);
  font-variant-numeric:tabular-nums; }
.приз-знак i { font-style:normal; font-size:18px; line-height:1;
  color:var(--lampLit); }
/* Закрытая ветка ГАСИТСЯ, но не прячется: спрятанное не покупают,
   а главное — игрок должен видеть, что именно проходит мимо. */
.ступень-приз.закрыта { opacity:.45; }
.ступень-приз.взята { opacity:.6; }

.тарифы { display:flex; flex-direction:column; gap:8px; margin:8px 0 12px; }
/* Средний тариф выделен кантом — тем же знаком «отмечено», что у готового
   задания и проходящей доски. Своего цвета у него нет: три разных
   выделения на экране спорят друг с другом. */
.кнопка.видный { box-shadow:inset 0 0 0 2px var(--brass), 0 3px 0 rgba(0,0,0,.4); }

/* ---------- экран рейтингов ---------- */
/* Переключатели вместо четырёх чисел разом: единицы у досок разные —
   колена, признаки, победы, пары, — и рядом они не сравниваются. */
/* РОВНО ПО КРАЯМ (владелец, 31 августа): левый прижат влево, правый
   вправо, остальные разложены между ними. При растягивании кнопок
   на равную долю («Род» и «Уникальность» рядом) короткое слово получало
   столько же места, сколько длинное, и ряд читался как набор пустых
   плашек разной наполненности. */
.переключатели { display:flex; flex-wrap:wrap; justify-content:space-between;
  gap:6px; margin-bottom:10px; }
.переключатель { flex:0 1 auto; padding:7px 12px; border:0; border-radius:999px;
  cursor:pointer; background:rgba(0,0,0,.28); color:var(--dusk);
  font:800 12px/1.2 var(--sans); }
.переключатель.на { background:linear-gradient(180deg,#3A2C42,#241A30);
  color:var(--lampLit); box-shadow:inset 0 0 0 1px var(--brass); }
/* Выбранная доска показывается целиком и крупно — ради этого экран
   и заведён.

   ФОН ТЁМНЫЙ, А НЕ КАНАТ (владелец, 31 августа: «текст на плашке
   не виден»). Плашка стояла на `.сцена` — золотой канат с заклёпками,
   и приглушённые подписи («тихо») по нему не читались вовсе: рама
   рассчитана на портрет, а не на текст. */
.доска-крупно { text-align:left; padding:14px 16px; margin-bottom:12px; }
.доска-крупно .доска-число { font-size:26px; margin:4px 0 6px; }
/* Строка «что сделать», когда сделать уже нечего. Тот же кант, что
   у проходящей доски и у готового задания: один знак «отмечено»
   на всю игру. */
.счёт.проходит { box-shadow:inset 0 0 0 1px var(--brass); color:var(--lampLit); }

/* ---------- доски месяца ---------- */
/* Четыре доски сеткой по две: в столбик они уводят опись за край экрана,
   в одну строку — не помещаются на телефоне. Своё число крупное, лидер
   и место мелкие: «вы 4 712-й» не отвечает ни на один вопрос игрока. */
.доски { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin:8px 0 12px; }
.доска { background:rgba(0,0,0,.24); border-radius:14px; padding:10px 12px;
  display:flex; flex-direction:column; gap:4px; min-width:0; }
.доска-имя { font:800 13px/1.2 var(--sans); color:var(--paper); }
.доска-имя .тихо { display:block; font-weight:600; margin-top:2px; }
.доска-число { font:900 20px/1.1 var(--fat); color:var(--lampLit);
  font-variant-numeric:tabular-nums; }
.доска-низ { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.доска-место { font:700 11px/1.2 var(--sans); color:var(--dusk);
  font-variant-numeric:tabular-nums; }
/* Доска без приза не прячется и не гасится: она честная доска, просто
   не цель Ярмарки. Гашение прочиталось бы как «недоделана». */
.доска.безприза { box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.доска-безприза { font:700 10.5px/1.2 var(--sans); color:var(--dusk);
  cursor:help; }
/* Доска, по которой игрок проходит на Ярмарку. Кант, а не заливка:
   заливка спорила бы с выбранной целью и с текущей ступенью захода,
   а кант читается как «отмечено», не как «нажато». */
.доска.проходит { box-shadow:inset 0 0 0 1px var(--brass); }

/* Летопись смотров — самое неспешное на вкладке, где и так всё
   неспешно. Строки в столбик, моноширинные числа: их сравнивают. */
.летопись { display:flex; flex-direction:column; gap:4px; margin:6px 0 12px; }
.строка-летописи { font:600 12px/1.35 var(--sans); color:var(--mauve);
  font-variant-numeric:tabular-nums; }
/* Зачем Круг — над кнопкой: пока не сказано, бой читается углом,
   не связанным с игрой. */
/* Объяснение Круга — строкой, а не плашкой (UI-40, 5 сентября).
   Плашка ставила его в один ряд с отказом и с пустым списком: три
   одинаковых на вид блока, разных по смыслу. */
.зачем-круг { margin:2px 2px 10px; font:700 11px/1.4 var(--sans);
  color:var(--mauve); }

/* Товар: что даёт — крупнее, чем как называется. Цена стоит кнопкой:
   нажать и узнать цену — это две разные вещи, и разделять их незачем. */
.товар { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px;
  align-items:center; padding:11px 12px; margin-bottom:8px; border-radius:13px;
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.товар.нельзя { opacity:.62; box-shadow:none; background:rgba(0,0,0,.25); }
.про-товар { min-width:0; }
.имя-товара { font:900 13.5px/1.15 var(--fat); }
.имя-товара em { font:italic 700 11px/1 var(--sans); color:var(--moss); }
.что-даёт { font-size:11.5px; color:var(--mauve); margin-top:2px; }
.лимит { font-size:11px; color:var(--dusk); margin-top:2px; }
.товар .отказ { grid-column:1 / -1; font-size:11.5px; color:var(--clay); }
/* Тупик — единственная плашка цветом беды: остальные предлагают
   возможность, эта сообщает, что игра встала. */
.намёк.тупик { box-shadow:inset 0 0 0 1px rgba(196,102,92,.5);
  background:rgba(196,102,92,.12); margin-bottom:10px; }
.намёк.тупик b { color:var(--clay); }
.намёк.тупик .кнопка { margin-top:8px; }
/* «Оставить себе» — решение с ценой: место навсегда. Латунный кант,
   как у прочих решений, а не цвет беды: это не поломка, а выбор. */
.намёк.оставить { box-shadow:inset 0 0 0 1px var(--brass); margin-top:10px; }
.намёк.оставить b { color:var(--lampLit); display:block; }
.намёк.оставить .кнопка { margin-top:8px; }
.про-ясли b { display:block; font:800 13px/1.2 var(--fat); color:var(--lampLit); }
.про-ясли span { font:400 11.5px/1.3 var(--sans); color:var(--mauve); }
.стрелка-яслей { margin-left:auto; font-style:normal; color:var(--lamp); font-size:18px; }

/* Строка внутри намёка: заголовок и пояснение — разные строки. Слитые,
   они читаются одним предложением, и первое слово пояснения прилипает
   к последнему слову заголовка. */
.намёк .строкой { display:block; margin-top:3px; }
/* Тихая кнопка: действие второго ряда. Золото на экране принадлежит
   тому, ради чего экран открыт, — «принять», а не «отпустить». */
.кнопка.тихая { background:linear-gradient(180deg,#2A2136,#221A2E);
  color:var(--dusk); box-shadow:inset 0 1px 0 rgba(232,206,150,.1); }

/* ---------- ЯСЛИ: сцена с люльками (макет Ясли v3, 4 сентября) ----------
   Прежде пустые ясли были одной серой плашкой на весь экран, а полные —
   списком, из которого не видно ни сколько мест, ни сколько малышей.
   Сцена отвечает на это картинкой; фон — тот же сарай, что во Дворе:
   ясли стоят в питомнике, а не в отдельной вселенной. */
.сцена-яслей { flex:0 0 auto; position:relative; border-radius:18px;
  overflow:hidden; padding:30px 14px 14px; margin-bottom:10px;
  box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(154,119,66,.5); }
.фон-яслей { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.4) saturate(.8) blur(1px); }
.сцена-яслей::before { content:''; position:absolute; left:50%; top:-110px;
  width:250px; height:220px; transform:translateX(-50%); pointer-events:none;
  background:conic-gradient(from 168deg at 50% 0, transparent 0deg,
    rgba(246,208,138,.28) 6deg, rgba(246,208,138,.28) 18deg, transparent 24deg);
  filter:blur(7px); }
.нутро-яслей { position:relative; z-index:2; }
.мест-в-яслях { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:13px; background:rgba(20,14,28,.72); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.5); }
.мест-в-яслях b { font:900 13px/1.2 var(--fat); color:var(--lampLit); }
.мест-в-яслях .подпись { flex:1; font:700 10.5px/1.3 var(--sans); color:var(--mauve); }
.мест-в-яслях .ссылка-строкой { padding:0; font-size:11px; white-space:nowrap; }
/* Люлька — та же лунка, что у коконов: вдавленная, с контактной тенью.
   Занятая показывает лицо, пустая просто пуста. */
.люльки { display:flex; gap:9px; margin-top:11px; }
.люлька { flex:1; aspect-ratio:1; border-radius:50% 50% 42% 42%;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse 60% 40% at 50% 68%,rgba(0,0,0,.6),transparent 74%),
             linear-gradient(180deg,#2C2436,#1A1424);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.75), inset 0 -2px 0 rgba(150,140,160,.14); }
.люлька img { width:74%; border-radius:50%; }
.люлька.пустая { opacity:.6; }

/* Малыш в яслях: лицо, чем он лучше, признаки и две кнопки.
   ЧЕМ ЛУЧШЕ — ГЛАВНОЕ. Прежде здесь стояли четыре числа, которые
   не с чем сравнить: экран предлагал решать вслепую то единственное,
   ради чего его открывают. */
.чем-лучше { display:flex; flex-direction:column; gap:4px; margin:6px 0; }
.чем { display:block; padding:5px 9px; border-radius:9px;
  font:800 10.5px/1.3 var(--sans); }
/* Признак, которого нет ни у кого, — сильнее любого числа: силу добирают
   уровнями, признак не добрать ничем. Он и горит. */
.чем.важно { color:var(--lampInk);
  background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.чем.плюс { color:var(--paper); background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }
.чем.минус { color:var(--dusk); background:rgba(0,0,0,.25); }
/* Срок — единственная в яслях потеря, и рамка говорит о ней раньше слов. */
.малыш.срочный { box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--clay); }
.малыш { display:grid; grid-template-columns:64px minmax(0,1fr); gap:11px;
  padding:11px; margin-bottom:9px; border-radius:14px;
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.лицо-малыша { width:64px; height:64px; border-radius:13px; overflow:hidden;
  background:rgba(0,0,0,.35); display:block; }
/* Тем же правилом, что кружок: голова в кадре, поля за краем.
   Мера по умолчанию — малыша разглядывают так же, как выбирают бойца. */
.про-малыша { min-width:0; }
.имя-малыша { font:900 14px/1.1 var(--fat); }
.откуда { font-size:11px; color:var(--dusk); margin-top:2px; }
/* Срок виден цветом беды: часы идут только у лишних, и это
   единственная в игре потеря — о ней предупреждают заранее. */
.срок-яслей { font:700 11.5px/1.2 var(--sans); color:var(--clay); margin-top:3px; }
.пр { font:700 10.5px/1 var(--sans); padding:4px 7px; border-radius:8px;
  background:rgba(0,0,0,.3); color:var(--paper);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
.кнопки-малыша { grid-column:1 / -1; display:flex; gap:7px; }
.кнопки-малыша .кнопка { flex:1; }

/* ---------- СЕЗОН: окно ступеней, шкала зарубками (5 сентября) ----------
   Тридцать ступеней подряд давали шестьдесят строк «Ещё не открыт /
   Нужен пропуск»: экран читался ведомостью. Показываем окно вокруг
   текущего уровня — то же решение, что у Рейтингов (Р-243). */
.шкала-сезона { flex:0 0 auto; padding:12px 14px; border-radius:16px;
  color:var(--paper); background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.верх-сезона { display:flex; align-items:baseline; gap:8px; }
.верх-сезона b { font:900 20px/1 var(--fat); color:var(--lampLit); }
.срок-сезона { margin-left:auto; font:700 10.5px/1.2 var(--sans); color:var(--dusk); }
/* Зарубки — тем же языком, что лестница Рода на витрине питомника:
   один способ показывать путь на всю игру. */
.зарубки-сезона { display:flex; align-items:flex-end; gap:2px; height:26px;
  margin:10px 0 5px; }
.зарубки-сезона i { flex:1; border-radius:3px; background:rgba(0,0,0,.4);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.28); }
.зарубки-сезона i.on { background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.зарубки-сезона i.next { box-shadow:inset 0 0 0 2px var(--lampLit); }
.под-сезона { display:flex; justify-content:space-between;
  font:800 10px/1.2 var(--sans); color:var(--mauve); }
.под-сезона b { color:var(--lampLit); }
/* Пропуск карточкой под шкалой: решение о покупке принимают в начале,
   а не пролистав тридцать ступеней. */
.пропуск-сезона { flex:0 0 auto; display:flex; gap:11px; align-items:center;
  padding:11px; margin-top:10px; border-radius:15px; color:var(--parchInk);
  background:linear-gradient(180deg,#E8D6AE,var(--parch));
  box-shadow:0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.лик-пропуска { flex:0 0 46px; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; background:linear-gradient(180deg,#6A4C28,#3A2712); }
.лик-пропуска img { height:28px; width:auto; }
.про-пропуск { flex:1; min-width:0; }
.про-пропуск b { display:block; font:900 14px/1.2 var(--fat); }
.про-пропуск span { display:block; margin-top:2px;
  font:700 10.5px/1.3 var(--sans); opacity:.8; }
.шапки-сезона { display:flex; gap:9px; margin:14px 0 5px; padding-left:41px;
  font:800 9.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--dusk); }
.шапки-сезона span { flex:1; }
.ступ-сезона { display:flex; gap:9px; align-items:stretch; margin-bottom:8px; }
.н-ступени { flex:0 0 32px; display:grid; place-items:center; border-radius:11px;
  font:900 14px/1 var(--fat); color:var(--dusk); background:rgba(0,0,0,.3); }
.ступ-сезона.готова .н-ступени { color:var(--lampInk);
  background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.ступ-сезона.взята .н-ступени { color:#8FBF6A; }
/* Награда лицом: колонка из шестидесяти одинаковых слов не читается. */
.приз-сезона { flex:1; min-width:0; display:flex; gap:8px; align-items:center;
  padding:8px 10px; border:0; border-radius:12px; text-align:left; font:inherit;
  color:var(--paper); background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:inset 0 1px 0 rgba(232,206,150,.12); }
.приз-сезона img { height:24px; width:auto; }
.гл-приза { font-style:normal; font:900 18px/1 var(--fat); color:var(--lampLit); }
.приз-сезона b { font:900 12px/1.2 var(--fat); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.приз-сезона.закрыт { opacity:.45; }
.приз-сезона.взят { opacity:.5; }
.приз-сезона.взят::after { content:'\2714'; margin-left:auto; color:#8FBF6A;
  font:900 12px/1 var(--sans); }
.приз-сезона.можно { cursor:pointer; box-shadow:inset 0 0 0 2px var(--lamp); }
.приз-сезона .взять { margin-left:auto; font-style:normal;
  font:900 10px/1 var(--sans); color:var(--lampInk); padding:4px 7px;
  border-radius:7px; background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.ещё-ступеней { display:block; width:100%; text-align:center; padding:6px 0;
  font:800 11px/1.2 var(--sans); color:var(--lamp); }

/* ---------- ЛАВКА: один список по нуждам (5 сентября) ----------
   Вкладок было пять, товаров на каждой — по два: они прятали то, чего
   и так мало. Заголовок называет затруднение игрока, а не раздел прайса. */
.кошель-лавки { flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:9px 12px; margin-bottom:10px; border-radius:13px; color:var(--paper);
  background:rgba(20,14,28,.6); box-shadow:inset 0 0 0 1px rgba(154,119,66,.45); }
.кошель-лавки img { height:22px; width:auto; }
.кошель-лавки b { font:900 15px/1 var(--fat); color:var(--lampLit); }
.кошель-лавки .подп { flex:1; font:700 10.5px/1.3 var(--sans); color:var(--mauve); }
.кошель-лавки .ссылка-строкой { padding:0; font-size:11px; white-space:nowrap; }
.нужда-лавки { flex:0 0 auto; margin:14px 0 9px; }
.нужда-лавки:first-of-type { margin-top:2px; }
.нужда-лавки b { display:block; font:900 13px/1.2 var(--fat); color:var(--lampLit); }
.нужда-лавки span { display:block; margin-top:2px;
  font:700 10.5px/1.35 var(--sans); color:var(--mauve); }
/* Товар лицом: значок в нише, как кокон в лунке. Витрина без картинки —
   это прайс-лист. */
.товар-лавки { flex:0 0 auto; display:flex; gap:12px; align-items:center;
  padding:11px; margin-bottom:9px; border-radius:15px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.товар-лавки.нельзя { opacity:.6; }
.витр-товара { flex:0 0 52px; width:52px; height:52px; border-radius:13px;
  display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse 60% 45% at 50% 62%,rgba(0,0,0,.5),transparent 74%),
             linear-gradient(180deg,#3A2D46,#221A2E);
  box-shadow:inset 0 1.5px 0 rgba(228,194,136,.24), inset 0 -5px 9px rgba(0,0,0,.5); }
.витр-товара img { height:30px; width:auto; }
.гл-товара { font-style:normal; font:900 22px/1 var(--fat); color:var(--lampLit); }
.товар-лавки .про-товар { flex:1; min-width:0; }
/* Кнопка называет ДЕЙСТВИЕ, цена под ним: прежде на ней стояла одна
   цена, и золотой прямоугольник читался ярлыком, а не кнопкой. */
.купить { flex:0 0 auto; padding:9px 13px; border-radius:12px; border:0;
  cursor:pointer; text-align:center; font:900 13px/1.1 var(--fat);
  color:var(--lampInk); background:linear-gradient(180deg,var(--lampTop),var(--lampBot));
  box-shadow:0 3px 0 rgba(0,0,0,.45); }
.купить small { display:block; margin-top:2px; font:800 8.5px/1 var(--sans); opacity:.75; }
.купить.нету { cursor:default; color:var(--dusk); background:rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }

/* ---------- СЛУЖБА: кто уходит и куда (5 сентября) ----------
   Экран показывал три плашки с платой и ни слова о самом существе:
   решение необратимое, а глядеть не на что. Пергамент — бумага
   Ведомства, и на ней стоит тот, о ком решают. */
.кто-уходит { flex:0 0 auto; display:flex; gap:12px; align-items:center;
  padding:12px; border-radius:16px; color:var(--parchInk);
  background:linear-gradient(180deg,#E8D6AE,var(--parch));
  box-shadow:0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.лик-уходит { flex:0 0 72px; width:72px; height:72px; border-radius:50%;
  overflow:hidden; background:#1A1224; box-shadow:0 0 0 3px #6A4C28; }
.лик-уходит img { width:100%; height:100%; object-fit:cover; }
.про-уходит { flex:1; min-width:0; }
.про-уходит b { display:block; font:900 18px/1.15 var(--fat); }
.прожил { display:block; margin-top:2px; font:800 11px/1.3 var(--sans); opacity:.8; }
/* Чем был ценен — бирками: их читают взглядом, а решение принимают
   за секунду. Абзац здесь не прочтёт никто. */
.чем-был { display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.чем-был i { font-style:normal; font:800 10px/1.2 var(--sans);
  padding:3px 8px; border-radius:8px; background:rgba(58,42,22,.14);
  box-shadow:inset 0 0 0 1px rgba(58,42,22,.25); }
/* Отдел — карточка со своей кнопкой: три отдела это три разных исхода,
   и общая кнопка внизу не сказала бы, какой из них выбран. */
.отдел-службы { position:relative; display:flex; gap:10px; align-items:flex-start;
  padding:12px; margin-top:9px; border-radius:15px; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.отдел-службы.нельзя { opacity:.55; }
.печать-отдела { flex:0 0 42px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; font:900 18px/1 var(--fat);
  color:var(--lampInk); background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.отдел-службы.нельзя .печать-отдела { color:var(--dusk);
  background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }
.отдел-службы .про-отдел { flex:1; min-width:0; }
.отдел-службы .про-отдел b { display:block; font:900 14px/1.2 var(--fat); }
.отдел-службы .берут { display:block; margin-top:2px;
  font:700 10.5px/1.3 var(--sans); color:var(--mauve); }
.отдел-службы .зачем { display:block; margin-top:5px;
  font:700 11px/1.35 var(--sans); color:var(--paper); opacity:.85; }
.отдел-службы .служба-отказ { display:block; margin-top:5px;
  font:800 11px/1.35 var(--sans); color:var(--clay); }
/* Плата латунью, а не зелёным: зелёный в игре ниоткуда не следует. */
.отдел-службы .плата { flex:0 0 auto; text-align:right;
  font:900 15px/1.1 var(--fat); color:var(--lampLit); }
.отдел-службы.нельзя .плата { color:var(--dusk); }
/* Необратимость названа ДО нажатия и своим цветом: тихая строка внизу
   говорила то же самое, но читалась примечанием. */
.навсегда { flex:0 0 auto; margin-top:10px; padding:9px 12px; border-radius:12px;
  font:800 11px/1.4 var(--sans); color:#E8C7B0;
  background:rgba(122,58,40,.28); box-shadow:inset 0 0 0 1px rgba(194,112,74,.55); }

/* Отдел Службы: плата справа, отказ — своей строкой и своим цветом.
   Отказ говорит ПОЧЕМУ, а не гасит кнопку молча. */
.отдел { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px;
  align-items:center; padding:11px 12px; margin-bottom:8px; border-radius:13px;
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.отдел.нельзя { opacity:.6; box-shadow:none; background:rgba(0,0,0,.25); }
.про-отдел { min-width:0; }
.имя-отдела { font:900 13.5px/1.15 var(--fat); }
.берут { font-size:11px; color:var(--dusk); margin-top:2px; }
.плата { text-align:right; font:900 15px/1 var(--fat); color:var(--moss);
  white-space:nowrap; }
.отдел.нельзя .плата { color:var(--dusk); }
.зачем { grid-column:1 / -1; font-size:11.5px; color:var(--mauve); }
.отказ { grid-column:1 / -1; font-size:11.5px; color:var(--clay); }
.отдел-взять { grid-column:1 / -1; }
/* Предупреждение о ценном существе — цветом беды, а не намёка:
   после этого шага записи не вернуть. */
.строгое { border-radius:12px; padding:11px 12px; margin-top:10px;
  background:rgba(196,102,92,.14); box-shadow:inset 0 0 0 1px rgba(196,102,92,.5);
  font-size:12.5px; }
.строгое b { display:block; color:var(--clay); font:900 13px/1.2 var(--fat);
  margin-bottom:4px; }
.тихо-намёк { color:var(--dusk); font-size:11.5px; }

/* ---------- показ боя ---------- */
/* Строй напротив строя: пара бьётся с парой, и это правило боя,
   а не украшение (`targetFor`). Сегодня в Круге один на один — разметка
   собрана рядами с первого дня, чтобы команды не переписывали её потом
   целиком. */
.поле-боя { position:relative; padding:10px 4px 4px; }
.пара { display:grid; grid-template-columns:1fr 34px 1fr; align-items:center;
  gap:6px; margin-bottom:8px; }
.пара:last-child { margin-bottom:0; }
.нить { height:1px; background:linear-gradient(90deg,transparent,
  rgba(232,206,150,.16),transparent); }
.поле-боя .боец { display:flex; flex-direction:column; align-items:center; gap:4px;
  min-width:0; }
.поле-боя .боец b { font:800 11px/1.1 var(--fat); max-width:110px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.поле-боя .лицо-боя { position:relative; width:96px; height:96px; }
.боец.пал { opacity:.35; filter:grayscale(1); }
.боец.пал .лицо-боя { transform:rotate(-6deg); }
/* Полоса здоровья: своя латунная, чужая мшистая — сторону видно
   боковым зрением, не читая имён. */
.полоса { width:100%; max-width:118px; height:5px; border-radius:3px;
  background:rgba(0,0,0,.5); overflow:hidden; }
.полоса i { display:block; height:100%; transition:width .28s ease;
  background:linear-gradient(90deg,#6E9E6E,var(--moss)); }
.боец.мой .полоса i { background:linear-gradient(90deg,#B7802F,var(--lamp)); }
.вспышка { position:absolute; inset:0; background:var(--clay); opacity:0;
  pointer-events:none; }
.боец.цель .вспышка { animation:мигнуть .28s; }
.боец.цель .лицо-боя { animation:тряска .26s; }
@keyframes тряска { 0%{transform:translateX(0)} 25%{transform:translateX(5px)}
  60%{transform:translateX(-4px)} 100%{transform:translateX(0)} }
@keyframes мигнуть { 0%{opacity:.5} 100%{opacity:0} }
/* СЛЕД — сам удар. Поворот держит обёртка, растяжение — вложенный
   элемент: анимация `transform: scaleX(...)` затирает inline-поворот
   целиком, и на макете из-за этого все следы летели вправо. */
.след { position:absolute; transform-origin:0 50%; pointer-events:none; }
.след i { display:block; height:14px; border-radius:10px; filter:blur(2px);
  transform-origin:0 50%; animation:чирк .3s ease-out forwards;
  background:linear-gradient(90deg,rgba(246,208,138,0),rgba(246,208,138,.9),
    rgba(246,208,138,0)); }
.след.крит i { height:20px;
  background:linear-gradient(90deg,rgba(246,208,138,0),#FFF2CF,rgba(216,156,66,0)); }
.след.мимо i { height:10px;
  background:linear-gradient(90deg,rgba(185,166,192,0),rgba(185,166,192,.5),
    rgba(185,166,192,0)); }
@keyframes чирк { 0%{transform:scaleX(.05);opacity:0}
  30%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} }
.цифра { position:absolute; font:900 15px/1 var(--fat); color:var(--clay);
  text-shadow:0 2px 0 rgba(0,0,0,.6); pointer-events:none;
  animation:всплыть .85s ease-out forwards; }
.цифра.крит { color:var(--lampLit); font-size:20px; }
@keyframes всплыть { 0%{transform:translateY(0);opacity:0}
  20%{opacity:1} 100%{transform:translateY(-26px);opacity:0} }
/* Лог во время боя занимает нижнюю половину и прокручивается сам:
   свежая строка обязана быть видна без единого движения пальцем. */
.ход-лог { max-height:38vh; overflow-y:auto; margin-top:8px; }
.поле-боя .пусто-место { visibility:hidden; }

/* ---------- бой ---------- */
/* ИТОГ БОЯ: строи, исход, рассказ, и только потом лог.
   Размер лица говорит исход раньше заголовка — победившая сторона
   на треть крупнее. Признаков и вещей вокруг нет намеренно (владелец,
   29 августа): на этом экране существо смотрят как бойца, а не как
   набор слотов.
   СТОРОНА ЦЕЛИКОМ, а не первый её боец: команды появятся позже,
   и разметка ждёт их с первого дня. */
.строи { display:flex; align-items:flex-end; justify-content:center;
  gap:12px; margin-top:12px; }
.строй { display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:0; }
.против { color:var(--dusk); font:900 16px/1 var(--fat); padding-bottom:26px; }
.боец { display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:0; }
.боец b { font:900 13px/1.1 var(--fat); color:var(--paper);
  max-width:120px; text-align:center; overflow-wrap:anywhere; }
/* Лицо ужимается с ростом строя: пятеро по 96 px в телефон не влезут. */
.лицо-боя { display:block; width:var(--лицо,96px); height:var(--лицо,96px);
  border-radius:18px; overflow:hidden; background:rgba(0,0,0,.3);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
/* В БОЮ КАДР ШИРЕ. Здесь существо не опознают, а СМОТРЯТ, как оно
   дерётся: рывок и удар видны телом, а не мордой. Тот же приём,
   другая мера — фокус ниже, увеличение меньше. */
.лицо-боя { --фокус:40%; --крупно:1.15; }
.строй.победил .лицо-боя { width:calc(var(--лицо,96px)*1.33);
  height:calc(var(--лицо,96px)*1.33);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--lamp); }
.строй.победил b { color:var(--lampLit); }
.строй.проиграл .лицо-боя { filter:saturate(.55) brightness(.8); }
.строй.проиграл b { color:var(--dusk); }
/* Что получили и что нажили. Стоит между исходом и рассказом: это
   ответ на вопрос «а мне что с этого», и он не должен ждать под логом. */
.нажитое { display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-top:10px; }
.дано { font:900 15px/1 var(--fat); color:var(--moss); }
.предел { font:700 12px/1.3 var(--sans); color:var(--dusk); text-align:center; }
/* Примета — событие, а не строка отчёта: её видно раньше, чем прочтут. */
.примета { margin-top:4px; padding:6px 12px; border-radius:12px;
  background:rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px var(--brass);
  font:800 12.5px/1 var(--fat); color:var(--lampLit); }

/* Рассказ о бое — единственная строка, которую читают всегда,
   поэтому ей воздух и крупнее кегль лога. */
.рассказ { margin:10px 2px 0; font:400 14px/1.45 var(--sans);
  color:var(--paper); text-align:center; text-wrap:balance; }
/* Лог убирается под кнопку: он нужен не каждый раз, а место занимает
   всё (владелец, 29 августа: «лог боя может скрываться и открываться»). */
.ход-боя { display:block; width:100%; margin:12px 0 0; border:0; cursor:pointer;
  border-radius:12px; padding:9px 10px;
  background:linear-gradient(180deg,#2A2136,#221A2E); color:var(--dusk);
  font:800 12px/1 var(--fat);
  box-shadow:inset 0 1px 0 rgba(232,206,150,.1); }
.лог { background:linear-gradient(180deg,#2A2136,#221A2E); padding:11px 13px;
  box-shadow:inset 0 1px 0 rgba(232,206,150,.1); }
.строка-боя { font-size:12px; color:var(--mauve); padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.05); }
.строка-боя.раунд { color:var(--lamp); font-weight:800; margin-top:7px;
  border-bottom:0; }
.строка-боя.пал { color:var(--clay); font-weight:800; }
/* Ремарка без числа — единственная строка лога, которая ничего
   не считает. Курсив отделяет её от отчёта: глаз, ищущий урон,
   проходит мимо. */
.строка-боя.волосок { font-style:italic; color:var(--dusk); }
/* ЧЕТЫРЕ ЦВЕТА, И У КАЖДОГО ОДНО ЗНАЧЕНИЕ (владелец, 4 сентября:
   «цветов в бою не больше 4, радуги быть не должно»).

     нейтральный — обычный удар, промах, ремарка: фон боя, 80 % строк,
                   он не должен ничего кричать;
     красный     — крит, яд, отражение, «пал»: теряет больше обычного
                   или выбывает. Яду своего цвета не даём намеренно:
                   зелёный был бы пятым, а смысл тот же — здоровье
                   уходит быстрее. Источник отличает слово;
     синий       — броня, щит, блок, лечение: здоровье НЕ теряется,
                   неважно, не пропустил или вернул;
     латунь      — связка: сработало то, что игрок собрал сам.

   ЛАТУНЬ ТОЛЬКО АКЦЕНТОМ. Ею набраны заголовки разделов, и целиком
   латунная строка прочтётся как заголовок; поэтому у связки латунный
   ромб и вес, а не цвет всей строки. */
/* ЦВЕТ НА ДЕЙСТВИИ, А НЕ НА СТРОКЕ (владелец, 4 сентября: «подсвечивать
   нужно не всю строку, а только то действие, которое классифицируешь,
   как в Бойцовском клубе»). Залитая строка красит и служебные слова —
   «бьёт», «теряет», имена; глазу не за что зацепиться, и лог снова
   читается сплошняком. Выделены ровно те куски, ради которых лог
   открывают: сколько снял, сколько съела броня, что сработало. */
.строка-боя b { font-weight:800; font-style:normal; }
.бл-урон { color:var(--paper); }              /* обычный удар — нейтральный */
.бл-крит, .бл-яд, .бл-пал { color:#D08A6A; }  /* теряет больше обычного   */
.бл-броня, .бл-лечение { color:#7FA8C8; }     /* здоровье не теряется     */
.бл-связка { color:var(--lampLit); }          /* сработало собранное      */
/* Ромб остаётся на строке: он отмечает событие целиком, а не слово. */
.строка-боя.связка::before { content:'⬥'; margin-right:6px;
  color:var(--lampLit); }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}

/* ---------- карточка существа: метки по бокам, вещи под именем ----------
   Макет утверждён владельцем 28 августа. Левый столбец — верх тела,
   правый — низ: столбик читается как само существо. Пустые места видны
   рамкой — так «шесть признаков из восьми» видно без единого слова. */
/* РАЗМЕР СЧИТАЕТСЯ ОТ ЭКРАНА, А НЕ ОТ КАРТИНКИ.
   Здесь стояло `1fr` без `minmax(0,…)`: элемент сетки по умолчанию
   не уже своего содержимого, и портрет в тысячу точек растягивал
   колонку — страница уезжала вбок, у слов срезало первые буквы.
   Высота ограничена долей экрана: карточка обязана помещаться
   целиком, иначе слоты по краям не видно без прокрутки. */
.карточка-сцена .герой { max-height:34dvh; }
/* СЦЕНА НЕ РЕЗИНОВАЯ (владелец, 28 августа).
   Растягивающаяся сцена сжимала портрет на коротком экране, слоты
   признаков съезжали ниже картинки, а кнопки взамен росли в высоту.
   Теперь у сцены постоянная пропорция: слоты стоят там же относительно
   существа при любом экране. Не помещается — страница прокручивается
   внутри, и это честнее, чем менять макет под высоту окна. */
/* ХАБ ПРОКРУЧИВАЕТСЯ САМ. Без `overflow-y` содержимое, не влезшее
   в столбец, просто обрезалось: замер на 390pt — высота содержимого 821
   при окне 495, и `scrollTop` оставался нулём, потому что прокручивать
   было нечему. Так и пропадала ссылка на существо: она не «уезжала
   под кнопки», её было не достать вовсе.
   `overscroll-behavior` — чтобы прокрутка хаба не утягивала за собой
   страницу Telegram, закрывая мини-приложение жестом вниз. */
.pen-хаб { display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  gap:0; overflow-y:auto; overscroll-behavior:contain; }
.pen-хаб .сцена { flex:0 0 auto; }
/* СЦЕНА НА ХАБЕ НИЖЕ, ЧЕМ НА КАРТОЧКЕ (владелец, 29 августа:
   «сделай блок чуть меньше, чтобы снизу поднялись род, совершенство
   и характеристики»).

   Замер до правки: сцена 429 px при окне 677 — шестьдесят три процента
   экрана на портрет, а три сворачиваемых блока и кнопки уезжали
   за нижний край на 205 px.

   Пропорция остаётся постоянной — «сцена не резиновая» (28 августа),
   слоты признаков не съезжают, — но 3/2 вместо 5/4 отдаёт портрету
   на треть меньше высоты. Хабу это верно: там портрет узнают,
   а рассматривают на карточке существа. */
/* ВЫСОТУ СЦЕНЫ НА ХАБЕ ЗАДАЁТ ПОРТРЕТ, А НЕ ПРОПОРЦИЯ.
   
   `aspect-ratio` тут не работает и работать не может: высота ряда сетки
   определяется содержимым, картинка с `height:100%` от неопределённой
   высоты берёт свою природную — и растягивает рамку обратно. Замер:
   при пропорции 3/2 сцена оставалась 420 px вместо 357.
   Пропорция с потолком в картинке дала другую беду — рамка держала
   старую высоту, а под уменьшенным портретом зияла латунная пустота.

   Поэтому правило простое: потолок ставим КАРТИНКЕ, рамка следует
   за ней. Слоты признаков идут теми же четырьмя долями и остаются
   на своих местах относительно существа — то, ради чего 28 августа
   сцену делали непружинящей.

   Потолок подобран замером, а не на глаз: при 26dvh два блока из трёх
   всё ещё уходили под нижний ряд (содержимое 613 при окне 571).
   При 21dvh сцена 420 → 178 px, и все три видны сразу. */
.pen-хаб .карточка-сцена .герой { height:auto; max-height:21dvh;
  object-fit:contain; }
/* НИЖНИЙ РЯД — НЕВЫСОКИЙ (владелец, 28 августа: «сделай кнопки
   покормить и сложить коконы меньше по высоте, такие же, как на Мире»).
   Содержимое в строку, а не столбиком: цена и часы рядом с глаголом,
   а не под ним — от этого кнопка и была вдвое выше нужного. */
.pen-хаб .действия .кнопка { min-height:0; flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:8px;
  padding:11px 12px 13px; font-size:15px; }
.pen-хаб .действия .кнопка b { font-size:16px; }
.pen-хаб .действия .кнопка .часы { display:inline; margin:0; font-size:11px; }
.pen-хаб .вещи, .pen-хаб .ссылка-строкой, .pen-хаб .места,
.pen-хаб .действия, .pen-хаб .блок { flex:0 0 auto; }
/* КНОПКИ ПРИКЛЕЕНЫ К НИЖНЕМУ РЯДУ, А ЭКРАН ЕЗДИТ ПОД НИМИ
   (владелец, 28 августа: «кнопки ушли вниз, а должны быть прикреплены
   к нижнему меню, уходить под кнопки должен экран существа»).

   `margin-top:auto` прижимал их к низу СОДЕРЖИМОГО — а содержимое
   на большом экране длиннее окна, и кнопки уезжали вместе с ним.
   Липкий низ держит их на месте всегда: сцена прокручивается под ними.

   Ряд мест едет вместе с кнопками: выбрать, кого кормить, нужно ровно
   там же, где кормят. */
/* ОДИН ЛИПКИЙ БЛОК ВМЕСТО ТРЁХ.
   Раньше липли ряд мест и ряд кнопок по отдельности, каждый со своим
   `bottom`. Всё, что стояло в потоке ВЫШЕ них, при прокрутке до конца
   пряталось под ними — так пропадала ссылка на существо (замер 390pt:
   перекрытие 28 px). Достать её было нечем: липкий ряд держится выше
   своего места в потоке, и прокрутка на него не действует.

   Теперь низ — один блок: что попало в него, видно всегда; что осталось
   в сцене, честно прокручивается и ни подо что не уходит. Складывать
   `bottom` для каждой полосы больше не нужно, и разъехаться им негде. */
.pen-хаб .низ { position:sticky; bottom:0; z-index:4; margin-top:auto;
  background:var(--night); padding:2px 0 8px;
  box-shadow:0 -8px 12px -6px rgba(0,0,0,.6); }
/* СЧЁТЧИК СРОЧНОГО — СТРОКОЙ, А НЕ ПЛАШКОЙ (12 сентября).
 *
 * Он не решение, а указатель: «есть ещё, оно ниже». Плашка того же
 * вида, что зовы, читалась бы как четвёртое дело в ряду дел — и снова
 * растила бы низ, ради уменьшения которого всё и сделано. */
.ещё-срочное { display:flex; width:100%; align-items:center;
  justify-content:center; gap:6px; background:none; border:0; cursor:pointer;
  padding:7px 4px 5px; color:var(--lamp); font:800 12px/1.2 var(--sans); }
.ещё-срочное i { font-style:normal; font-size:14px; transform:rotate(90deg); }
.срочное-ещё { margin-top:12px; }
.pen-хаб .низ .места { padding:6px 0 2px; }
.pen-хаб .низ .ссылка-строкой { margin:2px auto 0; }
.карточка-сцена { display:grid; grid-template-columns:52px minmax(0,1fr) 52px;
  gap:6px; align-items:stretch; }
.слоты { display:flex; flex-direction:column; justify-content:space-between;
  gap:6px; }
/* Столбцы задаются ЯВНО, а не порядком в разметке: порядок молчит,
   и перестановка двух строк местами меняла бы верх тела с низом,
   не оставляя следа ни в стилях, ни в проверке. Классы `слева`/`справа`
   стояли в разметке с самого начала и не значили ничего — их нашёл
   страж, когда научился смотреть в `shared/core/`. */
.слоты.слева { grid-column:1; }
.слоты.справа { grid-column:3; }
/* Нижний предел места метки — 36 px: ниже подпись в два слова перестаёт
   помещаться. Было 44, и именно эти четыре места держали высоту сцены
   (216 px при портрете 176): пропорция и потолок картинки упирались
   в столбик слотов, а не наоборот. */
.слот, .вещь { flex:1; min-height:36px; border-radius:12px; display:flex;
  align-items:center; justify-content:center; padding:4px; text-align:center;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
/* Место, которое ещё не назвали: карточка в пути. Форма та же, надписи
   нет — иначе на долю секунды появлялся бы текст, который тут же
   сменится другим. */
.слот.ждёт { opacity:.55; }
/* ПОДПИСЬ МЕСТА ПЕРЕНОСИТСЯ, А НЕ ОБРЕЗАЕТСЯ (владелец, 4 сентября).
   «Сложени» вместо «Сложение» — это не тесно, это неверно: место
   называется своим именем или не называется вовсе. Столбец узкий
   и шире не станет, значит переносим по слогам и разрешаем две строки. */
.слот em, .вещь em { font:700 9px/1.15 var(--sans); font-style:normal;
  color:var(--dusk); overflow:hidden; hyphens:auto; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.слот.занят, .вещь.занята {
  background:linear-gradient(180deg,#3A2C42,#241A30);
  box-shadow:inset 0 1px 0 rgba(232,206,150,.18), 0 2px 0 rgba(0,0,0,.4); }
.слот.занят em, .вещь.занята em { color:var(--paper); }
/* Ссылка строкой: нужна редко, кнопкой спорила бы за внимание
   с кормлением — а первый шаг игры именно кормление. */
/* Ссылки строкой: «Скопировать ссылку» и «Отправить на службу» равны
   по весу и стоят рядом. Значок перед словами — чтобы глаз находил
   нужную, не читая обе. */
.ссылки { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  margin-top:10px; }
.ссылка-строкой { display:inline-flex; align-items:center; gap:5px;
  margin:10px auto 0; background:none; border:0;
  cursor:pointer; color:var(--brass); font:700 12px/1 var(--sans);
  text-decoration:underline; text-underline-offset:3px; }
.ссылки .ссылка-строкой { margin:0; }
.ссылка-строкой i { font-style:normal; font-size:13px; text-decoration:none; }

/* Заголовок внешней страницы: имя существа. В игре ту же роль играет
   шапка экрана — отсюда одно правило и один вид. */
.карточка-внешняя ~ .cta { margin-top:16px; }
/* Заливка градиентом ПО ТЕКСТУ снята: вместе с тенью корпуса она
   двоила буквы на телефоне владельца — тень рисуется под всем блоком,
   а не под буквами, и вылезала из-под прозрачного текста. */
.top h1 { margin:0 0 14px; font:900 24px/1.1 var(--fat); letter-spacing:-.02em;
  color:var(--lamp); text-shadow:0 2px 0 rgba(0,0,0,.45); }
/* Три места под вещи: занятое — плашка с именем, пустое — вдавленное
   гнездо с кольцом. Слов у пустого нет: пустая рамка и так пуста,
   а три «пусто» подряд читаются как содержимое. */
.вещи { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin-top:10px; }
.вещь { min-height:46px; position:relative; }
.вещь:not(.занята) { background:
    radial-gradient(ellipse 42% 30% at 50% 60%,rgba(0,0,0,.45),transparent 75%),
    linear-gradient(180deg,#150F20,#221A2E);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.7), inset 0 -1px 0 rgba(228,194,136,.1); }
/* Кольцо — знак места: сюда что-то входит. Тонкое и тихое, чтобы
   не спорить с занятыми. */
.вещь:not(.занята)::after { content:''; position:absolute; width:18px; height:18px;
  border-radius:50%; border:1.5px dashed rgba(154,119,66,.55); }

/* Внешняя страница карточки: та же таблица стилей, что и в игре.
   Обёртка даёт ей поля и фон — остальное уже описано выше. */
.wrap { max-width:560px; margin:0 auto; padding:16px 12px 28px; }
.карточка-внешняя { margin-bottom:16px; }
.cta { display:block; text-align:center; text-decoration:none; border-radius:16px;
  padding:15px 14px 17px; font:900 16px/1.1 var(--fat); color:var(--lampInk);
  background:linear-gradient(180deg,var(--lampTop),var(--lampBot));
  box-shadow:0 4px 0 var(--lampDeep), inset 0 1px 0 var(--lampLit); }
.foot { color:var(--dusk); font-size:12px; text-align:center; margin-top:14px; }

/* Складывающиеся блоки карточки: `details` складывается сам, без кода,
   и потому одинаково работает в игре и на внешней странице. */
.блок { margin:0; }
.блок > summary { list-style:none; cursor:pointer; display:flex;
  align-items:center; gap:6px; }
.блок > summary::-webkit-details-marker { display:none; }
.блок > summary::after { content:'⌄'; font:900 14px/1 var(--sans);
  color:var(--brass); transition:transform .12s; }
.блок[open] > summary::after { transform:rotate(180deg); }
/* СВЁРНУТЫЙ БЛОК ПРЯЧЕТ СОДЕРЖИМОЕ ЯВНО.
   Браузер прячет содержимое `details` своим правилом, но собственный
   `display` у ребёнка его перебивает: `.числа` объявлены сеткой, и блок
   складывался только на вид — стрелка поворачивалась, числа оставались.
   Поймано замером высоты, а не глазами: 40 px до и 40 после. */
.блок:not([open]) > *:not(summary) { display:none; }

/* Кладка: что ведём и насколько подняли. Число множителя — главное
   на экране, поэтому оно и крупнее всего. */
.кладка { background:linear-gradient(180deg,var(--shelf),#241A30);
  border-radius:18px; padding:14px; text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(232,206,150,.12); }
.кладка-цель { font:800 13px/1.2 var(--fat); color:var(--lamp); }
.кладка-множ { font:900 22px/1.2 var(--fat); margin:6px 0 2px; }
.кнопка[disabled] { opacity:.6; cursor:default; }

/* Переключатель поля и запаса: коконы одни и те же, поэтому один экран
   и две вкладки, а не два адреса с разными глаголами. */
.переключатель { display:flex; gap:6px; margin-bottom:10px; }
.пере { flex:1; border:0; cursor:pointer; border-radius:12px; padding:9px 8px;
  background:linear-gradient(180deg,#2A2136,#221A2E); color:var(--dusk);
  font:800 12px/1 var(--fat); box-shadow:inset 0 1px 0 rgba(232,206,150,.1); }
.пере.на { background:linear-gradient(180deg,#4B3A46,#332538); color:var(--lampLit);
  box-shadow:inset 0 0 0 1px var(--brass); }
/* Счёт на обеих вкладках: немой переключатель заставлял открыть запас,
   чтобы узнать, есть ли там что-нибудь. */
.пере small { display:block; margin-top:3px; font:700 9.5px/1.2 var(--sans);
  color:var(--dusk); }
.пере.на small { color:var(--mauve); }

/* ---------- КАМЕННОЕ ГНЕЗДОВЬЕ (владелец, 4 сентября: вариант Б) ----------
   Двор — тёплое дерево и лампа; Коконы — холодный камень. Прежде поле было
   деревянным лотком, висящим в пустоте, и оба экрана читались как один
   и тот же угол подвала. Нового арта не понадобилось: кладка — две сетки
   швов поверх градиента, лунки — круглые вдавленности. */
.кладка-к { flex:0 0 auto; padding:12px; border-radius:18px;
  background:repeating-linear-gradient(180deg,
               rgba(150,140,165,.13) 0 1px, rgba(0,0,0,.5) 1px 3px, transparent 3px 36px),
             repeating-linear-gradient(90deg,
               rgba(150,140,165,.10) 0 1px, rgba(0,0,0,.45) 1px 3px, transparent 3px 62px),
             linear-gradient(180deg,#5A5364,#3A3444);
  box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(140,130,155,.4),
             inset 0 3px 0 rgba(180,170,195,.16), inset 0 -14px 24px rgba(0,0,0,.55); }
/* Внутри кладки лоток не нужен — лунки высечены в самой стене. */
.поле.гнездовье { background:none; box-shadow:none; padding:0; }
.поле.гнездовье .кокон { border-radius:50% 50% 46% 46%;
  background:radial-gradient(ellipse 62% 44% at 50% 66%,rgba(0,0,0,.62),transparent 72%),
             linear-gradient(180deg,#241F2C,#151220);
  box-shadow:inset 0 5px 12px rgba(0,0,0,.8), inset 0 -2px 0 rgba(150,140,160,.18); }
/* ПАРА ВИДНА ДО КАСАНИЯ. Значок, а не цвет: цветов в игре и так довольно,
   а «⇄» говорит ровно то, что надо сделать. */
/* ВЫБОР И ПАРА ЧИТАЮТСЯ И В КЛАДКЕ. Правила лунки идут по двум классам
   и перебивали одноклассовые `.кокон.выбран` и `.кокон.парный`: кокон
   выбирался и никак этого не показывал. */
.поле.гнездовье .кокон.выбран { box-shadow:0 0 0 2.5px var(--lampLit),
  0 0 14px rgba(246,208,138,.5), inset 0 5px 12px rgba(0,0,0,.6); }
.поле.гнездовье .кокон.парный { box-shadow:0 0 0 2px rgba(246,208,138,.55),
  inset 0 5px 12px rgba(0,0,0,.7); }
/* Значок тихий намеренно: на поле из десяти одинаковых коконов помечен
   почти каждый, и крикливая метка стала бы шумом. Сколько пар готово,
   говорит подпись под полем — она и есть сообщение. */
.кокон.есть-пара::after { content:'\21C4'; position:absolute; left:6px; top:4px;
  z-index:3; font:900 11px/1 var(--sans); color:var(--lamp); opacity:.9;
  pointer-events:none; }
.подпись-поля { margin-top:9px; text-align:center; color:var(--lampLit);
  font:800 10.5px/1.2 var(--sans); text-shadow:0 1px 3px rgba(0,0,0,.7); }

/* Разбор выбранного — пергаментом: заказ и разбор приходят бумагой,
   это единственный светлый материал игры (Р-233). */
.разбор-к { flex:0 0 auto; margin-top:10px; padding:10px 12px; border-radius:14px;
  color:var(--parchInk); background:linear-gradient(180deg,#E8D6AE,var(--parch));
  box-shadow:0 4px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.5); }
.разбор-к > b { display:block; font:900 13px/1.2 var(--fat); }
.раз-метки { display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; }
.раз-метки i { font-style:normal; font:800 10.5px/1.2 var(--sans);
  padding:3px 8px; border-radius:8px; background:rgba(58,42,22,.14);
  box-shadow:inset 0 0 0 1px rgba(58,42,22,.25); }
.раз-метки i.тихо { background:none; box-shadow:none; opacity:.7; }
.раз-числа { display:flex; gap:16px; }
.раз-п { font:800 10.5px/1.3 var(--sans); }
.раз-п u { display:block; text-decoration:none; font:900 15px/1.15 var(--fat); }

/* Строка запаса: кокон показан собой — на поле он выглядит так же,
   и по картинке его узнают быстрее, чем по числу. */
.стр-запаса { display:flex; align-items:center; gap:10px; padding:8px 10px;
  margin-bottom:8px; border-radius:14px;
  background:linear-gradient(180deg,var(--shelf),#241A30); color:var(--paper);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.стр-запаса.отложен { box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px var(--lamp); }
.кокон.мал { flex:0 0 46px; width:46px; height:46px; aspect-ratio:auto;
  border-radius:11px; cursor:default; }
.зап-т { flex:1; min-width:0; }
.зап-т b { display:block; font:800 12.5px/1.2 var(--fat); }
.зап-т > span { display:block; margin-top:2px; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); }
.зап-т .зам { font-style:normal; font:800 9.5px/1 var(--sans); color:var(--lampLit); }
.зап-кн { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.зап-кн .ссылка-строкой { padding:0; font-size:10.5px; }

/* Галочка автобоя. Кнопка, а не `input`: у настоящей галочки внутри
   ярлыка нажатие приходит дважды — на ярлык и на поле, — и общий
   обработчик оболочки переключил бы её туда и обратно. */
.галочка { display:flex; align-items:center; gap:9px; width:100%;
  margin:0 0 10px; border:0; cursor:pointer; border-radius:12px;
  padding:9px 11px; text-align:left;
  background:linear-gradient(180deg,#2A2136,#221A2E); color:var(--dusk);
  font:700 12.5px/1.2 var(--sans);
  box-shadow:inset 0 1px 0 rgba(232,206,150,.1); }
.галочка.на { color:var(--lampLit); box-shadow:inset 0 0 0 1px var(--brass); }
.птичка { width:16px; height:16px; flex:none; border-radius:5px;
  background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1px rgba(232,206,150,.25);
  position:relative; }
.галочка.на .птичка { background:var(--lamp); }
.галочка.на .птичка::after { content:''; position:absolute;
  left:5px; top:1px; width:4px; height:9px; border:solid var(--parchInk);
  border-width:0 2px 2px 0; transform:rotate(42deg); }

/* Чужая заявка: признаки — главное на строке, потому что ради них
   её и принимают. Новый для игрока выделен, ничей в мире — сильнее. */
.заявка.чужая { flex-direction:column; align-items:stretch; }
.строка-заявки { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; }
.счёт-новых { margin-left:auto; font:800 11px/1 var(--fat); color:var(--moss); }
.признаки { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.признак { display:block; padding:5px 9px; border-radius:10px;
  background:rgba(0,0,0,.28); font-size:12px; color:var(--dusk); }
.признак b { display:block; font:800 12px/1.2 var(--fat); color:var(--paper); }
.признак em { font:400 10px/1.3 var(--sans); font-style:normal; opacity:.85; }
.признак.новый { background:rgba(127,176,127,.14); color:var(--moss); }
.признак.новый b { color:var(--paper); }

/* Часы сброса цены на кнопке кормления: тише самой цены — это условие,
   а не действие. */
.кнопка .часы { display:block; font:700 10px/1 var(--sans); font-style:normal;
  opacity:.72; margin-top:2px; }


/* ===================== КЛАДКА =====================
 * Экран отвечает «сколько признаков перейдёт» — и главное число стоит
 * первым, крупно. Ниже разбор по местам тела, ещё ниже — работы,
 * которые это число двигают. Порядок именно такой: ответ, потом
 * объяснение, потом рычаги. */

.кладка-итог { background:linear-gradient(180deg,#2A2136,#221A2E);
  border-radius:16px; padding:14px; margin-top:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.кладка-число { font:900 19px/1.15 var(--fat); color:var(--lampLit);
  font-variant-numeric:tabular-nums; cursor:help; }
.кладка-пара { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
  margin-top:6px; font:800 13px/1.2 var(--sans); color:var(--paper); }
.кладка-итог .счёт { margin-top:8px; }
.кладка-итог .тихо { margin-top:6px; cursor:help; }

.места-кладки { display:flex; flex-direction:column; gap:8px; margin-top:12px; }

/* Место тела — одна карточка. Спорное выделено рамкой: там из двух
 * признаков пройдёт один, и это единственное, чего не видно по процентам. */
.место-кладки { background:rgba(0,0,0,.24); border-radius:14px; padding:10px 12px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; }
/* Спорное место. `outline: 1px solid var(--rope)` не работал вовсе:
   `--rope` — градиент, а не цвет, и объявление отбрасывалось целиком
   (найдено разбором интерфейса 28 августа). Спор — главное, чего нельзя
   вывести из процентов, и он не был виден ни разу. */
.место-кладки.спор { outline:1px solid var(--brass);
  background:rgba(154,119,66,.14); }
.место-имя { grid-column:1; font:800 11px/1.2 var(--sans); letter-spacing:.06em;
  text-transform:uppercase; color:var(--clay); }
.место-имя em { font:italic 400 10px/1.2 var(--sans); text-transform:none;
  letter-spacing:0; color:var(--lamp); margin-left:6px; }
.место-итог { grid-column:2; grid-row:1 / span 3; align-self:center;
  font:900 16px/1 var(--fat); color:var(--lampLit);
  font-variant-numeric:tabular-nums; }

.признак-кладки { grid-column:1; display:flex; gap:7px; align-items:baseline;
  flex-wrap:wrap; font-size:12px; color:var(--paper); }
.признак-кладки.главный b { color:var(--lampLit); }
.признак-кладки .чей,
.признак-кладки .класс { font:400 10px/1.2 var(--sans); color:var(--clay); }
.признак-кладки .шанс { margin-left:auto; font:800 12px/1 var(--sans);
  color:var(--paper); font-variant-numeric:tabular-nums; }

/* Работа: что делает и чего стоит — двумя строками под глаголом.
 * Достигнутый предел не прячем: без него непонятно, почему кнопка
 * перестала помогать. */
/* Работа — НЕ `.широкая`. `.широкая` липкая (`bottom:8px`) и задумана
   как ОДНА кнопка внизу экрана; работ четыре, и все четыре прилипали
   к одному месту, наезжая друг на друга. Найдено разбором интерфейса
   28 августа: у богатой кладки нижние кнопки уезжали за экран.
   Ширину берём ту же, липкость — нет. */
.кнопка.работа { width:100%; margin-top:10px; padding:12px 14px 14px;
  font-size:15px; text-align:center; }
.кнопка.работа .работа-числа { opacity:1; color:var(--lampDeep);
  font-variant-numeric:tabular-nums; }
.кнопка.работа.беднота .работа-числа { color:var(--clay); }


/* ПОДСКАЗКА ПО КАСАНИЮ (решение владельца 29 августа).
   `title` в вебвью Телеграма не показывается ни по наведению, ни по тапу —
   на телефоне подсказок не было вовсе. Пузырь рисуем сами.
   Пергамент, а не доска: подсказка — это записка, а не часть сцены. */
.подсказка { position:fixed; z-index:60; max-width:min(280px, calc(100vw - 16px));
  background:var(--parch); color:var(--parchInk);
  font:600 12.5px/1.4 var(--sans); padding:8px 11px; border-radius:10px;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.35);
  pointer-events:none; }
.подсказка::after { content:''; position:absolute; left:var(--хвост, 50%);
  margin-left:-6px; border:6px solid transparent; }
.подсказка.сверху::after { top:100%; border-top-color:var(--parch); }
.подсказка.снизу::after { bottom:100%; border-bottom-color:var(--parch); }
/* Значок, у которого есть что рассказать, отличается от простого рисунка:
   иначе игрок не узнает, что по нему можно нажать. */
[data-подсказка] { cursor:help; }


/* ===================== ЭКРАН ПИТОМНИКА =====================
 * Одна разметка на игру и на внешнюю страницу, поэтому и стиль один.
 * Порядок кадра: кто это → за что его знают → кто в нём живёт. */

.top .who.дверь { cursor:pointer; text-decoration:underline;
  text-decoration-color:var(--brassDeep); text-underline-offset:4px; }

/* ---------- ПИТОМНИК СТРАНИЦЕЙ: вывеска (макет v3, 4 сентября) ----------
   Питомник — лицо игрока (Р-235) и то, что он показывает другим,
   а выглядел выпиской из ведомости. Имя — на деревянной доске, доска —
   на фоне того же сарая, что во Дворе: питомник и Двор это одно место. */
.пит-вывеска { flex:0 0 auto; position:relative; border-radius:18px;
  overflow:hidden; padding:20px 16px 16px; margin-bottom:11px;
  box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(154,119,66,.5); }
.пит-фон { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.34) saturate(.7); }
.пит-вывеска::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 20%,transparent 30%,rgba(9,6,14,.8) 100%); }
.пит-нутро { position:relative; z-index:2; text-align:center; }
/* ДОСКА СЖИМАЕТСЯ ПОД ЭКРАН (F12, 9 сентября). Имя питомника
   разрешено в двадцать знаков, и на экране в 320 точек оно кончалось
   за краем: доска — `inline-block` без предела ширины, а вывеска режет
   вылезшее (`overflow:hidden`). Игрок видел «ОченьДлинныйПи…» и не мог
   добраться до остального ничем.

   Пределом ширины и переносом, а не уменьшением шрифта: имя питомника
   — вывеска, и мельчить её ради двадцатого знака значит портить кадр
   всем ради края. Длинное имя переносится на две строки; доска растёт
   вниз, где место есть. */
.пит-доска { display:inline-block; max-width:100%; box-sizing:border-box;
  padding:9px 22px; border-radius:12px;
  background:linear-gradient(180deg,#6A4C28,#3A2712);
  box-shadow:0 4px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(246,208,138,.25); }
.пит-доска b { display:block; font:900 21px/1.1 var(--fat); color:#F6D08A;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
  overflow-wrap:anywhere; hyphens:auto; }
.пит-подпись { display:block; margin-top:9px; font:800 11px/1.3 var(--sans);
  color:var(--paper); text-shadow:0 1px 3px #000; }
/* Бирки стоят только на своей витрине: на чужой они превратили бы
   страницу соседа в таблицу сравнения. */
.пит-бирки { display:flex; justify-content:center; gap:6px; margin-top:9px;
  flex-wrap:wrap; }
.пит-бирки i { font-style:normal; font:800 10px/1.2 var(--sans);
  padding:4px 9px; border-radius:9px; color:var(--lampLit);
  background:rgba(20,14,28,.7); box-shadow:inset 0 0 0 1px rgba(154,119,66,.55); }
/* Роль строевого — бирка в углу карточки: отряд, ради которого существо
   растили, на витрине не читался вовсе. */
.жилец-роль { position:absolute; top:4px; right:5px; font-style:normal;
  font:900 8px/1 var(--sans); color:var(--lampInk); padding:2px 4px;
  border-radius:5px; background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }

/* Клеймо — существо с подписью, за что оно стоит. Лицо слева, потому что
 * узнают по лицу, а читают после. */
.клейма { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
/* КЛЕЙМА НА КАМНЕ (макет Питомник v3, 4 сентября). Три главные вещи
   витрины стояли плоскими плашками, неотличимыми от любого другого
   блока. Материал тот же, что у поля коконов: игра сделана из дерева,
   камня и пергамента, и клейма — из камня. */
.клеймо { display:grid; grid-template-columns:46px minmax(0,1fr); gap:11px;
  align-items:center; border-radius:15px;
  background:repeating-linear-gradient(180deg,
               rgba(150,140,165,.10) 0 1px, rgba(0,0,0,.4) 1px 3px, transparent 3px 32px),
             linear-gradient(180deg,#4A4450,#332E3C);
  box-shadow:0 5px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(140,130,155,.4),
             inset 0 3px 0 rgba(180,170,195,.14);
  padding:10px 12px; border:0; width:100%; text-align:left; cursor:pointer;
  color:inherit; font:inherit; }
/* Клеймо без существа: рамки лица нет, текст и шкала идут во всю ширину. */
.клеймо.безлица { cursor:default; grid-template-columns:minmax(0,1fr); }
.клеймо.безлица > .лестница, .клеймо.безлица > .шкала8 { grid-column:1; }
.клеймо-лицо { width:46px; height:46px; border-radius:11px; overflow:hidden;
  background:linear-gradient(180deg,#3A2C42,#241A30);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }
.клеймо-лицо img { width:100%; height:100%; object-fit:cover; display:block; }
/* Текстовая колонка клейма ужимается: без `min-width:0` длинное имя
   существа растягивает грид и выдавливает лестницу за край. */
.клеймо-текст { min-width:0; }
.клеймо-вид { font:800 9.5px/1 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--brass); }
.клеймо-кто { font:800 13.5px/1.2 var(--sans); color:var(--paper); margin-top:3px; }
.клеймо-за { font-size:11px; line-height:1.35; color:var(--mauve); margin-top:2px; }

.пусто-клейма { margin-top:10px; }
.пусто-клейма b { display:block; color:var(--paper); font:800 13.5px/1.3 var(--sans); }
.пусто-клейма p { margin:6px 0 0; font-size:12px; line-height:1.45; }

.раздел-мелко { font:800 9.5px/1 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--brass); margin:14px 0 6px; }

/* Обитатели сеткой: у обжитого питомника их бывает полсотни, и список
 * строками читался бы дольше, чем на него смотрят. */
.жильцы { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.жилец { position:relative; background:rgba(0,0,0,.26); border-radius:11px;
  padding:7px 4px 6px; text-align:center; border:0; cursor:pointer;
  color:inherit; font:inherit; min-width:0; }
/* Клеймёный обведён золотом: клеймо выше и клетка здесь — одно существо,
 * и связь показана, а не объяснена подписью. */
.жилец.клеймёный { box-shadow:inset 0 0 0 1.5px var(--lamp); }
.жилец-лицо { display:block; width:34px; height:34px; margin:0 auto 5px;
  border-radius:50%; overflow:hidden;
  background:linear-gradient(180deg,#3A2C42,#241A30);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
.жилец-лицо img { width:100%; height:100%; object-fit:cover; display:block; }
.жилец b { display:block; font:800 9.5px/1.15 var(--sans); color:var(--paper);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.жилец i { font-style:normal; font-size:9px; color:var(--dusk); }


/* ===================== ЛЕСТНИЦА РОДА И ШКАЛА СОВЕРШЕНСТВА =====================
 * Решение владельца 29 августа: цели показываем там, где на них влияют, —
 * на клейме питомника («где мы стоим») и на карточке существа («что делать
 * с этим»). Разметка одна, стиль поэтому тоже один.
 *
 * Обе растягиваются на всю ширину клейма: они относятся к клейму целиком,
 * а не к его правой колонке. */
/* В МАКЕТЕ ЛЕСТНИЦА СТОИТ ПОД ТЕКСТОМ КЛЕЙМА, а не под всей карточкой:
   она объясняет строку «ведёт 6 колен», и её левый край держится того же
   края, что и эта строка. Растянутая на всю ширину, она читалась
   отдельным элементом — владелец это и заметил. */
.клеймо > .лестница, .клеймо > .шкала8 { grid-column:2; margin-top:8px; }

/* Имена рубежей под шкалой: где я и как называется то, к чему иду. */
.рубежи8 { display:flex; justify-content:space-between; gap:6px; margin-top:5px;
  font:700 9px/1 var(--sans); color:var(--dusk); }
.рубежи8 .взят { color:var(--lamp); }
.рубежи8 span { white-space:nowrap; }
.рубежи8 b { color:var(--lampLit); }

/* На карточке под лестницей — где стоим и сколько нас таких. */
.лестница-где { display:flex; align-items:baseline; gap:7px; margin-top:5px;
  font:400 11px/1.3 var(--sans); color:var(--mauve); }
.лестница-где b { color:var(--lampLit); font:800 13px/1 var(--sans); }

/* Высота зарубки растёт к пределу — видно, что дальше не просто «ещё одна»,
   а всё круче. Взятые горят, следующая обведена. */
.зарубки { display:flex; gap:3px; align-items:flex-end; height:26px; }
.зарубка { flex:1; border-radius:3px 3px 0 0; background:rgba(255,255,255,.07); }
.зарубка.on { background:linear-gradient(180deg,var(--lampTop),var(--lampBot)); }
.зарубка.next { background:rgba(216,156,66,.24);
  box-shadow:inset 0 0 0 1px var(--brass); }
.лестница-подпись { display:flex; justify-content:space-between; gap:8px;
  margin-top:5px; font:700 9.5px/1.25 var(--sans); color:var(--dusk); }
.лестница-подпись span:last-child { color:var(--lampLit); text-align:right; }

/* Клетка показывает не число, а КАКИХ мест не хватает: это то, чем игрок
   распоряжается, выбирая, кого с кем сводить. */
.места8 { display:flex; gap:4px; }
.место8 { flex:1; height:20px; border-radius:5px; font-style:normal;
  background:rgba(255,255,255,.06); display:grid; place-items:center;
  font:800 9px/1 var(--sans); color:var(--dusk); }
/* СОБРАННОЕ ЗАЛИТО, ЦЕЛЬ ОБВЕДЕНА ПУНКТИРОМ (владелец, 29 августа).
   Прежде и то и другое было кольцом, и два кольца рядом читались
   одинаково: шкала не отвечала на вопрос «куда идти». Заливка говорит
   «есть», пунктир — «сюда надо дойти». */
.место8.занято { background:linear-gradient(180deg,#4B3A46,#332538);
  box-shadow:none; color:var(--paper); }
.место8.рубеж { border:1.5px dashed var(--brass); color:var(--lamp);
  background:none; }
/* Взятый рубеж — и залит, и обведён: он и собран, и был целью.
   Обводка сплошная: пунктир означает «ещё нет». */
.место8.занято.рубеж { border:1.5px solid var(--lamp);
  background:linear-gradient(180deg,#5A4550,#3A2A40); color:var(--lampLit); }
.шкала-пояснение { margin-top:5px; font:400 10.5px/1.35 var(--sans);
  color:var(--dusk); }
.шкала-подпись { display:flex; align-items:baseline; gap:7px; margin-top:5px;
  font:400 11px/1.3 var(--sans); color:var(--mauve); }
.шкала-подпись b { color:var(--lampLit); font:800 13px/1 var(--sans); }

/* ---------- Гардероб по Р-239: склад, кузница, карточка вещи, витрина материалов ---------- */
.склад-сетка { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:6px 0 10px; }
.слот-склада { aspect-ratio:1; border:0; border-radius:12px; padding:4px; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); color:var(--paper);
  font:800 10.5px/1.1 var(--fat); text-align:center; cursor:default; }
.слот-склада img { width:40px; height:40px; object-fit:contain; border-radius:8px; background:#F4EFE6; }
.слот-склада small { font:700 9.5px/1.15 var(--sans); color:var(--mauve); }
.слот-склада b { font:800 10.5px/1.1 var(--fat); }
.слот-склада.вещь-слот { background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); cursor:pointer; }
.слот-склада.редкая { box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px var(--brass); }
.слот-склада.куётся img { filter:grayscale(.6) brightness(.8); }
.слот-склада.кокон { cursor:pointer; }
.слот-склада.материал { background:rgba(0,0,0,.28); }
.уровень-вещи { position:absolute; left:5px; top:4px; font:900 9.5px/1 var(--fat); color:var(--lampLit); font-style:normal; }
.гнездо-вещи { position:absolute; right:5px; top:4px; width:10px; height:10px; border-radius:50%;
  box-shadow:inset 0 0 0 1.5px var(--brass); }
.гнездо-вещи.занято { background:var(--brass); }
.сколько { position:absolute; right:5px; bottom:3px; font:900 10px/1 var(--fat); color:var(--lampLit); }
.ступень-кокона { font:900 18px/1 var(--fat); color:var(--lampLit); }
.очередь-ковки { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; margin:6px 0;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px var(--brass); font:700 11px/1.3 var(--sans); color:var(--mauve); }
.очередь-ковки img { width:34px; height:34px; border-radius:8px; background:#F4EFE6; }
.очередь-ковки .ковка-про { flex:1; min-width:0; }
.очередь-ковки .ковка-про b { display:block; font:800 12px/1.1 var(--fat); color:var(--paper); }
.вещь-срок { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; margin:8px 0;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px var(--brass); font:700 11px/1.3 var(--sans); color:var(--mauve); }
.вещь-срок-про { flex:1; min-width:0; }
.вещь-срок-про b { display:block; font:800 12px/1.1 var(--fat); color:var(--paper); }
.ссылки-ряд { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:10px 0 6px; }
.цель img { width:18px; height:18px; vertical-align:middle; margin-right:5px; border-radius:4px; background:#F4EFE6; }
.цели.основы .цель { padding-left:7px; }
.вещь-карта { padding:12px; border-radius:16px; background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 4px 0 rgba(0,0,0,.45), inset 0 0 0 2px var(--brass); color:var(--paper); }
.вещь-шапка { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.вещь-шапка img { width:44px; height:44px; border-radius:10px; background:#F4EFE6; }
.вещь-карта h2 { margin:0; font:900 16px/1.15 var(--fat); color:var(--lampLit); }
.вещь-карта .стр { display:flex; justify-content:space-between; gap:10px; font:700 12px/1.5 var(--sans); color:var(--mauve); }
.вещь-карта .стр b { color:var(--paper); text-align:right; }
.строки-дел { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.дело { display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:14px; text-align:left;
  background:linear-gradient(180deg,var(--shelf),#241A30); box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14);
  color:var(--paper); cursor:pointer; width:100%; }
.дело .ик { width:26px; text-align:center; font-style:normal; font-size:16px; color:var(--lampLit); flex:none; }
.дело .дело-т { flex:1; min-width:0; }
.дело .дело-т b { display:block; font:800 13px/1.15 var(--fat); }
.дело .дело-т span { display:block; font:700 11px/1.25 var(--sans); color:var(--mauve); margin-top:2px; }
.дело .стрелка { color:var(--brass); font-size:18px; }
.про-товар.с-значком { display:flex; gap:10px; align-items:center; }
.значок-товара { width:40px; height:40px; border-radius:10px; background:#F4EFE6; flex:none; }

/* ---------- Кладка по Р-241: сцена, места колонками, работы строками ---------- */
.кладка-сцена { position:relative; border-radius:18px; overflow:hidden; height:236px; min-height:236px; flex:none; margin-bottom:10px;
  box-shadow:0 6px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--brass); }
.кладка-фон { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.кладка-гнездо { position:absolute; left:50%; top:14px; transform:translateX(-50%); width:110px; text-align:center; }
.кладка-гнездо img { width:66px; height:66px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px var(--brass), 0 0 22px rgba(246,208,138,.75), 0 8px 10px rgba(0,0,0,.6); }
.кладка-родитель { position:absolute; bottom:10px; width:110px; text-align:center; }
.кладка-родитель.свой { left:14px; } .кладка-родитель.чужой { right:14px; }
.кладка-лицо { display:block; width:78px; height:78px; border-radius:50%; overflow:hidden; margin:0 auto 4px;
  background:rgba(0,0,0,.35); box-shadow:0 0 0 3px var(--brass), 0 6px 10px rgba(0,0,0,.6); }
.кладка-лицо img { width:100%; height:100%; object-fit:cover; }
.кладка-родитель b { display:block; font:800 11.5px/1.1 var(--fat); color:var(--paper); text-shadow:0 1px 2px #000; }
.кладка-родитель small { font:700 10px/1.2 var(--sans); color:var(--lampLit); text-shadow:0 1px 2px #000; }
.кладка-табличка { position:absolute; left:50%; top:92px; transform:translateX(-50%); white-space:nowrap; padding:6px 12px; border-radius:12px;
  background:linear-gradient(180deg,#E4D3A9,var(--parch)); color:var(--parchInk); font:900 12px/1 var(--fat); text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.кладка-табличка small { display:block; font:700 10px/1.2 var(--sans); margin-top:3px; }
/* Пустое гнездо: сцена без родителей. Гнездо приглушено — оно ждёт,
   а не показывает, — и табличка переносится по словам: в ней теперь
   не срок в три слова, а объяснение. */
/* Фон карточки — это оправа со светлым овалом посередине: в живой
   кладке на нём стоят родители и гнездо. Пустое гнездо садим В ЦЕНТР
   овала и крупнее обычного, иначе овал читается дырой. */
.пусто-кладка .кладка-гнездо { top:56px; width:140px; }
.пусто-кладка .кладка-гнездо img { width:96px; height:96px; opacity:.9; }
.пусто-кладка .кладка-табличка { top:auto; bottom:18px; white-space:normal; max-width:80%;
  font-size:11.5px; line-height:1.3; }
.кладка-ожид { display:flex; align-items:baseline; gap:10px; padding:10px 12px; border-radius:14px; margin-bottom:10px;
  background:linear-gradient(180deg,#E4D3A9,var(--parch)); color:var(--parchInk); box-shadow:0 3px 0 rgba(0,0,0,.4); }
.кладка-ожид b { font:900 20px/1 var(--fat); } .кладка-ожид span { font:700 11px/1.3 var(--sans); }
.кладка-места { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.кладка-место { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:12px;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
.кладка-место.спор { box-shadow:inset 0 0 0 1px var(--clay); }
.кладка-кто { width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 2px rgba(154,119,66,.6); }
.кладка-кто img { width:100%; height:100%; object-fit:cover; }
.кладка-т { flex:1; min-width:0; }
.кладка-т b { display:block; font:800 11px/1.1 var(--fat); color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.кладка-т small { display:block; font:700 9.5px/1.2 var(--sans); color:var(--mauve); }
.кладка-пр { font:900 13px/1 var(--fat); color:var(--lampLit); }
.кладка-пустые { margin:0 0 10px; }
.кладка-работы { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.кладка-работа { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
.кладка-работа.мёртвая { opacity:.7; }
.кладка-ик { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  font:900 14px var(--fat); color:var(--lampLit); background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 1.5px var(--brass); }
.кладка-работа .кладка-т b { font:800 12px/1.1 var(--fat); white-space:normal; }
.кладка-шкала { display:flex; align-items:center; gap:6px; margin-top:4px; font:700 10px/1 var(--sans); color:var(--mauve); }
.кладка-полоса { flex:1; height:6px; border-radius:3px; background:rgba(0,0,0,.4); overflow:hidden; }
.кладка-полоса i { display:block; height:100%; background:linear-gradient(90deg,var(--lampBot),var(--lampLit)); }
/* РЫЧАГ КЛАДКИ — ЕДИНСТВЕННОЕ ДЕЙСТВИЕ СВОЕЙ СТРОКИ, и по нему бьют
 * много раз подряд. Он был собран с padding 7×9 и кеглем 11: около
 * 26 точек в высоту при обычной кнопке игры в 45 — вдвое меньше пальца.
 * Держим ряд плотным, но не ниже 44 точек: ниже промахиваются. */
.кладка-работа .кнопка.мал { min-height:44px; padding:8px 12px; font-size:13px; flex:none;
  justify-content:center; }
/* Номер шага стартовой цепочки — на месте значка задания: тот же
   кружок, только цифра. Значков `t_*` в игре нет, и битая картинка
   читалась бы поломкой. */
/* ---------- Событие: лестница узлов (F03, 10 сентября) ----------
   Ступени идут сверху вниз и не прячутся пройденными: игрок должен
   видеть, где стоит и сколько до следующего шага. Взятая ступень
   гаснет, доступная горит латунью — тот же язык, что у главной кнопки
   в остальной игре. */
.соб-шапка { display:flex; align-items:baseline; justify-content:space-between;
  gap:8px; margin:2px 0 8px; }
.соб-шапка b { font:900 17px/1.1 var(--fat); color:var(--lampLit); }
.соб-срок { font:800 11px/1 var(--sans); color:var(--mauve); white-space:nowrap; }
.соб-про { margin-bottom:10px; }
.соб-счёт { display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 12px; border-radius:12px; margin-bottom:10px;
  background:rgba(0,0,0,.3); box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }
.соб-счёт b { font:900 15px/1 var(--fat); color:var(--lampLit); }
.соб-лестница { display:flex; flex-direction:column; gap:6px; }
.соб-ступень { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:12px; background:rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); }
.соб-ступень.взят { opacity:.6; }
.соб-ступень.можно { box-shadow:inset 0 0 0 1.5px var(--brass); }
.соб-номер { flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.4);
  font:900 12px/1 var(--fat); color:var(--lampLit);
  box-shadow:inset 0 0 0 1.5px rgba(154,119,66,.5); }
.соб-ступень.взят .соб-номер { color:var(--dusk); }
.соб-т { flex:1; min-width:0; }
.соб-т b { display:block; font:800 12px/1.15 var(--fat); color:var(--paper); }
.соб-т small { display:block; font:700 10px/1.2 var(--sans); color:var(--mauve);
  margin-top:2px; }
.соб-ход { flex:none; font:700 10px/1.2 var(--sans); text-align:right;
  max-width:40%; }

/* Вклад вещи в характеристику: мельче числа и другого цвета — это
   пояснение к итогу, а не второе число рядом (QA-06). */
.от-вещи { display:block; font:700 9px/1.2 var(--sans); color:var(--lampLit);
  font-style:normal; margin-top:1px; }

.квест-номер { display:grid; place-items:center; width:100%; height:100%;
  font:900 16px/1 var(--fat); color:var(--lampLit); }

.кладка-статы { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.кладка-статы span { flex:1; min-width:56px; text-align:center; padding:6px 4px; border-radius:10px; background:rgba(0,0,0,.28);
  font:800 11px/1.2 var(--sans); color:var(--mauve); }
.кладка-статы span b { display:block; font:900 14px/1.1 var(--fat); color:var(--paper); }

/* ---------- Двор: кадр 1 «Питомника» — сцена, а не список (Р-233) ----------

   МАКЕТ ПРИНЯТ ВЛАДЕЛЬЦЕМ 4 сентября с четырьмя правками, и каждая
   из них здесь: головы крупные (они основной фокус экрана), кнопки
   невысокие (правило 28 августа, `.pen-хаб .действия`), ссылки прибиты
   к нижнему брусу вместе с кнопками (`.pen-хаб .низ`), существо в кадре
   заметное — тёплый ореол, световое пятно под ним и подъём яркости.

   СЦЕНА РАСТЯГИВАЕТСЯ, А НЕ ДЕРЖИТ ВЫСОТУ. Фон сарая широкий (1,84:1),
   и на телефоне он занимал треть экрана, оставляя под собой пустоту.
   Теперь кадр берёт всё свободное место между пилюлями и липким низом,
   а картинка кроется по ширине. Плата за это — обрез по бокам: круглое
   окно и левый ящик уходят за кадр. Вертикальный фон заказан художнику;
   как придёт — обрез снимется сменой одного файла. */
.двор { position:relative; flex:1 1 auto; min-height:250px; max-height:66dvh;
  border-radius:18px; overflow:hidden; margin-bottom:10px;
  box-shadow:0 6px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--brass); }
.двор-фон { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Виньетка уводит края в темноту сарая: взгляд идёт к центру, где герой. */
.двор::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 75% at 50% 34%,transparent 38%,rgba(9,5,15,.62) 100%); }
.двор-огонёк { position:absolute; top:1%; width:17%; padding-bottom:17%;
  border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,206,128,.62),transparent 64%);
  animation:дыхание 3.6s ease-in-out infinite; }
/* СВЕТ ПРИБИТ К КРАЯМ КАДРА, А НЕ К ФОНАРЮ НА КАРТИНКЕ. Обрез по ширине
   зависит от высоты экрана, и ореол, посаженный на фонарь в процентах,
   съезжает с него на другом телефоне. По краям он читается как свет,
   падающий в кадр с обеих сторон, и не врёт ни при каком обрезе. */
.двор-огонёк.левый { left:6%; }
.двор-огонёк.правый { right:6%; animation-delay:.8s; }
.двор-пыль { position:absolute; width:3px; height:3px; border-radius:50%;
  background:rgba(255,224,176,.55); filter:blur(.5px); pointer-events:none;
  animation:дыхание 4.4s ease-in-out infinite; }
/* Световое пятно под героем: пол под ним освещён, и существо стоит,
   а не висит на фоне. */
.двор-свет { position:absolute; left:50%; bottom:13%; width:72%; padding-bottom:26%;
  transform:translate(-50%,50%); border-radius:50%; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse at center,rgba(255,206,128,.46),
             rgba(255,206,128,.14) 45%,transparent 72%); }
.двор-герой { position:absolute; left:25%; bottom:11%; width:50%; z-index:2;
  cursor:pointer;
  filter:drop-shadow(0 0 18px rgba(246,208,138,.95))
         drop-shadow(0 10px 10px rgba(0,0,0,.6)) brightness(1.12) saturate(1.06); }
.двор-табличка { position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
  z-index:3; max-width:92%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:6px 12px; border-radius:12px; text-align:center;
  background:linear-gradient(180deg,#E4D3A9,var(--parch)); color:var(--parchInk);
  font:900 13px/1 var(--fat);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); }
.двор-табличка small { display:block; font:700 10px/1.2 var(--sans); margin-top:3px; }
/* БИРКА У ПРЕДМЕТА. Место входа и есть его объяснение: фонарь про
   подарок, гнездо про коконы, ящик про ясли. Бирки прибиты к краям
   кадра, а не к точкам картинки: обрез по ширине меняется с размером
   экрана, и привязка к предмету уехала бы вместе с ним. */
.двор-бирка { position:absolute; z-index:3; border:0; cursor:pointer;
  display:flex; align-items:center; gap:6px; padding:4px 8px 4px 4px;
  border-radius:11px; white-space:nowrap; text-align:left;
  background:rgba(27,18,38,.88); box-shadow:inset 0 0 0 1px var(--brass);
  color:var(--paper); }
/* ИМЕНА БИРОК — В СВО�ек ПРОСТРАНСТВЕ. Первая редакция звала их
   `фонарь`, `гнездо`, `ящик`, и `.гнездо` в игре уже занято: это
   контактная тень под коконом на поле (`position:absolute`, размытие,
   9% высоты клетки). Бирка коконов приняла её правила и превратилась
   в размытое пятно у соломы — вход в Коконы пропал с экрана целиком,
   и заметить это можно было только на живом клиенте. */
.двор-бирка.двор-фонарь { left:31%; top:2%; transform:translateX(-50%); }
.двор-бирка.двор-гнездо { left:8px; top:49%; }
.двор-бирка.двор-ящик { right:8px; top:49%; }
.двор-бирка-т { display:block; min-width:0; }
.двор-бирка b { display:block; font:800 11px/1.1 var(--fat); color:var(--lampLit); }
.двор-бирка em { display:block; font:700 9.5px/1.15 var(--sans); color:var(--mauve);
  font-style:normal; margin-top:2px; }
.двор-знак { width:26px; height:26px; border-radius:7px; flex:none; position:relative;
  display:grid; place-items:center; font:900 15px/1 var(--fat); font-style:normal;
  color:var(--lampLit); background:rgba(0,0,0,.35); }
.двор-знак.кокон-знак .яйцо { inset:0; background-size:118% auto; }
/* ПОЛКА ГОЛОВ — места питомника. Крупные (владелец, 4 сентября):
   существа — то, ради чего на этот экран приходят. */
.двор-полка { position:absolute; left:4%; right:4%; top:24%; z-index:3;
  display:flex; gap:5px; justify-content:center; }
.двор-голова { flex:none; width:54px; height:54px; border-radius:50%; border:0;
  padding:0; overflow:hidden; cursor:pointer; background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 0 2px rgba(154,119,66,.6), 0 3px 4px rgba(0,0,0,.5); }
/* КАДР ЛИЦА — ОБЩИМ ПРАВИЛОМ `.морда`, а не своей подгонкой: три
   разных ручных кадра уже расходились между экранами, и владелец
   увидел итог — «существо почти не видно». Голова двора берёт меру
   по умолчанию (фокус 28%, крупность 1,35). */
.двор-голова.на { box-shadow:0 0 0 2px var(--lamp), 0 0 12px rgba(246,208,138,.8); }
.двор-голова.пусто { cursor:default; background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(154,119,66,.4); }
.зов-двора { margin-bottom:8px; }
/* Идущее сведение — строкой со сроком справа (макет 4 сентября):
   готовое зовёт нажать, идущее сообщает и открывает кладку, и читаться
   одинаково они не должны. */
.строка-двора { display:flex; align-items:center; gap:10px; width:100%; border:0;
  padding:9px 10px; border-radius:14px; margin-bottom:8px; cursor:pointer;
  text-align:left; color:var(--paper);
  background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); }
.строка-двора .двор-знак { width:36px; height:36px; border-radius:10px; }
.строка-т { flex:1; min-width:0; }
.строка-т b { display:block; font:800 12.5px/1.15 var(--fat);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.строка-т span { display:block; font:700 10.5px/1.25 var(--sans);
  color:var(--mauve); margin-top:2px; }
.строка-пр { flex:none; text-align:right; font:900 12px/1 var(--fat);
  color:var(--lampLit); }
.строка-пр small { display:block; font:700 9.5px/1.2 var(--sans);
  color:var(--dusk); margin-top:3px; }

/* ---------- Строй: кадр 2 «Питомника» (Р-229, Р-233) ---------- */
.пилюли-кадра { display:flex; gap:6px; justify-content:center; margin:0 0 10px; }
.пилюля-кадра { border:0; padding:6px 14px; border-radius:12px; font:800 12px/1 var(--sans); color:var(--dusk);
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.35); cursor:pointer; }
.пилюля-кадра.на { color:var(--parchInk); background:linear-gradient(180deg,#E4D3A9,var(--parch)); box-shadow:0 2px 0 rgba(0,0,0,.4); }
.строй-сцена { position:relative; border-radius:18px; overflow:hidden; height:250px; min-height:250px; flex:none; margin-bottom:10px;
  box-shadow:0 6px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--brass); }
.строй-фон { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%; filter:brightness(.82) saturate(.95); }
.строй-отряд { position:absolute; left:0; right:0; top:16px; display:flex; justify-content:center; gap:14px; }
.строй-боец { border:0; background:none; width:100px; text-align:center; color:var(--paper); cursor:pointer; }
.строй-боец.сон { opacity:.6; }
.строй-лицо { position:relative; display:block; width:82px; height:82px; border-radius:50%; overflow:visible; margin:0 auto 4px; }
.строй-лицо img { width:100%; height:100%; object-fit:cover; border-radius:50%; box-shadow:0 0 0 3px var(--brass), 0 6px 10px rgba(0,0,0,.6); }
.строй-роль { position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background:var(--brass);
  box-shadow:0 1px 0 rgba(0,0,0,.5); font:900 11px/22px var(--fat); color:#2A1A08; text-align:center; font-style:normal; }
.строй-боец b { display:block; font:800 12px/1.1 var(--fat); text-shadow:0 1px 2px #000; }
.строй-боец small { font:700 10px/1.2 var(--sans); color:var(--lampLit); text-shadow:0 1px 2px #000; }
.строй-табличка { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); white-space:nowrap; padding:6px 12px; border-radius:12px;
  background:linear-gradient(180deg,#E4D3A9,var(--parch)); color:var(--parchInk); font:900 12px/1 var(--fat); text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5); max-width:92%; overflow:hidden; text-overflow:ellipsis; }
.строй-табличка small { display:block; font:700 10px/1.2 var(--sans); margin-top:3px; }
/* ПУСТОЕ МЕСТО В СТРОЮ. Кружок той же величины, что лицо бойца, — но
   пустой: контур латуни и тень внутрь. Три таких говорят «здесь будет
   трое» без единого слова; надпись об этом стояла бы четвёртой строкой
   к трём уже написанным. */
.строй-боец.место { cursor:default; width:auto; }
.строй-боец.место .строй-лицо { width:58px; height:58px; margin:0;
  border-radius:50%; background:rgba(0,0,0,.42);
  box-shadow:inset 0 0 0 2px rgba(154,119,66,.75), inset 0 6px 14px rgba(0,0,0,.55); }
/* Пустые места СТОЯТ НА ПЕСКЕ, а не висят в небе. Первая редакция взяла
   у полного отряда `top:16px` — но там кружок держат подпись с именем
   и ролью, а голый круг на этой высоте приходится на частокол и читается
   дырой в заборе. Опускаем на площадку и уменьшаем: место без бойца
   не должно спорить с бойцом по величине. */
.пусто-строй .строй-отряд { top:96px; gap:22px; }
.пусто-строй .строй-табличка { white-space:normal; max-width:86%; font-size:11.5px; line-height:1.25; }

.строй-головы { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px; }
.строй-голова { border:0; background:none; width:64px; text-align:center; color:var(--paper); cursor:pointer; padding:0; }
.строй-голова .строй-лицо { width:48px; height:48px; }
.строй-голова .строй-роль { width:17px; height:17px; font:900 9px/17px var(--fat); }
.строй-голова b { display:block; font:800 10.5px/1.1 var(--fat); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.строй-голова small { display:block; font:700 9.5px/1.2 var(--sans); color:var(--lampLit); }
.строй-голова.сон { opacity:.55; }
.строй-голова.сон .строй-лицо::after { content:'z'; position:absolute; right:-4px; top:-8px; font:900 12px var(--fat); color:var(--lampLit); }
.строй-голова.выбрана .строй-лицо img { box-shadow:0 0 0 3px var(--lamp), 0 0 12px rgba(246,208,138,.8); }
.строй-голова.вотряде .строй-лицо img { box-shadow:0 0 0 2px var(--lampLit), 0 4px 8px rgba(0,0,0,.5); }
.строй-узел { padding:10px 12px; border-radius:14px; background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.4), inset 0 0 0 2px var(--brass); color:var(--paper); margin-bottom:10px; }
.строй-узел b { display:block; font:800 13px/1.15 var(--fat); color:var(--lampLit); }
.строй-узел > span { display:block; font:700 12px/1.3 var(--sans); color:var(--mauve); margin-top:4px; }
.строй-узел .действия { margin-top:10px; }

/* ---------- Рейтинги: доски сворачиваются, окно из одиннадцати (Р-235) ---------- */
.рейт-доска { border-radius:14px; background:linear-gradient(180deg,var(--shelf),#241A30);
  box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(232,206,150,.14); margin-bottom:8px; overflow:hidden; }
.рейт-гол { display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; padding:10px 12px; color:var(--paper); text-align:left; cursor:pointer; }
.рейт-т { flex:1; min-width:0; }
.рейт-гол .рейт-т b { display:block; font:900 14px/1.1 var(--fat); color:var(--lampLit); }
.рейт-гол .рейт-т small { display:block; font:700 11px/1.25 var(--sans); color:var(--mauve); margin-top:2px; }
.рейт-место { font:800 11.5px/1.2 var(--sans); color:var(--paper); text-align:right; max-width:42%; }
.рейт-стр { color:var(--brass); font-size:16px; transition:transform .2s; }
.рейт-доска.откр .рейт-стр { transform:rotate(180deg); }
.рейт-тело { padding:0 8px 8px; }
.рейт-тело .счёт { margin:0 0 6px; }
.рейт-окно { display:flex; flex-direction:column; gap:5px; }
.рейт-строка { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:12px;
  background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px rgba(154,119,66,.25); color:var(--paper); }
.рейт-строка.я { background:linear-gradient(180deg,#E4D3A9,var(--parch)); color:var(--parchInk); box-shadow:0 3px 0 rgba(0,0,0,.4); }
.рейт-м { width:26px; text-align:center; font:900 13px/1 var(--fat); color:var(--dusk); }
.рейт-м.приз { color:var(--lampLit); }
.рейт-строка.я .рейт-м, .рейт-строка.я .рейт-ч, .рейт-строка.я .рейт-питомник, .рейт-строка.я .рейт-т small { color:var(--parchInk); }
.рейт-лицо { width:32px; height:32px; border-radius:50%; overflow:hidden; flex:none; border:0; padding:0; cursor:pointer;
  background:rgba(0,0,0,.35); box-shadow:inset 0 0 0 2px rgba(154,119,66,.6); }
.рейт-лицо img { width:100%; height:100%; object-fit:cover; display:block; }
/* ПУСТОГО КРУЖКА НЕ БЫВАЕТ (UI-40, 5 сентября). У строки без вклада
   существа нет вовсе — показывать пустой круг значит говорить
   «не загрузилось» там, где загружать нечего. Место он тоже
   не занимает: строка сдвигается влево целиком. */
.рейт-безлица { display:none; }
.рейт-питомник { display:block; border:0; background:none; padding:0; font:800 12.5px/1.1 var(--fat); color:var(--paper); text-align:left; cursor:pointer;
  text-decoration:underline dotted rgba(246,208,138,.6); text-underline-offset:2px; }
.рейт-строка .рейт-т small { display:block; font:700 10px/1.2 var(--sans); color:var(--mauve); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.рейт-ч { font:900 14px/1 var(--fat); color:var(--lampLit); text-align:right; }
.рейт-ч small { display:block; font:700 9.5px/1.2 var(--sans); color:var(--dusk); }
.рейт-черта { text-align:center; padding:2px; font:800 11px/1 var(--sans); color:var(--dusk); }

/* ---------- ПРОВОДНИК ПЕРВОГО ЗАХОДА (ONB-1) ----------
 *
 * Полоса стоит между экраном и вкладками, а не поверх них: закрывать
 * дорогу, по которой сама же ведёт, ей нельзя. Экран под ней работает —
 * это не модалка, и правило «одна автоматическая модалка за сессию»
 * (ONB-11) не задето.
 */
/* РОСТ ПОЛОСЫ. Первая редакция давала «Показать» вид ГЛАВНОЙ кнопки —
 * на снимке она вышла ростом с «Покормить», то есть подсказка спорила
 * за внимание с самим действием, к которому зовёт. Полоса обязана быть
 * тише экрана: она рамка вокруг чужого действия, а не своё. */
#guide {
  flex: 0 0 auto;
  padding: 8px 12px 7px;
  background: linear-gradient(180deg, rgba(24,20,16,.96), rgba(18,15,12,.99));
  border-top: 1px solid rgba(198,153,43,.35);
  box-shadow: 0 -8px 22px rgba(0,0,0,.45);
}
#guide[hidden] { display: none !important; }
.пров-кто {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #c6992b; margin-bottom: 3px;
}
.пров-речь { margin: 0 0 7px; font-size: 13.5px; line-height: 1.35; }
.пров-низ { display: flex; gap: 8px; align-items: center; }
.пров-низ .кнопка {
  flex: 0 0 auto; font-size: 13px; padding: 7px 16px; min-height: 0; line-height: 1.2;
}
.пров-низ .тихая {
  margin-left: auto;
  background: none; border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.5); font-size: 12px; padding: 6px 10px;
}

/* ПОДСВЕТКА ЦЕЛИ. Обводка и мягкое дыхание — не стрелка поверх экрана:
 * стрелка перекрывает то, на что показывает, и на узком телефоне
 * закрывает половину кнопки. */
.пров-цель {
  position: relative;
  outline: 2px solid #c6992b;
  outline-offset: 2px;
  border-radius: 10px;
  animation: пров-дыхание 1.6s ease-in-out infinite;
}
@keyframes пров-дыхание {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,153,43,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(198,153,43,0); }
}
/* Уважаем системную настройку: анимация «дыхания» — украшение,
   а не смысл, и без неё обводка читается так же. */
@media (prefers-reduced-motion: reduce) { .пров-цель { animation: none; } }

/* БАНК НАКОПЛЕННОГО НА ЭКРАНЕ СЕЗОНА (M4).
 * Стоит НАД шкалой и виден всегда: карточка требует «банк виден всегда,
 * наполняется с первых минут». Спрятанный банк не продаёт ничего. */
.банк-сезона {
  display: block; width: 100%; text-align: left;
  margin: 0 0 10px; padding: 10px 12px;
  background: linear-gradient(180deg, rgba(198,153,43,.18), rgba(198,153,43,.07));
  border: 1px solid rgba(198,153,43,.45); border-radius: 12px;
  color: inherit; font: inherit; cursor: pointer;
}
.банк-сезона b { display: block; font-size: 14px; color: #e8c46a; }
.банк-сезона span { display: block; margin-top: 2px; font-size: 12px; opacity: .75; }
.банк-сезона em { display: block; margin-top: 6px; font-size: 12px; font-style: normal; color: #c6992b; }

/* ---------- МОИ ДАННЫЕ (ARCH-3) ---------- */
/* Экран, на котором игрок стирает свой питомник. Оформление нарочно
   сдержанное: это не витрина, и подгонять к нажатию тут нечего. */
.дан { padding:14px 14px 22px; }
.дан-т { font:900 15px/1.2 var(--fat); margin:0 0 8px; color:var(--brass); }
.дан-список { margin:0 0 14px; padding-left:18px; color:var(--parch); font-size:14px; }
.дан-список li { margin:3px 0; }
.дан-выбор { display:flex; flex-direction:column; gap:6px; margin-top:16px; }
.дан-выбор .кнопка { width:100%; }
.дан-выбор .тихо { margin:0 0 10px; }
/* КРАСНОЕ ТОЛЬКО У НЕОБРАТИМОГО. Если красить им всё подряд, цвет
   перестаёт значить «подумай» и начинает значить «кнопка». */
.кнопка.опасная { background:linear-gradient(180deg,#8e3b3b,#6f2a2a);
  box-shadow:0 3px 0 #4a1b1b; color:#ffe9e9; }
.кнопка.тихая { background:linear-gradient(180deg,#3a3350,#2b2640);
  box-shadow:0 3px 0 #1e1a2e; color:var(--dusk); }
.дан-опасно { margin-top:16px; padding:14px; border-radius:12px;
  background:rgba(142,59,59,.13); border:1px solid rgba(142,59,59,.4); }
.дан-опасно b { display:block; font:900 15px/1.2 var(--fat); color:#ffb9b9;
  margin-bottom:6px; }
.дан-поле { display:block; margin:12px 0; }
.дан-поле input { width:100%; box-sizing:border-box; margin-top:6px;
  padding:11px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.28); color:var(--parch); font:700 15px/1.2 var(--sans); }
.дан-кнопки { display:flex; gap:8px; }
.дан-кнопки .кнопка { flex:1 1 0; }

/* ---------- ПОЛОСА ВЕСТЕЙ (11 сентября) ----------
   Весть и беда живут здесь, а не в конце `#view`. На длинном экране
   (сетка коконов, экран недели) конец `#view` — это за краем экрана,
   и отказ «не хватает эссенции» игрок не видел вовсе: кнопка выглядела
   сломанной. Полоса стоит над брусом вкладок и видна всегда. */
.вести { flex:0 0 auto; padding:0 12px 8px; }
.вести > div { margin:0; }
.вести > div + div { margin-top:6px; }

/* Зачем гнёзда — строкой под числами разбора кокона (11 сентября). */
/* ПРЕДЕЛ ЛЕСТНИЦЫ — ЗОЛОТОМ И ВЫШЕ ОБЪЯСНЕНИЙ. Это не предупреждение
   и не отказ: игрок дошёл до верха, и строка говорит, что делать
   дальше. Красным её делать нельзя — красное читается как ошибка. */
.раз-предел { margin-top:8px; padding:6px 8px; border-radius:8px;
  background:rgba(214,168,74,.12); box-shadow:inset 0 0 0 1px var(--brass);
  color:var(--lamp); font:800 12px/1.3 var(--sans); }
.раз-зачем { margin-top:6px; font-size:11.5px; line-height:1.35; }