/* Главный экран и Улучшения. Размеры — из ЯДРА 12.3, 12.8, 12.11; арт — черновики Codex (ниже) */
:root {
  --bg: #0B110D; --panel: #1A2A1C; --panel2: #152016; --nav: #121B13; --line: #33472F;
  --ink: #E9F2DC; --dim: #8DA383; --green: #8FCB4B; --green-d: #4E7A2A; --pist: #C7DCA6;
  --blue: #6FD0DE; --amber: #E0A33C;
}
/* Черновой арт Codex, серия ui_swamp_v1 (codex_renders/2026-09-24). Файлы режет tools/build_ui_assets.py,
   имя — ID позиции в галерее Codex. Демо-сборка подменяет адреса вшитыми картинками.
   Растягиваемое (панели, кнопки, полосы) — девятичастной нарезкой: углы с мхом не искажаются. */
:root {
  --ui-01-01: url(/assets/ui/ui-01-01.webp);   /* сцена: тихое болото */
  --ui-03-01: url(/assets/ui/ui-03-01.webp);   /* фон Улучшений */
  --ui-04-02: url(/assets/ui/ui-04-02.webp);   /* фон загрузки */
  --ui-05-01: url(/assets/ui/ui-05-01.webp);   /* название игры */
  --ui-06-01: url(/assets/ui/ui-06-01.webp);   /* кнопка основная */
  --ui-06-02: url(/assets/ui/ui-06-02.webp);   /* нажатая */
  --ui-06-03: url(/assets/ui/ui-06-03.webp);   /* недоступная */
  --ui-06-04: url(/assets/ui/ui-06-04.webp);   /* вторичная */
  --ui-06-05: url(/assets/ui/ui-06-05.webp);   /* вкладка активная */
  --ui-06-06: url(/assets/ui/ui-06-06.webp);   /* вкладка неактивная */
  --ui-06-07: url(/assets/ui/ui-06-07.webp);   /* кнопка уровня */
  --ui-07-01: url(/assets/ui/ui-07-01.webp);   /* верхний бар */
  --ui-07-03-1: url(/assets/ui/ui-07-03-1.webp); /* подложка раздела: выбран */
  --ui-07-03-2: url(/assets/ui/ui-07-03-2.webp); /* не выбран */
  --ui-07-04-1: url(/assets/ui/ui-07-04-1.webp); /* полоса дохода: рамка */
  --ui-07-04-2: url(/assets/ui/ui-07-04-2.webp); /* заливка */
  --ui-07-06-1: url(/assets/ui/ui-07-06-1.webp); /* полоса загрузки: рамка */
  --ui-07-06-2: url(/assets/ui/ui-07-06-2.webp); /* заливка */
  --ui-07-08: url(/assets/ui/ui-07-08.webp);   /* заголовок секции */
  --ui-08-01: url(/assets/ui/ui-08-01.webp);   /* строка списка */
  --ui-08-02: url(/assets/ui/ui-08-02.webp);   /* строка: хватает */
  --ui-08-03: url(/assets/ui/ui-08-03.webp);   /* строка: заперто */
  --ui-09-01: url(/assets/ui/ui-09-01.webp);   /* подложки портретов, по месту монстра */
  --ui-09-02: url(/assets/ui/ui-09-02.webp);
  --ui-09-03: url(/assets/ui/ui-09-03.webp);
  --ui-09-04: url(/assets/ui/ui-09-04.webp);
  --ui-09-05: url(/assets/ui/ui-09-05.webp);
  --ui-09-06: url(/assets/ui/ui-09-06.webp);
  --ui-09-07: url(/assets/ui/ui-09-07.webp);
  --ui-09-08: url(/assets/ui/ui-09-08.webp);
  --ui-09-09: url(/assets/ui/ui-09-09.webp);
  --ui-09-10: url(/assets/ui/ui-09-10.webp);
  --ui-11-04: url(/assets/ui/ui-11-04.webp);   /* всплеск слизи */
  --ui-11-05: url(/assets/ui/ui-11-05.webp);   /* искорка */
  --ui-12-05: url(/assets/ui/ui-12-05.webp);   /* стопка пузырей */
  --ui-12-06: url(/assets/ui/ui-12-06.webp);   /* оффлайн-слизь */
  --ui-13-01: url(/assets/ui/ui-13-01.webp);   /* большое окно */
  --ui-13-02: url(/assets/ui/ui-13-02.webp);   /* реплика */
  --bello: url(/assets/portraits/bello.webp);  /* Белло — не из серии Codex: art/bello, решение 24.09 */
  --ui-04-01: url(/assets/ui/ui-04-01.webp);   /* арена стража */
  --ui-07-05-1: url(/assets/ui/ui-07-05-1.webp); /* полоса боя: рамка с засечками */
  --ui-07-05-2: url(/assets/ui/ui-07-05-2.webp); /* заливка */
  --ui-11-01: url(/assets/ui/ui-11-01.webp);   /* удар */
  --ui-11-02: url(/assets/ui/ui-11-02.webp);   /* крит — голубой: «бей сюда» (12.19) */
  --ui-07-07-1: url(/assets/ui/ui-07-07-1.webp); /* ранг навыка: взятый листок */
  --ui-07-07-4: url(/assets/ui/ui-07-07-4.webp); /* пустой */
  --ui-02-01: url(/assets/ui/ui-02-01.webp);     /* фон Печи */
  --ui-02-02: url(/assets/ui/ui-02-02.webp);     /* фон Грядки */
  --ui-17-01: url(/assets/ui/ui-17-01.webp);
  --ui-17-02: url(/assets/ui/ui-17-02.webp);
  --ui-17-03: url(/assets/ui/ui-17-03.webp);
  --ui-17-04: url(/assets/ui/ui-17-04.webp);
  --ui-17-05: url(/assets/ui/ui-17-05.webp);
  --ui-17-06: url(/assets/ui/ui-17-06.webp);
  --ui-17-07: url(/assets/ui/ui-17-07.webp);
  --ui-17-08: url(/assets/ui/ui-17-08.webp);
  --ui-17-09: url(/assets/ui/ui-17-09.webp);
  --ui-15-01: url(/assets/ui/ui-15-01.webp);
  --ui-15-02: url(/assets/ui/ui-15-02.webp);
  --ui-15-03: url(/assets/ui/ui-15-03.webp);
  --ui-15-04: url(/assets/ui/ui-15-04.webp);
  --ui-15-05: url(/assets/ui/ui-15-05.webp);
  --ui-15-06: url(/assets/ui/ui-15-06.webp);
  --ui-15-07: url(/assets/ui/ui-15-07.webp);
  --ui-15-08: url(/assets/ui/ui-15-08.webp);
  --ui-15-09: url(/assets/ui/ui-15-09.webp);
  --ui-15-10: url(/assets/ui/ui-15-10.webp);
  --ui-16-01: url(/assets/ui/ui-16-01.webp);
  --ui-16-02: url(/assets/ui/ui-16-02.webp);
  --ui-16-03: url(/assets/ui/ui-16-03.webp);
  --ui-16-04: url(/assets/ui/ui-16-04.webp);
  --ui-16-05: url(/assets/ui/ui-16-05.webp);
  --ui-16-06: url(/assets/ui/ui-16-06.webp);
  --ui-16-07: url(/assets/ui/ui-16-07.webp);
  --ui-16-08: url(/assets/ui/ui-16-08.webp);
  --ui-16-09: url(/assets/ui/ui-16-09.webp);
  --ui-16-10: url(/assets/ui/ui-16-10.webp);
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; background: #070B08; }
/* полосы над шапкой и под нижней панелью — цвета панелей, без шва */
html { background: var(--nav); }
/* во весь экран в Telegram (Макс 29.09): сверху — вырез экрана и кнопки Close / ⋯ Telegram, снизу — полоса «домой».
   Переменные в пикселях ставит сам Telegram; max — чтобы не сложить один и тот же вырез дважды */
:root.tg-full {
  padding-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
}
body { color: var(--ink); font: 14px/1.45 Nunito, "Segoe UI", system-ui, sans-serif; overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { -webkit-user-drag: none; }
.inc, .n, .hd h1, .sec, .sheet h2 { text-shadow: 0 1px 2px #000b; }

#app { position: relative; height: 100%; max-width: 430px; margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; }
.scroll::-webkit-scrollbar { display: none; }

/* шапка (12.7; решение Макса 30.09 — как у Trump's Empire, вариант 1): на Болоте фоном картинка болота, Белло слева
   на месте портрета, Слизь крупно и доход в секунду, под ними строка Страх · Глаза · Экто · Зевки — все и всегда,
   нулевые приглушены. Размеры сняты с art/trump_refs/main_businesses_top.jpg ⏳ до полировки.
   На остальных экранах — узкая строка: Слизь слева, валюты справа (у Trump на других экранах шапки нет вовсе) */
.top { flex: none; position: relative; z-index: 1; background: var(--nav); }
.top.full { height: 132px; background: #0d1712 var(--ui-01-01) 50% 72% / cover no-repeat; }
.top.full::after { content: ""; position: absolute; inset: auto 0 0; height: 26px; background: linear-gradient(#0b110d00, var(--bg)); pointer-events: none; }
.top canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }   /* плашки розовых, бустов, автолова */
.bello { position: absolute; left: 8px; bottom: 4px; width: 92px; height: 118px; pointer-events: none; z-index: 1;
  background: var(--bello) center bottom / contain no-repeat; filter: drop-shadow(0 3px 5px #000b); }
.cur { display: flex; gap: 8px; align-items: center; z-index: 3; }
.cur .big { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; color: var(--ink); }
.cur .big img { flex: none; filter: drop-shadow(0 2px 3px #000c); }
.cur .big b { display: block; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #000c; white-space: nowrap; }
.cur .big small { display: block; font-size: 11.5px; font-weight: 800; color: var(--pist); text-shadow: 0 1px 3px #000; margin-top: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.top.full .cur { position: absolute; left: 112px; right: 58px; top: 10px; }
/* Профиль — круглая кнопка в шапке справа, как меню у Trump (решение Макса 30.09); точка — награда Стаи ⏳ до полировки */
.prof { position: relative; z-index: 3; flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #0b1510e0; box-shadow: inset 0 0 0 1.5px #33472f, 0 3px 8px #0009; }
.prof img { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px #000a); }
.prof.on { box-shadow: inset 0 0 0 2px var(--green), 0 0 10px #8fcb4b66; }
.prof .badge { position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #0008; }
.top.full .prof { position: absolute; top: 12px; right: 10px; }
/* в узкой шапке Профиля нет — пять валют и Слизь занимают строку целиком; Профиль — в шапке Болота, как меню у Trump */
.top:not(.full) .prof { display: none; }
.top:not(.full) .devtoggle { display: none; }   /* шестерёнка тестера — на Болоте: в узкой строке она наезжает на Слизь */
.top:not(.full) .prof img { width: 24px; height: 24px; }
.top.full .big img { width: 38px; height: 38px; }
.top.full .big b { font-size: 38px; }
.curs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 3; border-radius: 19px; background: #0b1510e0;
  box-shadow: inset 0 0 0 1.5px #33472f, 0 3px 8px #0009; }
.top.full .curs { position: absolute; left: 104px; right: 10px; top: 66px; height: 37px; }
.curs button { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 2px; font-size: 13px; font-weight: 900;
  color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000c; }
.curs button::before { content: ""; position: absolute; inset: -4px 0; }   /* тап-зона 45, сама строка 37 (12.3: не меньше 44) */
.curs button + button { box-shadow: inset 1px 0 0 #33472f; }
/* валюты — градиентом, каждая следующая светлее, как у Trump (Макс 30.09) ⏳ оттенки до полировки */
/* валюты — одной волной (Макс 1.10: «градиент красивее, волнообразный переход»): плавный градиент слева направо,
   поверх — мягкий волнистый блик, между ячейками — волнистые линии вместо прямых ⏳ оттенки до полировки */
.curs { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 37' preserveAspectRatio='none'%3E%3Cpath d='M0,11 C40,3 70,17 110,10 C150,3 180,16 220,9 C255,3 280,12 300,8 L300,0 L0,0 Z' fill='white' fill-opacity='.06'/%3E%3Cpath d='M0,30 C45,24 80,34 125,28 C170,22 205,33 250,27 C275,24 290,28 300,26 L300,37 L0,37 Z' fill='black' fill-opacity='.18'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(90deg, #0f1b13 0%, #17291b 25%, #213a26 55%, #2e4e34 80%, #37603d 100%); }
.curs button + button { box-shadow: none; }
.curs button + button::after { content: ''; position: absolute; left: -3px; top: 5px; bottom: 5px; width: 6px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 27' preserveAspectRatio='none'%3E%3Cpath d='M3,0 C0,5 6,9 3,14 C0,19 6,22 3,27' fill='none' stroke='%2366905a' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.curs img { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1px 1px #000a); }
.curs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curs .zero { color: var(--dim); }
.curs .zero img { opacity: .55; }
/* узкая шапка других экранов ⏳ до полировки */
.top:not(.full) { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 6px 10px; }
.top:not(.full) canvas, .top:not(.full) .bello { display: none; }
.top:not(.full) .cur { flex: 1 1 auto; min-width: 86px; }   /* слизь не прячется под строку валют */
.top:not(.full) .big img { width: 26px; height: 26px; }
.top:not(.full) .big b { font-size: 20px; }
.top:not(.full) .big small { display: none; }
.top:not(.full) .curs { flex: 0 1 282px; min-width: 0; height: 34px; }
.top:not(.full) .curs button { font-size: 12px; gap: 2px; }
.top:not(.full) .curs button::before { inset: -5px 0; }
.top:not(.full) .curs img { width: 16px; height: 16px; }
.top:not(.full) .big b { font-size: 18px; }

/* пузыри летают по всему экрану Болота (решение Макса 29.09) — на своём холсте поверх всего */
.flight { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: hidden; }
/* пузыри (1.10, «пузырь резкий, нужно больше кадров; телефон греется»): элементы вместо холста во весь экран.
   Путь — ключевыми кадрами от scene.js, свечение и колыхание — здесь; всё это ведёт видеокарта с частотой экрана */
.bub { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  pointer-events: none; will-change: transform, opacity; }
.bub .gl { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * var(--gs) * 2); height: calc(var(--r) * var(--gs) * 2);
  margin: calc(var(--r) * var(--gs) * -1) 0 0 calc(var(--r) * var(--gs) * -1); border-radius: 50%; animation-delay: var(--d3); }
/* свечение — мягкая пульсация, розовый ярче и чаще, у чёрного — тёмная дымка (как было на холсте, 29.09) */
.bub.green .gl { --gs: 2.2; background: radial-gradient(closest-side, rgba(200,248,120,1) 23%, rgba(200,248,120,0) 100%); animation: glG .9s ease-in-out infinite alternate; animation-delay: var(--d3); }
.bub.pink .gl { --gs: 2.65; background: radial-gradient(closest-side, rgba(255,120,215,1) 19%, rgba(255,120,215,0) 100%); animation: glP .62s ease-in-out infinite alternate; animation-delay: var(--d3); }
.bub.black .gl { --gs: 2.05; background: radial-gradient(closest-side, rgba(46,18,78,1) 25%, rgba(46,18,78,0) 100%); animation: glB 1.1s ease-in-out infinite alternate; animation-delay: var(--d3); }
@keyframes glG { from { opacity: .3; transform: scale(.86); } to { opacity: .56; transform: scale(1); } }
@keyframes glP { from { opacity: .5; transform: scale(.85); } to { opacity: .85; transform: scale(1); } }
@keyframes glB { from { opacity: .45; transform: scale(.88); } to { opacity: .65; transform: scale(1); } }
/* мыльный пузырь колышется волнами в разные стороны: два сплющивания по медленно вращающимся осям */
.bub .w1, .bub .w2 { position: absolute; inset: 0; display: block; }
.bub .w1 { animation: wob1 6.3s linear infinite; animation-delay: var(--d1); }
.bub .w2 { animation: wob2 4.8s linear infinite; animation-delay: var(--d2); }
.bub img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); opacity: .78; }
.bub.trio img { opacity: .92; }
.bub.trio .w1, .bub.trio .w2 { animation: none; }
@keyframes wob1 { 0% { transform: rotate(0.0deg) scale(1.0000, 1.0000) rotate(-0.0deg); } 4.17% { transform: rotate(15.0deg) scale(1.0636, 0.9364) rotate(-15.0deg); } 8.33% { transform: rotate(30.0deg) scale(1.0900, 0.9100) rotate(-30.0deg); } 12.5% { transform: rotate(45.0deg) scale(1.0636, 0.9364) rotate(-45.0deg); } 16.67% { transform: rotate(60.0deg) scale(1.0000, 1.0000) rotate(-60.0deg); } 20.83% { transform: rotate(75.0deg) scale(0.9364, 1.0636) rotate(-75.0deg); } 25% { transform: rotate(90.0deg) scale(0.9100, 1.0900) rotate(-90.0deg); } 29.17% { transform: rotate(105.0deg) scale(0.9364, 1.0636) rotate(-105.0deg); } 33.33% { transform: rotate(120.0deg) scale(1.0000, 1.0000) rotate(-120.0deg); } 37.5% { transform: rotate(135.0deg) scale(1.0636, 0.9364) rotate(-135.0deg); } 41.67% { transform: rotate(150.0deg) scale(1.0900, 0.9100) rotate(-150.0deg); } 45.83% { transform: rotate(165.0deg) scale(1.0636, 0.9364) rotate(-165.0deg); } 50% { transform: rotate(180.0deg) scale(1.0000, 1.0000) rotate(-180.0deg); } 54.17% { transform: rotate(195.0deg) scale(0.9364, 1.0636) rotate(-195.0deg); } 58.33% { transform: rotate(210.0deg) scale(0.9100, 1.0900) rotate(-210.0deg); } 62.5% { transform: rotate(225.0deg) scale(0.9364, 1.0636) rotate(-225.0deg); } 66.67% { transform: rotate(240.0deg) scale(1.0000, 1.0000) rotate(-240.0deg); } 70.83% { transform: rotate(255.0deg) scale(1.0636, 0.9364) rotate(-255.0deg); } 75% { transform: rotate(270.0deg) scale(1.0900, 0.9100) rotate(-270.0deg); } 79.17% { transform: rotate(285.0deg) scale(1.0636, 0.9364) rotate(-285.0deg); } 83.33% { transform: rotate(300.0deg) scale(1.0000, 1.0000) rotate(-300.0deg); } 87.5% { transform: rotate(315.0deg) scale(0.9364, 1.0636) rotate(-315.0deg); } 91.67% { transform: rotate(330.0deg) scale(0.9100, 1.0900) rotate(-330.0deg); } 95.83% { transform: rotate(345.0deg) scale(0.9364, 1.0636) rotate(-345.0deg); } 100% { transform: rotate(360.0deg) scale(1.0000, 1.0000) rotate(-360.0deg); } }
@keyframes wob2 { 0% { transform: rotate(-0.0deg) scale(1.0000, 1.0000) rotate(0.0deg); } 4.17% { transform: rotate(-15.0deg) scale(1.0520, 0.9480) rotate(15.0deg); } 8.33% { transform: rotate(-30.0deg) scale(1.0520, 0.9480) rotate(30.0deg); } 12.5% { transform: rotate(-45.0deg) scale(1.0000, 1.0000) rotate(45.0deg); } 16.67% { transform: rotate(-60.0deg) scale(0.9480, 1.0520) rotate(60.0deg); } 20.83% { transform: rotate(-75.0deg) scale(0.9480, 1.0520) rotate(75.0deg); } 25% { transform: rotate(-90.0deg) scale(1.0000, 1.0000) rotate(90.0deg); } 29.17% { transform: rotate(-105.0deg) scale(1.0520, 0.9480) rotate(105.0deg); } 33.33% { transform: rotate(-120.0deg) scale(1.0520, 0.9480) rotate(120.0deg); } 37.5% { transform: rotate(-135.0deg) scale(1.0000, 1.0000) rotate(135.0deg); } 41.67% { transform: rotate(-150.0deg) scale(0.9480, 1.0520) rotate(150.0deg); } 45.83% { transform: rotate(-165.0deg) scale(0.9480, 1.0520) rotate(165.0deg); } 50% { transform: rotate(-180.0deg) scale(1.0000, 1.0000) rotate(180.0deg); } 54.17% { transform: rotate(-195.0deg) scale(1.0520, 0.9480) rotate(195.0deg); } 58.33% { transform: rotate(-210.0deg) scale(1.0520, 0.9480) rotate(210.0deg); } 62.5% { transform: rotate(-225.0deg) scale(1.0000, 1.0000) rotate(225.0deg); } 66.67% { transform: rotate(-240.0deg) scale(0.9480, 1.0520) rotate(240.0deg); } 70.83% { transform: rotate(-255.0deg) scale(0.9480, 1.0520) rotate(255.0deg); } 75% { transform: rotate(-270.0deg) scale(1.0000, 1.0000) rotate(270.0deg); } 79.17% { transform: rotate(-285.0deg) scale(1.0520, 0.9480) rotate(285.0deg); } 83.33% { transform: rotate(-300.0deg) scale(1.0520, 0.9480) rotate(300.0deg); } 87.5% { transform: rotate(-315.0deg) scale(1.0000, 1.0000) rotate(315.0deg); } 91.67% { transform: rotate(-330.0deg) scale(0.9480, 1.0520) rotate(330.0deg); } 95.83% { transform: rotate(-345.0deg) scale(0.9480, 1.0520) rotate(345.0deg); } 100% { transform: rotate(-360.0deg) scale(1.0000, 1.0000) rotate(360.0deg); } }
.bub .sp { position: absolute; inset: 0; animation: spin 5.7s linear infinite; }
.bub .sp b { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * .7); height: calc(var(--r) * .7); margin: calc(var(--r) * -.35) 0 0 calc(var(--r) * -.35);
  transform: rotate(var(--a)) translateX(calc(var(--r) * 1.3)) rotate(45deg); opacity: 0; animation: twk 1.2s ease-in-out infinite; animation-delay: var(--dl);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3E%3Cpath d='M0,-12 L2.6,-2.6 L12,0 L2.6,2.6 L0,12 L-2.6,2.6 L-12,0 L-2.6,-2.6 Z' fill='%230b0612' stroke='%23ceacff' stroke-opacity='.8' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twk { 50% { opacity: 1; } }
body.lowfx .bub .gl, body.lowfx .bub .w1, body.lowfx .bub .w2, body.lowfx .bub .sp { animation: none; }
body.lowfx .bub .gl { opacity: .4; }
/* хлопок: разрыв, потом след с затуханием, 0.36 с */
.bst { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.bst img { position: absolute; left: 0; top: 0; height: auto; }
.bst .b1 { width: calc(var(--r) * 2.5); animation: bst1 .36s linear forwards; }
.bst .b2 { width: calc(var(--r) * 3); opacity: 0; animation: bst2 .36s linear forwards; }
@keyframes bst1 { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 44% { transform: translate(-50%, -50%) scale(1.36); opacity: 1; } 45%, 100% { transform: translate(-50%, -50%) scale(1.36); opacity: 0; } }
@keyframes bst2 { 0%, 44% { transform: translate(-50%, -50%) scale(1); opacity: 0; } 45% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.12); opacity: 0; } }

/* ряд действий на Болоте (решение Макса 30.09, размеры Trump): квадраты 45 с шагом 15 и подписью, справа — сколько
   уровней за тап. Ряд стоит над списком, а не поверх него: кнопок покупки не перекрывает (12.8); список проезжает под ним */
#screen-swamp { position: relative; }
.acts { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 72px; padding: 4px 0 0 8px; display: flex; gap: 15px; pointer-events: none;
  background: linear-gradient(var(--bg) 86%, #0b110d00); }
.acts > * { pointer-events: auto; }
#swamp-scroll { padding-top: 64px; padding-bottom: 76px; }   /* снизу — место, чтобы последняя карточка докручивалась над «Циклами» */
#swamp-scroll.side2 { padding-bottom: 144px; }   /* и над Подарком, когда он есть */
.act { width: 45px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.act i { position: relative; width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: #1a2a1c; box-shadow: inset 0 0 0 2px #4e7a2a, 0 3px 6px #000a; }
.act i img { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px #000a); }
.act .cnt { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--green);
  color: #12210a; font: 900 11px Nunito, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #0b110d; }
.act em { font-style: normal; font-size: 9.5px; font-weight: 900; color: var(--pist); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.act:active i { transform: scale(.94); }
.act.drop i { animation: drop .5s ease-out; }   /* в стопку упал пузырь */
/* большая стопка — «Копилка» или покупка, до 20: фиолетовая кромка и свечение (золото — у «Подарка» рядом);
   полная — янтарное число ⏳ до своих иконок Макса */
#stack.big i { background: #221a33; box-shadow: inset 0 0 0 2px #b48cff, 0 0 12px #9d6bff99; }
#stack .cnt.full { background: var(--amber); color: #2a1a05; }
/* подсказка про стопку: обе рядом — обычная и большая */
.stk-cmp { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.stk-cmp .stk { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stk-cmp i { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: #1a2a1c; box-shadow: inset 0 0 0 2px #4e7a2a; }
.stk-cmp i img { width: 28px; height: 28px; }
.stk-cmp .big i { background: #221a33; box-shadow: inset 0 0 0 2px #b48cff, 0 0 12px #9d6bff99; }
.stk-cmp em { font-style: normal; font-size: 10px; font-weight: 900; color: var(--pist); white-space: nowrap; }
.stk-cmp .big em { color: #c9adff; }
.stk-cmp .arr { font-weight: 900; color: var(--pist); margin-bottom: 14px; }
@keyframes drop { 30% { transform: scale(1.18); box-shadow: inset 0 0 0 2px #c6f07a, 0 0 12px #8fcb4b; } }
/* нечего делать (стопка пуста, все циклы идут) — приглушена, но нажимается и объясняет */
.act.off i { background: #141e15; box-shadow: inset 0 0 0 2px #2c3d28, 0 3px 6px #000a; }
.act.off i img { opacity: .45; filter: grayscale(.6); }
.act.off em { color: var(--dim); }
#autoc.on i { box-shadow: inset 0 0 0 2px var(--blue), 0 0 12px #6fd0de88; }
.act.on i { box-shadow: inset 0 0 0 2px #a9dc5e, 0 0 10px #8fcb4b88; }
/* сколько ещё идёт буст — плашкой над значком, как «23h59m» у Trump */
.act i .tm { position: absolute; left: -6px; top: -10px; padding: 1px 5px; border-radius: 6px; background: #6b4ca8; color: #fff;
  font: 900 9.5px Nunito, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 2px #0b110d; }
/* три буста рядом (Макс 30.09, вечер): между собой теснее, чем с соседями; «×4» — цифрой, пока нет иконки ⏳ */
#skipb { margin: 0 7px; }   /* «ПЕРЕМОТКА» шире кнопки — поля, чтобы подпись не наезжала на соседей */
/* три буста — группой под одной подписью (30.09, вечер) */
.tbgrp { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.tbrow { display: flex; gap: 4px; }
.tbgrp .act { width: 40px; }
.tbgrp .act i { width: 40px; height: 40px; margin-top: 2px; }
.tbgrp .act i img { width: 30px; height: 30px; }
.tbgrp .act em { display: none; }
.tbgrp > em { font-style: normal; font-size: 9.5px; font-weight: 900; color: var(--pist); letter-spacing: .02em; text-transform: uppercase;
  text-shadow: 0 1px 2px #000; white-space: nowrap; }
.act.tb .tx { font: 900 19px Nunito, sans-serif; color: #c6f07a; text-shadow: 0 2px 2px #000a; letter-spacing: -.02em; }
.act.tb.off .tx { color: #8a978a; text-shadow: none; }
/* кнопки ряда горят и зовут (Макс 30.09, как у Trump): не включено — иконка серая, рамка светлая, вокруг бежит линия */
.act.tb.off i { background: #1a2a1c; box-shadow: inset 0 0 0 2px #4e7a2a, 0 3px 6px #000a; }
.act.tb.off i img { opacity: .8; filter: grayscale(1) brightness(1.1); }
.act.tb.off em { color: var(--pist); }
/* бегущая линия: кольцо-маска неподвижно, внутри крутится градиент (ring — элемент, ui.js) */
.ring { position: absolute; inset: -3px; border-radius: 15px; padding: 2px; overflow: hidden; pointer-events: none; display: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ring::before { content: ''; position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  background: conic-gradient(transparent 0 55%, #8fcb4b 72%, #e8ffc0 80%, #8fcb4b 88%, transparent 100%); animation: ringspin 2.6s linear infinite; }
@keyframes ringspin { to { transform: rotate(360deg); } }
/* у кнопок ряда (1.10, «греется») — без маски: градиент крутится в скруглённой рамке-обрезке, середину закрывает
   подложка значка (--ib, --ibd — её цвет и кромка), видна только бегущая кромка вокруг */
.act i .ring { -webkit-mask: none; mask: none; padding: 0; }
.act i .ring::after { content: ''; position: absolute; inset: 3px; border-radius: 12px; background: var(--ib, #1a2a1c); box-shadow: inset 0 0 0 2px var(--ibd, #4e7a2a); }
.act i img, .act i .tx { position: relative; }
.act.lit .ring { display: block; }
body.lowfx .ring::before { animation: none; background: #8fcb4b88; }
#deal i { --ib: #2a1f10; --ibd: #e0a33c; background: #2a1f10; box-shadow: inset 0 0 0 2px #e0a33c, 0 3px 6px #000a; }
#deal i .tm { background: #c2410c; }
/* свечение — слой с готовой тенью мигает прозрачностью: тень не перерисовывается каждый кадр (1.10, «греется») */
.act.tb.on i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 2px #c6f07a, 0 0 14px #8fcb4bbb; opacity: 0; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 1; } }
body.lowfx .act.tb.on i::after { animation: none; }
/* узкий телефон и все шесть кнопок разом (Подарок и Автолов) — теснее, чтобы не наехать на MAX */
@media (max-width: 380px) { .acts { gap: 7px; padding-left: 10px; } }
/* семь кнопок разом (редко: неоткрытый Подарок после первого сброса) — кнопки меньше */
.acts.tight { gap: 10px; padding-left: 6px; }
.acts.tight .act, .acts.tight .act i { width: 39px; }
.acts.tight .act i { height: 39px; }
.acts.tight .act i img { width: 29px; height: 29px; }
.acts.tight .act em { font-size: 8.5px; }
.acts.tight .tbgrp .act, .acts.tight .tbgrp .act i { width: 35px; }
.acts.tight .tbgrp .act i { height: 35px; }
.acts.tight .tbgrp .act i img { width: 27px; height: 27px; }
.acts.tight .tbrow { gap: 3px; }
.acts.tight2 { gap: 6px; padding-left: 6px; }
.acts.tight2 .act, .acts.tight2 .act i { width: 35px; }
.acts.tight2 .act i { height: 35px; }
.acts.tight2 .act i img { width: 26px; height: 26px; }
.acts.tight2 .act em, .acts.tight2 .tbgrp > em { font-size: 7.5px; }
.acts.tight2 .tbgrp .act, .acts.tight2 .tbgrp .act i { width: 32px; }
.acts.tight2 .tbgrp .act i { height: 32px; }
.acts.tight2 .tbgrp .act i img { width: 24px; height: 24px; }
.acts.tight2 .tbrow { gap: 3px; }
.act.gift i { background: #2a2010; box-shadow: inset 0 0 0 2px #e0a33c, 0 3px 6px #000a; animation: giftglow 1.6s ease-in-out infinite; }
@keyframes giftglow { 50% { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 12px #e0a33caa; } }
/* Магазин (ЯДРО 12.6, ЭКОНОМИКА 8): плиткой, как у Trump's Empire — решение Макса 30.09: «нужно подобное, а не списком;
   фон залей одним цветом и затемни, чтобы товары выделялись». Фон — картинка под плотной тёмной заливкой; карточки
   светлее фона, по три в ряд; цена — кнопкой внизу карточки; всё за звёзды — в слизевой рамке ⏳ до полировки */
#screen-shop { background: linear-gradient(#0a110ceb, #0a110ceb), #0a110c var(--ui-03-01) center top / cover no-repeat; }
#shop { padding: 12px 8px 24px; }
.sh-title { text-align: center; font-size: 26px; font-weight: 900; text-shadow: 0 2px 4px #000c; }
.sh-wallet { display: flex; gap: 8px; margin-top: 12px; }
.sh-bal { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: #17241b;
  box-shadow: inset 0 0 0 1px #2c4130; }
.sh-bal b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sh-bal span { font-size: 12px; font-weight: 800; color: var(--pist); }
.sh-bal .sh-star { width: 26px; height: 26px; }
.sh-topup { flex: none; width: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px;
  background: linear-gradient(160deg, #7a5a1c, #3d2c10); box-shadow: inset 0 0 0 1.5px #e0a33c, 0 4px 10px #000a; color: #ffe2a8; }
.sh-topup img { width: 34px; height: 34px; filter: drop-shadow(0 2px 3px #000a); }
.sh-topup b { font-size: 14px; font-weight: 900; }
.sh-anchors { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.sh-anchors button { min-height: 34px; padding: 0 10px; border-radius: 14px; background: #17241b; box-shadow: inset 0 0 0 1px #2c4130;
  font-size: 12px; font-weight: 900; color: var(--pist); }
.sh-h { margin: 22px 0 0; text-align: center; font-size: 21px; font-weight: 900; text-shadow: 0 2px 4px #000c; scroll-margin-top: 8px; }
.sh-note { margin: 2px 12px 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--pist); }
.sh-terms { text-align: center; margin: 6px 12px 0; }
#shop .rt-rules { margin: 6px 12px 0; }
.sh-lock { margin: 6px 12px 0; font-size: 12px; font-weight: 700; color: var(--pist); text-align: center; }
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; margin-top: 12px; }
.sh-tile { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 30px;
  border-radius: 16px; background: #17241b; box-shadow: inset 0 0 0 1px #2c4130, 0 6px 12px #0008; text-align: center; }
.sh-tile.tag-popular, .sh-tile.tag-best, .sh-tile.tag-best_mega { padding-top: 26px; }
/* мега-пак «Хозяйский выкуп» (1.10) — фиолетовым, как мега бусты */
.sh-tile.tag-best_mega { background: linear-gradient(#3a2a5c, #17241b 40%); box-shadow: inset 0 0 0 1.5px #b48cff, 0 6px 12px #0008; }
.sh-tile.tag-popular { background: linear-gradient(#2c4a1e, #17241b 40%); box-shadow: inset 0 0 0 1.5px #6fb33a, 0 6px 12px #0008; }
.sh-tile.tag-best { background: linear-gradient(#5a4214, #17241b 40%); box-shadow: inset 0 0 0 1.5px #e0a33c, 0 6px 12px #0008; }
.sh-band { position: absolute; left: 0; right: 0; top: 0; padding: 4px 2px; border-radius: 16px 16px 0 0; font-size: 9.5px; font-weight: 900; letter-spacing: .04em;
  color: #16260b; background: #8fcb4b; }
.tag-best .sh-band { background: #e0a33c; color: #2a1a05; }
.tag-best_mega .sh-band { background: #b48cff; color: #1c1230; }
.sh-pic { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.sh-pic img { width: 60px; height: 60px; filter: drop-shadow(0 4px 6px #000b); }
.sh-bonus { position: absolute; right: -10px; bottom: 2px; min-width: 34px; height: 22px; padding: 0 5px; border-radius: 11px; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; background: #c43c3c; box-shadow: 0 0 0 2px #0a110c; }
.sh-bonus.sh-x { right: -14px; bottom: -2px; min-width: 40px; height: 26px; font-size: 14px; background: #6b4ca8; }   /* множитель мега буста */
.sh-pic img.stk-big { filter: drop-shadow(0 0 7px #9d6bff) drop-shadow(0 4px 6px #000b); }   /* «Копилка на 20» — свечение большой стопки */
.sh-tile > b { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 14px; font-weight: 900; line-height: 1.15; text-shadow: 0 1px 2px #000b; }
.sh-tile > span { font-size: 10.5px; font-weight: 700; color: var(--pist); line-height: 1.2; }
.sh-star { width: 18px; height: 18px; flex: none; }
.sh-btns { position: absolute; left: 4px; right: 4px; bottom: -18px; display: flex; gap: 4px; justify-content: center; }
.sh-btns .buy { width: auto; flex: 1 1 0; min-width: 0; max-width: 104px; height: 40px; }
.sh-btns .buy b { display: flex; align-items: center; gap: 3px; font-size: 14px; }
.sh-btns .sh-alt { background-image: var(--ui-06-04); color: var(--ink); }
.sh-btns .sh-alt b { text-shadow: 0 1px 2px #000b; }
/* ящики и Схрон — с экрана Ящиков: карточками того же цвета, заголовки секций — как у плиток */
#shop .sec { margin: 22px 0 0; min-height: 0; padding: 0; justify-content: center; border: 0; border-image: none; background: none;
  font-size: 21px; letter-spacing: 0; color: var(--ink); text-shadow: 0 2px 4px #000c; flex-wrap: wrap; }
#shop .sec em { flex-basis: 100%; margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--pist); }
#shop .list { padding: 12px 0 0; }
#shop .bx { border: 0; border-image: none; border-radius: 16px; background: #17241b; box-shadow: inset 0 0 0 1px #2c4130, 0 6px 12px #0008; }
/* «Циклы» — боковая кнопка справа снизу, как MASSIVE / PLAYGROUND у Trump (≈67 × 53 у края экрана); лежит поверх
   списка, список докручивается над ней (решение Макса 30.09) ⏳ до полировки */
.side-stack { position: absolute; right: 0; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.side-stack > * { pointer-events: auto; }
.side-btn { position: relative; width: 66px; height: 58px; padding: 3px 0 3px 3px; border-radius: 14px 0 0 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--pist);
  background: #1a2a1cf2; border: 2px solid #4e7a2a; border-right: 0; box-shadow: -3px 4px 10px #000b; }
.side-btn img { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px #000a); }
.side-btn b { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.side-btn .cnt { position: absolute; left: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--green);
  color: #12210a; font: 900 11px Nunito, sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #0b110d; }
.side-btn.off { opacity: .55; }   /* все циклы идут — нажимается и объясняет */
.side-btn:active { transform: translateX(2px); }
.side-btn.gift { color: #ffe2a8; border-color: #e0a33c; background: #2a2010f2; }
.side-btn.gift::after { content: ''; position: absolute; inset: -2px 0 -2px -2px; border-radius: 14px 0 0 14px; pointer-events: none;
  box-shadow: 0 0 14px #e0a33caa; opacity: 0; animation: pulse 1.6s ease-in-out infinite; }
body.lowfx .side-btn.gift::after { animation: none; }
/* ×1 / ×10 / ×100 / MAX (ЯДРО 13) — у правого края, как «MAX purchase» у Trump (58 × 43; у нас 62 × 44: рамка толще) ⏳ до полировки */
.maxb { position: absolute; right: 0; top: 4px; width: 62px; height: 42px; border-radius: 14px 0 0 14px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1; color: #16260b;
  background: linear-gradient(180deg, #A9DC5E, #7CBA3F); box-shadow: 0 4px 0 var(--green-d), -2px 6px 8px #0009; }   /* чистая салатовая с объёмом снизу — как на первых макетах (Макс 30.09) */
.maxb b { font-size: 17px; font-weight: 900; }
.maxb span { font-size: 10px; font-weight: 900; opacity: .85; margin-top: 2px; }   /* строчными, как «purchase» у Trump: заглавными не влезает в 58 */
.maxb:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-d), -2px 3px 6px #0009; }

/* Сундук новичка (решение Макса 30.09): что внутри — плитками, как в макете; открыть — одной кнопкой */
.gift-sheet .loot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; }
.gift-sheet .loot > div { padding: 8px 4px; border-radius: 12px; background: #0b151099; box-shadow: inset 0 0 0 1px #33472f;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.gift-sheet .loot img { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px #0009); }
.gift-sheet .loot .tile { width: 34px; height: 34px; }
.gift-sheet .loot .tile img { width: 78%; height: 78%; }
.gift-sheet .loot b { font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gift-sheet .loot > div > span:last-child { font-size: 10.5px; color: var(--pist); font-weight: 700; line-height: 1.2; text-align: center; }
.gift-sheet .gnote { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; color: var(--pist); line-height: 1.35; }
/* сначала — закрытый сундук, покачивается; «Открыть» — трясётся, вспыхивает и лопается лучами, потом выпавшее —
   плитками, которые светятся (Макс 30.09: «открываешь, потом забираешь — странно») ⏳ до полировки: арт открытого сундука */
.gift-sheet .g-chest { position: relative; height: 176px; display: flex; align-items: center; justify-content: center; margin: 6px 0 12px; }
.gift-sheet .g-chest img { position: relative; z-index: 1; width: 156px; height: 156px; filter: drop-shadow(0 8px 12px #000b); animation: chestidle 2.4s ease-in-out infinite; }
@keyframes chestidle { 0%, 66%, 100% { transform: none; } 72% { transform: rotate(-5deg) scale(1.03); } 80% { transform: rotate(5deg) scale(1.04); } 88% { transform: rotate(-2deg); } }
.gift-sheet .g-chest i { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; opacity: .45;
  background: repeating-conic-gradient(#ffd27a30 0 10deg, #0000 10deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, #0000); mask: radial-gradient(closest-side, #000 30%, #0000); animation: gspin 16s linear infinite; }
.gift-sheet.opening .g-chest img { animation: chestopen .95s ease-in forwards; }
@keyframes chestopen {
  0% { transform: none; }
  14% { transform: rotate(-9deg) scale(1.05); }
  28% { transform: rotate(9deg) scale(1.08); }
  42% { transform: rotate(-9deg) scale(1.1); }
  56% { transform: rotate(7deg) scale(1.13); }
  74% { transform: scale(1.3); filter: brightness(2.4) drop-shadow(0 0 22px #ffd27a); }
  100% { transform: scale(1.9); opacity: 0; filter: brightness(3) drop-shadow(0 0 34px #ffd27a); }
}
.gift-sheet.opening .g-chest i { animation: gspin 16s linear infinite, raysflare .95s ease-in forwards; }
@keyframes raysflare { to { opacity: 1; scale: 1.7; } }
.gift-sheet.opened .g-chest { display: none; }
.gift-sheet.opened .loot > div { position: relative; animation: lootin .5s cubic-bezier(.2, 1.4, .4, 1) backwards;
  box-shadow: inset 0 0 0 1.5px #e0a33c, 0 0 14px #e0a33c55; }
.gift-sheet.opened .loot > div::before { content: ""; position: absolute; left: 50%; top: 26px; width: 74px; height: 74px; margin: -37px 0 0 -37px; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, #ffd27a55, #0000); }
.gift-sheet.opened .loot > div > img, .gift-sheet.opened .loot > div > .tile { animation: lootglow 1.8s ease-in-out 1s infinite; }
@keyframes lootglow { 50% { filter: drop-shadow(0 0 8px #ffd27a) brightness(1.15); } }
body.lowfx .gift-sheet .g-chest img, body.lowfx .gift-sheet .g-chest i, body.lowfx .gift-sheet.opened .loot > div > img,
body.lowfx .gift-sheet.opened .loot > div > .tile { animation: none; }
.gift-sheet.opened .loot > div:nth-child(2) { animation-delay: .06s; } .gift-sheet.opened .loot > div:nth-child(3) { animation-delay: .12s; }
.gift-sheet.opened .loot > div:nth-child(4) { animation-delay: .18s; } .gift-sheet.opened .loot > div:nth-child(5) { animation-delay: .24s; }
@keyframes lootin { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } }

/* кнопка сброса на главном — только когда он выгоден (12.8); стоит в потоке над списком */
.reset-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 10px 8px 0; min-height: 60px; padding: 8px 12px; text-align: left;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.reset-row img { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 2px 2px #000a); }
.reset-row span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reset-row b { font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.reset-row em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.reset-row i { font-style: normal; flex: none; min-width: 96px; height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #16260b;
  background: var(--ui-06-01) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px #0008); }
.reset-row:active { transform: scale(.985); }
.reset-row + .list { padding-top: 8px; }

/* список карточек: во всю ширину экрана, 8 по бокам, внутри поля 8 (12.3, решение 24.09) */
.list { padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.card { width: 100%; height: 88px; padding: 8px; cursor: pointer; touch-action: manipulation; transition: transform .08s; display: flex; gap: 10px; align-items: center; flex: none;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px; }
.pw { position: relative; width: 60px; height: 60px; flex: none; border-radius: 12px; cursor: pointer; touch-action: manipulation;
  background: var(--plate, none) center / 100% 100% no-repeat; }
.pt { width: 60px; height: 60px; object-fit: contain; display: block; filter: drop-shadow(0 2px 3px #0008); pointer-events: none; position: relative; }
.card:active:not(:has(.buy:active)):not(.teaser):not(.shade) { transform: scale(.985); }
.card.teaser, .card.shade { cursor: default; }
@keyframes flow { 50% { opacity: .55; } }
.card.idle .pw { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(1.05); } }
.slot { position: absolute; right: -7px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.slot.sp { top: -6px; }
.slot.sl { bottom: -6px; }
.slot.sl.wait::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 9px 2px #c6f07a; opacity: 0; animation: pulse 1.4s ease-in-out infinite; }
.slot img { width: 18px; height: 18px; }
/* номер формы — римская цифра сверху в левом углу кольца (12.3); тап — перевыбор способности */
.fm { position: absolute; left: -8px; top: -8px; z-index: 1; min-width: 22px; height: 17px; padding: 0 4px; border-radius: 5px;
  background: linear-gradient(#6a4d34, #3e2b1d); border: 1.5px solid #1b120b; box-shadow: 0 1px 2px #000a, inset 0 1px 0 #8a6a4a;
  color: #f3e6c8; font: 900 10.5px/1 Georgia, "Times New Roman", serif; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; }
.fm.wait::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--amber), 0 0 10px var(--amber); opacity: 0; animation: pulse 1.2s ease-in-out infinite; }   /* форма за отлучку ждёт выбора */
@keyframes fmwait { 50% { box-shadow: 0 0 0 2px var(--amber), 0 0 10px var(--amber); } }
.fm::before { content: ""; position: absolute; inset: -8px -10px -10px -8px; }   /* цель крупнее самой плашки */
.right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* полоса цикла 267 × 24 (12.3, решение 25.09 — как в AdCap): рамка с мхом по краям, заливка идёт за цикл;
   на полосе доход за цикл и остаток времени, у быстрого цикла — полная полоса и доход в секунду */
.inc { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; gap: 4px; font: 900 13px Nunito, sans-serif; color: #fff;
  font-variant-numeric: tabular-nums; background: #0b110dcc; background-clip: padding-box;
  border: 0 solid transparent; border-image: var(--ui-07-04-1) 32 80 30 80 / 8px 20px 7px 20px / 0 3px; }
/* заливка двигается сдвигом внутри рамки-обрезки: без пересчёта раскладки и перерисовки — нагрев телефона (29.09) */
.inc .clip { position: absolute; left: 7px; right: 7px; top: 50%; height: 12px; margin-top: -6px; border-radius: 3px; overflow: hidden; }
.inc .fill { position: absolute; inset: 0; transform: translateX(-100%); will-change: transform;
  background: var(--ui-07-04-2) left center / 267px 12px no-repeat; }
/* шкала цикла — волнистая трубка, в которую набирается слизь (Макс 1.10): контур и тёмное нутро — SVG фоном, слизь — заливка
   под маской трубки, блик плывёт сдвигом (без перерисовки кадра — телефон не греется). Рисуется кодом ⏳ до своей картинки */
.inc { border: 0; border-image: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M12,4.59 L16,4.70 L20,4.59 L24,4.26 L28,3.77 L32,3.20 L36,2.63 L40,2.14 L44,1.81 L48,1.70 L52,1.81 L56,2.14 L60,2.63 L64,3.20 L68,3.77 L72,4.26 L76,4.59 L80,4.70 L84,4.59 L88,4.26 L92,3.77 L96,3.20 L100,2.63 L104,2.14 L108,1.81 L112,1.70 L116,1.81 L120,2.14 L124,2.63 L128,3.20 L132,3.77 L136,4.26 L140,4.59 L144,4.70 L148,4.59 L152,4.26 L156,3.77 L160,3.20 L164,2.63 L168,2.14 L172,1.81 L176,1.70 L180,1.81 L184,2.14 L188,2.63 L192,3.20 L196,3.77 L200,4.26 L204,4.59 L208,4.70 L212,4.59 L216,4.26 L220,3.77 L224,3.20 L228,2.63 L232,2.14 L236,1.81 L240,1.70 L244,1.81 L248,2.14 L252,2.63 L256,3.20 L260,3.77 L264,4.26 L268,4.59 L272,4.70 L276,4.59 L280,4.26 L284,3.77 L288,3.20 A9,9 0 0 1 288,19.55 L288,19.55 L284,19.33 L280,19.33 L276,19.55 L272,19.97 L268,20.51 L264,21.09 L260,21.63 L256,22.05 L252,22.27 L248,22.27 L244,22.05 L240,21.63 L236,21.09 L232,20.51 L228,19.97 L224,19.55 L220,19.33 L216,19.33 L212,19.55 L208,19.97 L204,20.51 L200,21.09 L196,21.63 L192,22.05 L188,22.27 L184,22.27 L180,22.05 L176,21.63 L172,21.09 L168,20.51 L164,19.97 L160,19.55 L156,19.33 L152,19.33 L148,19.55 L144,19.97 L140,20.51 L136,21.09 L132,21.63 L128,22.05 L124,22.27 L120,22.27 L116,22.05 L112,21.63 L108,21.09 L104,20.51 L100,19.97 L96,19.55 L92,19.33 L88,19.33 L84,19.55 L80,19.97 L76,20.51 L72,21.09 L68,21.63 L64,22.05 L60,22.27 L56,22.27 L52,22.05 L48,21.63 L44,21.09 L40,20.51 L36,19.97 L32,19.55 L28,19.33 L24,19.33 L20,19.55 L16,19.97 L12,20.51 A9,9 0 0 1 12,4.59 Z' fill='%230b150d' fill-opacity='.85' stroke='%23233a1c' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M12,4.59 L16,4.70 L20,4.59 L24,4.26 L28,3.77 L32,3.20 L36,2.63 L40,2.14 L44,1.81 L48,1.70 L52,1.81 L56,2.14 L60,2.63 L64,3.20 L68,3.77 L72,4.26 L76,4.59 L80,4.70 L84,4.59 L88,4.26 L92,3.77 L96,3.20 L100,2.63 L104,2.14 L108,1.81 L112,1.70 L116,1.81 L120,2.14 L124,2.63 L128,3.20 L132,3.77 L136,4.26 L140,4.59 L144,4.70 L148,4.59 L152,4.26 L156,3.77 L160,3.20 L164,2.63 L168,2.14 L172,1.81 L176,1.70 L180,1.81 L184,2.14 L188,2.63 L192,3.20 L196,3.77 L200,4.26 L204,4.59 L208,4.70 L212,4.59 L216,4.26 L220,3.77 L224,3.20 L228,2.63 L232,2.14 L236,1.81 L240,1.70 L244,1.81 L248,2.14 L252,2.63 L256,3.20 L260,3.77 L264,4.26 L268,4.59 L272,4.70 L276,4.59 L280,4.26 L284,3.77 L288,3.20 A9,9 0 0 1 288,19.55 L288,19.55 L284,19.33 L280,19.33 L276,19.55 L272,19.97 L268,20.51 L264,21.09 L260,21.63 L256,22.05 L252,22.27 L248,22.27 L244,22.05 L240,21.63 L236,21.09 L232,20.51 L228,19.97 L224,19.55 L220,19.33 L216,19.33 L212,19.55 L208,19.97 L204,20.51 L200,21.09 L196,21.63 L192,22.05 L188,22.27 L184,22.27 L180,22.05 L176,21.63 L172,21.09 L168,20.51 L164,19.97 L160,19.55 L156,19.33 L152,19.33 L148,19.55 L144,19.97 L140,20.51 L136,21.09 L132,21.63 L128,22.05 L124,22.27 L120,22.27 L116,22.05 L112,21.63 L108,21.09 L104,20.51 L100,19.97 L96,19.55 L92,19.33 L88,19.33 L84,19.55 L80,19.97 L76,20.51 L72,21.09 L68,21.63 L64,22.05 L60,22.27 L56,22.27 L52,22.05 L48,21.63 L44,21.09 L40,20.51 L36,19.97 L32,19.55 L28,19.33 L24,19.33 L20,19.55 L16,19.97 L12,20.51 A9,9 0 0 1 12,4.59 Z' fill='none' stroke='%236fae3a' stroke-opacity='.55' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.inc .clip { left: 1px; right: 1px; top: 0; height: 24px; margin-top: 0; border-radius: 0; }
/* 1.10 («телефон опять греется»): без маски — маску видеокарта пересчитывала каждый кадр у каждой из десяти трубок.
   Слизь — картинка по форме трубки, стоит на месте; окно над ней (.fill) едет сдвигом, слизь внутри — встречным:
   видна ровно залитая часть. Обе обрезки прямоугольные — их видеокарта делает даром */
.inc .fill { overflow: hidden; background: none; }
.inc .slime { position: absolute; inset: 0; transform: translateX(100%); will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9ff9c'/%3E%3Cstop offset='.32' stop-color='%23a6df55'/%3E%3Cstop offset='.7' stop-color='%236fb32f'/%3E%3Cstop offset='1' stop-color='%234d8a1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12,4.59 L16,4.70 L20,4.59 L24,4.26 L28,3.77 L32,3.20 L36,2.63 L40,2.14 L44,1.81 L48,1.70 L52,1.81 L56,2.14 L60,2.63 L64,3.20 L68,3.77 L72,4.26 L76,4.59 L80,4.70 L84,4.59 L88,4.26 L92,3.77 L96,3.20 L100,2.63 L104,2.14 L108,1.81 L112,1.70 L116,1.81 L120,2.14 L124,2.63 L128,3.20 L132,3.77 L136,4.26 L140,4.59 L144,4.70 L148,4.59 L152,4.26 L156,3.77 L160,3.20 L164,2.63 L168,2.14 L172,1.81 L176,1.70 L180,1.81 L184,2.14 L188,2.63 L192,3.20 L196,3.77 L200,4.26 L204,4.59 L208,4.70 L212,4.59 L216,4.26 L220,3.77 L224,3.20 L228,2.63 L232,2.14 L236,1.81 L240,1.70 L244,1.81 L248,2.14 L252,2.63 L256,3.20 L260,3.77 L264,4.26 L268,4.59 L272,4.70 L276,4.59 L280,4.26 L284,3.77 L288,3.20 A9,9 0 0 1 288,19.55 L288,19.55 L284,19.33 L280,19.33 L276,19.55 L272,19.97 L268,20.51 L264,21.09 L260,21.63 L256,22.05 L252,22.27 L248,22.27 L244,22.05 L240,21.63 L236,21.09 L232,20.51 L228,19.97 L224,19.55 L220,19.33 L216,19.33 L212,19.55 L208,19.97 L204,20.51 L200,21.09 L196,21.63 L192,22.05 L188,22.27 L184,22.27 L180,22.05 L176,21.63 L172,21.09 L168,20.51 L164,19.97 L160,19.55 L156,19.33 L152,19.33 L148,19.55 L144,19.97 L140,20.51 L136,21.09 L132,21.63 L128,22.05 L124,22.27 L120,22.27 L116,22.05 L112,21.63 L108,21.09 L104,20.51 L100,19.97 L96,19.55 L92,19.33 L88,19.33 L84,19.55 L80,19.97 L76,20.51 L72,21.09 L68,21.63 L64,22.05 L60,22.27 L56,22.27 L52,22.05 L48,21.63 L44,21.09 L40,20.51 L36,19.97 L32,19.55 L28,19.33 L24,19.33 L20,19.55 L16,19.97 L12,20.51 A9,9 0 0 1 12,4.59 Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* блик плывёт по слизи — в окне чуть уже трубки, чтобы не вылезать за скруглённые концы */
.inc .hlw { position: absolute; left: 9px; right: 9px; top: 0; bottom: 0; overflow: hidden; }
.inc .hl { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% + 64px); will-change: transform;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C16,3 16,3 32,7 C48,11 48,11 64,7 L64,10 C48,14 48,14 32,10 C16,6 16,6 0,10 Z' fill='white' fill-opacity='.35'/%3E%3Ccircle cx='14' cy='16' r='1.6' fill='white' fill-opacity='.35'/%3E%3Ccircle cx='44' cy='18' r='1.1' fill='white' fill-opacity='.3'/%3E%3C/svg%3E") left center / 64px 100% repeat-x; animation: ooze 2.4s linear infinite; }
@keyframes ooze { to { transform: translateX(-64px); } }
body.lowfx .inc .hl { animation: none; }
.card.fast .inc .fill { animation: flow .6s linear infinite; }
.inc .v, .inc .u { position: relative; }
.inc .u { font-size: 10px; font-weight: 800; opacity: .85; }
.inc .u:empty { display: none; }
.inc .t { position: absolute; right: 26px; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--pist); }
.low { display: flex; align-items: center; gap: 8px; }
.nm { flex: 1; min-width: 0; display: flex; align-items: center; column-gap: 6px; row-gap: 1px; flex-wrap: wrap; }
.n { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { font-size: 9.5px; font-weight: 800; color: #12210a; background: var(--pist); border-radius: 6px; padding: 2px 5px; white-space: nowrap; }
.lv { font-size: 11px; font-weight: 800; color: var(--pist); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* кнопки: основная, нажатая, недоступная (06-01…03); на карточке — кнопка уровня 112 × 44 (06-07) */
.buy { width: 112px; height: 44px; flex: none; color: #16260b; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  background: var(--ui-06-01) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px #0008); }
/* кнопка уровня — чистая салатовая с объёмом снизу, как MAX (Макс 1.10) */
.card .buy { height: 40px; margin-bottom: 4px; border-radius: 12px; color: #12210a; filter: none;
  background: linear-gradient(180deg, #A9DC5E, #7CBA3F); box-shadow: 0 4px 0 var(--green-d), 0 5px 8px #0007; }
.buy b { font-size: 15px; font-weight: 900; }
.buy span { font-size: 11px; font-weight: 800; opacity: .85; font-variant-numeric: tabular-nums; }
/* .off — «не хватает»: выглядит как недоступная, но нажимается и объясняет почему (29.09) */
.buy:disabled, .card .buy:disabled, .buy.off, .card .buy.off { background-image: var(--ui-06-03); color: #d5dccf; cursor: default; }
.buy:disabled b, .buy:disabled span, .buy.off b, .buy.off span { text-shadow: 0 1px 2px #000a; }
.buy:not(:disabled):not(.off):active { background-image: var(--ui-06-02); transform: translateY(1px); }
.card .buy.off, .card .buy:disabled { background: linear-gradient(180deg, #5f6d58, #48543f); box-shadow: 0 4px 0 #2b3427, 0 5px 8px #0007; color: #d5dccf; }
.card .buy:not(:disabled):not(.off):active { background: linear-gradient(180deg, #9fd352, #74b23a); transform: translateY(3px); box-shadow: 0 1px 0 var(--green-d); }
.card.glow .buy:not(:disabled):not(.off) { animation: glowlime 1.4s ease-in-out infinite; }
@keyframes glowlime { 50% { box-shadow: 0 4px 0 var(--green-d), 0 0 14px #c6f07a; } }
.card .buy { position: relative; }
.card.glow .buy:not(:disabled):not(.off) { animation: none; }
.card.glow .buy:not(:disabled):not(.off)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 12px 2px #c6f07a; opacity: 0; animation: pulse 1.4s ease-in-out infinite; }
@keyframes glow { 50% { filter: drop-shadow(0 2px 2px #0008) drop-shadow(0 0 9px #c6f07a); } }

/* следующий монстр: цель всегда видна (15) — серая строка «недоступна» */
.card.teaser { border-image-source: var(--ui-08-03); border-image-slice: 60 fill; border-image-width: 18px; border-image-outset: 0; }
.card.teaser .pw { background: none; }
.card.teaser .pt { filter: brightness(.32) saturate(.35) drop-shadow(0 2px 3px #0008); }   /* следующий — чуть проступает (Макс, 28.09) */
/* остальные — чистые силуэты: без имени и условий, только очертание (Макс, 28.09) */
.card.shade { border-image-source: var(--ui-08-03); border-image-slice: 60 fill; border-image-width: 18px; border-image-outset: 0; opacity: .6; }
.card.shade .pw { background: none; }
.card.shade .pt { filter: brightness(0) opacity(.7); }
.card.teaser .n { color: #e3e6df; }
.card.teaser .hint { font-size: 11.5px; color: #d4d8cf; text-shadow: 0 1px 2px #0009; }
.card.teaser .hint b { color: var(--ink); }
.bar { height: 7px; border-radius: 4px; background: #0B110D; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #4E7A2A, #8FCB4B); }

.card.shake { animation: shake .45s ease-in-out; }
@keyframes shake { 20% { transform: translateX(-4px) rotate(-.6deg); } 45% { transform: translateX(4px) rotate(.6deg); } 70% { transform: translateX(-2px); } }
.inc.jump { animation: jump .6s ease-out; }
@keyframes jump { 30% { transform: scale(1.08); filter: brightness(1.35); } }

/* экран Улучшений: фон — сарай-мастерская */
#screen-upgrades { background: #0b120d var(--ui-03-01) center top / cover no-repeat; }
.hd { padding: 14px 16px 4px; text-align: center; }
.hd h1 { font-size: 22px; font-weight: 900; }
.hd p { font-size: 12.5px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
/* заголовок секции — доска (07-08) */
.sec { margin: 12px 8px 0; min-height: 50px; padding: 4px 14px 6px 20px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: .6px; color: var(--pist);
  border: 0 solid transparent; border-image: var(--ui-07-08) 60 110 60 110 fill / 15px 26px 15px 26px; }
.sec em { font-style: normal; font-weight: 700; letter-spacing: 0; color: #c9b99d; margin-left: 6px; }
/* «Купить всё» — вторичная кнопка (06-04) */
.buyall { margin-left: auto; font-size: 12px; font-weight: 900; letter-spacing: 0; color: var(--pist); padding: 0 14px; min-height: 36px; min-width: 104px;
  background: var(--ui-06-04) center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000b; }
.buyall:disabled { filter: grayscale(1) brightness(.7); cursor: default; }
/* вкладки Споры / Апгрейды (06-05, 06-06) */
.tabs { display: flex; gap: 8px; margin-top: 10px; }
.tabs button { position: relative; flex: 1; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  border: 0 solid transparent; border-image: var(--ui-06-06) 50 70 50 70 fill / 14px 20px 14px 20px; }
.tabs button b { font-size: 14px; font-weight: 900; color: var(--pist); text-shadow: 0 1px 2px #000b; }
/* крупный значок над названием, как у Trump (Макс 30.09: «на кнопке спор нарисуй большую спору») ⏳ до полировки */
.tabs .tab-ic { width: 40px; height: 40px; margin: -2px 0 1px; filter: drop-shadow(0 2px 3px #000b); }
.tabs button span { font-size: 11px; font-weight: 800; color: #c9b99d; text-shadow: 0 1px 2px #000b; }
.tabs button.on { border-image-source: var(--ui-06-05); }
.tabs button.on b, .tabs button.on span { color: #16260b; text-shadow: none; }
.tabs .badge { position: absolute; top: 6px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #0008; }
.alldone { width: 100%; padding: 22px 0; text-align: center; font-weight: 800; color: var(--pist); text-shadow: 0 1px 2px #000b; }
/* строка: хватает (08-02) · не хватает (08-01) · заперто (08-03) */
.row { width: 100%; min-height: 88px; padding: 8px 10px; display: flex; gap: 12px; align-items: center;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.row.poor { border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px; }
.row.lock { border-image: var(--ui-08-03) 60 fill / 18px; }
.row .pt { flex: none; cursor: pointer; }
.row .pt.ic { cursor: default; }
.row.poor .pt, .row.lock .pt { filter: grayscale(1) brightness(.7); }
.row.lock .pr { color: #e3e6df; font-weight: 800; }
.row .txt { flex: 1; min-width: 0; }
.row .nm2 { font-weight: 900; font-size: 15px; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px #000b; }
.row .ef { font-size: 11.5px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.row.lock .ef { color: #d4d8cf; }
.row .pr { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000b; }
.row .pr img { width: 16px; height: 16px; }
.row .buy { width: 96px; }
.row .done { width: 96px; text-align: center; font-weight: 900; color: var(--green); font-size: 13px; }

.card.flash { animation: flash 1.2s ease-out; }
/* новый монстр открылся (Макс 30.09, вечер): рывок вперёд с ростом, вспышка, свечение и бегущая по краю искра ⏳ до полировки */
.card.reveal { position: relative; z-index: 1; animation: reveal .9s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes reveal { 0% { transform: scale(.92) translateY(10px); filter: brightness(1.9); } 40% { transform: scale(1.07) translateY(-6px); filter: brightness(1.35); }
  70% { transform: scale(.99); } 100% { transform: none; filter: none; } }
.card.reveal::before { content: ''; position: absolute; inset: 2px 0 0; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 24px #8fcb4baa, inset 0 0 20px #8fcb4b55; animation: sparkout 3.6s ease-in forwards; }
.card .ring { inset: -3px -5px -2px; border-radius: 19px; padding: 3px; display: block; animation: sparkout 3.6s ease-in forwards; }
.card .ring::before { left: -10%; top: -200%; width: 120%; height: 500%;
  background: conic-gradient(transparent 0 58%, #6fae3a 70%, #d9ff9a 78%, #fff 80%, #8fcb4b 86%, transparent 96%); animation-duration: 1.15s; }
@keyframes sparkout { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
body.lowfx .card.reveal { animation: none; }
body.lowfx .card .ring::before { background: #c6f07a; }
@keyframes flash { 20% { filter: brightness(1.4) drop-shadow(0 0 6px var(--green)); } }

/* онбординг Споры (ЯДРО 5): затемнение с вырезом на вкладке, Белло объясняет, покупка прямо из реплики */
.tut { position: absolute; inset: 0; z-index: 7; }
.tut-hole { position: absolute; border-radius: 14px; box-shadow: 0 0 0 9999px #050806cc; outline: 2px solid var(--green); cursor: pointer; }
.tut-card { position: absolute; left: 4px; right: 8px; display: flex; align-items: flex-end; }
.tut-card .who { flex: none; width: 84px; height: 114px; margin-right: -6px; background: var(--bello) center bottom / contain no-repeat; filter: drop-shadow(0 4px 6px #000c); }
.tut-card .say { flex: 1; min-width: 0; margin-bottom: 34px; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 28px 26px;
  border: 0 solid transparent; border-image: var(--ui-13-02) 70 90 100 120 fill / 21px 27px 30px 36px; filter: drop-shadow(0 6px 12px #000c); }
.tut-card .txt { flex: 1; min-width: 0; }
.tut-card b { font-size: 14px; font-weight: 900; line-height: 1.2; display: block; }
.tut-card p { font-size: 11.5px; color: var(--pist); margin-top: 3px; line-height: 1.3; }
.tut-card .buy { width: 92px; flex: none; }
.tut-card .line { display: flex; gap: 8px; align-items: center; }
/* окна и подсказки закрываются только своей кнопкой (решение Макса 29.09): тап мимо — ничего */
/* первый пузырь — тройка (Макс 29.09): затемнение ниже холста полёта — пузыри светят поверх; подписи под пузырями,
   Белло снизу. Тапы мимо пузырей гасит затемнение ⏳ до полировки */
.btut { position: absolute; inset: 0; z-index: 2; background: #050806d4; animation: btutin .35s ease-out; }
@keyframes btutin { from { opacity: 0; } }
.btut-lab { position: absolute; text-align: center; pointer-events: none; transition: opacity .25s; }
.btut-lab b { display: block; font-size: 14px; font-weight: 900; text-shadow: 0 1px 3px #000; }
.btut-lab span { display: block; font-size: 12px; font-weight: 800; color: var(--pist); line-height: 1.25; text-shadow: 0 1px 3px #000; }
.btut-lab.green b { color: #c9f27f; } .btut-lab.pink b { color: #ff9ad9; } .btut-lab.black b { color: #c5b8ff; }
.btut-lab.gone { opacity: 0; }
.btut-say { bottom: 64px; pointer-events: none; }
.tut-card p b { display: inline; font-size: inherit; color: var(--ink); }
.btut-hole { pointer-events: none; }
.ok2 { align-self: center; min-width: 110px; padding: 5px 18px; border-radius: 10px; background: #0b1510; color: var(--ink);
  font-size: 13px; font-weight: 900; box-shadow: inset 0 0 0 1.5px var(--green-d), 0 2px 4px #0008; }

/* нижняя панель: вкладки появляются по мере надобности (15); под значком — подложка раздела (07-03) */
.nav { display: flex; background: var(--nav); flex: none; box-shadow: 0 -4px 10px #0007; position: relative; }
.nav button { flex: 1; padding: 6px 0 7px; font-size: 10.5px; font-weight: 800; color: var(--dim); position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.nav .ic { width: 64px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--ui-07-03-2) center / 100% 100% no-repeat; }
.nav button img { width: 24px; height: 24px; opacity: .8; filter: drop-shadow(0 1px 1px #000a); }
.nav button.on { color: var(--green); }
.nav button.on .ic { background-image: var(--ui-07-03-1); }
.nav button.on img { opacity: 1; }
/* закрытая вкладка (ЯДРО 15): на месте, серая, с замком; по тапу — подсказка, когда откроется */
.nav .ic { position: relative; }
.nav button.locked { color: #5f6b59; }
.nav button.locked .ic > img:first-child { filter: grayscale(1) brightness(.55); opacity: .75; }
.nav .ic img.lk { position: absolute; right: 13px; bottom: 0; width: 15px; height: 15px; opacity: 1; filter: drop-shadow(0 1px 1px #000d); }
.nav-hint { position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); max-width: 180px; padding: 7px 10px; border-radius: 10px;
  background: #0d150ef2; box-shadow: 0 0 0 1px #33472f, 0 4px 10px #0009; color: var(--ink); font-size: 12px; font-weight: 800; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; animation: hintin .15s ease-out; z-index: 5; }
@keyframes hintin { from { opacity: 0; transform: translate(-50%, 4px); } }
.nav .badge { position: absolute; top: 5px; right: calc(50% - 34px); width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #0008; }

/* всплывающие числа; у сбора — всплеск слизи (11-04), у крупных событий — искорка (11-05) */
.fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.pop { position: absolute; font: 900 14px Nunito, sans-serif; color: #d9f5a8; text-shadow: 0 1px 2px #000c; white-space: nowrap; transform: translate(-50%, -50%); animation: rise 1s ease-out forwards; }
.pop.big { font-size: 18px; color: #fff; }
.pop.splash::before, .pop.spark::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -50%); background: center / contain no-repeat; }
.pop.splash::before { width: 58px; height: 40px; background-image: var(--ui-11-04); margin-top: 6px; opacity: .9; }
.pop.spark::before { width: 44px; height: 42px; background-image: var(--ui-11-05); left: 0; top: 10%; animation: spark .8s ease-out forwards; }
@keyframes rise { to { transform: translate(-50%, -150%); opacity: 0; } }
@keyframes spark { from { transform: translate(-50%, -50%) scale(.3) rotate(-30deg); } 40% { transform: translate(-50%, -50%) scale(1.1) rotate(0); } to { transform: translate(-50%, -50%) scale(.8); } }

/* веха (ЯДРО 11): плашка под верхней панелью — название и разовые очки навыков */
.cp { position: absolute; left: 8px; right: 8px; top: 136px; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px;
  animation: cp-in 3s ease-out forwards; }
.cp img { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 2px 2px #0009); }
.cp div { flex: 1; min-width: 0; }
.cp span { display: block; font-size: 11px; font-weight: 800; color: var(--amber); text-shadow: 0 1px 2px #000b; letter-spacing: .04em; }
.cp b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); text-shadow: 0 1px 2px #000b; }
.cp em { font-style: normal; font-size: 12px; font-weight: 900; line-height: 1.15; color: var(--green); text-align: right; text-shadow: 0 1px 2px #000b; }
@keyframes cp-in { from { transform: translateY(-16px); opacity: 0; } 10% { transform: none; opacity: 1; } 85% { opacity: 1; } to { opacity: 0; } }

/* экран возврата (12.1): сначала подарок — Белло у кучи слизи в большом окне (13-01, 14-02, 12-06) */
.modal { position: absolute; inset: 0; background: #050806d9; display: flex; align-items: flex-start; justify-content: center; padding: 16px; z-index: 5; overflow-y: auto; }
/* окно по центру, а выше экрана — прокручивается целиком: margin: auto центрирует, пока влезает */
.modal > * { margin-block: auto; flex: none; }
.modal[hidden] { display: none; }
.sheet { position: relative; width: 100%; max-width: 361px; padding: 34px 32px 38px; text-align: center; filter: drop-shadow(0 14px 30px #000c);
  border: 0 solid transparent; border-image: var(--ui-13-01) 120 120 130 120 fill / 40px 40px 44px 40px; }
.sheet h2 { font-size: 21px; font-weight: 900; line-height: 1.2; }
.sheet .sub { font-size: 12.5px; color: var(--pist); margin-top: 2px; }
.sheet .gift { display: flex; align-items: flex-end; justify-content: center; margin: 10px 0 0; height: 104px; }
.sheet .gift .pile { width: 190px; height: 104px; background: var(--ui-12-06) center bottom / contain no-repeat; }   /* только куча слизи, без Белло — Макс 28.09 */
.sheet .sum { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 2px 3px #000c; }
.sheet .sum img { width: 32px; height: 32px; }
.sheet .unit { font-size: 12px; color: var(--pist); margin-bottom: 12px; }
/* оффер возврата (12.1): лестница вниз, лучшее сверху, число крупно, цена мелко; Stars — в слизевой рамке (12.7-бис) */
.rt-opt { width: 100%; min-height: 60px; margin-top: 10px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; color: var(--ink); }
.rt-opt:disabled { opacity: .6; }
.rt-paid { border-image-source: var(--ui-08-01); border-image-slice: 95 100 75 115 fill; border-image-width: 27px 28px 21px 33px; border-image-outset: 6px 2px 4px 2px; }
.rt-v { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-v b { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000b; }
.rt-v span { font-size: 11.5px; font-weight: 800; color: var(--pist); }
.rt-price { flex: none; display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 14px; font-weight: 900; }
.rt-price img { width: 22px; height: 22px; }
.rt-note { min-height: 16px; margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--pist); }
/* правила покупок под кнопкой Stars: мелко, раскрываются тут же (Telegram требует их до оплаты) ⏳ до полировки */
.rt-terms { margin: 8px 0 0; font-size: 11px; font-weight: 700; color: var(--dim); }
.rt-terms button { font-size: 11px; font-weight: 800; color: var(--pist); text-decoration: underline; text-underline-offset: 2px; }
.rt-rules { margin: 6px 0 0; padding: 8px 10px 8px 26px; border-radius: 10px; background: #0b151099; text-align: left;
  font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--pist); max-height: 150px; overflow-y: auto; }
.rt-rules li + li { margin-top: 4px; }
.rt-take { margin-top: 4px; padding: 8px 12px; font-size: 14px; font-weight: 800; color: var(--pist); text-decoration: underline; text-underline-offset: 3px; }
/* слизевая рамка — общий маркер платного: тянется под кнопку, капли снизу (12.7-бис) ⏳ до полировки */
.slimed { position: relative; }
.slimed::after { content: ''; position: absolute; inset: -10px -10px -16px -10px; pointer-events: none;
  border: 0 solid transparent; border-image: var(--slime-frame) 60 44 74 44 / 16px 12px 22px 12px; }
.sheet .buy { width: 100%; height: 52px; }
/* окно валюты (12.7): что это, откуда, на что; закрывается только «Понял» (решение Макса 29.09) */
.ci { text-align: left; }
.ci-new { font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--amber); text-transform: uppercase; text-align: center; margin-bottom: 6px; }
.ci-hd { display: flex; align-items: center; gap: 12px; }
.ci-hd img { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 2px 3px #000a); }
.ci-lead { margin: 12px 0 0; font-size: 14px; font-weight: 800; line-height: 1.35; }
.ci-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.ci-row { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: #0b151099; box-shadow: inset 0 0 0 1px #33472f; }
.ci-row b { font-size: 11px; font-weight: 900; letter-spacing: .05em; color: var(--green); text-transform: uppercase; }
.ci-row span { font-size: 13px; font-weight: 700; color: var(--pist); line-height: 1.35; }
.ci-note { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--amber); line-height: 1.35; }
.ci-ok { margin-top: 16px; }
.sheet .buy b { font-size: 16px; }

/* НАВЫКИ, вкладка «Страх» (12.4, 12.20): герой, две плитки рядом — сейчас и после сброса */
#screen-skills { background: #0b120d var(--ui-03-01) center top / cover no-repeat; }

/* «Монстры болота» (Макс 29.09): экран внутри Навыков — все монстры в полный рост, формы, способности, смена за Глаза.
   Макет — art/ui/monstry_bolota_test.html ⏳ до полировки */
#screen-monsters { background: #0b120d var(--ui-03-01) center top / cover no-repeat; }
.mb-entry { margin: 10px 0 0; width: 100%; min-height: 64px; padding: 6px 12px 6px 14px; display: flex; align-items: center; gap: 10px; text-align: left;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.mb-entry:active { transform: scale(.985); }
.mb-entry .faces { display: flex; flex: none; min-width: 20px; }
.mb-entry .faces img { width: 40px; height: 40px; margin-right: -10px; object-fit: contain; filter: drop-shadow(0 2px 3px #000a); }
.mb-entry .tx { flex: 1; min-width: 0; margin-left: 10px; }
.mb-entry b { display: block; font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.mb-entry small { display: block; font-size: 11.5px; font-weight: 700; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.mb-entry .chev { width: 18px; height: 18px; flex: none; opacity: .8; transform: rotate(-90deg); }
.mb-free { margin: 4px 8px 0; min-height: 50px; padding: 4px 14px 6px 20px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800;
  color: var(--pist); text-shadow: 0 1px 2px #000b; border: 0 solid transparent; border-image: var(--ui-07-08) 60 110 60 110 fill / 15px 26px 15px 26px; }
.mb-free > img { width: 22px; height: 22px; flex: none; }
.mb-free .tx { flex: 1; min-width: 0; }
.mb-free b { color: var(--ink); }
.mb-free .chip { flex: none; display: flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 9px; background: #0b1510cc;
  box-shadow: inset 0 0 0 1px #33472f; color: var(--ink); font-weight: 900; font-variant-numeric: tabular-nums; }
.mb-list { gap: 10px; }
.mb-card { width: 100%; padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: none;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px; }
.mb-card.flash { animation: flash 1.2s ease-out; }
.mb-top { display: flex; gap: 12px; align-items: stretch; }
.mb-art { position: relative; width: 108px; height: 108px; flex: none; border-radius: 16px; background: var(--plate, none) center / 100% 100% no-repeat; }
.mb-art img { position: absolute; inset: -6px -4px 0; width: calc(100% + 8px); height: calc(100% + 6px); object-fit: contain; filter: drop-shadow(0 3px 4px #000a); }
.mb-art .fm { left: -6px; top: -6px; }
.mb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.mb-nm { display: flex; align-items: baseline; gap: 8px; }
.mb-nm b { font-size: 17px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.mb-nm span { font-size: 12px; font-weight: 800; color: var(--pist); font-variant-numeric: tabular-nums; }
.mb-track { display: flex; align-items: center; }
.mb-st { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 38px; flex: none; }
.mb-st i { width: 30px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font: 900 12px/1 Georgia, serif; font-style: normal;
  background: #0b1510; box-shadow: inset 0 0 0 1.5px #33472f; color: #5f7257; }
.mb-st.on i { background: linear-gradient(#6a4d34, #3e2b1d); box-shadow: inset 0 1px 0 #8a6a4a, 0 0 0 1.5px #1b120b; color: #f3e6c8; }
.mb-st small { font-size: 10px; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; }
.mb-st.on small { color: var(--pist); }
.mb-ln { flex: 1; height: 3px; border-radius: 2px; background: #22301e; margin-bottom: 16px; }
.mb-ln.on { background: linear-gradient(90deg, #4E7A2A, #8FCB4B); }
.mb-say { font-size: 11.5px; font-weight: 700; color: var(--pist); line-height: 1.3; text-shadow: 0 1px 2px #000b; }
.mb-ab { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px 6px 12px; border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.mb-r { flex: none; min-width: 30px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#6a4d34, #3e2b1d); color: #f3e6c8; font: 900 11.5px/1 Georgia, serif; box-shadow: inset 0 1px 0 #8a6a4a, 0 0 0 1.5px #1b120b; }
.mb-ab .t { flex: 1; min-width: 0; }
.mb-ab .t b { display: block; font-size: 14px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.mb-ab .t span { display: block; font-size: 11.5px; font-weight: 700; color: var(--pist); line-height: 1.25; text-shadow: 0 1px 2px #000b; }
.mb-ab.lock { border-image-source: var(--ui-08-03); }
.mb-ab.lock .mb-r { background: #0b1510; color: #6a7a61; box-shadow: inset 0 0 0 1.5px #33472f; }
.mb-ab.lock .t b { font-size: 12.5px; color: #d4d8cf; }
.mb-ab.lock .t span { color: #b7bdb0; }
.mb-lk { width: 18px; height: 18px; flex: none; opacity: .7; margin-right: 6px; }
.mb-sw { width: 88px; min-height: 44px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  color: var(--pist); background: var(--ui-06-04) center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000b; }
.mb-sw.go { color: #16260b; background-image: var(--ui-06-01); text-shadow: none; }
.mb-sw b { font-size: 12.5px; font-weight: 900; }
.mb-pr { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.mb-pr img { width: 14px; height: 14px; }
.mb-fr { font-size: 10.5px; font-weight: 900; color: var(--green); }
.mb-card.teaser, .mb-card.shade { border-image-source: var(--ui-08-03); border-image-slice: 60 fill; border-image-width: 18px; border-image-outset: 0; }
.mb-card.teaser .mb-art img { filter: brightness(.32) saturate(.35) drop-shadow(0 3px 4px #000a); }
.mb-card.shade { opacity: .6; }
.mb-card.shade .mb-art img { filter: brightness(0) opacity(.7); }
.mb-card.shade .mb-nm b { color: #9aa393; }
/* цена смены — на опции в окне выбора (forms.js) */
.opt-pr { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 10px; background: #0b1510cc; box-shadow: inset 0 0 0 1px #4e7a2a;
  font-size: 13px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.opt-pr img { width: 16px; height: 16px; }
.opt-pr.no { box-shadow: inset 0 0 0 1px #5a3f2a; color: #c9b99d; }
/* Страх (1.10): главное — сколько принесёт следующий сброс; сколько сейчас и множитель — строкой ниже, мельче */
.f-hero { margin: 10px 8px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 18px 14px; text-align: center;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px; }
.f-hero .f-cap { font-size: 14px; font-weight: 900; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.f-hero .f-big { display: flex; align-items: center; gap: 10px; }
.f-hero .f-big img { width: 58px; height: 58px; filter: drop-shadow(0 3px 4px #000c); }
.f-hero .f-big b { font-size: 44px; line-height: 1.05; font-weight: 900; color: #e8ffc0; font-variant-numeric: tabular-nums; text-shadow: 0 2px 3px #000c, 0 0 16px #8fcb4b66; }
.f-hero .f-sub { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--pist); opacity: .9; text-shadow: 0 1px 2px #000b; }
.f-hero .buy { width: 100%; max-width: 260px; height: 50px; margin-top: 10px; }
.f-hero .f-lock { font-style: normal; font-size: 12px; font-weight: 800; color: var(--amber); text-shadow: 0 1px 2px #000b; }
.f-hero .f-lock:empty { display: none; }
.f-stats { margin: 8px 8px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-st { padding: 8px 12px; border-radius: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  background: #0b1510cc; box-shadow: inset 0 0 0 1px #33472f; }
.f-st span { font-size: 11.5px; font-weight: 800; color: var(--pist); }
.f-st b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.f-inv { margin: 10px 16px 0; font-size: 12px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.f-inv span { display: block; font-size: 12px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.f-inv p { margin-top: 2px; line-height: 1.45; }
.f-inv b { color: var(--ink); }
.f-inv em { display: block; margin-top: 2px; font-style: normal; opacity: .75; }

/* миры (12.5): полоса в шапке экрана Страха — текущий подсвечен, недоступные с замком, условие Мира 2 словами */
.w-row { margin: 10px 8px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.w-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 5px; border-radius: 12px;
  background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; }
.w-cell > img:first-child { width: 40px; height: 40px; }
.w-cell span { font-size: 9.5px; font-weight: 800; line-height: 1.1; text-align: center; color: var(--pist); }
.w-cell.cur { box-shadow: inset 0 0 0 2px var(--green), 0 0 10px #8fcb4b55; }
.w-cell.cur span { color: var(--ink); }
.w-cell.lock > img:first-child { filter: grayscale(.8) brightness(.55); }
.w-cell.lock:not(.next) { opacity: .6; }
.w-cell.next > img:first-child { filter: grayscale(.4) brightness(.85); }
.w-lock { position: absolute; top: 18px; width: 20px; height: 20px; }
.w-cond { margin: 6px 12px 0; font-size: 11.5px; font-weight: 700; line-height: 1.35; color: var(--pist); text-align: center; text-shadow: 0 1px 2px #000b; }

/* дерево навыков (12.20): ветки переключателем, ярусы заголовками, ранг — шесть листков */
.t-top { margin: 10px 8px 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px; }
.t-pts { flex: 1; }
.t-pts span { display: block; font-size: 12px; font-weight: 800; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.t-pts b { font-size: 26px; font-weight: 900; text-shadow: 0 1px 2px #000b; font-variant-numeric: tabular-nums; }
.t-eye { position: relative; min-height: 48px; min-width: 132px; padding: 0 12px 0 40px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  color: var(--pist); background: var(--ui-06-04) center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000b; }
.t-eye img { position: absolute; left: 12px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); }
.t-eye b { font-size: 13px; font-weight: 900; color: var(--ink); }
.t-eye span { font-size: 10.5px; font-weight: 700; }
.t-eye:disabled { filter: grayscale(1) brightness(.7); }
.t-eye-done { font-size: 11px; font-weight: 700; color: var(--pist); text-align: right; max-width: 140px; text-shadow: 0 1px 2px #000b; }
.t-branches { margin: 10px 8px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.t-branches button { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  border: 0 solid transparent; border-image: var(--ui-06-06) 50 70 50 70 fill / 14px 20px 14px 20px; }
.t-branches button img { width: 22px; height: 22px; }
.t-branches button b { font-size: 13px; font-weight: 900; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.t-branches button span { font-size: 10.5px; font-weight: 800; color: #c9b99d; text-shadow: 0 1px 2px #000b; font-variant-numeric: tabular-nums; }
.t-branches button.on { border-image-source: var(--ui-06-05); }
.t-branches button.on b, .t-branches button.on span { color: #16260b; text-shadow: none; }
.t-hint { margin: 8px 16px 0; font-size: 12px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.t-sec em { margin-left: auto; font-size: 11px; }
.t-sec.lock { filter: grayscale(.6) brightness(.85); }
.t-node .t-ic { width: 52px; height: 52px; flex: none; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #0009); }
.t-node.lock .t-ic { filter: grayscale(1) brightness(.6); }
.t-bars { display: flex; gap: 2px; margin: 2px 0 1px; }
.t-bars i { width: 12px; height: 16px; background: center / contain no-repeat; }
.t-node .ef b { color: var(--ink); }
.t-later, .t-cond { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--amber); text-shadow: 0 1px 2px #000b; }
.t-note { display: block; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--pist); text-shadow: 0 1px 2px #000b; }   /* пояснение под эффектом ноды */
.t-cond { color: var(--pist); }
.t-max { width: 96px; text-align: center; font-weight: 900; color: var(--green); font-size: 13px; text-shadow: 0 1px 2px #000b; }
.sheet .chest { margin: -6px 0 12px; font-size: 12.5px; color: var(--pist); }
.sheet .chest b { color: var(--ink); }

/* ЛАБОРАТОРИЯ, «Печь» (12.12): плитка редкости — макет art/ui/redkost_test.html, скругление 40% стороны */
#screen-lab { background: #0b120d var(--ui-02-01) center top / cover no-repeat; }
#screen-lab.garden { background-image: var(--ui-02-02); }
/* Грядка (12.12): сетка 3×3, итог, семена */
.gsum { margin: 10px 8px 0; display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: 13px; color: var(--pist);
  background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; text-shadow: 0 1px 2px #000b; }
.gsum b { color: var(--ink); font-size: 15px; }
.ggrid { margin: 10px auto 0; width: min(100% - 16px, 340px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gp { position: relative; aspect-ratio: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 22%; background: #1b140dd9; box-shadow: inset 0 0 0 1.5px #4a3a27; }
.gp img { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 2px 2px #0009); }
.gp em { font-style: normal; font-size: 11px; font-weight: 900; color: var(--ink); text-shadow: 0 1px 2px #000b; }
.gp.grown em { color: var(--green); }
.gp.growing img { filter: grayscale(.6) brightness(.75); }
.gp.empty b { color: #6b8a4f; font-size: 26px; font-weight: 900; }
.gp.sel { box-shadow: inset 0 0 0 2.5px var(--green), 0 0 10px #8fcb4b66; }
.gp.lk { background: #120e0ad9; }
.gp.lk img { width: 30%; height: 30%; opacity: .7; }
.gp.lk em { font-size: 10px; color: var(--pist); }
.g-row .g-ic { width: 48px; height: 48px; }
.g-row .pr.lc img { width: 16px; height: 16px; }
.p-row .g-ic { background: radial-gradient(circle at 50% 38%, #2c3d3a 0%, #141f1c 78%); box-shadow: inset 0 0 0 1.5px #3c5a50; }
.g-note { margin: 6px 16px 0; font-size: 11.5px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.tile { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 40%; width: 34px; height: 34px; }
.tile img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 1px 1px #0009); }
.tC { background: radial-gradient(circle at 50% 38%, #4a3a27 0%, #2a2117 78%); box-shadow: inset 0 0 0 1.5px #4a3a27, inset 0 0 0 2.5px #2a2117; }
.tR { background: radial-gradient(circle at 50% 38%, #3f7a2c 0%, #1b3317 78%); box-shadow: inset 0 0 0 1.5px #3f7a2c, inset 0 0 0 2.5px #1b3317; }
.tE { background: radial-gradient(circle at 50% 38%, #5f3aa0 0%, #22143a 78%); box-shadow: inset 0 0 0 1.5px #5f3aa0, inset 0 0 0 2.5px #22143a; }
.tL { position: relative; background: radial-gradient(circle at 50% 38%, #a3325b 0%, #3a1322 78%); box-shadow: inset 0 0 0 1.5px #a3325b, inset 0 0 0 2.5px #3a1322; }
.tL::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 12px #E0457B88; opacity: 0; animation: pulse 2.6s ease-in-out infinite; }
.rC { color: #A9855A; } .rR { color: #7BD64A; } .rE { color: #B07CF2; } .rL { color: #E0457B; }
.lt { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 60px; }
.lt em { font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .2px; line-height: 1.1; text-shadow: 0 1px 2px #000b; }
.lw { margin: 6px 8px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ls { position: relative; aspect-ratio: 1; max-width: 100%; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 40%;
  background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; }
.ls .lt { width: 100%; height: 100%; }
.ls .tile { width: 100% !important; height: 100% !important; }
.ls.on { background: none; box-shadow: none; }
.ls.empty b { color: #4a6b3f; font-size: 22px; font-weight: 900; }
.ls.lk { background: #241e16cc; }
.ls.lk img { width: 20px; height: 20px; opacity: .8; }
.ls.lk em { font-style: normal; font-size: 10px; font-weight: 900; color: var(--pist); }
.lset { margin: 8px 8px 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--pist); border-radius: 12px;
  background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; text-shadow: 0 1px 2px #000b; }
.lset b { color: var(--ink); }
.lset span { flex: 1; min-width: 0; }
.lset i { flex: none; width: 70px; height: 7px; border-radius: 4px; background: #0B110D; overflow: hidden; }
.lset s { display: block; height: 100%; background: linear-gradient(90deg, #4E7A2A, #8FCB4B); }
.lf { margin: 6px 8px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lf button { min-height: 44px; border-radius: 12px; font-weight: 900; font-size: 13px; color: var(--pist); background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; }
.lf button.on { color: #16260b; background: linear-gradient(180deg, #A9DC5E, #7CBA3F); box-shadow: 0 2px 0 var(--green-d); }
.lings { margin: 8px 8px 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.li .tile { width: 36px; height: 36px; }
.li b { font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000b; }
.oven { width: 100%; min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 27px 28px 21px 33px / 6px 2px 4px 2px; }
.oven .txt { flex: 1; min-width: 0; }
.oven .nm2 { font-weight: 900; font-size: 15px; text-shadow: 0 1px 2px #000b; }
.oven .ef { font-size: 11.5px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.oven .bar { margin: 5px 0 3px; }
.oven .buy { width: 96px; }
.l-row .pr.lc { gap: 6px; }
.l-row .pr.lc img { width: 16px; height: 16px; }

/* ярлыки под сценой (12.8): в потоке, скроллятся со списком, до четырёх */
/* четыре ярлыка поровну; пока Ящики закрыты — три на всю ширину */
.shortcuts { margin: 10px 8px 0; display: flex; gap: 6px; }
.shortcuts button { position: relative; flex: 1 1 0; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0 solid transparent; border-image: var(--ui-06-06) 50 70 50 70 fill / 14px 20px 14px 20px; }
.shortcuts img { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px #0009); }
.shortcuts span { font-size: 12px; font-weight: 900; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.shortcuts .badge { position: absolute; top: 6px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #0008; }
.gate-row img { width: 36px; height: 36px; }
/* окно перемоток (кнопка в ряду действий, 30.09): строка — часы, сколько и сумма, «Промотать» */
.sk-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; text-align: left; }
.sk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #0b151099; box-shadow: inset 0 0 0 1px #33472f; }
.sk-row img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 3px #000a); }
.sk-row div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk-row div b { font-size: 15px; font-weight: 900; }
.sk-row div span { font-size: 11.5px; font-weight: 700; color: var(--pist); }
.sk-row .buy { width: 104px; height: 44px; flex: none; }
.sk-row .buy b { font-size: 14px; }
/* Квесты и Путь (12.15, 12.17): полноэкранные, с возвратом на Болото */
#screen-quests, #screen-path, #screen-ach, #screen-profile, #screen-settings { background: #0b120d var(--ui-03-01) center top / cover no-repeat; }
.q-hd { position: relative; }
.back { position: absolute; left: 8px; top: 12px; min-height: 44px; padding: 0 12px; font-weight: 900; font-size: 13px; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.q-hd p b { color: var(--ink); }
.q-row .txt { min-width: 0; }
.q-row .nm2 { white-space: normal; line-height: 1.2; font-size: 14.5px; }
.q-row .bar { margin: 5px 0 3px; }
.q-row .ef b { color: var(--ink); font-weight: 800; }
.q-row.ready { border-image-source: var(--ui-08-02); }
.q-row.got { opacity: .6; }
.q-rr { flex: none; width: 64px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 10.5px; font-weight: 800; color: var(--pist); }
.q-rr img { width: 24px; height: 24px; }
.q-rr:disabled { opacity: .4; }
.q-note { width: 100%; margin: 0; font-size: 12px; color: var(--pist); text-align: center; text-shadow: 0 1px 2px #000b; }
.pweek { margin: 6px 8px 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pw-day { min-height: 84px; padding: 6px 3px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; }
.pw-day b { font-size: 12px; font-weight: 900; color: var(--pist); }
.pw-day span { font-size: 9.5px; font-weight: 800; line-height: 1.15; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.pw-day.got { opacity: .45; }
.pw-day.now { box-shadow: inset 0 0 0 2px var(--green), 0 0 10px #8fcb4b55; }
.p-check { width: 100%; height: 50px; }
.pgrid { margin: 6px 8px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pd { position: relative; min-height: 78px; padding: 5px 3px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: #152016e0; box-shadow: inset 0 0 0 1px #27331f; }
.pd b { font-size: 12px; font-weight: 900; color: var(--pist); }
.pd img { width: 22px; height: 22px; }
.pd span { font-size: 9.5px; font-weight: 800; line-height: 1.15; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.pd em { font-style: normal; font-size: 9.5px; font-weight: 900; color: var(--amber); margin-top: auto; }
.pd.got { opacity: .45; }
.pd.got em { color: var(--green); }
.pd.now { box-shadow: inset 0 0 0 2px var(--green), 0 0 10px #8fcb4b55; }
.pd.now em { color: var(--green); }
.pd.future { opacity: .55; }
.pd.future em { display: none; }
.pd.boss { background: #2a1512e0; }
.pd:disabled { cursor: default; }
.pseal { margin: 10px 8px 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #2a1512cc; box-shadow: inset 0 0 0 1px #5a2a22; }
.pseal img { width: 40px; height: 40px; }
.pseal b { display: block; font-size: 14px; font-weight: 900; }
.pseal span { font-size: 12px; color: var(--pist); }
.l-rush { width: 96px; }
/* разборка артефакта: тихая ссылка под описанием, второе нажатие — подтверждение */
.l-break { margin-top: 3px; padding: 4px 0; min-height: 30px; font-size: 11px; font-weight: 800; color: #c9b99d; text-decoration: underline dotted; text-align: left; }
.l-break.armed { color: var(--amber); text-decoration: none; }
.l-break:disabled { opacity: .55; text-decoration: none; }
.l-break img { width: 14px; height: 14px; vertical-align: -2px; }
.g-rush { width: 100%; height: 52px; }

/* Достижения (12.13): три карточки в ряд, показана только текущая ступень; категории раскрываются по одной */
.a-total { width: min(100%, 260px); margin: 6px auto 0; }
.a-cat { width: calc(100% - 16px); text-align: left; }
.a-cat i { margin-left: auto; font-style: normal; font-size: 14px; }
.a-grid { margin: 8px 8px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.a-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px 8px;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 18px 19px 14px 22px / 4px 1px 3px 1px; }
.a-card img { width: 40px; height: 40px; filter: drop-shadow(0 2px 2px #0009); }
.a-card > b { font-size: 12.5px; font-weight: 900; line-height: 1.15; text-shadow: 0 1px 2px #000b; }
.a-card > em { font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--pist); text-shadow: 0 1px 2px #000b; flex: 1; hyphens: auto; }
.a-card .bar { width: 100%; margin-top: 4px; }
.a-num { font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000b; }
.a-tier { font-size: 9.5px; font-weight: 800; color: #c9b99d; text-shadow: 0 1px 2px #000b; }
.a-card.ready { border-image-source: var(--ui-08-02); }
.a-card.ready .a-tier { color: var(--green); }
.a-card.done { opacity: .55; }
.a-take { width: 100%; height: auto; min-height: 44px; margin-top: 4px; padding: 4px 2px; }
.a-take b { font-size: 12.5px; }
.a-take span { font-size: 9.5px; line-height: 1.1; }
.a-cps { margin: 8px 8px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.a-cp { min-height: 64px; padding: 6px 4px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; background: #152016cc; box-shadow: inset 0 0 0 1px #27331f; }
.a-cp b { font-size: 16px; font-weight: 900; color: var(--amber); }
.a-cp span { font-size: 10px; font-weight: 800; line-height: 1.15; color: var(--pist); hyphens: auto; }
.a-cp.got { box-shadow: inset 0 0 0 2px var(--green); }
.a-cp.got b { color: var(--green); }

/* Ящики (12.14): шансы на виду чипами, гарантия невезения — числом */
.bx { width: 100%; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.bx-top { display: flex; align-items: center; gap: 12px; }
.bx-top img { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 3px 3px #000a); }
.bx-top b { display: block; font-size: 16px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.bx-top span { font-size: 12px; font-weight: 800; color: var(--pist); text-shadow: 0 1px 2px #000b; font-variant-numeric: tabular-nums; }
.bx-always { font-size: 12px; color: var(--ink); text-shadow: 0 1px 2px #000b; line-height: 1.3; }
.bx-always b { color: var(--pist); }
.bx .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bx .chip { font-size: 10.5px; white-space: normal; }
.bx .chip.rare { background: var(--amber); }
.bx-note { font-size: 11.5px; font-weight: 800; color: var(--amber); text-shadow: 0 1px 2px #000b; }
.bx-open { width: 100%; height: auto; min-height: 48px; padding: 4px 8px; margin-top: 2px; }
.bx-open b { font-size: 14px; }
/* Схрон стража: три семьи в ряд */
.st-fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.st-fam { width: 100%; height: auto; min-height: 64px; padding: 4px 2px; gap: 1px; }
.st-fam img { width: 22px; height: 22px; }
.st-fam b { font-size: 12.5px; }
.st-fam span { font-size: 10.5px; }
.bx-loot ul { list-style: none; margin: 12px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bx-loot li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px #000b; }
.bx-loot li b { font-variant-numeric: tabular-nums; color: var(--green); }

/* Профиль (12.8, решение 25.09): карточка игрока, статистика плотными строками, вход в Настройки */
.pf-card { margin: 8px 8px 0; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.pf-card img { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 3px 3px #000a); }
.pf-card b { display: block; font-size: 18px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.pf-card span { font-size: 12.5px; font-weight: 700; color: var(--pist); text-shadow: 0 1px 2px #000b; }
/* экран возврата: строка «копить больше — Лень» (30.09, вечер) — тихая, над предложениями ×2 / ×3 */
.rt-lazy { width: 100%; margin: 10px 0 2px; padding: 9px 12px; border-radius: 12px; display: flex; align-items: center; gap: 10px; text-align: left;
  background: #1d2b3a99; box-shadow: inset 0 0 0 1px #3d5a78; font-size: 12px; font-weight: 700; color: var(--pist); line-height: 1.3; }
.rt-lazy b { color: var(--ink); font-weight: 900; }
.rt-lazy em { flex: none; font-style: normal; font-size: 12px; font-weight: 900; color: #9fd0ff; }
.rt-lazy em::after { content: ' ›'; }
/* ---------- боевой пропуск (ЭКОНОМИКА 12-Б, 1.10) ⏳ вид до полировки ---------- */
.pass-strip { width: calc(100% - 16px); margin: 8px 8px 0; min-height: 44px; padding: 6px 10px; border-radius: 14px; display: flex; align-items: center; gap: 8px;
  position: relative; text-align: left; background: linear-gradient(90deg, #2a1f3a, #1a2a1c); box-shadow: inset 0 0 0 1.5px #6b4ca8, 0 3px 6px #0008; }
.pass-strip .ps-ic { width: 30px; height: 30px; flex: none; }
.pass-strip .ps-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pass-strip .ps-tx b { font-size: 13px; font-weight: 900; }
.pass-strip .ps-tx em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--pist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-strip .ps-b { display: flex; gap: 3px; flex: none; }
.pp-b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: #0b1510; box-shadow: inset 0 0 0 1px #33472f; }
.pp-b img { width: 17px; height: 17px; filter: grayscale(1) opacity(.5); }
.pp-b.on { box-shadow: inset 0 0 0 1.5px #b48cff, 0 0 8px #9d6bff88; }
.pp-b.on img { filter: none; }
.pass-strip .badge { position: absolute; right: -3px; top: -3px; }
/* вопрос Белло на экране возврата: разрешить боту писать (СИСТЕМЫ 14, 1.10) */
.rt-ask { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 6px 10px; border-radius: 12px; background: #0b1510cc;
  box-shadow: inset 0 0 0 1px #33472f; font-size: 13px; font-weight: 800; color: #ffe2a8; text-align: left; }
.rt-ask i { width: 32px; height: 36px; flex: none; background: var(--bello) center bottom / contain no-repeat; }
.pp-head { margin: 8px 8px 0; padding: 12px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #2a1f3acc, #152016cc); box-shadow: inset 0 0 0 1.5px #6b4ca8; }
.pp-day { display: flex; flex-direction: column; }
.pp-day b { font-size: 16px; font-weight: 900; }
.pp-day span { font-size: 12px; font-weight: 700; color: var(--pist); }
.pp-wait { font-size: 12.5px; font-weight: 700; color: #ffe2a8; padding: 8px 10px; border-radius: 10px; background: #3a2a1066; box-shadow: inset 0 0 0 1px #e0a33c66; }
.pp-wait b { color: #ffd27a; }
.pp-buy { display: flex; gap: 8px; }
.pp-buy .buy { flex: 1; width: auto; height: 50px; }
.pp-buy .buy span { display: flex; align-items: center; gap: 3px; }
.pp-buy .buy span img { width: 14px; height: 14px; }
.pp-note { font-size: 11px; font-weight: 700; color: var(--pist); }
.pp-bonus { display: flex; gap: 6px; }
.pp-bonus .pp-b { width: 34px; height: 34px; border-radius: 10px; }
.pp-bonus .pp-b img { width: 26px; height: 26px; }
.pp-cols { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--pist); padding: 0 18px; }
.pp-map { position: relative; margin: 6px 8px 90px; }
.pp-trail { position: absolute; left: 50%; top: 0; margin-left: -60px; pointer-events: none; }
.pp-road { fill: none; stroke: #2c3d28; stroke-width: 10; stroke-linecap: round; }
.pp-done { fill: none; stroke: #8fcb4b; stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 4px #8fcb4b88); }
.pp-row { position: relative; height: 78px; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; }
.pp-l { display: flex; justify-content: flex-end; }
.pp-r { display: flex; justify-content: flex-start; }
.pp-node { position: relative; justify-self: center; transform: translateX(var(--x)); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #1a2a1c; box-shadow: inset 0 0 0 2px #3d5a36, 0 2px 4px #0009; font-size: 13px; font-weight: 900; color: var(--dim); }
.pp-row.reached .pp-node { background: linear-gradient(180deg, #A9DC5E, #7CBA3F); color: #12210a; box-shadow: 0 3px 0 var(--green-d), 0 0 10px #8fcb4b88; }
.pp-row.cur .pp-node { box-shadow: inset 0 0 0 2px #ffd27a, 0 0 12px #e0a33caa; color: var(--ink); }
.pp-me { position: absolute; left: 50%; bottom: 24px; width: 40px; height: 44px; margin-left: -20px; background: var(--bello) center bottom / contain no-repeat;
  filter: drop-shadow(0 3px 4px #000c); pointer-events: none; }
.pp-chip { min-width: 72px; max-width: 128px; min-height: 40px; padding: 5px 8px; border-radius: 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: center;
  background: #152016e6; box-shadow: inset 0 0 0 1px #33472f; }
.pp-r .pp-chip { background: #221a33e6; box-shadow: inset 0 0 0 1px #6b4ca8; }
.pp-chip.locked { filter: grayscale(.6) brightness(.8); }
.pp-chip.empty { visibility: hidden; }
.pp-it { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 900; }
.pp-it img { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px #000a); }
.pp-chip { position: relative; }
.pp-l.ready .pp-chip, .pp-r.ready .pp-chip { box-shadow: inset 0 0 0 2px #c6f07a, 0 0 10px #8fcb4b88; }
.pp-l.ready .pp-chip::after, .pp-r.ready .pp-chip::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 14px 2px #c6f07a; opacity: 0; animation: pulse 1.4s ease-in-out infinite; }
.pp-l.got .pp-chip, .pp-r.got .pp-chip { opacity: .45; }
.pp-take { position: fixed; left: 50%; bottom: 84px; width: 200px; height: 52px; margin-left: -100px; z-index: 5; }
.sh-pass { width: calc(100% - 16px); margin: 10px 8px 0; min-height: 52px; padding: 8px 12px; border-radius: 14px; display: flex; align-items: center; gap: 10px; text-align: left;
  background: linear-gradient(90deg, #2a1f3a, #1a2a1c); box-shadow: inset 0 0 0 1.5px #6b4ca8, 0 3px 6px #0008; }
.sh-pass img { width: 34px; height: 34px; }
.sh-pass span { flex: 1; display: flex; flex-direction: column; }
.sh-pass b { font-size: 14px; font-weight: 900; }
.sh-pass em { font-style: normal; font-size: 12px; font-weight: 700; color: #ffe2a8; }
.sh-pass i { font-style: normal; font-size: 22px; color: var(--pist); }
.pf-list, .st-list { margin: 6px 8px 0; border-radius: 14px; overflow: hidden; background: #152016e6; box-shadow: inset 0 0 0 1px #27331f; }
/* набор звуков — временно, пока Макс выбирает (30.09): пять наборов плитками, под ними проверка каждого звука */
.st-list.snd { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.snd-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.snd-packs button { min-height: 48px; padding: 6px 8px; border-radius: 10px; text-align: left; display: flex; flex-direction: column; justify-content: center;
  background: #0b1510; box-shadow: inset 0 0 0 1px #33472f; }
.snd-packs button b { font-size: 13px; font-weight: 900; }
.snd-packs button span { font-size: 10.5px; font-weight: 700; color: var(--pist); }
.snd-packs button.on { background: #24381a; box-shadow: inset 0 0 0 2px var(--green); }
.snd-tests { display: flex; flex-wrap: wrap; gap: 6px; }
.snd-tests button { min-height: 36px; padding: 0 10px; border-radius: 18px; font-size: 12px; font-weight: 800; color: var(--ink);
  background: #0b1510; box-shadow: inset 0 0 0 1px #33472f; }
.snd-tests button:active { background: #24381a; }
.pf-row { min-height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #27331f; }
.pf-row:first-child { border-top: 0; }
.pf-row span { font-size: 13.5px; font-weight: 700; color: var(--pist); }
.pf-row b { font-size: 14.5px; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; }
.pf-go { width: calc(100% - 16px); margin: 12px 8px 16px; min-height: 56px; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 8px; text-align: left;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.pf-go span { font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.pf-go em { flex: 1; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.pf-go img, .st-chev { width: 22px; height: 22px; transform: rotate(-90deg); }   /* стрелка из набора смотрит вниз */
/* Настройки (12.18): сплошные строки 56, без зазоров — читают редко и сверху вниз */
.st-row { width: 100%; min-height: 56px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; text-align: left; border-top: 1px solid #27331f; }
.st-list > :first-child { border-top: 0; }
.st-row > img { width: 30px; height: 30px; flex: none; }
.st-row > div { flex: 1; min-width: 0; }
.st-row b { display: block; font-size: 14.5px; font-weight: 900; }
.st-row span { display: block; font-size: 11.5px; font-weight: 700; color: var(--pist); }
.st-id { font-family: ui-monospace, Consolas, monospace; font-size: 11px !important; letter-spacing: .3px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.st-btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.st-btn img { width: 24px; height: 24px; }
.st-chev { flex: none; }
.seg { display: flex; flex: none; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px #33472f; }
.seg button { min-height: 36px; padding: 0 9px; font-size: 11.5px; font-weight: 900; color: var(--pist); }
.seg button.on { background: var(--green); color: #16260b; }
.st-warn b { color: #f0a08a; }
.st-confirm { display: flex; gap: 8px; padding: 0 12px 12px; }
.st-confirm button { flex: 1; min-height: 44px; border-radius: 12px; font-size: 13px; font-weight: 900; }
.st-no { color: var(--pist); box-shadow: inset 0 0 0 1px #33472f; }
.st-yes { background: #7a2a1e; color: #ffe1d8; }
.st-yes:disabled { opacity: .5; }
.st-ver { margin: 14px 16px 18px; text-align: center; font-size: 11.5px; color: var(--dim); }
/* Стая (12.16): приглашение сверху, лестница наград, друзья со статусом и «Толкнуть». Строка входа — в Профиле */
.pf-go .pf-ic { width: 28px; height: 28px; transform: none; flex: none; }
.pf-pack { position: relative; margin-bottom: 0; }
.pf-pack .badge { position: absolute; top: 8px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px #0008; }
.pk-me { margin: 8px 8px 0; padding: 12px 16px; border-radius: 14px; background: #152016e6; box-shadow: inset 0 0 0 1px var(--amber); display: flex; flex-direction: column; gap: 4px; }
.pk-me b { font-size: 15px; font-weight: 900; }
.pk-me span { font-size: 12.5px; font-weight: 700; color: var(--pist); }
.pk-invite-box { margin: 10px 8px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pk-invite { width: 100%; max-width: 320px; height: 52px; flex-direction: row; gap: 8px; }
.pk-invite img { width: 26px; height: 26px; }
.pk-invite b { font-size: 16px; }
.pk-rules { margin: 0; padding: 0 12px; font-size: 12px; font-weight: 700; color: var(--pist); text-align: center; text-shadow: 0 1px 2px #000b; }
.pk-step { min-height: 48px; padding: 6px 14px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; border-top: 1px solid #27331f; }
.pk-step:first-child { border-top: 0; }
.pk-step span { font-size: 13.5px; font-weight: 700; color: var(--pist); }
.pk-step b { font-size: 13.5px; font-weight: 900; text-align: right; }
.pk-step em { grid-column: 2; font-style: normal; font-size: 11px; font-weight: 800; color: var(--amber); text-align: right; }
.pk-row .pk-av { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 900; background: #27331f; color: var(--ink); }
.pk-row.done { opacity: .7; }
.pk-poke { width: 104px; height: 40px; }
.pk-poke b { font-size: 14px; }
.pk-row .pk-wait { flex: none; width: 104px; text-align: center; font-size: 12px; font-weight: 800; color: var(--pist); }
.pk-row .pk-ok { flex: none; width: 104px; display: flex; justify-content: center; }
.pk-row .pk-ok img { width: 26px; height: 26px; }
.pk-empty { margin-top: 8px; }
@media (max-width: 370px) { .seg button { padding: 0 6px; font-size: 10.5px; } .st-row > img { width: 26px; height: 26px; } }

/* обряды Страха (12.20): по три в ряд, цена — доля Страха, предохранитель словами */
.f-rites { margin: 4px 0 0; }
.f-rites .sec em { margin-left: auto; font-size: 11px; font-style: normal; }
.r-grid { margin: 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.r-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 10px 6px 8px;
  border: 0 solid transparent; border-image: var(--ui-08-01) 95 100 75 115 fill / 18px 19px 14px 22px / 4px 1px 3px 1px; }
.r-tile i { width: 48px; height: 48px; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #0009); }
.r-tile b { font-size: 11.5px; font-weight: 900; line-height: 1.15; text-shadow: 0 1px 2px #000b; }
.r-tile em { font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--pist); text-shadow: 0 1px 2px #000b; flex: 1; }
.r-tile .buy { width: 100%; min-height: 44px; margin-top: 4px; }
.r-tile .buy b { font-size: 12px; }
.r-tile.lock i { filter: grayscale(1) brightness(.6); }
.r-tile.done i { filter: drop-shadow(0 0 6px #c6f07a); }
.r-done { font-size: 11px; font-weight: 900; color: var(--green); text-shadow: 0 1px 2px #000b; margin-top: 4px; }
.r-lock { font-size: 10.5px; font-weight: 800; color: var(--pist); opacity: .8; margin-top: 4px; }
.r-cap { font-size: 10.5px; font-weight: 800; color: #c9895a; margin-top: 4px; }
/* Сомнамбула: переключатель в строке ноды */
.t-sw { display: block; margin-top: 4px; min-height: 30px; padding: 0 10px; border-radius: 15px; font-size: 11px; font-weight: 900;
  color: var(--pist); background: #0b110dcc; box-shadow: inset 0 0 0 1.5px #c7dca655; }
.t-sw.on { color: #16260b; background: var(--green); box-shadow: none; }
/* Проклятая печать: строка на главном и выбор монстра */
.seal-row img { width: 38px; height: 38px; }
.surge-row img { width: 38px; height: 38px; }
.sheet.seal-pick { text-align: left; padding: 30px 24px 26px; }
.seal-pick .sub { margin: 4px 0 10px; line-height: 1.35; }
.sp-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.sp-row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.sp-row img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.sp-row div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-row b { font-size: 14px; font-weight: 900; }
.sp-row em { font-style: normal; font-size: 11px; color: var(--pist); }
.sheet .sp-row .buy { width: auto; flex: none; min-width: 84px; height: 44px; }
.sheet .sp-row .buy b { font-size: 14px; }
.sp-on { font-size: 12px; font-weight: 900; color: var(--green); min-width: 84px; text-align: center; }
.sp-later { display: block; margin: 12px auto 0; min-height: 44px; padding: 0 20px; font-weight: 800; color: var(--pist); }

/* бой со стражем (12.19): полноэкранный, без нижней панели; церемония вне тапания */
/* арена — в болотную зелень (Макс 30.09): картинка серо-синяя, поверх — тон режимом color (оттенок и насыщенность
   от градиента, светлота — от картинки). Сверху бирюза, как вода на Болоте, внизу — тина ⏳ до финального арта */
.guard { position: absolute; inset: 0; z-index: 10; overflow: hidden;
  background: linear-gradient(180deg, #2f8a6a80 0%, #3a8a5a80 40%, #6f8f2c80 66%, #55802a99 100%), #0b1412 var(--ui-04-01) center / cover no-repeat;
  background-blend-mode: color, normal; }
.g-arena { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 18px; }
/* приход стража (Макс 30.09, вечер): экран медленно темнеет, силуэт проступает, три удара — дрожь и слово на каждый ⏳ до полировки */
.guard.arrive { background: #050806; animation: gdark 1.3s ease-in both; }
@keyframes gdark { from { background-color: #05080600; } to { background-color: #050806f2; } }
.g-knock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.g-shadow { position: absolute; left: 50%; top: 50%; width: min(80%, 320px); transform: translate(-50%, -54%) scale(.92); opacity: 0;
  filter: brightness(0) drop-shadow(0 0 22px #3c6e2a66); animation: gshadow 2.4s ease-in .4s forwards; pointer-events: none; }
@keyframes gshadow { to { opacity: .7; transform: translate(-50%, -54%) scale(1); } }
.g-kn { position: relative; display: flex; gap: 12px; font: 900 30px Nunito, sans-serif; color: #e8f5d0; text-shadow: 0 3px 8px #000; }
.g-kn b { opacity: 0; transform: scale(1.6); transition: opacity .12s, transform .18s cubic-bezier(.2, 1.6, .5, 1); }
.g-kn b.on { opacity: 1; transform: scale(1); }
.g-knock > span { position: relative; font-size: 15px; font-weight: 900; color: var(--pist); text-shadow: 0 2px 6px #000; opacity: 0; animation: gsay .6s ease-out 1.6s forwards; }
@keyframes gsay { to { opacity: 1; } }
.guard.thud .g-knock { animation: thudk .28s ease-out; }
@keyframes thudk { 20% { transform: translate(-4px, 3px); } 45% { transform: translate(4px, -2px); } 70% { transform: translate(-2px, 1px); } }
/* арена проявляется из темноты: сверху слой темноты тает */
.guard.enter::after { content: ''; position: absolute; inset: 0; background: #050806f2; animation: genter .6s ease-out forwards; pointer-events: none; }
@keyframes genter { to { opacity: 0; } }
body.lowfx .g-shadow, body.lowfx .guard.thud .g-knock { animation: none; }
body.lowfx .g-shadow { opacity: .6; }
.g-head { text-align: center; }
.g-head h2 { font-size: 22px; font-weight: 900; text-shadow: 0 2px 3px #000c; }
.g-head p { font-size: 12.5px; color: var(--pist); text-shadow: 0 1px 3px #000; max-width: 330px; }
.g-head b { color: var(--ink); }
.g-say { position: relative; margin-top: 12px; max-width: 300px; padding: 12px 16px 22px 22px; font-weight: 800; font-size: 13.5px; line-height: 1.3;
  border: 0 solid transparent; border-image: var(--ui-13-02) 70 90 100 120 fill / 21px 27px 30px 36px; filter: drop-shadow(0 4px 8px #000a); }
.g-toad { width: min(78%, 300px); flex: none; margin-top: 4px; filter: drop-shadow(0 10px 14px #000c); pointer-events: none; animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.02, .985) translateY(2px); } }
.g-toad.hurt { animation: hurt .18s ease-out; }
@keyframes hurt { 40% { transform: scale(.96) rotate(-1.5deg); filter: brightness(1.6) drop-shadow(0 10px 14px #000c); } }
.g-arena:not(.fight):not(.done) > .g-toad { width: min(92%, 360px); margin: auto 0; }
.g-acts { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 8px; }
.g-acts .buy { width: 100%; height: 58px; }
.g-acts .buy b { font-size: 17px; }
.g-alt { width: 100%; min-height: 52px; padding: 0 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; color: var(--pist);
  background: var(--ui-06-04) center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000b; filter: drop-shadow(0 2px 2px #0008); }
.g-alt b { font-size: 15px; font-weight: 900; color: var(--ink); }
.g-alt span { font-size: 11px; font-weight: 700; }
.g-alt img { position: absolute; left: 22px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); }
.g-alt:has(img) { padding-left: 54px; }
.g-acts .buy span { padding: 0 30px; text-align: center; }
.g-alt:active, .g-acts .buy:active { transform: translateY(1px); }
/* полоса боя: засечки подписаны тем, что дают, — это точки выхода, а не «сколько осталось» */
.g-bar { position: relative; width: 100%; max-width: 380px; height: 36px; margin: 6px 0 24px; flex: none; background: var(--ui-07-05-1) center / 100% 100% no-repeat; }
/* жёлоб рамки: засечки нарисованы на 25/50/75/100% его длины */
.g-track { position: absolute; left: 5.5%; right: 5.5%; top: 27%; height: 42%; }
.g-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 0; transition: width .12s;
  border: 0 solid transparent; border-image: var(--ui-07-05-2) 0 26 fill / 0 8px; }   /* пилюля тянется по длине, закруглённые концы не искажаются */
.g-bar i { position: absolute; top: calc(100% + 9px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-style: normal; line-height: 1.05; }
.g-bar i:last-child { transform: translateX(-75%); }
.g-bar i b { font-size: 10px; font-weight: 900; color: var(--pist); text-shadow: 0 1px 2px #000; }
.g-bar i span { font-size: 10px; font-weight: 800; color: var(--dim); text-shadow: 0 1px 2px #000; }
.g-bar i.on b, .g-bar i.on span { color: var(--blue); }
.g-count { margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--pist); text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.g-count span { color: var(--ink); font-weight: 900; }
/* touch-action: none — второй и третий палец бьют, а не зумят и не листают (Макс 30.09) */
.g-target { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer; }
.g-target .g-toad { width: min(90%, 340px); }
.g-target.weak .g-toad { filter: drop-shadow(0 10px 14px #000c) drop-shadow(0 0 10px #6fd0de88); }
/* вспышка удара вдвое крупнее (Макс 30.09: из-под пальца её почти не было видно), число урона — над пальцем ⏳ до полировки */
.g-hit { position: absolute; width: 128px; height: 128px; margin: -64px 0 0 -64px; pointer-events: none; background: var(--ui-11-01) center / contain no-repeat; animation: hit .6s ease-out forwards; }
.g-hit.crit { width: 184px; height: 184px; margin: -92px 0 0 -92px; background-image: var(--ui-11-02); }
.g-hit b { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); white-space: nowrap; font: 900 22px Nunito, sans-serif; color: #fff; text-shadow: 0 2px 4px #000, 0 0 2px #000; }
.g-hit.crit b { font-size: 28px; color: var(--blue); }
@keyframes hit { from { transform: scale(.5); opacity: 1; } 30% { transform: scale(1.05); } to { transform: scale(1) translateY(-26px); opacity: 0; } }
.g-leave { max-width: 360px; }
/* уход стража (Макс 30.09: прежний — полупрозрачная жаба уплывала вверх — «кринж»). Прогнали — вспышка, дрожь, присел
   и одним прыжком унёсся за край, из-под лап всплеск слизи и капли, за ним лучи; отпустили — ускакал вбок.
   Потом снизу выезжает награда, строки по одной ⏳ до полировки */
.g-exit { position: relative; flex: 1; width: 100%; min-height: 150px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.g-exit .g-toad { width: min(62%, 240px); margin: 0 0 4px; animation: none; transform-origin: 50% 100%; position: relative; z-index: 1; }
.won .g-exit .g-toad { animation: beaten 1.5s cubic-bezier(.3, .1, .3, 1) forwards; }
@keyframes beaten {
  0% { transform: none; }
  8% { transform: scale(1.07); filter: brightness(2.4) drop-shadow(0 10px 14px #000c); }
  14% { transform: translateX(-10px) rotate(-4deg); filter: brightness(1.3) drop-shadow(0 10px 14px #000c); }
  20% { transform: translateX(10px) rotate(4deg); }
  26% { transform: translateX(-6px) rotate(-2deg); }
  32% { transform: translateX(3px); filter: drop-shadow(0 10px 14px #000c); }
  48% { transform: scale(1.16, .74); }
  58% { transform: translateY(-30%) scale(.9, 1.18); }
  100% { transform: translateY(-200%) scale(.16) rotate(-26deg); opacity: 0; }
}
.let .g-exit .g-toad { animation: hopaway 1.4s ease-in forwards; }
@keyframes hopaway {
  0% { transform: none; }
  16% { transform: translate(10%, -12%) rotate(5deg); }
  32% { transform: translate(26%, 0) scale(.9); }
  48% { transform: translate(44%, -11%) scale(.82) rotate(5deg); }
  64% { transform: translate(62%, 0) scale(.74); }
  80% { transform: translate(84%, -9%) scale(.66) rotate(5deg); }
  100% { transform: translate(150%, 0) scale(.6); opacity: 0; }
}
.g-splash { position: absolute; left: 50%; bottom: 0; width: 280px; height: 170px; margin-left: -140px; opacity: 0; transform-origin: 50% 100%;
  background: var(--ui-11-04) center bottom / contain no-repeat; }
.won .g-splash { animation: gsplash .7s ease-out .82s forwards; }
@keyframes gsplash { 0% { opacity: 0; transform: scale(.3, .2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3, 1.1); } }
.g-drop { position: absolute; left: 50%; bottom: 18px; width: 14px; height: 18px; margin-left: -7px; opacity: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #e2fbb0, #8fcb4b 45%, #4e7a2a); box-shadow: 0 0 6px #8fcb4b88; }
.won .g-drop { animation: gdrop .95s cubic-bezier(.2, .6, .4, 1) .85s forwards; }
@keyframes gdrop {
  0% { opacity: 1; transform: translate(0, 0) scale(.5); }
  50% { opacity: 1; transform: translate(calc(var(--dx) * .7), var(--dy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -.2 + 30px)) scale(.8); }
}
.g-burst { position: absolute; left: 50%; bottom: 10%; width: 440px; height: 440px; margin-left: -220px; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(#d9f5a833 0 9deg, #0000 9deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, #0000 100%); mask: radial-gradient(closest-side, #000 25%, #0000 100%);
  animation: gburst 1.6s ease-out .1s forwards, gspin 14s linear infinite; }
@keyframes gburst { 0% { opacity: 0; scale: .4; } 12% { opacity: 1; } 100% { opacity: .6; scale: 1; } }
@keyframes gspin { to { rotate: 360deg; } }
/* приз после боя (Макс 1.10): очко навыков посередине, в квадратной слизевой рамке — выпрыгивает, где стоял страж.
   Рамка — волнистая слизь с наплывами, без капель (капли — знак Stars, ЯДРО 12.7). Лучи — картинка с мягким краем,
   крутится сдвигом (без маски) ⏳ вид до полировки и своего арта */
.g-prize { position: absolute; left: 50%; top: 50%; z-index: 2; width: 220px; margin: -118px 0 0 -110px; display: flex; flex-direction: column; align-items: center;
  pointer-events: none; opacity: 0; animation: gpin .7s cubic-bezier(.2, 1.5, .4, 1) 1.35s forwards; }
.let .g-prize { animation-delay: 1s; }
@keyframes gpin { 0% { opacity: 0; transform: scale(.2) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: none; } }
.gp-rays { position: absolute; left: 50%; top: 80px; width: 340px; height: 340px; margin: -170px 0 0 -170px; animation: gspin 18s linear infinite; }
.gp-tile { position: relative; width: 160px; height: 160px; display: grid; place-items: center; animation: gpfloat 2.6s ease-in-out 2.1s infinite; }
.gp-tile::before { content: ''; position: absolute; inset: 14px; border-radius: 34px; background: radial-gradient(circle at 50% 38%, #34562a 0%, #13241a 70%, #0c160f 100%);
  box-shadow: inset 0 6px 16px #c6f07a44, inset 0 -8px 14px #0008; }
.gp-tile::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d4ff8a'/%3E%3Cstop offset='.45' stop-color='%238fd13f'/%3E%3Cstop offset='1' stop-color='%234d8a1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M48.0,12.8 L50.9,12.2 L53.9,11.7 L56.8,11.2 L59.7,10.9 L62.7,10.7 L65.6,10.7 L68.5,10.9 L71.5,11.3 L74.4,11.8 L77.4,12.4 L80.3,13.1 L83.2,13.8 L86.2,14.6 L89.1,15.2 L92.0,15.7 L95.0,16.1 L97.9,16.4 L100.8,16.5 L103.8,16.4 L106.7,16.1 L109.6,15.8 L112.6,15.3 L115.4,15.0 L118.3,14.9 L121.3,15.1 L124.2,15.7 L127.1,16.6 L129.8,17.9 L132.4,19.6 L134.6,21.5 L136.6,23.8 L138.3,26.2 L139.7,28.9 L140.8,31.6 L141.7,34.3 L142.3,37.1 L142.7,39.9 L143.1,42.6 L143.3,45.3 L143.5,48.0 L143.7,50.9 L144.1,53.9 L144.6,56.8 L145.2,59.7 L145.9,62.7 L146.7,65.6 L147.4,68.5 L148.0,71.5 L148.6,74.4 L149.0,77.4 L149.2,80.3 L149.3,83.2 L149.1,86.2 L148.9,89.1 L148.4,92.0 L147.9,95.0 L147.3,97.9 L146.6,100.8 L146.0,103.8 L145.5,106.7 L145.0,109.6 L144.7,112.6 L144.4,115.4 L144.0,118.1 L143.5,120.9 L142.8,123.7 L142.1,126.5 L141.1,129.2 L139.9,131.9 L138.4,134.6 L136.6,137.0 L134.5,139.3 L132.2,141.2 L129.6,142.9 L126.8,144.1 L123.9,145.0 L120.9,145.5 L117.9,145.6 L114.9,145.4 L112.0,144.8 L109.1,144.2 L106.1,143.7 L103.2,143.2 L100.3,142.9 L97.3,142.7 L94.4,142.7 L91.5,142.9 L88.5,143.3 L85.6,143.8 L82.6,144.4 L79.7,145.1 L76.8,145.8 L73.8,146.6 L70.9,147.2 L68.0,147.7 L65.0,148.1 L62.1,148.4 L59.2,148.5 L56.2,148.4 L53.3,148.1 L50.4,147.8 L47.4,147.3 L44.4,146.6 L41.5,145.7 L38.8,144.6 L36.1,143.3 L33.6,141.9 L31.2,140.4 L28.8,138.8 L26.4,137.2 L24.2,135.4 L21.9,133.6 L19.8,131.5 L17.7,129.2 L15.9,126.8 L14.3,124.1 L13.0,121.3 L12.1,118.3 L11.6,115.2 L11.5,112.0 L11.7,109.1 L12.1,106.1 L12.6,103.2 L13.2,100.3 L13.9,97.3 L14.7,94.4 L15.4,91.5 L16.0,88.5 L16.6,85.6 L17.0,82.6 L17.2,79.7 L17.3,76.8 L17.1,73.8 L16.9,70.9 L16.4,68.0 L15.9,65.0 L15.3,62.1 L14.6,59.2 L14.0,56.2 L13.5,53.3 L13.0,50.4 L12.7,47.4 L12.8,44.4 L13.2,41.3 L14.0,38.4 L15.3,35.6 L16.8,33.0 L18.6,30.6 L20.6,28.4 L22.7,26.4 L24.9,24.5 L27.2,22.8 L29.5,21.3 L31.9,19.8 L34.4,18.4 L36.9,17.0 L39.5,15.8 L42.2,14.6 L45.0,13.6 Z' fill='none' stroke='%2316260d' stroke-width='19' stroke-linejoin='round'/%3E%3Cpath d='M48.0,12.8 L50.9,12.2 L53.9,11.7 L56.8,11.2 L59.7,10.9 L62.7,10.7 L65.6,10.7 L68.5,10.9 L71.5,11.3 L74.4,11.8 L77.4,12.4 L80.3,13.1 L83.2,13.8 L86.2,14.6 L89.1,15.2 L92.0,15.7 L95.0,16.1 L97.9,16.4 L100.8,16.5 L103.8,16.4 L106.7,16.1 L109.6,15.8 L112.6,15.3 L115.4,15.0 L118.3,14.9 L121.3,15.1 L124.2,15.7 L127.1,16.6 L129.8,17.9 L132.4,19.6 L134.6,21.5 L136.6,23.8 L138.3,26.2 L139.7,28.9 L140.8,31.6 L141.7,34.3 L142.3,37.1 L142.7,39.9 L143.1,42.6 L143.3,45.3 L143.5,48.0 L143.7,50.9 L144.1,53.9 L144.6,56.8 L145.2,59.7 L145.9,62.7 L146.7,65.6 L147.4,68.5 L148.0,71.5 L148.6,74.4 L149.0,77.4 L149.2,80.3 L149.3,83.2 L149.1,86.2 L148.9,89.1 L148.4,92.0 L147.9,95.0 L147.3,97.9 L146.6,100.8 L146.0,103.8 L145.5,106.7 L145.0,109.6 L144.7,112.6 L144.4,115.4 L144.0,118.1 L143.5,120.9 L142.8,123.7 L142.1,126.5 L141.1,129.2 L139.9,131.9 L138.4,134.6 L136.6,137.0 L134.5,139.3 L132.2,141.2 L129.6,142.9 L126.8,144.1 L123.9,145.0 L120.9,145.5 L117.9,145.6 L114.9,145.4 L112.0,144.8 L109.1,144.2 L106.1,143.7 L103.2,143.2 L100.3,142.9 L97.3,142.7 L94.4,142.7 L91.5,142.9 L88.5,143.3 L85.6,143.8 L82.6,144.4 L79.7,145.1 L76.8,145.8 L73.8,146.6 L70.9,147.2 L68.0,147.7 L65.0,148.1 L62.1,148.4 L59.2,148.5 L56.2,148.4 L53.3,148.1 L50.4,147.8 L47.4,147.3 L44.4,146.6 L41.5,145.7 L38.8,144.6 L36.1,143.3 L33.6,141.9 L31.2,140.4 L28.8,138.8 L26.4,137.2 L24.2,135.4 L21.9,133.6 L19.8,131.5 L17.7,129.2 L15.9,126.8 L14.3,124.1 L13.0,121.3 L12.1,118.3 L11.6,115.2 L11.5,112.0 L11.7,109.1 L12.1,106.1 L12.6,103.2 L13.2,100.3 L13.9,97.3 L14.7,94.4 L15.4,91.5 L16.0,88.5 L16.6,85.6 L17.0,82.6 L17.2,79.7 L17.3,76.8 L17.1,73.8 L16.9,70.9 L16.4,68.0 L15.9,65.0 L15.3,62.1 L14.6,59.2 L14.0,56.2 L13.5,53.3 L13.0,50.4 L12.7,47.4 L12.8,44.4 L13.2,41.3 L14.0,38.4 L15.3,35.6 L16.8,33.0 L18.6,30.6 L20.6,28.4 L22.7,26.4 L24.9,24.5 L27.2,22.8 L29.5,21.3 L31.9,19.8 L34.4,18.4 L36.9,17.0 L39.5,15.8 L42.2,14.6 L45.0,13.6 Z' fill='none' stroke='url(%23s)' stroke-width='13' stroke-linejoin='round'/%3E%3Ccircle cx='83.2' cy='12.3' r='11.5' fill='%2316260d'/%3E%3Ccircle cx='83.2' cy='12.3' r='9' fill='url(%23s)'/%3E%3Ccircle cx='80.1' cy='8.7' r='2.5' fill='white' fill-opacity='.55'/%3E%3Ccircle cx='150.1' cy='74.4' r='10.0' fill='%2316260d'/%3E%3Ccircle cx='150.1' cy='74.4' r='7.5' fill='url(%23s)'/%3E%3Ccircle cx='147.5' cy='71.4' r='2.1' fill='white' fill-opacity='.55'/%3E%3Ccircle cx='127.4' cy='145.5' r='11.0' fill='%2316260d'/%3E%3Ccircle cx='127.4' cy='145.5' r='8.5' fill='url(%23s)'/%3E%3Ccircle cx='124.5' cy='142.1' r='2.4' fill='white' fill-opacity='.55'/%3E%3Ccircle cx='38.4' cy='146.0' r='9.5' fill='%2316260d'/%3E%3Ccircle cx='38.4' cy='146.0' r='7' fill='url(%23s)'/%3E%3Ccircle cx='35.9' cy='143.2' r='2.0' fill='white' fill-opacity='.55'/%3E%3Ccircle cx='12.0' cy='53.3' r='10.5' fill='%2316260d'/%3E%3Ccircle cx='12.0' cy='53.3' r='8' fill='url(%23s)'/%3E%3Ccircle cx='9.2' cy='50.1' r='2.2' fill='white' fill-opacity='.55'/%3E%3Cpath d='M59.7,14.1 L62.7,13.9 L65.6,13.9 L68.5,14.1 L71.5,14.5 L74.4,15.0 L77.4,15.6 L80.3,16.3 L83.2,17.0 L86.2,17.8 L89.1,18.4 L92.0,18.9 L95.0,19.3 L97.9,19.6 L100.8,19.7 L103.8,19.6 L106.7,19.3 L109.6,19.0 L112.5,18.5 L115.1,18.2 L117.7,18.1 L120.4,18.2 L123.1,18.7 L125.7,19.5 L128.2,20.7 L130.5,22.2 L132.6,24.0 L134.4,26.0 L135.9,28.3 L137.1,30.7 L138.0,33.2 L138.8,35.7 M19.8,85.6 L20.2,82.6 L20.4,79.7 L20.5,76.8 L20.3,73.8 L20.1,70.9 L19.6,68.0 L19.1,65.0 L18.5,62.1 L17.8,59.2 L17.2,56.2 L16.7,53.3 L16.2,50.4 L15.9,47.5 L15.9,44.7 L16.3,41.9 L17.1,39.3 L18.2,36.7 L19.7,34.4 L21.3,32.2 L23.2,30.2 L25.1,28.4 L27.2,26.8 L29.2,25.3 L31.4,23.9 L33.5,22.6 L35.7,21.3 L37.9,20.0 L40.3,18.8 L42.7,17.8 L45.3,16.8' fill='none' stroke='white' stroke-opacity='.5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 14px #000b); }
.gp-tile img { position: relative; z-index: 1; width: 92px; height: 92px; filter: drop-shadow(0 4px 6px #000c); }
.gp-tile b { position: absolute; z-index: 2; right: 4px; bottom: 6px; min-width: 50px; height: 34px; padding: 0 9px; border-radius: 17px; display: grid; place-items: center;
  font-size: 21px; font-weight: 900; color: #12210a; background: linear-gradient(180deg, #e4ff9e, #8fcb4b); box-shadow: 0 3px 0 var(--green-d), 0 0 0 2.5px #16260d, 0 6px 10px #0009; }
@keyframes gpfloat { 50% { transform: translateY(-5px); } }
.gp-name { position: relative; margin-top: 6px; font-size: 20px; font-weight: 900; color: #e8ffc0; text-shadow: 0 2px 4px #000, 0 0 14px #8fcb4b88; }
.gp-sub { position: relative; font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--pist); text-shadow: 0 1px 3px #000; }
.gp-sp { position: absolute; left: 50%; top: 80px; width: 18px; height: 18px; margin: -9px 0 0 -9px; transform: translate(var(--x), var(--y)); opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3E%3Cpath d='M0,-12 L2.6,-2.6 L12,0 L2.6,2.6 L0,12 L-2.6,2.6 L-12,0 L-2.6,-2.6 Z' fill='%23f2ffd0'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: twk 1.6s ease-in-out infinite; animation-delay: calc(2s + var(--d)); }
.g-loot.bare ul { display: none; }
body.lowfx .gp-rays, body.lowfx .gp-sp { display: none; }
body.lowfx .gp-tile { animation: none; }
.g-loot { margin-top: auto; width: 100%; max-width: 361px; text-align: left; padding: 30px 30px 32px; }
.g-arena.done .g-loot { animation: lootup .45s ease-out 1.25s backwards; }
.g-arena.done.let .g-loot { animation-delay: .9s; }
@keyframes lootup { from { opacity: 0; transform: translateY(46px); } }
.g-arena.done .g-loot li { animation: rowin .3s ease-out backwards; animation-delay: calc(1.5s + var(--i, 0) * .09s); }
.g-arena.done.let .g-loot li { animation-delay: calc(1.15s + var(--i, 0) * .09s); }
@keyframes rowin { from { opacity: 0; transform: translateX(-12px); } }
.g-loot li.big b { animation: fearglow 1.8s ease-in-out 2s 3; }
@keyframes fearglow { 50% { color: #fff; text-shadow: 0 0 10px #c6f07a, 0 0 18px #8fcb4b; } }
.g-loot ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.g-loot li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.g-loot li span { flex: 1; color: var(--pist); }
.g-loot li b { font-weight: 900; font-variant-numeric: tabular-nums; }
.g-loot li.big { font-size: 17px; }
.g-loot li.big img { width: 30px; height: 30px; }
.g-loot li.note { font-size: 11.5px; color: var(--pist); font-weight: 700; margin-top: -2px; }
.g-loot .buy { width: 100%; height: 52px; }

/* выбор способности формы (ЯДРО 4): окно сразу при форме, перевыбор — с цифры формы */
.sheet.pick { text-align: left; padding: 30px 26px 30px; }
.phead { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.phead .pw { width: 56px; height: 56px; }
.phead .pt { width: 56px; height: 56px; }
.phead h2 { font-size: 19px; }
.phead .sub { margin-top: 0; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.fh { margin: 10px 0 6px; font-size: 12px; font-weight: 900; letter-spacing: .6px; color: var(--pist); text-transform: uppercase; }
.opt { width: 100%; min-height: 64px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; text-align: left;
  border: 0 solid transparent; border-image: var(--ui-08-02) 60 fill / 18px; }
.opt .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opt b { font-size: 15px; font-weight: 900; text-shadow: 0 1px 2px #000b; }
.opt span span { font-size: 12.5px; font-weight: 700; color: var(--pist); text-shadow: 0 1px 2px #000b; }
.opt em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--amber); text-shadow: 0 1px 2px #000b; }
.opt .ok { width: 28px; height: 28px; flex: none; }
.opt:not(:disabled):active { transform: scale(.98); }
.opt.cur { cursor: default; }
.opt:disabled:not(.cur) { border-image-source: var(--ui-08-03); cursor: default; }
.pick .note { margin-top: 12px; font-size: 11.5px; color: var(--pist); line-height: 1.35; }
/* ресет дерева (12.20): бурая, во всю ширину, внизу вкладки — это не покупка */
.t-respec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: calc(100% - 16px); min-height: 52px;
  margin: 14px 8px 18px; padding: 4px 14px; color: var(--pist); background: var(--ui-06-04) center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000b; }
.t-respec b { font-size: 13.5px; font-weight: 900; }
.t-respec span { font-size: 11px; font-weight: 700; opacity: .85; }
.t-respec:disabled { filter: grayscale(1) brightness(.7); cursor: default; }
.close2 { display: block; margin: 12px auto 0; min-width: 150px; min-height: 44px; padding: 0 18px; font-weight: 900; color: var(--pist);
  background: var(--ui-06-04) center / 100% 100% no-repeat; text-shadow: 0 1px 2px #000b; }

/* загрузка (12.21): фон, название, полоса, этап словами, совет внизу */
.boot { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 28px 28px;
  background: #0b1510 var(--ui-04-02) center / cover no-repeat; transition: opacity .35s; }
.boot.out { opacity: 0; pointer-events: none; }
.boot .logo { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); width: min(80%, 340px); aspect-ratio: 900 / 777;
  background: var(--ui-05-01) center / contain no-repeat; filter: drop-shadow(0 8px 16px #000c); }
.boot .bar2 { position: relative; width: min(100%, 300px); aspect-ratio: 702 / 102; background: var(--ui-07-06-1) center / 100% 100% no-repeat; }
.boot .bar2 i { position: absolute; left: 5.5%; right: 5.5%; top: 29%; bottom: 29%; background: var(--ui-07-06-2) left / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 8px); transition: clip-path .35s ease-out; }
.boot .stage { margin-top: 8px; min-height: 20px; font: 800 14px system-ui, sans-serif; color: var(--ink); text-shadow: 0 1px 3px #000; }
.boot .tip { margin-top: 18px; max-width: 320px; text-align: center; font: 600 12.5px/1.4 system-ui, sans-serif; color: var(--pist); text-shadow: 0 1px 3px #000; }
.boot .tip b { color: var(--ink); }
.boot .enter { width: min(100%, 260px); height: 56px; margin-top: 10px; }
.boot .enter b { font-size: 18px; }

/* панель разработчика: только с ?dev в адресе */
.dev { position: absolute; left: 8px; bottom: 70px; z-index: 6; display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.devtoggle { margin-left: auto; width: 32px; height: 32px; border-radius: 10px; color: var(--pist); font-size: 17px; background: #0006; }
.dev button { background: #000a; border: 1px solid #4a6b3f; color: var(--pist); border-radius: 8px; padding: 4px 8px; font-weight: 800; }
.dev .st { background: #000a; color: var(--dim); border-radius: 8px; padding: 4px 8px; max-width: 200px; }

body.lowfx .card.idle .pw, body.lowfx .act.gift i, body.lowfx .card.glow .buy, body.lowfx .pop.spark::before, body.lowfx .g-toad { animation: none; }
body.lowfx .slot.sl.wait::after, body.lowfx .fm.wait::after, body.lowfx .card.glow .buy::after, body.lowfx .tL::after, body.lowfx .pp-chip::after { animation: none; opacity: .6; }
body.lowfx .g-arena.done .g-toad, body.lowfx .g-burst, body.lowfx .g-splash, body.lowfx .g-drop { display: none; }   /* слабый телефон: страж просто ушёл */