/* Шрифты свои, из webapp/fonts/ (Google Fonts, лицензия OFL; кириллица и латиница): игра не ходит за ними к Google.
   Caveat — маркер, Oswald — печатные заголовки, PT Sans Narrow — текст, PT Serif — газета. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/caveat-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/caveat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/oswald-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pt-sans-narrow-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pt-sans-narrow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pt-sans-narrow-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans Narrow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pt-sans-narrow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-400i-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/pt-serif-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pt-serif-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/pt-serif-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #121417;
  --text: #eceae4;
  --muted: #949aa4;
  --seeds: #f2c230;      /* акцент: цвет семок */
  --red: #e0483f;
  --blue: #5aa9ff;
  --green: #5ec26a;
  --common: #a5abb5;
  --choice: #5ec26a;
  --rare: #5aa9ff;
  --legend: #f2c230;
  /* Двор, а не мобильная игра: бумага и чёрная печать, маркер, скотч, железо доски объявлений с остановки. */
  --ink: #1d1b17;        /* печать и маркер на бумаге */
  --ink-soft: #5a554b;
  --pen-red: #b8241a;
  --paper: #ece6d4;
  --plate: #1b1916;      /* чёрная печатная плашка с ценой */
  --f-hand: Caveat, "Segoe Print", cursive;               /* маркер */
  --f-print: Oswald, "Arial Narrow", sans-serif;          /* печатные заголовки */
  --f-text: "PT Sans Narrow", "Arial Narrow", system-ui, sans-serif;
  --f-news: "PT Serif", Georgia, serif;                   /* газета */
  --doski: none;         /* доски беседки (bg/doski) — окно бригады: app.js ставит её после входа */
  --hud-h: 52px;
  --s: 1;                /* во сколько раз сцена увеличена под окно: полёты цифр вне сцены растут так же */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #08090a; color: var(--text); }
body {
  font: 15px/1.3 var(--f-text);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; text-align: inherit; }
[hidden] { display: none !important; }

/* ---------- картинки и заглушки ----------
   Заглушка — серый кадр ровно того размера, что займёт картинка, с подписью «вид/id, размер исходника». */
.art { display: block; }
img.art { object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.ph {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: repeating-linear-gradient(135deg, #3a3f47 0 10px, #353a41 10px 20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  color: #a3a9b3; container-type: inline-size;
}
.ph-emoji { font-size: 22px; font-size: clamp(12px, 36cqw, 64px); line-height: 1; filter: grayscale(1); opacity: .6; }
.ph-label {
  position: absolute; left: 4px; right: 4px; bottom: 5px; text-align: center; white-space: pre-line;
  font: 600 10px/1.25 ui-monospace, Menlo, Consolas, monospace; color: rgba(255,255,255,.6);
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
@container (max-width: 110px) { .ph-label { display: none; } }
/* Где у босса, продавца и куклы должна оказаться голова: по этой метке рисуется арт, чтобы медальоны
   и аватар вырезали лицо, а не пузо. */
.ph[data-kind="boss"]::before, .ph[data-kind="npc"]::before, .ph[data-kind="doll"]::before {
  content: ""; position: absolute; left: 50%; border: 2px dashed rgba(255,255,255,.28); border-radius: 50%;
  transform: translate(-50%, -50%); aspect-ratio: 1;
}
.ph[data-kind="boss"]::before, .ph[data-kind="npc"]::before { top: 26%; width: 30%; }
.ph[data-kind="doll"]::before { top: 12%; width: 30%; }
.ph[data-kind="doll"] .ph-emoji, .ph[data-kind="boss"] .ph-emoji, .ph[data-kind="npc"] .ph-emoji { margin-top: 20%; }

.icon { display: inline-block; flex: none; width: 22px; height: 22px; vertical-align: middle; }
.icon .art { width: 100%; height: 100%; }
.icon .ph { border-radius: 50%; background: #3a3f47; box-shadow: none; }
.icon .ph-emoji { font-size: 13px; filter: none; opacity: 1; }
/* Значок посреди текста (textIcons в app.js) — от размера букв, где бы ни стоял: в кнопке, плашке, реплике. Крупнее
   строчных, вровень со значками на плашках (владелец 2026-09-27: «значки очень маленькие даже с тел, особенно с ПК»,
   было 1.25em); поля сверху и снизу отрицательные — лишняя высота не раздвигает строки. */
span.icon.inline { width: 1.6em; height: 1.6em; vertical-align: -0.25em; margin: -0.2em .04em; }
span.icon.inline .ph-emoji { font-size: .8em; }

/* ---------- бумага, скотч, изолента ----------
   Бумага — полоса с названием окна, объявления, газета, наклейка-крестик. Спокойный цвет, выцветание с одного края,
   грязные края, пятно, изредка круг от кружки и сгиб — гладко, без зерна. Разброс задают переменные (app.js, scrap). */
.paper { background-color: var(--tint, var(--paper));
  background-image:
    radial-gradient(ellipse var(--p1w, 60%) var(--p1h, 45%) at var(--p1x, 30%) var(--p1y, 30%), rgba(255,255,255,.34), transparent 70%),
    radial-gradient(circle var(--wr, 30px) at var(--wx, 70%) var(--wy, 70%), transparent 78%, rgba(125,92,40,var(--wa, 0)) 87%, transparent 95%),
    radial-gradient(ellipse at var(--s1x, 85%) var(--s1y, 25%), rgba(110,85,40,.15), transparent var(--s1r, 24px)),
    radial-gradient(ellipse var(--m1w, 40%) var(--m1h, 30%) at var(--m1x, 70%) var(--m1y, 60%), rgba(90,80,60,.08), transparent 70%),
    linear-gradient(var(--fade-dir, 200deg), rgba(255,255,255,var(--fade, .12)), transparent 70%),
    linear-gradient(var(--fold, 90deg), transparent 49.7%, rgba(0,0,0,.05) 50%, rgba(255,255,255,.28) 50.5%, transparent 51.3%);
  box-shadow: inset 0 0 16px rgba(100,78,35,.30), inset 0 0 3px rgba(70,52,22,.30);
  color: var(--ink); }
.tape { position: absolute; top: -6px; width: 42px; height: 13px; z-index: 2; pointer-events: none; }
.tape.scotch { background: rgba(240,233,205,.74); box-shadow: 0 1px 1px rgba(0,0,0,.18);
  clip-path: polygon(2% 0, 98% 8%, 100% 55%, 97% 100%, 1% 92%, 0 40%); }
.tape.izolenta { height: 11px; background: linear-gradient(#2c2c2c, #0e0e0e 55%, #1b1b1b); box-shadow: 0 1px 2px rgba(0,0,0,.45); }

/* ---------- заставка и «поверни» ---------- */
.splash, .rotate {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; gap: 16px;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.035) 22px 26px),
    var(--bg);
}
.splash-logo {
  font: 700 54px/.95 var(--f-print); letter-spacing: 2px; text-transform: uppercase;
  color: var(--seeds); text-shadow: 4px 4px 0 #000;
  transform: rotate(-4deg);
}
.splash-text { color: var(--muted); max-width: 280px; }
/* Загрузка встала (index.html, BOOT): шаг, клиент и первая ошибка — мелко, чтобы скрин сразу говорил, где встали. */
.splash-info { max-width: 320px; font-size: 12px; line-height: 1.35; color: var(--muted); opacity: .75;
  white-space: pre-line; overflow-wrap: anywhere; }
#rotateIcon { font-size: 64px; }
.rotate-phone { animation: turn 2.2s ease-in-out infinite; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.rotate-title { font: 700 22px/1.2 var(--f-print); text-transform: uppercase; color: var(--seeds); text-shadow: 2px 2px 0 #000; }
.rotate-text { color: var(--muted); max-width: 300px; }

/* ---------- двор закрыт: объявление с отрывными номерками ----------
   Для тех, кого нет в белом списке. Объявление висит на доске с остановки, за доской — размытый двор. Экран живёт
   вне сцены: его держат и стоя, и боком, поэтому размеры тут обычные, а не условные пиксели сцены. */
.closed {
  position: fixed; inset: 0; z-index: 25; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; background: var(--bg);
  padding: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px))
           calc(12px + var(--tg-safe-area-inset-right, 0px))
           calc(14px + var(--tg-safe-area-inset-bottom, 0px))
           calc(12px + var(--tg-safe-area-inset-left, 0px));
  animation: fade .35s ease-out;
}
.closed-yard { position: fixed; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover;
  filter: blur(10px) brightness(.4) saturate(.75); pointer-events: none; }
.closed-wrap { position: relative; margin: auto; width: 100%; max-width: 520px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.closed-logo { font: 700 34px/.95 var(--f-print); letter-spacing: 2px; text-transform: uppercase; color: var(--seeds);
  text-shadow: 3px 3px 0 #000; transform: rotate(-3deg); }
.closed-board {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px 10px;
  border: 30px solid transparent; background: var(--field, none) 0 0 / 100% 100% no-repeat border-box, #56616b padding-box;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.7));
}
.notice { position: relative; width: 100%; max-width: 420px; transform: rotate(calc(var(--r, 0deg) * .4));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.notice-sheet { padding: 18px 18px 12px; text-align: center;
  clip-path: polygon(0 1.2%, 24% 0, 58% .9%, 100% 0, 99.5% 45%, 100% 100%, 0 100%, .4% 52%); }
.notice-head { font: 700 30px/1 var(--f-print); letter-spacing: 7px; text-transform: uppercase; }
.notice-title { margin-top: 4px; font: 700 32px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); }
.notice-sheet p { margin: 8px 0 0; font: 16px/1.28 var(--f-text); text-align: left; }
.notice-sign { margin-top: 6px; text-align: right; font: 700 21px/1 var(--f-hand); color: #3a362f; }
/* Номерки — полоски снизу, надрезанные до самого объявления; на них, как телефон на настоящих, — бот. */
.tabs { display: flex; }
/* Наклон под пальцем — сразу, без transition: пока плавный переход идёт, повёрнутое объявление с тенью браузер рисует
   отдельным слоем, и текст всего листа вздрагивает. */
.tab { position: relative; flex: 1 1 0; min-width: 0; height: 92px; display: flex; align-items: center; justify-content: center;
  border-left: 1.5px dashed rgba(40,34,24,.45); transform-origin: 50% 0; }
.tab:first-child { border-left: 0; }
.tab span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 16px/1 var(--f-hand); white-space: nowrap; color: var(--ink); }
.tab:not(:disabled):hover { transform: rotate(-4deg); }
.tab:not(:disabled):active { transform: rotate(-7deg) translateY(2px); }
.tab:disabled { cursor: default; }
/* Оторванный номерок: от полоски остался огрызок с рваным краем. */
.tab.torn { clip-path: polygon(0 0, 100% 0, 100% 12%, 82% 15%, 64% 10%, 45% 16%, 27% 11%, 12% 15%, 0 10%); }
.tab.torn span { visibility: hidden; }
.tab.falling { position: fixed; z-index: 40; pointer-events: none; border-left: 0; animation: tab-fall .95s ease-in forwards; }
@keyframes tab-fall {
  0%   { transform: none; }
  20%  { transform: translate(-4px, 10px) rotate(-12deg); }
  100% { transform: translate(46px, 320px) rotate(-48deg); opacity: 0; }
}
/* Что вышло — на полоске малярного скотча под объявлением, маркером. */
.closed-note { max-width: 100%; padding: 4px 12px 5px; font: 700 19px/1.15 var(--f-hand); color: var(--ink); text-align: center;
  background: rgba(236,226,196,.95); transform: rotate(-1deg);
  clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); }
.closed-note.bad { color: var(--pen-red); }
.closed-undo { padding: 4px 10px 5px; font: 15px/1.2 var(--f-text); color: #e6dcc0; background: rgba(12,13,14,.78);
  box-shadow: 0 2px 0 #000; text-decoration: underline dashed; text-underline-offset: 3px; }
.closed-undo:hover { color: #fff; }
@media (max-width: 420px) {
  .closed { padding-left: 8px; padding-right: 8px; }
  .closed-board { border-width: 20px; padding: 10px 2px 8px; }
  .notice-sheet { padding: 14px 12px 10px; }
  .notice-head { font-size: 25px; letter-spacing: 5px; }
  .notice-title { font-size: 28px; }
  .notice-sheet p { font-size: 15px; }
  .tab { height: 84px; }
  .tab span { font-size: 14px; }
}
/* Телефон боком: доска пониже, без вывески — чтобы номерки влезли без прокрутки. */
@media (max-height: 540px) {
  .closed-logo { display: none; }
  .closed-board { border-width: 20px; padding: 8px 4px; gap: 8px; }
  .notice-sheet { padding: 10px 14px 8px; }
  .notice-head { font-size: 22px; }
  .notice-title { font-size: 24px; }
  .notice-sheet p { margin-top: 5px; font-size: 14px; line-height: 1.22; }
  .notice-sign { margin-top: 2px; font-size: 18px; }
  .tab { height: 70px; }
  .tab span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .closed { animation: none; }
}

/* ---------- сцена ----------
   Размер — в условных пикселях: соотношение сторон 760…1000 к 420, на большом экране сцена больше, а интерфейс
   не крупнее «один к одному» (app.js, fitStage). */
.stage {
  position: fixed; left: 0; top: 0; height: 420px; width: 760px; transform-origin: 0 0;
  display: grid; grid-template-rows: var(--hud-h) 1fr; grid-template-columns: minmax(0, 1fr);
  background: var(--bg); overflow: hidden; border-radius: 6px;
}

/* ---------- шапка: чёрная полоса, цифры маркером, полоски — малярный скотч ---------- */
.hud {
  z-index: 3; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 8px;
  background: #17140f repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px);
  box-shadow: 0 3px 0 #000, 0 6px 14px rgba(0,0,0,.5);
}
/* Узкая сцена боком (app.js, класс narrow): промежутки поменьше, а пивко с мобилой не сжимаются — поджимаются
   полоски. Иначе с крупными суммами шапка шире сцены, а мобила наезжает на задор. */
.narrow .hud { gap: 9px; padding-right: 10px; }
.narrow .hud-free { flex: none; }
.hud-me { position: relative; flex: none; width: 42px; height: 42px; }
.hud-me .avatar { width: 42px; height: 42px; box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #d9cca6; }
.hud-level {
  position: absolute; right: -7px; bottom: -5px; min-width: 21px; height: 21px; padding: 0 4px;
  display: grid; place-items: center; font: 700 17px/1 var(--f-hand); color: #15130e;
  background: #f5c928; border-radius: 3px; transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.hud-me em { position: absolute; right: -6px; top: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #000; }
/* Показатели короткие, а не во всю ширину (владелец: «не нужно делать таким длинным»): имя с авторитетом, силы, задор —
   слева, деньги — справа, между ними свободное место (.hud-free) под новые показатели. Тесно — полоски поджимаются. */
.hud-who { flex: 0 1 190px; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.hud-name { font: 700 22px/1 var(--f-hand); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-name small { font: 400 14px var(--f-text); opacity: .7; }
.res { position: relative; display: flex; align-items: center; gap: 6px; flex: 0 1 140px; min-width: 104px; }
.res.auth { flex: none; min-width: 0; }
.hud-free { flex: 1 1 0; min-width: 0; }
/* Строки шапки нужны только стоя; боком их нет — показатели идут одной строкой в прежнем порядке. */
.hud-line { display: contents; }
.hud-who { order: 1; } .res.energy { order: 2; } .res.vigor { order: 3; } .hud-free { order: 4; } .money.cash { order: 5; } .money.seeds { order: 6; }
.res .icon { width: 26px; height: 26px; filter: drop-shadow(0 1px 1px #000); }
.res.auth .icon { width: 22px; height: 22px; }
.res-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.res-cap { font: 12.5px/1 var(--f-text); color: #b9b2a2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .bar { height: 17px; border: 0; border-radius: 0; background: #d9cca6; clip-path: polygon(0 8%, 100% 0, 99% 92%, 1% 100%); }
.hud .bar i { border-radius: 0; opacity: .85; }
.hud .bar span { color: #16130e; font: 700 16px/17px var(--f-hand); text-shadow: none; }
.bar-authority i { background: #6da6e8; }
.bar-energy i { background: #f5c928; }
.bar-vigor i { background: #e2533f; }
.money { flex: none; display: flex; gap: 5px; align-items: center; font: 700 24px/1 var(--f-hand); }
.money .icon { width: 26px; height: 26px; }
.money b { font-weight: 700; font-variant-numeric: tabular-nums; }

.avatar { position: relative; overflow: hidden; border-radius: 50%; background: #2a2e35; flex: none; }
.avatar > .art { width: 100%; height: 100%; }
.avatar > .ph .ph-emoji { filter: none; opacity: .9; }
/* Аватар — голова куклы: голова на 12 % высоты, по центру (раздел 4 art-direction.md). */
.avatar > .doll { position: absolute; width: 267%; left: -83.5%; top: 2%; }

.bar {
  position: relative; height: 20px; border-radius: 2px; overflow: hidden;
  background: rgba(0,0,0,.55); border: 1px solid rgba(0,0,0,.45);
}
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .35s ease; }
.bar span {
  position: relative; display: block; text-align: center; font: 700 12.5px/18px var(--f-text); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.8); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bar-hp i { background: linear-gradient(90deg, #9c2a23, var(--red)); }
.bar-me i { background: linear-gradient(90deg, #2f8a3c, var(--green)); }
.bar-hp.big { height: 24px; border: 2px solid #000; }
.bar-hp.big span { font-size: 14px; line-height: 20px; }

/* ---------- двор: сцена, по которой тыкают ---------- */
.screen { position: relative; overflow: hidden; }
.backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.backdrop .fill { width: 100%; height: 100%; object-fit: cover; }
.backdrop .ph-label { bottom: auto; top: 44%; font-size: 12px; }
/* Арт сам по себе тёмный — затемняем только края, чтобы читались шапка и таблички. */
.backdrop::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,9,10,.3), transparent 18%, transparent 68%, rgba(8,9,10,.55)); }
.backdrop.fight::after { background: linear-gradient(rgba(60,12,10,.35), rgba(8,9,10,.8)); }
.map-layer { position: absolute; inset: 0; z-index: 1; }
.map { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 10px 6px; gap: 6px; }
.map-top { display: flex; align-items: flex-start; gap: 12px; }

/* табличка района — бумажная полоса на скотче, стрелки — бумажные наклейки */
.plaque { display: flex; align-items: center; gap: 8px; }
.plaque-name {
  position: relative; min-width: 150px; padding: 5px 16px 6px; text-align: center;
  transform: rotate(-1.5deg); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));
}
.plaque-name::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  box-shadow: inset 0 0 14px rgba(100,78,35,.32);
  clip-path: polygon(0 5%, 30% 1%, 68% 4%, 100% 0, 99.4% 55%, 100% 97%, 62% 100%, 24% 96%, .5% 100%, 0 50%); }
.plaque-name::after { content: ""; position: absolute; left: 50%; top: -7px; width: 46px; height: 13px; margin-left: -23px;
  background: rgba(240,233,205,.8); transform: rotate(-4deg); }
.plaque-title { font: 700 20px/1.05 var(--f-print); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,.22); }
.dots i.on { background: var(--ink); }
.dots i.locked { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.3); }
.plaque-arrow {
  width: 34px; height: 34px; display: grid; place-items: center; transform: rotate(5deg);
  background: var(--paper); box-shadow: inset 0 0 9px rgba(100,78,35,.32), 0 2px 3px rgba(0,0,0,.55);
}
.plaque-arrow.left { transform: rotate(-6deg); }
/* Стрелка — честный треугольник, а не глиф шрифта: он вечно сидит криво. */
.arrow-tip { width: 0; height: 0; border: 8px solid transparent; }
.plaque-arrow.right .arrow-tip { border-left: 11px solid var(--ink); border-right: 0; margin-left: 4px; }
.plaque-arrow.left .arrow-tip { border-right: 11px solid var(--ink); border-left: 0; margin-right: 4px; }
.arrow-lock { font-size: 15px; filter: grayscale(.4); }
.plaque-arrow:hover { filter: brightness(1.06); }
.plaque-arrow:active { translate: 0 2px; }
.plaque-arrow.off { visibility: hidden; }

/* картинка, по которой тыкают на карте района: босс. Стоит прямо на карте по координатам от её картинки
   (app.js, sceneMap) и растёт вместе с картой (--fig), табличка под ним — размера интерфейса. */
.spot { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column;
  align-items: center; gap: 2px; transition: filter .12s; }
.spot:hover { filter: brightness(1.12); }
.spot:active { transform: translate(-50%, calc(-100% + 2px)); }
.spot .art { filter: drop-shadow(0 6px 10px rgba(0,0,0,.65)); }
.spot.locked .art { filter: grayscale(.8) brightness(.78) drop-shadow(0 6px 10px rgba(0,0,0,.65)); }
.spot.boss .art { height: calc(132px * var(--fig, 1)); aspect-ratio: 3 / 4; }
.spot.boss .ph { border-radius: 12px; }
/* подпись под фигурой — кусок малярного скотча, написано маркером */
.sign {
  padding: 2px 11px 3px; font: 700 18px/1 var(--f-hand); color: var(--ink); white-space: nowrap;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(236,226,196,.95); transform: rotate(-1.5deg);
  clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%);
}
.spot:hover .sign { background: #f6eed6; }
.spot-num {
  position: absolute; right: -6px; top: -4px; min-width: 26px; padding: 2px 6px; text-align: center;
  font: 700 16px/1 var(--f-hand); color: var(--ink); background: #f5c928; transform: rotate(7deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* значки в верхнем углу района — «Точки», «Дела» и обратно на «Остановку»: бумажные ярлыки. Сама сцена остаётся чистой */
.spot.corner { position: static; transform: rotate(1.5deg); flex-direction: row; gap: 6px; align-items: center;
  padding: 3px 11px 4px 5px; color: var(--ink); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.spot.corner + .spot.corner { transform: rotate(-1.8deg); }
.spot.corner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  box-shadow: inset 0 0 12px rgba(100,78,35,.3); clip-path: polygon(0 4%, 55% 0, 100% 3%, 99% 96%, 45% 100%, 1% 97%); }
.spot.corner { position: relative; }
.spot.corner:hover { filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)) brightness(1.05); }
.spot.corner:active { translate: 0 2px; }
.spot.corner .sign { background: none; clip-path: none; transform: none; padding: 0;
  font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; }
.corner-art { width: 30px; height: 30px; }
/* с района — обратно на остановку: ярлык со знаком остановки, первым в строке (стрелки у таблички — между районами) */
.spot.corner.back { transform: rotate(-2deg); }
.chip.solid { background: var(--paper); border-color: transparent; color: var(--pen-red); }

/* Район стоя (app.js, renderDistrictTall; «камера на боссе» — выбор владельца из проб): сверху обратно на «Остановку»
   и табличка района, в правом нижнем углу — «Точки» и крупно «Дела» значками, как «Обход» на «Остановке». */
.tall .tall-map { padding: 8px 8px 8px; }
.tall .tall-map .map-top { position: relative; z-index: 2; flex-wrap: wrap; gap: 8px 10px; pointer-events: none; }
.tall .tall-map .map-top > * { pointer-events: auto; }
.tall .tall-map .plaque-name { min-width: 128px; padding: 4px 12px 5px; }
.tall .tall-map .plaque-title { font-size: 18px; }
.tall .dist-icons { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; flex-direction: column;
  align-items: center; gap: 10px; --ico: 58px; }
.tall .dist-icons .hub-icon { width: calc(var(--ico) + 26px); }
.tall .dist-icons .hub-icon-name { font-size: 13px; padding: 1px 6px 2px; }
.tall .dist-icons .hub-icon.big { margin-top: 0; align-self: center; }
.tall .dist-icons .hub-icon.big .hub-icon-name { font-size: 17px; padding: 2px 12px 3px; }
.tall .dist-icons .corner-dot { right: 12px; top: 0; }
.tall .dist-icons .corner-tag { right: 2px; bottom: 18px; }

/* ---------- окна ----------
   У каждого окна свой облик (решение владельца): ларёк — доска объявлений с остановки, дела — газета. Пока окно
   своего не получило — нейтральная тёмная панель, как шапка. Двор за окном размыт: окно читается, шапка чёткая. */
.win-layer {
  position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  padding: 12px 14px; background: rgba(6,7,8,.38);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); animation: fade .14s ease-out;
}
.win {
  position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; max-height: 100%;
  padding: 12px 14px; border: 2px solid #000; border-radius: 4px;
  background: #17140f repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px);
  box-shadow: 0 12px 26px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); animation: pop .16s ease-out;
}
.win > * { position: relative; }
/* Ларёк — железная доска объявлений с остановки: рамка и середина — SVG под размер доски (app.js, dressBoard: обод
   рисуется в её border, середина — под окном), пока не нарисовалась — просто тёмное железо. */
.win.board { padding: 2px 6px 6px; border: 34px solid transparent; border-radius: 0; box-shadow: none;
  background: var(--field, none) 0 0 / 100% 100% no-repeat border-box, #56616b padding-box;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.7)); }
.win.board::before { content: ""; position: absolute; inset: 0; background: rgba(14,16,18,.28); pointer-events: none; }
.win.wide { max-width: 980px; }
.win.mid { max-width: 640px; }
.win.fit { height: 100%; }

/* шапка окна: фото (у ларька — тётя Света), название на бумажной полосе, крестик-наклейка */
.win-head { display: flex; align-items: flex-start; gap: 14px; }
.win-photo { position: relative; flex: none; margin-top: 2px; }
.win-photo .art { width: 60px; height: 72px; object-fit: cover; object-position: 50% 0; background: #cfc6b0;
  border: 4px solid #eeeadf; border-bottom-width: 12px; transform: rotate(3deg); box-shadow: 0 3px 6px rgba(0,0,0,.5); }
.win-photo::after { content: ""; position: absolute; left: 10px; top: -7px; width: 42px; height: 13px;
  background: rgba(238,230,205,.78); transform: rotate(-8deg); }
.win-strip { position: relative; flex: 0 1 auto; min-width: 0; margin-top: 4px; transform: rotate(-.8deg);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.strip { padding: 7px 26px 8px 18px;
  clip-path: polygon(0 4%, 22% 1%, 48% 3%, 76% 0, 100% 3%, 99.5% 50%, 100% 96%, 70% 99%, 41% 97%, 14% 100%, .4% 97%, 0 50%); }
.win-title { font: 700 28px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-sub { margin-top: 2px; font: 16px/1.2 var(--f-text); color: #3a362f; }
.win-strip .tape { top: -8px; }
.win-strip .tape.l { left: -14px; transform: rotate(-30deg); }
.win-strip .tape.r { right: -14px; transform: rotate(26deg); }
/* Крестик — бумажная наклейка, крест начеркан маркером: в два прохода, кромка неровная (шум в SVG). */
.win-x { position: relative; margin-left: auto; flex: none; width: 50px; height: 50px; transform: rotate(8deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.win-x::before { content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cfilter id='m' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.8'/%3E%3C/filter%3E%3Cg filter='url(%23m)' fill='none' stroke='%231c1a17' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 8.6C15.4 14.6 22.2 22.8 31.4 31.2' stroke-width='5.4' opacity='.86'/%3E%3Cpath d='M10.8 9.8C16.2 15.6 23.4 22.1 29.9 30.1' stroke-width='3.1' opacity='.5'/%3E%3Cpath d='M31.2 8.2C25.1 14.3 17.2 22.9 8.4 32.1' stroke-width='5.2' opacity='.86'/%3E%3Cpath d='M29.4 9.9C24.2 15.2 17.9 21.6 10.2 30.8' stroke-width='3' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") center / 76% no-repeat,
    linear-gradient(150deg, rgba(255,255,255,.14), transparent 70%), #eee8d6;
  box-shadow: inset 0 0 12px rgba(100,78,35,.3);
  clip-path: polygon(3% 5%, 30% 1%, 62% 4%, 97% 0, 99% 34%, 96% 68%, 100% 97%, 64% 99%, 33% 96%, 1% 100%, 4% 62%, 0 30%); }
.win-x:hover { transform: rotate(8deg) scale(1.07); }
.win-x:active { transform: rotate(8deg) scale(.96); }

.win-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 4px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: #9a9385 transparent;
}
.win-body > * { flex-shrink: 0; }
.win-body::-webkit-scrollbar { width: 5px; }
.win-body::-webkit-scrollbar-thumb { background: #9a9385; border-radius: 3px; }
/* Окна с текстом (пацан, бой, доска почёта) — большой лист бумаги на доске: тёмный текст читается сразу. */
.win-body.paper { padding: 12px 14px; }

.win-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.win-tabs button {
  position: relative; padding: 7px 14px; font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.4px;
  color: #d6d9d2; background: #1f2326; box-shadow: inset 0 0 0 2px #0f1112, 0 3px 0 #000;
}
.win-tabs button:hover { color: #fff; }
.win-tabs button.on { background: #f2c230; color: #1a1a14; box-shadow: inset 0 0 0 2px #b58f16, 0 3px 0 #6d560d; }
.win-tabs em { position: absolute; right: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* ---------- общее ---------- */
.title { font: 700 16px/1.2 var(--f-print); }
.big-title { font-size: 20px; }
.muted { color: var(--muted); font-size: 14px; }
.paper .muted { color: var(--ink-soft); }
.center { text-align: center; justify-content: center; }
.center-self { align-self: center; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1 1 auto !important; }
.h2 { margin: 2px 0 0; font: 700 14px/1.1 var(--f-print); letter-spacing: 1.2px; text-transform: uppercase; color: #6b1d16; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  padding: 1px 8px; border-radius: 2px; font: 600 13.5px/1.35 var(--f-text); white-space: nowrap;
  background: rgba(20,22,24,.82); border: 1px solid #0c0d0e; color: var(--text);
}
.paper .chip { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.28); color: var(--ink); }
.chip.coin { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 3px; }
.chip.coin .icon { width: 19px; height: 19px; }
.chip.wrap { white-space: normal; }
.chip.good { color: var(--green); border-color: rgba(94,194,106,.45); }
.chip.warn { color: var(--red); border-color: rgba(224,72,63,.5); }
.paper .chip.good { color: #1f6b2a; border-color: rgba(31,107,42,.45); }
.paper .chip.warn { color: var(--pen-red); border-color: rgba(163,36,28,.5); }

/* Кнопка — крашеная жестяная табличка: жёлтая, в бою — красная; второстепенная — чёрная. */
.btn {
  flex: none; min-width: 84px; min-height: 34px; padding: 6px 14px; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px;
  color: #17150f; background: #f2c230; box-shadow: 0 3px 0 #8a6a0c, 0 4px 8px rgba(0,0,0,.3);
  transition: transform .06s, box-shadow .06s, filter .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a0c; }
.btn.red { background: #d63c30; color: #fff; box-shadow: 0 3px 0 #7d211c, 0 4px 8px rgba(0,0,0,.3); }
.btn.red:active { box-shadow: 0 1px 0 #7d211c; }
.btn.ghost { background: #1f2326; color: #e6e3db; box-shadow: inset 0 0 0 2px #0f1112, 0 3px 0 #000; }
.btn.small { min-width: 0; min-height: 30px; padding: 4px 11px; font-size: 13px; }
.btn.grow { flex: 1; }
.btn .icon { width: 20px; height: 20px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
body.busy .btn, body.busy .buy, body.busy .job, body.busy .td-act, body.busy .td-collect { pointer-events: none; }

/* ---------- ларёк: объявления на доске ----------
   У каждого свой наклон, цвет, скотч или изолента и редкий надрыв (app.js, scrap). Цена — чёрная печатная плашка:
   на жёлтой бумаге жёлтая наклейка потерялась бы. Купленное оторвано: остался верх, низ с ценой ушёл. */
.goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 14px 14px; padding: 8px 8px 8px; }
.good { position: relative; transform: rotate(var(--r)); filter: drop-shadow(0 3px 2px rgba(0,0,0,.42)); }
.sheet { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px 10px; clip-path: var(--edge); }
/* потёртость печати — светлое вытертое пятно поверх картинки и надписей */
.sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse var(--e1w, 40%) var(--e1h, 25%) at var(--e1x, 50%) var(--e1y, 50%), rgba(255,255,255,var(--e1a, .15)), transparent 70%); }
.good-art { display: block; width: 80px; height: 80px; }
.good-art .art { width: 100%; height: 100%; filter: saturate(var(--sat, .9)) sepia(.08); }
.good-art .ph { border-radius: 4px; }
.good-art:hover { filter: brightness(1.08); }
.good-name { text-align: center; font: 700 15px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .3px; }
.good-stats { text-align: center; font: 15px/1.1 var(--f-text); color: #2d2b27; }
.good-until { font: 700 16px/1 var(--f-hand); color: var(--pen-red); text-align: center; }
.buy { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; padding: 6px 12px;
  font: 700 17px/1 var(--f-print); letter-spacing: .5px; color: #f0d24a; background: var(--plate);
  transform: rotate(var(--br, 0deg)); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.buy:hover { background: #2e2a24; }
.buy .icon { width: 22px; height: 22px; }
.buy[disabled] { background: #8d877b; color: #efece4; pointer-events: none; }
.note-rar { position: absolute; top: 5px; left: 8px; font: 700 18px/1 var(--f-hand); transform: rotate(-6deg); }
.note-rar.r-choice { color: #1b6a31; } .note-rar.r-rare { color: #1d449b; } .note-rar.r-legend { color: #8a5a00; }
.note-need, .note-took { position: absolute; top: 5px; right: 8px; font: 700 18px/1 var(--f-hand); color: var(--pen-red); transform: rotate(6deg); }
.good { --tear-gap: 50px; }          /* купленное оторвано на столько пикселей выше низа: под названием */
.good.owned .good-stats, .good.owned .buy { visibility: hidden; }
.good.owned::before { content: ""; position: absolute; inset: 0; background: #f6f3ea; clip-path: var(--under); }
/* стоя: объявления в две колонки (в окне пошире — в три), картинка поменьше — на экран влезает больше вещей, в широкой
   колонке растёт с ней; вкладки валют и цена — под палец. Отрыв у купленного прежний: под названием, над ценой.
   Доска — во всю высоту: иначе на «семках» (две вещи) она сжимается к середине и вкладки уезжают из-под пальца —
   тычок в прежнее место «За бабки» уходит мимо окна и закрывает ларёк. Картинка доски лежит боком (2:1): растянутая
   стоя, она превращает старые объявления в длинные доски забора — её середина и края повторяются по высоте. */
.tall .win.wide.board { height: 100%; }
.tall .win.board .win-tabs button { min-height: 38px; padding: 11px 16px 10px; font-size: 15px; }
.tall .goods { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 10px; padding: 6px 6px 10px; }
.tall .sheet { padding: 12px 8px 9px; }
.tall .good-art { width: clamp(68px, 44%, 92px); height: auto; aspect-ratio: 1; }
.tall .good-stats { font-size: 14px; }
.tall .buy { padding: 8px 14px; }

/* ---------- дела: «Дворовый вестник» разворотом ----------
   Каждое дело — заметка: ткнул — сделал. Под пальцем заметку обводит красная ручка. */
.win.gazeta { max-width: 1120px; height: 100%; max-height: 660px; padding: 0; gap: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.65)); }
.win.gazeta > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; }
.win.gazeta .win-body { padding: 0; overflow: hidden; }
.gz { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; color: var(--ink);
  clip-path: polygon(0 .6%, 50% 0, 100% .5%, 99.8% 99.4%, 50% 100%, .2% 99.5%);
  background:
    linear-gradient(90deg, transparent 47.5%, rgba(0,0,0,.10) 49.6%, rgba(0,0,0,.18) 50%, rgba(255,255,255,.25) 50.3%, transparent 52.5%),
    radial-gradient(ellipse 40% 30% at 18% 78%, rgba(255,255,255,.35), transparent 70%),
    radial-gradient(ellipse 35% 40% at 82% 30%, rgba(90,80,60,.07), transparent 70%),
    radial-gradient(circle 34px at 88% 86%, transparent 76%, rgba(125,92,40,.16) 86%, transparent 95%),
    #e6e2d6;
  box-shadow: inset 0 0 26px rgba(90,75,45,.25); }
.gz-page { position: relative; min-height: 0; padding: 16px 20px 14px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 16px; align-content: start; overflow-y: auto; scrollbar-width: none; }
.gz-page::-webkit-scrollbar { display: none; }
.gz-mast { grid-column: 1 / -1; text-align: center; border-bottom: 3px double var(--ink); padding-bottom: 4px; }
.gz-name { font: 700 42px/1 var(--f-news); letter-spacing: .5px; }
.gz-line, .gz-runner { display: flex; justify-content: space-between; gap: 8px; font: 600 11.5px/1.3 var(--f-print);
  text-transform: uppercase; letter-spacing: 1px; }
.gz-line { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 3px; }
.gz-runner { grid-column: 1 / -1; border-bottom: 1px solid var(--ink); padding: 0 44px 4px 0; }

.job { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 38% 1fr; gap: 3px 12px;
  align-content: start; padding: 6px 6px 8px; border-top: 2px solid var(--ink); color: var(--ink); }
.job > :not(.job-photo) { grid-column: 2; }
.job-photo { grid-column: 1; grid-row: 1 / span 6; border: 1px solid var(--ink); overflow: hidden; background: #cfcabb; }
.job-photo .art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(.3) sepia(.28) contrast(1.08) brightness(1.02); }
.job.lead { grid-template-columns: 1.15fr 1fr; gap: 4px 14px; }
.job-rubric { font: 600 11.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.4px; color: #6b1d16; }
.job-title { font: 700 18px/1.12 var(--f-news); }
.job.lead .job-title { font-size: 25px; }
.job-lede { font: italic 13px/1.25 var(--f-news); color: #3a3630; }
.job-terms { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.job-terms .chip { padding: 0; background: none; border: 0; color: var(--ink); font: 700 15px/1 var(--f-text); }
.job-terms .chip .icon { width: 20px; height: 20px; }
.job-cost { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 4px; background: var(--plate);
  color: #f0d24a; font: 700 16px/1 var(--f-print); }
.job-cost .icon { width: 20px; height: 20px; }
.job.tired .job-cost { background: #7a2a22; color: #ffd9d4; }
.job-need { font: 700 19px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-3deg); }
.job-mastery { display: flex; align-items: center; gap: 6px; font: 12.5px/1 var(--f-text); color: #4a463e; }
.job-rule { flex: 1; position: relative; height: 4px; background: rgba(0,0,0,.12); overflow: hidden; }
.job-rule i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width .35s ease; }
.job-count { font-variant-numeric: tabular-nums; }
.job.blocked .job-photo .art { filter: grayscale(1) contrast(.9) brightness(1.1); }
.job.blocked .job-title, .job.blocked .job-lede { color: #7a756b; }
.job::after { content: ""; position: absolute; inset: -6px -8px; border: 3px solid rgba(184,36,26,.85);
  border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; transform: rotate(-1.5deg); opacity: 0; transition: opacity .12s;
  pointer-events: none; }
.job:active::after { opacity: 1; }
@media (hover: hover) { .job:hover::after { opacity: 1; } }
.gz-news { font: 8.5px/1.25 var(--f-news); color: #6c675c; text-align: justify; hyphens: auto; overflow: hidden; }
.gz-news b { display: block; margin-bottom: 2px; font: 700 12.5px/1.1 var(--f-news); color: #2d2a24; text-align: left; }
.gz-box { border: 1px solid var(--ink); padding: 6px 8px; align-self: start; }
.gz-box-title { font: 600 11px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.gz-chart { display: flex; align-items: flex-end; gap: 4px; height: 44px; padding: 0 4px;
  border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.gz-chart i { flex: 1; background: #57524a; }

/* стоя: газета — одна полоса, не разворот (владелец 2026-09-25). Обе полосы разворота раскрываются в одну
   (display: contents — DOM тот же, что боком): шапка сверху, заметки одна под другой во всю ширину, мелкие новости
   и курс семок уходят подвалом вниз (order). Подвал заодно — запас снизу: последнюю заметку можно прокрутить выше
   кореша, а короткая газета и так кончается над ним. Листается газета целиком (.win-body) — эту прокрутку окно
   держит, когда после дела меняется начинка, и тычок по нижней заметке не выкидывает наверх. Полоса — контейнер
   gazeta: раскладка заметок смотрит на её ширину и высоту (@container ниже), а не на экран. */
.tall .win.gazeta { flex: 1 1 auto; width: auto; height: auto; max-height: none; align-self: stretch; margin: 10px 8px 0 0;
  padding: 0; gap: 0; }
/* Наклейка висит на углу газеты, большей частью мимо бумаги: газета отступила от верха и справа, чтобы листаемые
   заметки меньше уходили под крестик — тычок в угол заметки делает дело, а не закрывает газету. */
.tall .win.gazeta > .win-x { right: -11px; top: -14px; }
.tall .win.gazeta .win-body { overflow-y: auto; scrollbar-width: none; container: gazeta / size; }
.tall .win.gazeta .win-body::-webkit-scrollbar { display: none; }
/* Бумага та же, только сгиб не вдоль, а поперёк: полосу сложили пополам. */
.tall .gz { flex: 1 0 auto; gap: 5px 14px; align-content: start; padding: 10px 12px 18px;
  clip-path: polygon(0 4px, 50% 0, 100% 3px, 99.6% calc(100% - 4px), 50% 100%, .4% calc(100% - 3px));
  background:
    linear-gradient(180deg, transparent 49.4%, rgba(0,0,0,.06) 49.9%, rgba(255,255,255,.3) 50.1%, transparent 50.8%),
    radial-gradient(ellipse 60% 16% at 22% 64%, rgba(255,255,255,.3), transparent 70%),
    radial-gradient(ellipse 50% 22% at 80% 22%, rgba(90,80,60,.07), transparent 70%),
    radial-gradient(circle 34px at 84% 93%, transparent 76%, rgba(125,92,40,.16) 86%, transparent 95%),
    #e6e2d6; }
.tall .gz-page { display: contents; }
.tall .gz-runner { display: none; }
.tall .gz-mast { padding-bottom: 5px; }
.tall .gz-name { font-size: 30px; }                      /* справа — крестик: название его не задевает */
.tall .gz-line { font-size: 13px; }
.tall .gz-line span:nth-child(2) { display: none; }
/* Заметка: фото слева, справа — пометка «на сегодня», рубрика, заголовок, (подводка), условия и освоение, как боком.
   Фото тянется на высоту текста, картинка обрезается по рамке, а не задаёт высоту сама: ни пустоты под фото, ни
   оторванной от заметки строки медалей. Короткий текст — фото не ниже своего минимума (≈16:10, cqw — от ширины полосы),
   а освоение прижато к низу фото гибкой строкой (minmax(0, 1fr): с голым 1fr Chrome тянет её, не вычтя
   подводку, и фото главной выходит выше текста). Зазоры — отступами строк: у пустой строки сетки (нет пометки,
   подводка скрыта) зазора нет. */
.tall .job { grid-template-columns: clamp(112px, 32%, 170px) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "photo today" "photo rubric" "photo title" "photo lede" "photo terms" "photo ." "photo mast";
  gap: 0 10px; padding: 6px 2px 7px; }
.tall .job-photo { position: relative; grid-area: photo; align-self: stretch; min-height: 78px; min-height: min(20cqw, 104px); }
/* Картинка — во всю высоту рамки своей пропорцией 16:10, по бокам её срезает рамка. Не object-fit: срезанную им картинку
   Chrome ужимает без сглаживания, и фото рябит. Поэтому рамка у фото всегда не шире 16:10 — минимум высоты у каждой
   раскладки ниже подобран под её ширину. */
.tall .job-photo .art { position: absolute; top: 0; left: 50%; width: auto; height: 100%; min-width: 100%;
  transform: translateX(-50%); }
.tall .job-today { grid-area: today; margin-bottom: 4px; }
.tall .job-rubric { grid-area: rubric; font-size: 13px; }
.tall .job-title { grid-area: title; margin-top: 3px; font-size: 17px; }
.tall .job-lede { grid-area: lede; display: none; margin-top: 3px; }
.tall .job-terms { grid-area: terms; margin-top: 5px; gap: 8px; }
.tall .job-mastery { grid-area: mast; margin-top: 5px; font-size: 13px; }
.tall .job-mastery .medals { gap: 2px; font-size: 15px; }  /* бронзу от серебра видно и на маленьком телефоне */
/* Главная заметка — как на первой полосе: рубрика и заголовок крупно во всю ширину, под ними фото пошире,
   справа от него подводка, условия и освоение. */
.tall .job.lead { grid-template-columns: clamp(150px, 44%, 250px) minmax(0, 1fr);
  grid-template-areas: "today today" "rubric rubric" "title title" "photo lede" "photo terms" "photo ." "photo mast"; }
.tall .job.lead .job-title { margin: 2px 0 6px; font-size: 22px; }
.tall .job.lead .job-photo { min-height: 108px; min-height: min(27cqw, 156px); }
.tall .job.lead .job-lede { display: block; margin-top: 0; }
/* Низкая узкая полоса (Telegram не во весь экран, маленький телефон, узкое окно ПК): главная пониже — фото уже,
   подводка в две строки. Без прокрутки видно на заметку больше. */
@container gazeta (max-width: 519.98px) and (max-height: 720px) {
  .tall .job.lead { grid-template-columns: clamp(120px, 35%, 200px) minmax(0, 1fr); }
  .tall .job.lead .job-photo { min-height: min(21cqw, 125px); }
  .tall .job.lead .job-lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
/* Широкая полоса (планшет): справа от фото места хватает — подводка у каждой заметки, а главная — как разворот
   боком: фото слева, весь текст справа, без пустого поля под условиями. */
@container gazeta (min-width: 520px) {
  .tall .job { grid-template-columns: clamp(118px, 30%, 170px) minmax(0, 1fr); }
  .tall .job-photo { min-height: min(18cqw, 106px); }
  .tall .job-lede { display: block; }
  .tall .job.lead { grid-template-columns: clamp(200px, 44%, 280px) minmax(0, 1fr);
    grid-template-areas: "photo today" "photo rubric" "photo title" "photo lede" "photo terms" "photo ." "photo mast"; }
  .tall .job.lead .job-title { margin: 3px 0 4px; }
  .tall .job.lead .job-photo { min-height: min(27.5cqw, 175px); }
}
/* Подвал: мелкие новости и курс семок в две колонки, отбиты от заметок двойной линейкой. */
.tall .gz-news, .tall .gz-box { order: 1; }
.tall .gz-news { font-size: 11.5px; }
.tall .gz-news b { font-size: 14px; }
.tall .gz-page:first-child .gz-news { margin-top: 4px; border-top: 3px double var(--ink); padding-top: 7px; }

/* ---------- точки: общая тетрадь в клетку ----------
   Что держишь под крышей, сколько в кассе и что нужно на следующую крышу — синей шариковой ручкой по клетке, слева
   красные поля и дырки от пружины, фотки точек вклеены на скотч. Подсказки — карандашом, действия обведены красной. */
.win.tetrad { max-width: 1080px; max-height: 100%; padding: 0; gap: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; filter: drop-shadow(0 14px 22px rgba(0,0,0,.65)); }
.win.tetrad > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; }
.win.tetrad .win-body { padding: 0; overflow: hidden; }
.td { --pen: #22408f; --pencil: #6f6c66; position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; padding: 10px 22px 12px 70px; color: var(--pen);
  background:
    linear-gradient(90deg, transparent 56px, rgba(214,70,70,.6) 56px 57.5px, transparent 57.5px),
    repeating-linear-gradient(0deg, rgba(80,130,200,.2) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(80,130,200,.2) 0 1px, transparent 1px 18px),
    linear-gradient(100deg, rgba(0,0,0,.07), transparent 7%),
    #f2f1ea;
  box-shadow: inset 0 0 24px rgba(90,80,50,.2);
  clip-path: polygon(0 .5%, 60% 0, 100% .4%, 99.7% 99.4%, 40% 100%, .3% 99.6%); }
.td::-webkit-scrollbar { display: none; }
/* дырки от пружины по левому краю */
.td::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 16px; pointer-events: none;
  background: radial-gradient(circle at 8px 8px, #3a3833 0 4.5px, rgba(0,0,0,.18) 5.5px, transparent 6.5px) 0 0 / 16px 24px repeat-y; }
.td-head { display: flex; align-items: center; gap: 12px; padding: 0 44px 6px 0; }   /* справа — место под крестик */
.td-title { font: 700 36px/1 var(--f-hand); text-decoration: underline double; text-decoration-thickness: 2px;
  text-underline-offset: 5px; transform: rotate(-2deg); }
.td-sub { font: 700 17px/1.05 var(--f-hand); color: var(--pencil); max-width: 260px; }
.td-sum { display: flex; align-items: center; gap: 8px; font: 700 20px/1 var(--f-hand); white-space: nowrap; }
.td-coin { display: inline-flex; align-items: center; gap: 3px; font: 700 20px/1 var(--f-hand); white-space: nowrap; }
.td-coin .icon { width: 21px; height: 21px; }
.td-empty { color: var(--pencil); }
/* «Собрать всё» — обведено красной ручкой; пустые кассы — карандашный пунктир */
.td-collect { position: relative; flex: none; padding: 6px 16px 8px; font: 700 25px/1 var(--f-hand); color: var(--pen-red);
  transform: rotate(-2deg); }
.td-collect::after, .td-act::after { content: ""; position: absolute; inset: -3px -7px; border: 2.5px solid rgba(184,36,26,.85);
  border-radius: 50% 46% 52% 48% / 58% 46% 54% 42%; transform: rotate(2.5deg); pointer-events: none; }
.td-collect:hover, .td-act:hover { filter: brightness(1.25); }
.td-collect:active, .td-act:active { translate: 0 2px; }
.td-collect:disabled { color: #9a968c; cursor: default; }
.td-collect:disabled::after { border: 2px dashed rgba(120,115,105,.45); }
/* у каждого района своя тетрадка: чья она — красной ручкой рядом с заголовком */
.td-district { margin-left: -4px; font: 700 26px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-3deg); white-space: nowrap; }

/* строка тетради — точка: фотка, что за место, крыша с кассой, следующая крыша */
.td-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 160px 206px; gap: 14px; align-items: start;
  padding: 10px 0 12px; border-top: 1.5px solid rgba(34,64,143,.4); }
.td-photo { position: relative; margin-top: 4px; transform: rotate(var(--r, 0deg)); }
.td-photo .art { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 4px solid #fbfaf5; background: #d8d4c8;
  box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.td-photo .ph { border: 4px solid #fbfaf5; }
.td-photo .tape { left: 32%; top: -8px; transform: rotate(-5deg); }
.td-row.free .td-photo .art { filter: grayscale(.9) contrast(.9) brightness(1.05); }
.td-name { font: 700 24px/1 var(--f-hand); }
.td-text { margin-top: 4px; font: 14px/1.25 var(--f-text); color: #3b4056; }
.td-roofline { display: flex; align-items: center; gap: 7px; font: 700 18px/1 var(--f-hand); }
.td-roofs { display: inline-flex; gap: 3px; }
.td-roofs i { width: 17px; height: 12px; background: rgba(34,64,143,.18); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.td-roofs i.on { background: var(--pen); }
.td-cash { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; font: 700 19px/1 var(--f-hand); }
.td-cash .icon { width: 21px; height: 21px; align-self: center; }
.td-cash b { font-size: 26px; }
.td-bar { position: relative; height: 9px; margin-top: 3px; border: 1.5px solid var(--pen); border-radius: 2px 5px 3px 4px; }
.td-fill { position: absolute; inset: 0 auto 0 0; transition: width .4s ease;
  background: repeating-linear-gradient(-55deg, var(--pen) 0 1.5px, transparent 1.5px 4px); }
.td-rate { margin-top: 4px; font: 700 17px/1.05 var(--f-hand); color: var(--pencil); }
.td-need { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.td-step { font: 700 20px/1 var(--f-hand); }
.td-need .td-coin { color: var(--pen-red); }
.td-need .td-coin.ok { color: #1f6b2a; }
.td-note { margin-top: 4px; font: 13.5px/1.25 var(--f-text); color: var(--pencil); }
.td-link { display: inline; font: inherit; color: var(--pen); text-decoration: underline dashed; text-underline-offset: 3px; }
.td-link:hover { color: var(--pen-red); }
.td-act { position: relative; margin: 10px 0 2px 6px; padding: 4px 12px 6px; font: 700 22px/1 var(--f-hand); color: var(--pen-red);
  transform: rotate(-2deg); }
.td-wait { margin-top: 6px; font: 700 18px/1 var(--f-hand); color: var(--pencil); }
.td-top { margin-top: 2px; font: 700 19px/1.05 var(--f-hand); color: #1f6b2a; }
/* значок на тетрадке в углу двора: крыша по карману — красная точка; иначе — сколько набежало */
.corner-dot { position: absolute; right: -4px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 2px #000; }
.corner-tag { position: absolute; right: -8px; bottom: -13px; padding: 1px 6px 2px; font: 700 15px/1 var(--f-hand); color: var(--ink);
  background: #f5c928; transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; }
/* в бою: закрыт крышей — ссылка на тетрадку */
.fp-roof { align-self: flex-start; padding: 3px 12px 4px; font: 700 18px/1.1 var(--f-hand); color: var(--pen-red); white-space: nowrap;
  border: 2px solid rgba(184,36,26,.8); border-radius: 46% 54% 48% 52% / 60% 45% 55% 40%; }
.fp-roof:hover { background: rgba(184,36,26,.08); }

.medals { display: flex; gap: 1px; font-size: 11px; flex: none; }
.medals span { filter: grayscale(1); opacity: .3; }
.medals span.on { filter: none; opacity: 1; }

/* стоя: тетрадь — страница во весь экран, запись о точке — в столбик. Поля и пружина уже, шапка в три строки: заголовок,
   карандашом — что это, кассы и «Собрать всё». Запись: фотка, рядом имя, крыша и касса; под ними описание, ниже —
   следующая крыша («ништяков мало» — в конце её строки), «Взять под крышу» — справа, под большой палец. Разметка та же,
   что боком: строка — сетка по областям.
   Стоя записи в экран не влезают, и листается не сама страница, а окно (win-body): страница растёт по записям, клетка
   и дырки от пружины идут до её низа, а окно после действия и минутного перечитывания держит, где ты был (renderWin
   помнит прокрутку win-body; прокрутку страницы сбрасывало бы наверх). */
/* padding и gap — заново: общая рамка окон стоя (.tall .win) стоит в каскаде ниже и вернула бы тетради поля */
.tall .win.tetrad { height: 100%; padding: 0; gap: 0; }
.tall .win.tetrad > .win-x { right: -4px; top: -6px; }
.tall .win.tetrad .win-body { overflow-y: auto; scrollbar-width: none; }
.tall .win.tetrad .win-body::-webkit-scrollbar { display: none; }
.tall .td { flex: 1 0 auto; overflow: visible; container: td / inline-size; padding: 8px 12px 18px 48px;
  background-position: -16px 0, 0 0, 0 0, 0 0, 0 0; }
.tall .td::before { left: 8px; }
.tall .td-head { flex-wrap: wrap; gap: 2px 10px; padding: 0 0 10px; }
.tall .td-title { font-size: 34px; }
.tall .td-district { font-size: 25px; }
.tall .td-sub { order: 1; flex-basis: 100%; max-width: none; margin-top: 2px; font-size: 16px; }
/* кассы и «Собрать всё» — одной строкой и при двух валютах (💵 12 985 и 🌻 3): зазоры уже, распорки нет — лишний зазор
   на ней и переносил кнопку; не влезли суммы покрупнее — кнопка уходит строкой ниже, но справа, под большой палец */
.tall .td-sum { order: 2; margin-top: 6px; gap: 6px; }
.tall .td-head .grow { display: none; }
.tall .td-collect { order: 4; margin: 6px 6px 0 auto; padding: 6px 12px 8px; }
.tall .td-row { grid-template-columns: minmax(94px, 27%) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 12px; padding: 12px 0;
  grid-template-areas: "photo name" "photo box" "text text" "next next"; }   /* фотка выше имени с кассой — лишнее вниз, не между ними */
.tall .td-photo { grid-area: photo; margin-top: 2px; }
.tall .td-about { display: contents; }
.tall .td-name { grid-area: name; font-size: 23px; text-wrap: balance; }   /* «Платный туалет «У Шуры»» — не оставляет «У» висеть */
.tall .td-box { grid-area: box; margin-top: 5px; }
.tall .td-cash { margin-top: 4px; }
.tall .td-bar { max-width: 260px; }
.tall .td-rate { font-size: 16px; text-wrap: balance; }   /* «возьмёшь — капать будет» не рвёт «10 в час» */
.tall .td-text { grid-area: text; margin-top: 8px; }
.tall .td-next { grid-area: next; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center;
  grid-template-areas: "need wait" "note note" "act act"; margin-top: 8px; }
.tall .td-need { grid-area: need; }
.tall .td-note { grid-area: note; font-size: 14px; }
.tall .td-wait { grid-area: wait; margin: 0 4px 0 0; font-size: 17px; }
.tall .td-top { grid-column: 1 / -1; }
/* «где взять» — ссылка в строке текста: тычок шире самой строки, чтобы попадать пальцем */
.tall .td-link { position: relative; }
.tall .td-link::after { content: ""; position: absolute; inset: -9px -4px; }
/* «Взять под крышу» — рядом с тем, что на крышу нужно, на месте «ништяков мало» (при кнопке оно пустое), а не своей
   строкой с пустотой слева. Рядом с кнопкой одной строкой требования не влезают и при «💵 500», поэтому «Крыша 3:» —
   над ними, ништяки с бабками — строкой ниже: две короткие строки как раз в рост кнопки, а не разрыв где придётся.
   Строка «act act» у td-next выше — запас на браузер без :has() */
.tall .td-next:has(> .td-act) { grid-template-areas: "need act" "note note"; }
.tall .td-next:has(> .td-act) .td-step { flex-basis: 100%; }
.tall .td-act { grid-area: act; justify-self: end; align-self: center; margin: 0 8px 0 6px; padding: 6px 16px 8px; white-space: nowrap; }
/* страница пошире (планшет, узкое окно ПК): требования — одной строкой, кнопка — сбоку от обеих строк, и от «где взять» тоже */
@container td (min-width: 400px) {
  .tall .td-next:has(> .td-act) { grid-template-areas: "need act" "note act"; }
  .tall .td-next:has(> .td-act) .td-step { flex-basis: auto; }
}

/* ---------- бой от первого лица ----------
   Босс во весь экран, справа — твоя рука из частей (fist/, forearm/): дышит, на тычок замахивается и бьёт. Двор за спиной
   размыт и притемнён; слева имя, здоровье и листок с раскладом, сверху справа лестница района. Ответ босса — тряска
   и красный край экрана. Мир (босс и рука) растёт вместе со сценой, надписи — размера интерфейса. */
.fighting .map-layer { visibility: hidden; }
.backdrop.fight .fill { filter: blur(6px) brightness(.55) saturate(.8); transform: scale(1.06); }
.backdrop.fight::after { background: radial-gradient(ellipse 75% 85% at 50% 62%, transparent 35%, rgba(8,9,10,.7)),
  linear-gradient(rgba(45,12,8,.2), rgba(8,9,10,.45)); }
.win-layer.fp { padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: fade .2s ease-out; }
.win.fp { position: absolute; inset: 0; max-width: none; max-height: none; padding: 0; gap: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; animation: none; }
.win.fp > .win-x { position: absolute; right: 10px; top: 8px; z-index: 6; }
.win.fp > .win-body { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; }
.fp { position: absolute; inset: 0; overflow: hidden; }
.fp-world { position: absolute; inset: 0; }

/* Босс — кнопка: тычок по нему и есть удар. Стоит на нижнем крае, покачивается; от удара дёргается (app.js, shove). */
.fp-boss { position: absolute; left: 47%; bottom: 0; height: 93%; aspect-ratio: 3 / 4; transform: translateX(-50%);
  cursor: crosshair; touch-action: manipulation; }
.fp-boss-idle { width: 100%; height: 100%; transform-origin: 50% 100%; animation: fp-idle 4.4s ease-in-out infinite; }
.fp-boss-body { width: 100%; height: 100%; transform-origin: 50% 100%; }
.fp-boss-artbox { width: 100%; height: 100%; }
.fp-boss-art { width: 100%; height: 100%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.fp-boss .ph { border-radius: 14px 14px 0 0; }
.fp.locked .fp-boss-art { filter: grayscale(1) brightness(.28) drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.fp.locked .fp-boss { cursor: not-allowed; }
@keyframes fp-idle { 0%, 100% { transform: none; } 50% { transform: scale(1.012) rotate(-.5deg); } }

/* Рука — кадр 1200×1500 (fist/ и forearm/), стоит на экране костяшками в точке 70 % × 45 % (сдвиг translate — из app.js,
   ARM.fist). Кадр больше экрана: верх с оружием уходит за верхний край, локоть с обрезом предплечья — за нижний.
   Дышит сама (breathe); удар — повороты костей (fp-bone, app.js). По ней не тыкают: тычок проходит к боссу. */
.fp-hand { position: absolute; left: 70%; top: 45%; height: 160%; aspect-ratio: 4 / 5; z-index: 2; pointer-events: none; }
.fp-hand-breathe { position: absolute; inset: 0; transform-origin: 90% 95%; animation: fp-breathe 3.8s ease-in-out infinite; }
.fp-arm, .fp-bone { position: absolute; inset: 0; }
.fp-bone > .art { position: absolute; inset: 0; width: 100%; height: 100%; }
.fp-bone.fist { z-index: 1; }
.fp-bone > .art.sleeve { z-index: 2; }             /* манжета рукава — поверх запястья */
.fp-bone .ph { opacity: .6; border-radius: 40%; }
@keyframes fp-breathe {
  0%, 100% { transform: none; }
  35% { transform: translate(-.4%, 1%) rotate(-.8deg); }
  60% { transform: translate(-.8%, 1.6%) rotate(-1.3deg); }
  82% { transform: translate(-.3%, .6%) rotate(-.4deg); }
}
.fp-stamp { position: absolute; left: 47%; top: 38%; z-index: 3; padding: 4px 16px 6px; pointer-events: none;
  font: 700 46px/1 var(--f-print); text-transform: uppercase; letter-spacing: 3px; color: #d7261c;
  border: 5px solid #d7261c; border-radius: 6px; background: rgba(236,226,196,.12);
  transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.5,1); }
/* Закрытый босс — тёмный силуэт, поверх маркером: чем откроется. */
.fp-lockmsg { position: absolute; left: 47%; top: 46%; z-index: 3; max-width: min(46%, 420px); padding: 0 6px;
  transform: translate(-50%, -50%) rotate(-2deg); text-align: center; pointer-events: none;
  font: 700 23px/1.12 var(--f-hand); color: #ff8a7e; text-shadow: 0 1px 2px #000, 0 0 10px #000, 0 0 3px #000; }
.fp-lockmsg:empty { display: none; }
.fp.down .fp-stamp, .fp.dead .fp-stamp { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg); transition-delay: .5s; }
.fp.down .fp-lockmsg { visibility: hidden; }        /* «на сегодня хватит» — когда встанет, не поверх штампа */

/* Красный край экрана: прилетело. Лёг — красно и темно, пока не встанешь. */
.fp-red { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 72% 70% at 50% 50%, transparent 52%, rgba(205,20,12,.5) 80%, rgba(150,0,0,.88)); }
.fp-red.on { animation: fp-red .7s ease-out; }
.fp.dead .fp-red { opacity: 1; transition: opacity .5s;
  background: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(90,0,0,.35) 30%, rgba(150,0,0,.8) 75%, rgba(40,0,0,.95)); }
@keyframes fp-red { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
#screen.shake #backdrop, #screen.shake .fp-world { animation: fp-shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes fp-shake {
  10% { transform: translate(-8px, 3px); } 25% { transform: translate(8px, -4px); } 40% { transform: translate(-6px, 2px); }
  55% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } 100% { transform: none; }
}
/* Ответ «со всей дури» (система 5, втрое) — трясёт вдвое сильнее и дольше. Свой класс, не «shake»: app.js снимает оба
   перед новым ответом, иначе залипший класс глушил бы следующую тряску. */
#screen.haymaker #backdrop, #screen.haymaker .fp-world { animation: fp-shake-hard .65s cubic-bezier(.36,.07,.19,.97); }
@keyframes fp-shake-hard {
  8% { transform: translate(-16px, 7px) rotate(-.8deg); } 20% { transform: translate(15px, -8px) rotate(.6deg); }
  34% { transform: translate(-12px, 5px); } 48% { transform: translate(9px, -4px); } 64% { transform: translate(-5px, 2px); }
  80% { transform: translate(2px, -1px); } 100% { transform: none; }
}

/* Слева: имя на бумажной полосе, здоровье босса, листок с раскладом (прокручивается сам). */
.fp-side { position: absolute; left: 10px; top: 8px; bottom: 50px; width: 240px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fp-side > * { pointer-events: auto; }
.fp-plate { display: flex; flex-direction: column; gap: 6px; }
.fp-name { position: relative; align-self: flex-start; max-width: 100%; transform: rotate(-1deg); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.fp-name .strip { padding: 5px 16px 6px 12px; }
.fp-name .tape.l { left: -12px; top: -6px; transform: rotate(-28deg); }
.fp-title { font: 700 19px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .6px; }
.fp-sub { margin-top: 2px; font: 14px/1.15 var(--f-text); color: #3a362f; }
.fp-hp { height: 22px; border: 2px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.fp-hp span { line-height: 18px; font-size: 13.5px; }
.fp-wins { margin-top: -2px; font: 700 21px/1 var(--f-hand); color: #ff7a6e; text-shadow: 0 1px 2px #000, 0 0 6px #000;
  transform: rotate(-3deg); }
.fp-wins:empty { display: none; }
.fp-note { flex: 0 1 auto; min-height: 0; display: flex; }
.fp-sheet-wrap { position: relative; flex: 1; min-height: 0; display: flex; transform: rotate(calc(var(--r, 0deg) * .35));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.fp-sheet { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 11px 12px 10px;
  clip-path: var(--edge); font: 14px/1.22 var(--f-text); scrollbar-width: none; }
.fp-sheet::-webkit-scrollbar { display: none; }
.fp-sheet .muted { font-size: 13px; }
.fp-sheet .fight-warn { font-size: 18px; }
.fp-prize { display: flex; flex-direction: column; gap: 3px; }
.fp-prize b, .fp-token b { font: 700 12px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; }
.fp-token { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.fp-token .icon { width: 24px; height: 24px; }
.fight-warn { font: 700 19px/1.1 var(--f-hand); color: var(--pen-red); }
/* Подзатыльник — красной ручкой на листке боя и отдельной строкой у кореша: мелким чипом его не замечали. */
.fp-slap { font: 700 19px/1.1 var(--f-hand); color: var(--pen-red); }
.say .big.slap { color: #a3241c; }
/* Шанс лечь «со всей дури» — строкой потемнее текста; всерьёз (от 20 %) app.js пишет её красной ручкой, как «не вывезешь». */
.fp-risk { font-size: 13.5px; color: #6b1d16; }
/* Злоба: «Точит на тебя зуб» печатными, как «За победу», ниже — насколько злее и что сверху за победу. */
.fp-grudge { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.fp-grudge b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; }
.say .big.grudge { color: #7a2a1f; }
/* Заклятый враг босса: «Заклятый враг» печатными, ниже — чьё звание; имя — синей ручкой, тычок — профиль пацана. */
.fp-enemy { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.fp-enemy b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; }
.pf-name { display: inline; padding: 0; border: 0; background: none; font: 700 16px/1.1 var(--f-hand); color: #1d3f8f;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
.honor[role="button"] { cursor: pointer; }
/* Карточка чужого пацана (профиль): общий аватар, строки о нём, у каких боссов он заклятый враг. */
.pf-photo { display: flex; align-items: center; justify-content: center; }
.pf-title { font: 700 17px/1.1 var(--f-hand); color: #7a5a0b; }
.pf-enemies { display: flex; flex-direction: column; gap: 1px; }
.pf-enemies b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; }

/* Лестница района — фотки боссов сверху справа, левее крестика. */
.fp-ladder { position: absolute; top: 10px; right: 72px; left: 270px; z-index: 5; display: flex; flex-wrap: wrap;
  justify-content: flex-end; gap: 9px; pointer-events: none; }
.fp-ladder > * { pointer-events: auto; }
.fp .medallion { width: 42px; }
.fp .face { width: 40px; height: 40px; }

/* Строки боя — плашками, как подписи в комиксе, под боссом. */
.fp-log { position: absolute; left: 47%; bottom: 46px; z-index: 5; width: min(400px, 46%); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none; }
.fp-cap { max-width: 100%; padding: 3px 10px 4px; font: 700 15px/1.15 var(--f-text); text-align: center;
  border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.75); transform: rotate(-1deg); animation: pop .16s ease-out; }
.fp-cap.hit { background: #f5d33a; color: #16130e; }
.fp-cap.hit.crit { background: #ffac2e; font-size: 16.5px; }
.fp-cap.got { background: #c62f24; color: #fff; transform: rotate(1deg); }
.fp-cap.got.haymaker { background: #7e1009; font-size: 16.5px; transform: rotate(2deg) scale(1.04); box-shadow: 4px 4px 0 rgba(0,0,0,.85); }
.fp-cap.dodge { background: #e9e3cf; color: #3a362f; transform: rotate(.8deg); }

/* Внизу: твоё здоровье слева, подсказка — полоска скотча посередине. */
.fp-me { position: absolute; left: 10px; bottom: 10px; width: 240px; z-index: 5; }
.fp-me .bar { height: 22px; border: 2px solid #000; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.fp-me .bar span { line-height: 18px; font-size: 13.5px; }
.fp-hint { position: absolute; left: 47%; bottom: 10px; z-index: 5; display: flex; align-items: center; gap: 4px;
  padding: 3px 12px 4px; white-space: nowrap; font: 700 17px/1 var(--f-hand); color: var(--ink); pointer-events: none;
  background: rgba(236,226,196,.93); transform: translateX(-50%) rotate(-1deg);
  clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); }
.fp-hint .icon { width: 18px; height: 18px; }
.fp-hint .bad { color: var(--pen-red); }
.fp.down .fp-hint, .fp.dead .fp-hint { visibility: hidden; }

/* Замес — бой с боссом группой (система 5): тот же каркас. Участники — бумажные ярлычки там, где боком лестница района
   (сверху справа), стоя — полосой под именем: имя и вклад, себя обвела ручка, зачинщик с короной, в отключке — тусклый.
   Кончившийся замес — босс серый и лежит, поверх маркером итог (fp-lockmsg), на листке — кто добил и что тебе досталось. */
.fp-mates { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 100%; }
.fp-mate { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; padding: 3px 9px 4px; overflow: hidden;
  font: 700 12.5px/1 var(--f-print); text-transform: uppercase; letter-spacing: .4px; color: var(--ink); white-space: nowrap;
  background: var(--paper); box-shadow: 0 2px 3px rgba(0,0,0,.5); transform: rotate(-1.2deg); cursor: pointer;
  clip-path: polygon(0 6%, 50% 0, 100% 4%, 99% 94%, 48% 100%, 1% 96%); }
.fp-mate:nth-child(2n) { transform: rotate(1deg); }
.fp-mate b { color: #6b1d16; font-weight: 700; }
.fp-mate i { font: 700 12px/1 var(--f-hand); color: var(--pen-red); text-transform: none; }
.fp-mate.me { box-shadow: 0 0 0 2px var(--pen-red), 0 2px 3px rgba(0,0,0,.5); }
.fp-mate.ko { opacity: .62; }
.fp-share { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.fp-share b { font: 700 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; }
/* Кнопки на листке — бумажки с маркером: кинуть ссылку, позвать бригаду, выйти, замес боссу. */
.fp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.fp-btn { padding: 5px 11px 6px; font: 700 15px/1 var(--f-hand); color: var(--ink); background: #fff3b0; border: 2px solid #000;
  box-shadow: 2px 2px 0 #000; transform: rotate(-.8deg); cursor: pointer; }
.fp-btn:hover { background: #fff8cf; }
.fp-btn:active { transform: translate(1px, 1px) rotate(-.8deg); box-shadow: 1px 1px 0 #000; }
.fp-btn.ghost { background: #e9e3cf; color: #3a362f; }
.fp-btn + .fp-btn { transform: rotate(.9deg); }
.fp.over .fp-boss-art { filter: grayscale(.7) brightness(.55) drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.fp.over .fp-boss { cursor: default; }
.fp.over .fp-lockmsg { color: #ffd27a; }
/* Залётный на карте района: фигура рядом с боссом, табличка красноватая, вместо номера «2/9» — часы: он на три часа. */
.spot.drifter .sign { background: rgba(255,214,206,.95); color: #7a1a12; }
.spot.drifter .spot-num { background: #ff7a6e; }

/* «БАЦ!» — взрыв комиксом в точке удара (живёт вне сцены, как полёт цифр: растёт через --s). */
.bam { position: fixed; z-index: 19; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  animation: bam .55s ease-out forwards; }
.bam span { display: block; padding: calc(20px * var(--s)) calc(24px * var(--s)); background: #ffe14d;
  font: 700 calc(24px * var(--s))/1 var(--f-print); letter-spacing: 1px; color: #d7261c; -webkit-text-stroke: calc(1px * var(--s)) #000;
  clip-path: polygon(50% 3%, 57% 20%, 71% 6%, 69% 26%, 88% 20%, 79% 36%, 95% 40%, 83% 50%, 95% 60%, 79% 64%, 86% 79%,
    69% 74%, 71% 93%, 58% 83%, 50% 96%, 43% 80%, 29% 94%, 28% 77%, 12% 80%, 21% 64%, 1% 61%, 20% 50%, 2% 39%, 22% 36%,
    14% 21%, 31% 26%, 30% 7%, 42% 17%); }
.bam.crit span { padding: calc(28px * var(--s)) calc(32px * var(--s)); font-size: calc(33px * var(--s)); background: #fff6c9; }
@keyframes bam {
  0% { scale: .2; opacity: 0; } 20% { scale: 1.18; opacity: 1; } 65% { scale: 1; opacity: 1; } 100% { scale: 1.05; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-boss-idle, .fp-hand-breathe, .fp-cap { animation: none; }
  .bam { display: none; }
  #screen.shake #backdrop, #screen.shake .fp-world, #screen.haymaker #backdrop, #screen.haymaker .fp-world { animation: none; }
}

/* лестница района — фотки боссов; текущего обвела ручка */
.medallion { position: relative; flex: none; width: 48px; transform: rotate(var(--r, 0deg)); }
.face {
  position: relative; width: 44px; height: 44px; margin: 0 auto; overflow: hidden; background: #d4d0c4;
  box-shadow: 0 0 0 3px #f2eee4, 0 3px 4px 2px rgba(0,0,0,.45);
}
.medallion:hover .face { filter: brightness(1.08); }
/* Фотка вырезает голову и плечи: верхние 4…50 % кадра 3:4, где по разметке стоит лицо (26 %). */
.face img.face-img { position: absolute; width: 160%; max-width: none; left: -30%; top: -4%; }
.face .ph { width: 100%; height: 100%; }
.face .ph::before { display: none; }
.face .ph-emoji { filter: none; opacity: .9; font-size: 19px; margin-top: 0 !important; }
.medallion.on::after { content: ""; position: absolute; inset: -9px -8px; border: 3px solid rgba(184,36,26,.85);
  border-radius: 50% 46% 52% 48%; transform: rotate(-6deg); pointer-events: none; }
.medallion.locked .face > * { filter: grayscale(1) brightness(.55); }
.medallion-num {
  position: absolute; left: -5px; top: -6px; min-width: 18px; padding: 1px 4px; text-align: center;
  font: 700 15px/1 var(--f-hand); color: var(--ink); background: #f5c928; transform: rotate(-8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.medallion-mark {
  position: absolute; right: -4px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; background: #2f8a3c;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.medallion-mark.lock { background: #2a2e35; font-size: 9px; }

/* Стоя: всё, что читают, — сверху столбиком (имя со здоровьем, лестница полосой, листок с раскладом), босс под ними во весь
   рост, насколько пускает ширина (сколько занято сверху — --fp-top, меряет app.js, fightShell). Рука меньше и держится
   за ширину экрана, локоть — за правым краем; внизу — твоё здоровье во всю ширину, над ним подсказка и строки боя. */
.tall .win-layer.fp, .tall .win.fp { padding: 0; }
/* Контейнер — только сам бой (класс fp есть и у слоя с окном): от него считаются cqw, cqh и низкий экран (@container ниже). */
.tall .win-body > .fp { container-type: size; }
.tall .fp-boss { left: 50%; height: calc((100% - var(--fp-top, 220px)) / .93);   /* верх кадра (7 %) пустой */
  height: min(calc((100% - var(--fp-top, 220px)) / .93), 148cqw); }
/* Кулак — у груди босса справа, ниже лица: по лицу бьют, его не закрываем. */
.tall .fp-hand { left: 67%; top: calc(var(--fp-top, 220px) * .4 + 60%); height: auto; width: 140%; width: min(140cqw, 90cqh); }
.tall .fp-stamp { left: 50%; top: calc(var(--fp-top, 220px) * .6 + 40%); font-size: 40px; }   /* посреди босса */
/* Чем откроется — на груди силуэта, под лицом: от низа экрана 60 % роста босса (рост — как у .fp-boss выше). Текст
   бывает в пять строк и лежит поверх кулака, а не под ним. */
.tall .fp-lockmsg { left: 50%; top: calc(100% - .6 * (100% - var(--fp-top, 220px)) / .93);
  top: calc(100% - .6 * min((100% - var(--fp-top, 220px)) / .93, 148cqw)); max-width: 86%; font-size: 22px; }
.tall .fp.dead .fp-lockmsg { visibility: hidden; }  /* «на сегодня хватит» не лезет на штамп «Ты лёг» */
/* Столбик сверху — не выше 58 % боя: развёрнутый листок на низком экране прокручивается, босс под ним ещё виден. */
.tall .fp-side { left: 8px; right: 8px; top: 8px; bottom: auto; width: auto; max-height: min(calc(100% - 96px), 58%); gap: 6px; }
.tall .fp-plate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.tall .fp-name { grid-column: 1 / -1; justify-self: start; max-width: calc(100% - 52px); }   /* справа — крестик */
.tall .fp-title { font-size: 18px; }
.tall .fp-sub { font-size: 14px; }
.tall .fp-wins { margin: 0; font-size: 20px; }
.tall .fp-hp:has(+ .fp-wins:empty) { grid-column: 1 / -1; }   /* не уложен ни разу — здоровье во всю ширину */
/* Полоски выше, цифры на них крупнее: на маленьком телефоне интерфейс мельчит в 0,86. */
.tall .fp-hp, .tall .fp-me .bar { height: 26px; }
.tall .fp-hp span, .tall .fp-me .bar span { font-size: 15px; line-height: 22px; }
/* Лестница полосой: девять фоток по 40 пикселей через 3 — в ширину 420, и по фотке ещё попадаешь пальцем. */
.tall .fp-side > .fp-ladder { position: static; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 3px;
  padding: 6px 4px 2px; }
.tall .fp-side > .fp-ladder:empty { display: none; }
.tall .fp .medallion { width: 40px; }
.tall .fp .face { width: 38px; height: 38px; }
/* Ринг: табличка мелом с очками — слева под здоровьем, рекорд месяца — справа от неё (app.js, ringPaint). */
.tall .fp-ladder .pd-badge { flex-direction: row; align-items: baseline; gap: 8px; padding: 3px 12px 5px; }
.tall .fp-side > .fp-ladder .pd-badge { margin-left: 0; }
.tall .fp-ladder .pd-badge b { font-size: 21px; }
.tall .fp-ladder .fp-wins { margin-left: auto; padding-right: 4px; }
.tall .fp-sheet { position: relative; padding: 8px 11px 9px; gap: 4px; cursor: pointer; }
.tall .fp-sheet .muted { font-size: 14px; }
.tall .fp-token, .tall .fp-risk { font-size: 14px; }
.tall .fp-sheet .chip { font-size: 14.5px; }
.tall .fp-sheet .chip.coin .icon { width: 21px; height: 21px; }
/* «скрыть ▴» в углу развёрнутого листка — кнопка (с клавиатуры тоже), но тычок по всему листку делает то же. */
.tall .fp-more { font: 700 17px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap; }
.tall .fp-sheet > .fp-more { position: absolute; right: 10px; top: 8px; z-index: 1; }
/* Спрятанный листок — облачко «…» (владелец 2026-09-27: «три точки в облачке»), комиксом, как строки боя: белое, чёрный
   контур, жёсткая тень, хвост кружками — вниз, к боссу. Рядом — кнопки с листка (позвать своих, замес, к «Точкам»);
   мимо облачка и кнопок тычок проходит сквозь строку. Красная точка — на листке есть о чём знать до драки. */
.tall .fp-note:has(> .fp-folded) { pointer-events: none; }
.tall .fp-folded { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tall .fp-folded > * { pointer-events: auto; }
.tall .fp-folded .fp-btns { margin: 0; }
.tall .fp-folded .muted { display: none; }                  /* «бригаду позвал» — на развёрнутом листке */
.tall .fp-cloud { position: relative; flex: none; width: 76px; height: 54px; padding: 0; border: 0; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 54'%3E%3Cg fill='%23f4f1e8' stroke='%2316130e' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M8.9 18.2A8.9 8.9 0 0 1 21.6 9.6A10.3 10.3 0 0 1 39.1 7A10.1 10.1 0 0 1 56.2 10.2A8.2 8.2 0 0 1 67.5 18.7A6.1 6.1 0 0 1 67.5 29.3A9.3 9.3 0 0 1 54.4 38.4A12.7 12.7 0 0 1 32.6 40.7A12.5 12.5 0 0 1 12.3 33.5A9.1 9.1 0 0 1 8.9 18.2Z'/%3E%3Ccircle cx='60' cy='45.5' r='3.6'/%3E%3Ccircle cx='67.5' cy='50.5' r='2.2'/%3E%3C/g%3E%3Cg fill='%2316130e'%3E%3Ccircle cx='25.5' cy='24.8' r='3.7'/%3E%3Ccircle cx='38' cy='24' r='3.9'/%3E%3Ccircle cx='50.5' cy='24.9' r='3.6'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.75)); }
.tall .fp-cloud:active { translate: 1px 2px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.75)); }
.tall .fp-cloud .corner-dot { right: 5px; top: 3px; }
/* Листок вырастает из облачка и уходит в него: сжимается к левому верхнему углу, где встаёт облачко (app.js, foldSheet). */
.tall .fp-unfold { animation: fp-unfold .18s ease-out; }
.tall .fp-folding { animation: fp-fold .16s ease-in forwards; pointer-events: none; }
.tall .fp-pop .fp-cloud { animation: fp-cloud-pop .24s ease-out; }
@keyframes fp-unfold { from { transform-origin: 0 0; scale: .12; opacity: 0; } to { transform-origin: 0 0; } }
@keyframes fp-fold { from { transform-origin: 0 0; } to { transform-origin: 0 0; scale: .12; opacity: 0; } }
@keyframes fp-cloud-pop { 0% { scale: .4; } 65% { scale: 1.1; } 100% { scale: 1; } }
.tall .fp-log { left: 50%; bottom: 76px; width: calc(100% - 24px); }
.tall .fp-me { left: 8px; right: 8px; bottom: 8px; width: auto; }
.tall .fp-hint { left: 50%; bottom: 42px; }
/* Замес стоя: участники — полосой под именем (в лестнице), листок — как у босса; кнопки на листке во всю ширину пальца. */
.tall .fp-side > .fp-ladder .fp-mates { justify-content: flex-start; }
.tall .fp-mate { font-size: 13px; padding: 4px 10px 5px; }
.tall .fp-btn { padding: 7px 13px 8px; font-size: 16px; }
.tall .fp-share { font-size: 14px; }
/* Низкий экран стоя (почти квадратное окно: Telegram на ПК, узкий браузер): лестницу убираем, иначе от босса остаётся
   одна маска. */
@container (max-height: 520px) {
  .tall .fp-side > .fp-ladder { display: none; }
}

/* ---------- окно пацана: прикид ---------- */
.gear { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.wardrobe { display: grid; grid-template-columns: 58px auto 58px; gap: 6px; align-items: center; }
.slot-col { display: flex; flex-direction: column; gap: 6px; }
.slot {
  position: relative; width: 58px; aspect-ratio: 1 / 1; overflow: hidden;
  background: rgba(0,0,0,.06); border: 2px dashed rgba(0,0,0,.28);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
button.slot:hover { filter: brightness(1.08); }
.slot.full { border-style: solid; background: rgba(255,255,255,.35); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.slot-img { width: 100%; height: 100%; }
.slot-ghost { font-size: 22px; filter: grayscale(1); opacity: .3; }
.slot-kind {
  position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: 700 9.5px/1 var(--f-print);
  text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft);
}
.slot.full.r-common { border-color: rgba(0,0,0,.35); } .slot.full.r-choice { border-color: rgba(31,107,42,.6); }
.slot.full.r-rare { border-color: rgba(29,68,155,.6); } .slot.full.r-legend { border-color: rgba(160,110,0,.75); }
.doll { position: relative; aspect-ratio: 2 / 3; }
.doll .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.doll.stand { height: 200px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.doll .ph { border-radius: 12px; }
.gear-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-title { font: 700 20px/1.1 var(--f-hand); color: #b3261e; transform: rotate(-1deg); }
.slot-row { display: flex; gap: 6px; }

.bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 4px;
  background: rgba(255,255,255,.4); border: 2px solid rgba(0,0,0,.2); box-shadow: 0 2px 0 rgba(0,0,0,.2);
}
.tile:hover { filter: brightness(1.06); }
.tile-img { width: 100%; aspect-ratio: 1; }
.tile-name { font: 700 11.5px/1.15 var(--f-text); text-align: center; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.low { opacity: .55; }
.tile.r-choice { border-color: rgba(31,107,42,.55); } .tile.r-rare { border-color: rgba(29,68,155,.55); }
.tile.r-legend { border-color: rgba(160,110,0,.7); }
.r-common { color: var(--common); } .r-choice { color: var(--choice); }
.r-rare { color: var(--rare); } .r-legend { color: var(--legend); }
.paper .r-common { color: var(--ink-soft); } .paper .r-choice { color: #1b6a31; }
.paper .r-rare { color: #1d449b; } .paper .r-legend { color: #8a5a00; }

/* Прокачка: уровень вещи маркером в углу плитки; «can» — следующий уровень по карману и не за замком — красная точка. */
.up-badge { position: absolute; right: 3px; top: 1px; z-index: 1; pointer-events: none;
  font: 700 18px/1 var(--f-hand); color: var(--pen-red); text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 3px rgba(255,255,255,.8); }
.tile.can::after, .slot.can::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.tile.missing .tile-img, .modal-art.missing .art { filter: grayscale(1) brightness(.7) opacity(.45); }
.tile.missing .tile-name { color: var(--ink-soft); font-weight: 400; }
.modal-art { position: relative; }
.modal-art .up-badge { font-size: 30px; right: 6px; top: 2px; }
.up { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.25); }
.up-head { font-size: 14px; }
.up-head b { font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: #6b1d16; }
.up-chance { margin-left: 4px; font: 700 12px/1 var(--f-text); opacity: .75; }
.up-result { font: 700 19px/1.1 var(--f-hand); animation: pop .18s ease-out; }
.up-result.ok { color: #1f6b2a; }
.up-result.miss { color: var(--pen-red); }

/* Альбом: страница на район или завоз; собранная — «собрано!» красной ручкой. */
.album-page { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.album-count { font: 700 19px/1 var(--f-hand); color: var(--ink-soft); }
.album-page.done .album-count { color: var(--pen-red); transform: rotate(-4deg); }

.stat-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.stat-row b { font: 700 18px/1 var(--f-print); font-variant-numeric: tabular-nums; }
.stat-row small { color: #1f6b2a; font-weight: 700; }
.link-box {
  padding: 6px 9px; background: rgba(255,255,255,.5); border: 1px dashed rgba(0,0,0,.35);
  font-size: 13px; word-break: break-all; color: var(--ink-soft); user-select: all; -webkit-user-select: all;
}
.switch { width: 46px; height: 27px; border-radius: 999px; background: #1f2326; border: 2px solid #0f1112; position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--muted); transition: .15s; }
.switch.on { background: var(--seeds); border-color: #8f6f0c; }
.switch.on::after { left: 21px; background: #15171a; }

/* стоя: лист прижат к верху — вкладки не прыгают, когда короткая вкладка сменяет длинную (по центру лист съезжал бы
   вместе с ними); вкладки одной строкой и липнут к верху листа (me-tabs — только стоя), сумку и альбом листают под ними.
   Под вкладками та же бумага: цвет листа уходит в прозрачность, сгиб посередине не прерывается (слой сгиба — как у .paper).
   Прикид — кукла со слотами сверху по центру, понты, характеристики и сразу сумка; подполье и пояснение про зачёт шмота
   уходят под сумку (order): на коротком экране кукла и текст иначе съедали всё, и сумка целиком была под прокруткой.
   Всё, что жмут, — не ниже 38 пикселей, подписи — не мельче 12. */
.tall .win:has(> .win-body > .me-tabs) { align-self: flex-start; }
.tall .me-tabs { position: sticky; top: -11px; z-index: 3; flex-wrap: nowrap; gap: 5px; margin: -10px -10px 0;
  padding: 10px 10px 12px;
  background: linear-gradient(90deg, transparent 49.7%, rgba(0,0,0,.05) 50%, rgba(255,255,255,.28) 50.5%, transparent 51.3%),
    linear-gradient(var(--paper) 62%, rgba(236,230,212,0)); }
.tall .me-tabs button { flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 0 5px; font-size: 14px; letter-spacing: .5px;
  text-align: center; }
.tall .gear { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tall .wardrobe { justify-self: center; grid-template-columns: 74px auto 74px; gap: 8px 14px; }
.tall .slot-col { gap: 8px; }
.tall .slot { width: 74px; }
.tall .slot-kind { bottom: 2px; font-size: 12.5px; letter-spacing: .2px; }
.tall .slot-ghost { margin-bottom: 12px; }           /* подпись крупнее — призрак вещи над ней, а не под */
.tall .doll.stand { height: 238px; }                 /* три слота по 74 и два зазора */
.tall .bag { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.tall .tile-name { font-size: 13px; }
.tall .gear-right > .muted:has(+ .chips), .tall .gear-right > .chips + .muted { order: 1; }   /* подполье, пояснение */
.tall .gear-right > .muted:has(+ .chips) { margin-top: 6px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.25); }
.tall .me-tabs ~ * .btn { min-height: 40px; }
.tall .stat-row .btn { min-width: 50px; font-size: 16px; }
.tall .stat-row small, .tall .me-tabs ~ .link-box { font-size: 14px; }
.tall .me-tabs ~ * .switch { width: 64px; height: 38px; }
.tall .me-tabs ~ * .switch::after { width: 30px; height: 30px; }
.tall .me-tabs ~ * .switch.on::after { left: 28px; }

/* ---------- доска почёта: фотки на доске ----------
   Тройка — крупные фото с местом на ярлыке, остальные мельче, с номером маркером; себя обвела ручка. */
.honor-top { display: flex; justify-content: center; align-items: flex-end; gap: 24px; padding: 14px 8px 6px; }
.honor-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 18px 14px; padding: 8px 10px 12px; }
.honor { position: relative; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.honor.big { width: 150px; }
.honor.big.p1 { width: 172px; }
.honor-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 10px; text-align: center; color: var(--ink);
  background: #f4f1e8; box-shadow: inset 0 0 12px rgba(100,78,35,.18); }
.honor-photo { aspect-ratio: 1; overflow: hidden; background: #cfc9b8; }
.honor-photo .avatar { width: 100%; height: 100%; border-radius: 0; background: #cfc9b8; }
.honor-name { font: 700 19px/1.05 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.honor-meta { font: 12.5px/1.1 var(--f-text); color: var(--ink-soft); }
/* Титул за прошлый месяц («Чемпион подвала», система 18) — красной ручкой под фоткой. */
.honor-title { font: 700 15px/1.05 var(--f-hand); color: #b3261e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.honor.big .honor-title { margin-bottom: 6px; }   /* ярлык с местом наезжает на низ фотки */
.honor-place { position: absolute; left: 50%; bottom: -12px; padding: 3px 10px 4px; white-space: nowrap;
  font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1px; color: var(--ink);
  transform: translateX(-50%) rotate(-3deg); box-shadow: 0 2px 2px rgba(0,0,0,.4); }
.honor.p1 .honor-place { background: linear-gradient(#ffd75a, #e8b421); }
.honor.p2 .honor-place { background: linear-gradient(#e4e7ec, #aab1bb); }
.honor.p3 .honor-place { background: linear-gradient(#e7ad76, #c07c40); }
.honor-num { position: absolute; left: 7px; top: 5px; font: 700 26px/1 var(--f-hand); color: var(--pen-red);
  text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.honor.me::after { content: ""; position: absolute; inset: -10px -9px; border: 3px solid rgba(184,36,26,.85);
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%; transform: rotate(-4deg); pointer-events: none; }
.honor-you { position: absolute; right: -16px; top: -16px; font: 700 21px/1 var(--f-hand); color: var(--pen-red);
  transform: rotate(12deg); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.honor-mine { align-self: center; margin-top: 12px; padding: 3px 12px 4px; font: 700 20px/1.1 var(--f-hand); color: var(--ink);
  background: rgba(236,226,196,.95); transform: rotate(-1deg); clip-path: polygon(1% 5%, 99% 0, 100% 50%, 98.5% 100%, 0 93%, .8% 50%); }
/* стоя: три фотки в ряд не влезают — тройка лесенкой: первый крупно наверху, второй и третий под ним; остальные —
   по три в ряд, мельче тройки и на планшете (колонка не шире 116). «Это ты» — внутри доски: вылезет за край — окно
   поедет вбок. */
.tall .honor-top { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "one one" "two three";
  justify-items: center; align-items: start; gap: 18px 8px; padding: 12px 4px 4px; }
.tall .honor.big { width: 132px; }
.tall .honor.big.p1 { width: 156px; grid-area: one; }
.tall .honor.p2 { grid-area: two; }
.tall .honor.p3 { grid-area: three; }
.tall .honor-rest { grid-template-columns: repeat(3, minmax(0, 116px)); justify-content: center; gap: 18px 10px;
  padding: 8px 12px 12px; }
.tall .honor-rest .honor-card { padding: 8px 6px 10px; }          /* «ур. 40 · ⭐ 45 938» — в одну строку */
.tall .honor-name { font-size: 16px; }
.tall .honor.big .honor-name { font-size: 18px; }
.tall .honor-meta { font-size: 14px; }
.tall .honor-you { z-index: 3; right: -10px; top: -19px; }         /* поверх скотча: места сбоку нет */

/* ---------- карточка вещи: объявление покрупнее ---------- */
.modal {
  position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .15s ease-out;
}
.modal-card {
  width: 100%; max-width: 520px; padding: 16px 16px 14px;
  display: grid; grid-template-columns: 130px 1fr; gap: 5px 14px; align-items: start;
  transform: rotate(-.6deg); filter: drop-shadow(0 16px 30px rgba(0,0,0,.6));
  animation: pop .18s ease-out;
}
.modal-card > :not(.modal-art) { grid-column: 2; }
.modal-art { grid-row: 1 / span 6; width: 130px; height: 130px; }
.modal-art .art { width: 100%; height: 100%; }
.modal-card .big-title { text-align: left; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }

/* стоя: карточка вещи — по центру, как у всех (у низа её накрывал кореш: он садится туда же после прокачки). Итог
   попытки встаёт на место строки с шансами (шанс и так на кнопках, прибавку за промах итог называет сам), у места одна
   высота — две строки маркером, самый длинный итог: карточка не растёт, кнопки «ещё раз» не сдвигаются — жмётся сразу.
   Только когда кнопки есть (за ними .row): у прокачанной до упора и за замком строка — объяснение, её не прячем. */
.tall .up-head + .muted:has(+ .row), .tall .up-result:has(+ .muted + .row) { min-height: 42px; }
.tall .up-result + .muted:has(+ .row) { display: none; }
.tall .up .btn { min-height: 42px; font-size: 16px; }
.tall .up .btn .icon { width: 22px; height: 22px; }
.tall .up-chance { font-size: 13px; }
.tall .modal-card > .up + .row .btn { min-height: 42px; }
.tall .modal-card > .up + .row .btn:only-child { flex: 1; }     /* «Понял» в альбоме — во всю ширину */

/* ---------- сочность: отклик на действие ----------
   Полёты цифр живут вне сцены (в координатах окна), поэтому растут вместе с ней через --s. */
.fly {
  position: fixed; z-index: 20; pointer-events: none; white-space: nowrap;
  font: 700 calc(24px * var(--s))/1 var(--f-hand); color: var(--seeds);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.9);
  transform: translate(-50%, -50%); animation: fly 1.05s ease-out forwards;
}
.fly.blue { color: var(--blue); }
.fly.red { color: #ff6b61; }
.fly.crit { font-size: calc(38px * var(--s)); }
@keyframes fly {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  18%  { opacity: 1; transform: translate(-50%, -90%) scale(1.2); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -330%) scale(1); }
}
.money.bump { animation: bump .4s ease-out; }
@keyframes bump { 40% { transform: scale(1.22); } }
.medals span.pop { display: inline-block; animation: medal .8s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes medal {
  0%   { transform: scale(0) rotate(-50deg); }
  55%  { transform: scale(2.1) rotate(12deg); }
  100% { transform: scale(1) rotate(0); }
}

.levelup {
  position: fixed; inset: 0; z-index: 19; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at center, rgba(242,194,48,.35), transparent 60%);
  animation: levelup-veil 1.5s ease-out forwards;
}
.levelup-num {
  width: calc(120px * var(--s)); height: calc(120px * var(--s)); border-radius: 50%; display: grid; place-items: center;
  font: 700 calc(58px * var(--s))/1 var(--f-print); color: #15171a; background: var(--seeds);
  box-shadow: 0 0 0 6px #000, 0 0 0 9px var(--seeds), 0 0 60px rgba(242,194,48,.8);
  animation: levelup-num 1.5s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
.levelup-text { font: 700 calc(18px * var(--s))/1 var(--f-print); letter-spacing: 3px; color: var(--seeds); text-shadow: 0 2px 0 #000; }
@keyframes levelup-veil { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes levelup-num { 0% { transform: scale(0) rotate(-25deg); } 35% { transform: scale(1.15) rotate(4deg); } 100% { transform: scale(1); } }

/* Кого мутит от движения — тому без полётов и вспышек: итог и так напишет кореш. */
@media (prefers-reduced-motion: reduce) {
  .fly, .levelup { display: none; }
  .bump, .pop, .rotate-phone { animation: none !important; }
  .bar i, .job-rule i { transition: none; }
  .spot { transition: none; }
}

/* ---------- итог действия: кореш на кортах ----------
   Вместо чёрной шторки поверх игры слева садится кореш и говорит, что вышло. Тычок ловят только сам кореш и облако:
   пустое место рядом с ними пропускает тычок к заметкам и кнопкам под ним (владелец 2026-09-25: кореш мешал быстро
   тыкать дела внизу экрана — полоса во всю ширину съедала нажатие). */
.say {
  position: absolute; left: 8px; bottom: 6px; right: 8px; z-index: 16; display: flex; align-items: flex-end; gap: 0;
  pointer-events: none; animation: koresh-in .22s ease-out;
}
.say-art, .say-bubble { pointer-events: auto; }
.say-art { width: 118px; flex: none; }
.say-art .art { width: 100%; aspect-ratio: 3 / 4; filter: drop-shadow(0 6px 10px rgba(0,0,0,.75)); }
.say-art .ph { border-radius: 12px; }
.say-bubble {
  position: relative; margin: 0 0 22px -10px; max-width: 460px; padding: 9px 13px; border-radius: 13px;
  background: #f4f1e8; color: #1a1b1e; font: 600 15px/1.3 var(--f-text);
  box-shadow: 0 4px 0 rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 5px;
}
.say-bubble::before {
  content: ""; position: absolute; left: -9px; bottom: 14px; border: 9px solid transparent;
  border-right-color: #f4f1e8; border-left: 0;
}
.say.bad .say-bubble { background: #f3dedb; }
.say .big { font: 700 16px/1.25 var(--f-print); }
.say .chip { background: rgba(0,0,0,.06); border-color: #b3a98d; color: #1a1b1e; }
.say .chip.good { color: #1f6b2a; border-color: rgba(31,107,42,.45); }
.say .chip.warn { color: #a3241c; border-color: rgba(163,36,28,.5); }
.say-phrase { font: 700 18px/1.1 var(--f-hand); color: #5a5347; }
@keyframes koresh-in { from { transform: translate(-22px, 18px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .say { animation: none; } }

/* ---------- телефон боком: сцена ниже 520 условных пикселей — окна плотнее ---------- */
.short .win { gap: 6px; padding: 8px 10px; }
.short .win.board { padding: 0 4px 4px; border-width: 16px; }
.short .win-head { gap: 8px; }
.short .win-photo .art { width: 40px; height: 48px; border-width: 3px 3px 8px; }
.short .win-strip { margin-top: 2px; }
.short .strip { padding: 4px 18px 5px 12px; }
.short .win-title { font-size: 19px; }
.short .win-sub { display: none; }
.short .win-x { width: 38px; height: 38px; }
.short .win-tabs button { padding: 5px 10px; font-size: 12px; }
.short .win-body.paper { padding: 8px 10px; }
.short .goods { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.short .sheet { padding: 12px 6px 8px; }
.short .good { --tear-gap: 40px; }
.short .good-art { width: 56px; height: 56px; }
.short .good-name { font-size: 13px; }
.short .good-stats { font-size: 13px; }
.short .buy { padding: 4px 9px; font-size: 14px; }
.short .buy .icon { width: 18px; height: 18px; }
.short .win.gazeta > .win-x { right: -6px; top: -8px; }
.short .gz-page { padding: 10px 12px 8px; gap: 6px 10px; }
.short .gz-name { font-size: 26px; }
.short .gz-line span:nth-child(2), .short .gz-runner span:nth-child(2) { display: none; }
.short .job { grid-template-columns: 30% 1fr; gap: 2px 8px; padding: 4px 4px 6px; }
.short .job.lead { grid-template-columns: 34% 1fr; }
.short .job-title, .short .job.lead .job-title { font-size: 14.5px; }
.short .job-lede, .short .gz-news, .short .gz-box { display: none; }
.short .job-terms { gap: 6px; }
.short .job-terms .chip, .short .job-cost { font-size: 13px; }
.short .win.tetrad > .win-x { right: -6px; top: -8px; }
.short .td { padding: 6px 14px 8px 50px; background-position: -16px 0, 0 0, 0 0, 0 0, 0 0; }
.short .td::before { left: 8px; top: 6px; background-size: 16px 20px; }
.short .td-title { font-size: 28px; }
.short .td-district { font-size: 21px; }
.short .td-sub, .short .td-text { display: none; }
.short .td-row { grid-template-columns: 76px minmax(0, 1fr) 124px 232px; gap: 10px; padding: 5px 0 6px; }
.short .td-name { font-size: 20px; }
.short .td-roof-text { display: none; }                /* уровень крыши видно по треугольникам */
.short .td-cash { margin-top: 2px; }
.short .td-cash b { font-size: 21px; }
.short .td-rate, .short .td-top, .short .td-wait { font-size: 16px; }
.short .td-note { margin-top: 1px; font-size: 12px; line-height: 1.2; }
.short .td-act { margin-top: 5px; font-size: 20px; }
.short .fp-side { width: 212px; bottom: 44px; gap: 6px; }
.short .fp-me { width: 212px; bottom: 8px; }
.short .fp-title { font-size: 16px; }
.short .fp-sub { font-size: 12.5px; }
.short .fp-name .strip { padding: 4px 12px 5px 10px; }
.short .fp-sheet { padding: 8px 10px; font-size: 13px; gap: 4px; }
.short .fp-ladder { left: 236px; right: 58px; gap: 6px; }
.short .fp .medallion { width: 34px; }
.short .fp .face { width: 32px; height: 32px; }
.short .fp-log { bottom: 40px; }
.short .fp-cap { font-size: 13.5px; }
.short .fp-hint { font-size: 15px; bottom: 8px; }
.short .fp-stamp { font-size: 34px; }
.short .fp-lockmsg { font-size: 19px; }
.short .honor.big { width: 110px; }
.short .honor.big.p1 { width: 124px; }
.short .honor-top { gap: 16px; padding-top: 8px; }
.short .honor-rest { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.short .honor-name { font-size: 16px; }
.short .doll.stand { height: 150px; }

/* ---------- качалка: стена подвальной качалки ----------
   Побелка сверху, масляная зелень снизу, тёмный отбойник между ними (решение владельца: у каждого окна свой облик —
   не доска и не подвал с мелом). Название — трафаретом краской, вывеска — листок на скотче, у каждой характеристики —
   гриф с блинами: блин — сделанный подход, контур — открыт уровнем, не куплен; каждый пятый выше. */
.win.kachalka { max-width: 1040px; padding: 14px 20px 16px; border: 3px solid #0e100f; border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, transparent 0 37.6%, rgba(20,22,18,.75) 38%, rgba(20,22,18,.75) 39.4%, transparent 39.8%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #b7b09c 0, #a49d89 37%, #35532f 40%, #2b4327 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.45), 0 12px 26px rgba(0,0,0,.7); }
.win.kachalka > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; }
.win.kachalka .win-body { padding: 0 2px 2px; overflow-y: auto; gap: 0; scrollbar-width: thin; scrollbar-color: #8a8f95 transparent; }
.kz-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 8px; }
.kz-title { flex: none; padding: 4px 0 0 4px; font: 700 42px/1 var(--f-print); text-transform: uppercase; letter-spacing: 5px;
  color: rgba(176,38,28,.92); transform: rotate(-1.4deg);
  text-shadow: 0 0 5px rgba(176,38,28,.45), 1px 1px 0 rgba(0,0,0,.25); }
.kz-note { position: relative; max-width: 560px; margin-left: auto; padding: 8px 12px 9px; font: 15px/1.25 var(--f-text);
  color: var(--ink); transform: rotate(.8deg); box-shadow: 0 3px 6px rgba(0,0,0,.45); }
.kz-note .tape.l { left: 40%; top: -9px; transform: rotate(-3deg); }
.kz-row { display: grid; grid-template-columns: 210px 1fr auto; gap: 16px; align-items: center; padding: 9px 6px 10px;
  border-bottom: 2px dashed rgba(236,230,214,.14); }
.kz-row:last-of-type { border-bottom: 0; }
.kz-stat { min-width: 0; }
.kz-name { font: 700 24px/1 var(--f-print); text-transform: uppercase; letter-spacing: 2.5px; color: #ece6d6;
  text-shadow: 1px 1px 0 rgba(0,0,0,.65); }
.kz-about { margin-top: 2px; font: 14px/1.15 var(--f-text); color: #c9c3b0; }
.kz-total { margin-top: 3px; font: 700 17px/1 var(--f-hand); color: #f2c230; }
.kz-bar { position: relative; min-height: 52px; display: flex; align-items: center; padding-right: 58px; }
.kz-rod { position: absolute; left: 0; right: 0; top: 50%; height: 9px; margin-top: -4px; border-radius: 5px;
  background: linear-gradient(#d3d7da, #7a8085 50%, #3e4347); box-shadow: 0 2px 3px rgba(0,0,0,.65); }
.kz-plates { position: relative; display: flex; align-items: center; gap: 2px; margin-left: 14px; flex-wrap: wrap; row-gap: 3px; }
.kz-plate { width: 9px; height: 36px; border-radius: 2px; border: 1.5px dashed rgba(236,230,214,.38); background: rgba(0,0,0,.14); }
.kz-plate:nth-child(5n+1) { height: 46px; }
.kz-plate.on { border: 1px solid #0b0d0e; background: linear-gradient(90deg, #454a4e, #24282b 55%, #55595d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 1px 3px rgba(0,0,0,.7); }
.kz-count { position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(2deg); font: 700 22px/1 var(--f-hand);
  color: #ece6d6; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
.kz-go { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 124px; padding: 7px 14px 8px;
  border: 2px solid #4d1712; border-radius: 3px; background: linear-gradient(#d2503f, #b23a2e); color: #fff;
  font: 700 17px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; transform: rotate(-1.2deg);
  box-shadow: 0 3px 0 #4d1712, 0 5px 9px rgba(0,0,0,.45); transition: transform .06s, box-shadow .06s; }
.kz-go:hover { filter: brightness(1.06); }
.kz-go:active { transform: translateY(2px) rotate(-1.2deg); box-shadow: 0 1px 0 #4d1712; }
.kz-go[disabled] { opacity: .55; pointer-events: none; filter: saturate(.5); }
.kz-price { display: inline-flex; align-items: center; gap: 4px; font: 700 17px/1 var(--f-hand); text-transform: none; letter-spacing: 0; }
.kz-price .icon { width: 18px; height: 18px; }
.kz-capped { max-width: 140px; text-align: center; font: 700 16px/1.1 var(--f-hand); color: #d9d2bd; }
.kz-rules { margin-top: 8px; padding: 0 6px; font: 14px/1.25 var(--f-text); color: #c9c3b0; }
body.busy .kz-go { pointer-events: none; }
.short .win.kachalka { padding: 8px 12px 10px; }
.short .win.kachalka > .win-x { right: -6px; top: -8px; }
.short .kz-title { font-size: 28px; letter-spacing: 3px; }
.short .kz-note { display: none; }
.short .kz-head { margin-bottom: 2px; }
.short .kz-row { grid-template-columns: 150px 1fr auto; gap: 10px; padding: 4px 4px 5px; }
.short .kz-name { font-size: 18px; }
.short .kz-about { display: none; }
.short .kz-bar { min-height: 34px; padding-right: 48px; }
.short .kz-plate { width: 7px; height: 22px; }
.short .kz-plate:nth-child(5n+1) { height: 30px; }
.short .kz-count { font-size: 18px; }
.short .kz-go { min-width: 104px; padding: 5px 10px 6px; font-size: 14px; }
.short .kz-rules { display: none; }
/* Стоя: та же стена, штанги друг под другом. Побелка — полосой под названием и вывеской, отбойник — её нижний край
   (по высоте вывески, а не долей окна: иначе светлые буквы первой штанги легли бы на побелку). У штанги — название
   и «Подход» справа, под большим пальцем; строкой ниже — сколько у тебя и счёт подходов, гриф — под ними во всю ширину:
   сорок блинов в ряд. */
.tall .win.kachalka { padding: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.35), transparent 60%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #35532f, #2b4327); }
.tall .win.kachalka > .win-x { right: -4px; top: -6px; }
.tall .win.kachalka .win-body { padding: 0 0 4px; }
.tall .kz-head { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding: 12px 14px 14px;
  border-bottom: 7px solid rgba(20,22,18,.8);
  background: repeating-linear-gradient(92deg, rgba(255,255,255,.035) 0 2px, transparent 2px 7px),
              linear-gradient(180deg, #b7b09c, #a49d89);
  box-shadow: inset 0 22px 30px -22px rgba(0,0,0,.45); }
.tall .kz-title { padding: 2px 44px 0 2px; font-size: 34px; letter-spacing: 4px; }   /* справа — крестик окна */
.tall .kz-note { max-width: none; margin: 0 4px; padding: 7px 10px 8px; font-size: 15px; }
.tall .kz-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "about go" "total total" "bar bar";
  gap: 2px 12px; padding: 9px 12px 10px; }
.tall .kz-stat { display: contents; }
.tall .kz-name { grid-area: name; align-self: end; font-size: 23px; letter-spacing: 2px; }
.tall .kz-about { grid-area: about; align-self: start; font-size: 15px; }
.tall .kz-total { grid-area: total; margin-top: 4px; padding-right: 58px; font-size: 18px; line-height: 1.1; }
.tall .kz-go, .tall .kz-capped { grid-area: go; align-self: center; }
.tall .kz-go { min-width: 118px; }
.tall .kz-capped { max-width: 118px; text-wrap: balance; }   /* потолок — по ширине «Подхода», строки поровну */
/* Счёт подходов — над правым концом грифа, в строке «у тебя»: сорок блинов забирают гриф целиком. */
.tall .kz-bar { grid-area: bar; min-height: 38px; margin-top: 2px; padding-right: 0; }
.tall .kz-count { top: auto; bottom: 100%; transform: rotate(2deg); font-size: 20px; }
.tall .kz-plates { margin-left: 8px; }
.tall .kz-plate { width: 7px; height: 26px; }
.tall .kz-plate:nth-child(5n+1) { height: 34px; }
.tall .kz-rules { margin-top: 4px; padding: 0 14px 8px; font-size: 15px; }

/* ---------- подпольные бои: стена подвала с мелом ----------
   Бетон, лампочка, мел: у окна свой облик (решение владельца — не доска объявлений). Фотка бойца приклеена на скотч,
   топ — меловая таблица. Кнопка «Выйти на ринг» — красная, как у всего, что бьёт. */
.win.podval { max-width: 1040px; padding: 14px 18px 16px; border: 3px solid #101214; border-radius: 3px;
  background: #34383c radial-gradient(ellipse at 30% 0%, rgba(255,236,190,.16), transparent 55%),
              #34383c repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 3px, transparent 3px 9px);
  box-shadow: inset 0 0 90px rgba(0,0,0,.55), 0 12px 26px rgba(0,0,0,.7); }
.win.podval > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; }
.win.podval .win-body { padding: 0; overflow: hidden; }
.pd { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.pd-left, .pd-right { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: #8a8f95 transparent; }
.pd-right { border-left: 2px solid rgba(236,230,212,.35); padding-left: 16px; }
.chalk { font-family: var(--f-hand); color: #ede9df; text-shadow: 0 0 1px rgba(255,255,255,.35), 0 1px 0 rgba(0,0,0,.4); }
.pd-title { font: 700 34px/1 var(--f-hand); text-transform: uppercase; letter-spacing: 1px; transform: rotate(-1.2deg);
  text-decoration: underline wavy rgba(237,233,223,.55); text-underline-offset: 6px; }
.pd-intro { font-size: 17px; line-height: 1.2; color: #cfcbc0; }
.pd-me { display: flex; flex-direction: column; gap: 2px; font-size: 19px; line-height: 1.15; }
.pd-muted { color: #b9b5aa; font-size: 16px; }
.pd-h { font: 700 26px/1 var(--f-hand); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.pd-card { display: flex; gap: 12px; align-items: flex-start; padding: 8px 6px 6px 2px; border-top: 1px dashed rgba(237,233,223,.35); }
.pd-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pd-fname { font: 700 24px/1.05 var(--f-hand); }
.pd-photo { position: relative; flex: none; width: 104px; padding: 5px 5px 16px; background: #f3efe3; transform: rotate(-3deg);
  box-shadow: 0 4px 8px rgba(0,0,0,.5); }
.pd-photo .tape.r { right: -12px; top: -8px; transform: rotate(28deg); }
.pd-photo-img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; background: #cfc6b0; }
.pd-photo .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: 0; }
.pd-card .chip { background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df; }
.pd-card .chip.warn { color: #ff8d84; }
.pd-card .fight-warn { color: #ff8d84; font: 700 18px/1.1 var(--f-hand); }
.pd-go { align-self: flex-start; min-height: 44px; padding: 8px 26px; font-size: 19px; transform: rotate(-.8deg);
  position: sticky; bottom: 4px; z-index: 1; }   /* левая колонка прокручивается — главная кнопка остаётся на виду */
.pd-top { display: flex; flex-direction: column; gap: 1px; font-size: 18px; line-height: 1.2; }
.pd-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: baseline; padding: 1px 4px;
  border-bottom: 1px solid rgba(237,233,223,.18); }
.pd-row.me { background: rgba(255,225,120,.14); outline: 2px solid rgba(255,225,120,.45); outline-offset: -2px; }
.pd-place { color: #b9b5aa; }
.pd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-depth { font-weight: 700; }
.pd-rank { color: #b9b5aa; font-size: 15px; }
.pd-rules { margin-top: auto; padding-top: 8px; font-size: 15px; line-height: 1.2; color: #b9b5aa; }
/* В бою: этаж и разряд мелом на табличке справа сверху, листок бойца — как у босса. */
.pd-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 4px 12px 6px; margin-left: auto;
  background: rgba(40,43,46,.9); border: 2px solid #101214; transform: rotate(1.5deg); font-family: var(--f-hand); color: #ede9df;
  pointer-events: none; }
.pd-badge b { font-size: 24px; line-height: 1; }
.pd-badge span { font-size: 15px; color: #b9b5aa; }
/* Сезон — месяц: строка мелом под заголовком; итог прошлого месяца — в блоке «у тебя». */
.pd-season { font-size: 18px; line-height: 1.15; color: #ffe9a8; transform: rotate(-.6deg); }
.pd-past { margin-top: 3px; font-size: 17px; color: #cfcbc0; }
.pd-past .chip, .pd-me .chip { background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df; padding: 0 6px;
  font-size: 15px; vertical-align: 1px; }
.pd-title-tag { color: #ffe9a8; }
/* Справа — вкладки мелом: топ месяца, лиги месяца, прошлый месяц; выбранная подчёркнута, как заголовок. */
.pd-tabs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; padding-right: 34px; }   /* справа — крестик окна */
.pd-tab { padding: 0 0 3px; border: 0; background: none; cursor: pointer; font: 700 22px/1 var(--f-hand); color: #b9b5aa;
  text-transform: uppercase; letter-spacing: .6px; text-shadow: inherit; }
.pd-tab.on { color: #ede9df; text-decoration: underline wavy rgba(237,233,223,.55); text-underline-offset: 5px; }
.pd-leagues { display: flex; flex-direction: column; gap: 1px; font-size: 18px; line-height: 1.2; }
.pd-league { display: grid; grid-template-columns: 18px 1fr auto 58px; gap: 8px; align-items: center; padding: 2px 4px;
  border-bottom: 1px solid rgba(237,233,223,.18); }
.pd-league .chip { justify-self: end; background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df;
  padding: 0 6px; font-size: 15px; }
.pd-league.got { color: #9aa69a; }
.pd-league.got .pd-league-name { text-decoration: line-through rgba(237,233,223,.5); }
.pd-league.got .chip { opacity: .55; }
.pd-league.here { background: rgba(255,225,120,.14); outline: 2px solid rgba(255,225,120,.45); outline-offset: -2px; color: #ede9df; }
.pd-league.here .pd-league-name { text-decoration: none; }
.pd-league-mark { color: #ffe9a8; font-weight: 700; }
.pd-league-from { color: #b9b5aa; font-size: 15px; }
.pd-row-past .chip { justify-self: end; background: rgba(0,0,0,.25); border-color: rgba(237,233,223,.35); color: #ede9df;
  padding: 0 6px; font-size: 14px; }
.short .pd { gap: 10px; }
.short .pd-title { font-size: 26px; }
.short .pd-intro { display: none; }
.short .pd-tab { font-size: 18px; }
.short .pd-season, .short .pd-past { font-size: 15px; }
.short .pd-me { font-size: 17px; }
/* Телефон боком: без описания бойца — «Выйти на ринг» должна быть видна без прокрутки. */
.short .pd-card-text > .pd-muted { display: none; }
.short .pd-photo { width: 78px; }
/* Стоя: колонки друг под другом — сверху «у тебя» и боец, под чертой мелом вкладки с топом. Листает всё окно
   (app.js, winRing), а «Выйти на ринг» — на полу под стеной (pd-foot): на виду без прокрутки, стена уходит под пол.
   Всё — через .win.podval: листок бойца в бою собран из тех же pd-*. */
.tall .win.podval { height: 100%; padding: 10px 0 0; }
.tall .win.podval > .win-x { right: -4px; top: -6px; }
/* Стена листается под крестиком: у него текст гаснет (маска в углу), а не режется наклейкой посередине строки.
   Прокрутка — контейнер podval: по его высоте ниже решается, что убрать на коротком экране. */
.tall .win.podval .win-body { overflow-y: auto; gap: 0; padding: 0 12px 0 10px; container: podval / size;
  -webkit-mask-image: radial-gradient(circle at calc(100% - 17px) 5px, transparent 24px, #000 34px);
          mask-image: radial-gradient(circle at calc(100% - 17px) 5px, transparent 24px, #000 34px); }
.tall .win.podval .pd { flex: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 10px; }
.tall .win.podval .pd-left, .tall .win.podval .pd-right { min-height: auto; overflow: visible; padding-right: 0; }
.tall .win.podval .pd-right { padding: 4px 0 0; border-left: 0; border-top: 2px solid rgba(236,230,212,.35); }
.tall .win.podval .pd-title { font-size: 30px; }
.tall .win.podval .pd-season { font-size: 16px; }
.tall .win.podval .pd-intro { font-size: 16px; }
.tall .win.podval .pd-me { font-size: 17px; }
.tall .win.podval .pd-past { font-size: 15px; }
.tall .win.podval .pd-photo { width: 84px; }
.tall .win.podval .pd-fname { font-size: 22px; }
.tall .win.podval .pd-card .chip { font-size: 15px; }
/* Вкладки мелом — под палец: тычок по высоте с кнопку, а не с букву. */
.tall .win.podval .pd-tabs { gap: 0 10px; margin-bottom: 0; padding-right: 0; }
.tall .win.podval .pd-tab { padding: 8px 4px 9px; }
.tall .win.podval .pd-rules { margin-top: 2px; }
/* Кнопка стоит на полу подвала: тёмная полоса во всю ширину стены с кромкой плинтуса, стена листается под неё, как под
   порог, — кромка резкая, тень от неё короткая. Погасшая кнопка (отлёживаешься) полупрозрачна — пол под ней глухой.
   Цвет пола свой, не от стены: фон стены .win.podval браузер не принимает (цвет не в последнем слое) — починят, пол
   останется полом. Пока текста меньше стены, пол — внизу (margin-top: auto). */
.tall .win.podval .pd-foot { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: center;
  margin: auto -12px 0 -10px; padding: 10px 12px 8px 10px; border-top: 2px solid rgba(236,230,212,.2);
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 3px, transparent 3px 9px), #131413;
  box-shadow: 0 -7px 9px -3px rgba(0,0,0,.6); }
.tall .win.podval .pd-go { position: static; min-width: 72%; min-height: 48px; padding: 8px 26px; font-size: 20px; }
/* Короткий экран стоя (Telegram не во весь экран, маленький телефон): без вступления и описания бойца, как боком
   (.short), — тогда над полом видны вкладки и начало топа. */
@container podval (max-height: 660px) and (max-width: 440px) {
  .win.podval .pd-intro, .win.podval .pd-card-text > .pd-muted { display: none; }
}

/* ---------- мобила в шапке: труба с номерком «сколько не забрано» ----------
   Свободное место шапки (.hud-free) — под новые показатели; мобила встаёт первой, справа, у денег. */
.hud-free { display: flex; align-items: center; justify-content: flex-end; }
.hud-phone { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.hud-phone .icon { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px #000); }
.hud-phone em { position: absolute; right: -6px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  font: 700 14px/1 var(--f-hand); font-style: normal; color: #15130e; background: #f5c928; border-radius: 3px; transform: rotate(8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hud-phone.buzz .icon { animation: buzz 2.4s ease-in-out infinite; }
@keyframes buzz { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(-9deg); } 86% { transform: rotate(9deg); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(6deg); } }

/* ---------- случай на деле: кнопки выбора в пузыре кореша ---------- */
.say.pinned .say-bubble { max-width: 560px; }
.case-title { color: #a3241c; }
.case-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.case-opt { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 118px; padding: 6px 12px 7px;
  background: #f2c230; color: #17150f; border-radius: 2px; box-shadow: 0 3px 0 #8a6a0c, 0 4px 8px rgba(0,0,0,.3); text-align: left;
  transition: transform .06s, box-shadow .06s, filter .1s; }
.case-opt:hover { filter: brightness(1.06); }
.case-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6a0c; }
.case-opt.off { background: #cfc8b4; color: #6b665c; box-shadow: 0 3px 0 #8a8570; pointer-events: none; }
.case-label { font: 700 15px/1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; }
.case-opt .chip { padding: 0 6px; font-size: 12.5px; background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.25); color: #17150f; }
.case-opt .chip.warn { color: #a3241c; }
.case-opt .chip.coin .icon { width: 16px; height: 16px; }
.case-blocked { font: 700 15px/1 var(--f-hand); color: #a3241c; }

/* ---------- мобила: кнопочная труба (картинка prop/mobila) ----------
   Труба нарисована целиком (900×1200, без фона) и показывается крупнее сцены: верх с динамиком под шапкой, низ с клавишами
   уходит за нижний край — держишь её перед собой. Эсэмэски лежат на экране трубы: где он в кадре картинки — --lcd-*
   (доли кадра, измерены по картинке; перерисовал трубу — перемерь: scripts/art/prompts.json, prop/mobila). */
.win.mobila { position: absolute; left: 50%; top: -2%; height: 160%; width: auto; aspect-ratio: 3 / 4; max-width: none; max-height: none;
  translate: -50% 0; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.7));
  --lcd-l: 33.33%; --lcd-t: 26.75%; --lcd-w: 34.44%; --lcd-h: 33.50%; }
/* Крестика у трубы нет (владелец): закрывается тычком мимо неё — app.js, hitArt. */
.win.mobila .win-body { position: absolute; inset: 0; padding: 0; overflow: visible; display: block; }
.phone-art { position: absolute; inset: 0; }
.phone-body { width: 100%; height: 100%; object-fit: contain; }
.phone-art .ph { position: absolute; inset: 0; border-radius: 40px; }
/* Экран трубы: сам зелёный на картинке, сверху только лёгкая строчная сетка и текст. */
.lcd { position: absolute; left: var(--lcd-l); top: var(--lcd-t); width: var(--lcd-w); height: var(--lcd-h);
  display: flex; flex-direction: column; padding: 3% 4% 3.5%; color: #16241a;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.045) 0 1px, transparent 1px 3px); border-radius: 3px; }
.lcd-bar { display: flex; justify-content: space-between; padding: 0 2px 3px; border-bottom: 1px solid rgba(20,40,20,.45);
  font: 700 11px/1 var(--f-print); letter-spacing: 1px; }
.lcd-title { margin: 5px 2px 3px; font: 700 14px/1 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; }
.lcd-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 5px;
  padding: 1px 2px 4px; scrollbar-width: thin; scrollbar-color: #4c5a45 transparent; }
.lcd-list > * { flex-shrink: 0; }
.sms { padding: 4px 6px 5px; border: 1px solid rgba(20,40,20,.35); background: rgba(255,255,255,.16); }
.sms.new { background: rgba(255,255,255,.34); border-color: rgba(20,40,20,.6); }
.sms-head { display: flex; justify-content: space-between; gap: 8px; font: 12px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; }
.sms-head b { font-weight: 700; }
.sms-text { margin-top: 2px; font: 14px/1.25 var(--f-text); }
.sms-gift { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.sms-gift .chip { background: rgba(0,0,0,.08); border-color: rgba(20,40,20,.4); color: #16241a; }
.sms-gift .btn { margin-left: auto; }
.sms-done { margin-left: auto; font: 700 15px/1 var(--f-hand); color: #3b5a3a; }
.sms-empty { padding: 12px 6px; text-align: center; font: 14px/1.3 var(--f-text); opacity: .8; }
.short .win.mobila { height: 185%; top: -7%; }
.short .sms-text { font-size: 13px; }
/* стоя: труба крупно, по бокам — полоска двора (у пальца: тычок туда закрывает), над трубой у антенны двор пошире; низ
   с клавишами уходит за нижний край, как боком. Окно — весь слой, а труба меряется от него (cqw, cqh): на телефоне — от
   ширины, на планшете и в узком окне ПК — от высоты, иначе экран трубы уехал бы за низ. Буквы на экране — от ширины трубы
   (она сама контейнер): на телефоне крупнее, чем боком, а в почти квадратном окне ПК, где экран узкий, — как боком. */
.tall .win.mobila { inset: 0; width: auto; height: auto; aspect-ratio: auto; translate: none; padding: 0; container-type: size; }
.tall .win.mobila .phone-art { inset: 0 auto auto 50%; width: min(176cqw, 125cqh); aspect-ratio: 3 / 4; translate: -50% -4%;
  container-type: inline-size; }
/* поля экрана стоя уже: зелёного вокруг текста меньше, строка шире */
.tall .win.mobila .lcd { padding: 3% 2.4% 3.5%; }
.tall .win.mobila .lcd-bar { gap: 4px; font-size: clamp(11px, 1.76cqw, 13px); white-space: nowrap; }
.tall .win.mobila .lcd-bar > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tall .win.mobila .lcd-title { margin: 6px 2px 4px; font-size: clamp(14px, 2.17cqw, 16px); }
.tall .win.mobila .lcd-list { gap: 6px; }
.tall .win.mobila .sms { padding: 5px 7px 6px; }
.tall .win.mobila .sms-head { font-size: clamp(12px, 1.9cqw, 14px); }
/* узкий экран: заголовок рвётся хоть посреди слова, дата стоит строкой — вбок ничего не уезжает */
.tall .win.mobila .sms-head b { min-width: 0; overflow-wrap: anywhere; }
.tall .win.mobila .sms-head span { flex: none; white-space: nowrap; }
.tall .win.mobila .sms-text { font-size: clamp(13px, 2.03cqw, 15px); }
.tall .win.mobila .sms-gift .chip { font-size: clamp(13px, 1.9cqw, 14px); }
.tall .win.mobila .sms-gift .btn { min-height: 36px; padding: 4px 14px; font-size: clamp(13px, 1.9cqw, 14px); }
.tall .win.mobila .sms-done { font-size: clamp(15px, 2.3cqw, 17px); }
.tall .win.mobila .sms-empty { font-size: clamp(14px, 2.03cqw, 15px); }

/* ---------- ползунок суммы (sumSlider в app.js): общак и взнос в общак бригады ----------
   Линия ручкой, по ней тянут скрутку бабок; слева от скрутки линия красная, как доля, подчёркнутая красной ручкой; по краям —
   самая малая сумма и «всё» маркером. Линия — под палец (44 пикселя высотой); палец на ней браузер не отдаёт прокрутке
   и жестам (touch-action), движение целиком у ползунка. */
.slide { --t: 1; display: flex; align-items: center; align-self: stretch; }
.slide-end { flex: none; padding: 4px 3px 6px; font: 700 19px/1 var(--f-hand); color: var(--ink-soft); white-space: nowrap; }
.slide-end:hover { color: var(--ink); }
.slide-line { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; touch-action: none; cursor: pointer; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.slide-rail { position: absolute; inset: 0 19px; }
.slide-ink { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px;
  background: rgba(29,27,23,.45); }
.slide-ink::after { content: ""; position: absolute; left: 0; top: -1px; width: calc(var(--t) * 100%); height: 4px; border-radius: 2px;
  background: rgba(184,36,26,.85); }
.slide-knob { position: absolute; left: calc(var(--t) * 100%); top: 50%; width: 38px; height: 38px; translate: -50% -50%;
  rotate: -14deg; filter: drop-shadow(0 3px 2px rgba(0,0,0,.35)); transition: scale .12s, rotate .12s; }
.slide-knob .art { width: 100%; height: 100%; }
.slide-knob .ph { border-radius: 50%; }
.slide-knob .ph-label { display: none; }
.slide-line.on .slide-knob { scale: 1.18; rotate: -4deg; }
.slide-line:focus-visible .slide-knob { outline: 2px dashed rgba(184,36,26,.85); outline-offset: 1px; border-radius: 50%; }
.short .slide-line { height: 36px; }
.short .slide-knob { width: 32px; height: 32px; }

/* ---------- общак: коробка из-под печенья (картинка prop/obshchak) ----------
   Коробка нарисована целиком (900×1200, без фона): крышка стоит на ребре за открытой коробкой, в коробке — скрутки на
   резинке. На крышке — полоса малярного скотча «Общак», белым маркером «не трогать!» и сумма; где крышка в кадре — --lid-*
   (доли кадра, измерены по картинке; перерисовал коробку — перемерь: scripts/art/prompts.json, prop/obshchak). Рядом —
   записка под скотчем: сколько на руках, закинуть и забрать; кнопки обведены красной ручкой, как в тетрадке точек.
   Крестика нет, как у мобилы: закрывается тычком мимо коробки и записки (app.js, hitArt и win-keep). */
.win.banka { width: auto; max-width: none; height: 100%; max-height: none; padding: 0; gap: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
  --lid-l: 24%; --lid-t: 12.5%; --lid-w: 52%; --lid-h: 36%; }
.win.banka .win-body { flex-direction: row; align-items: center; gap: 0; height: 100%; padding: 0; overflow: visible; }
.banka-art { position: relative; flex: none; height: 104%; aspect-ratio: 3 / 4; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.banka-body { width: 100%; height: 100%; object-fit: contain; }
.banka-art .ph { position: absolute; inset: 6%; border-radius: 50%; }
.banka-lid { position: absolute; left: var(--lid-l); top: var(--lid-t); width: var(--lid-w); height: var(--lid-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.banka-tape { padding: 3px 18px 5px; font: 700 30px/1 var(--f-hand); letter-spacing: 1px; color: var(--ink);
  background: rgba(236,226,196,.96); transform: rotate(-6deg); filter: drop-shadow(0 2px 1px rgba(0,0,0,.45));
  clip-path: polygon(1% 6%, 34% 2%, 99% 0, 100% 50%, 98.5% 100%, 60% 97%, 0 93%, .8% 50%); }
.banka-warn { margin-top: 6px; font: 700 19px/1 var(--f-hand); color: #f1e9d2; transform: rotate(-3deg);
  text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.banka-sum { margin-top: 4px; font: 700 40px/1 var(--f-hand); color: #f7f0dc; transform: rotate(-2deg); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.banka-sum.empty { font-size: 26px; opacity: .8; }
.banka-note { --pencil: #6f6c66; position: relative; flex: none; width: 300px; max-height: 100%; margin-left: -14px; padding: 16px 18px 12px;
  display: flex; flex-direction: column; gap: 9px; overflow-y: auto; transform: rotate(1.3deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.banka-note .tape { left: 50%; margin-left: -21px; top: -5px; }
.bk-hand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 7px;
  border-bottom: 1px dashed rgba(29,27,23,.3); font: 700 14px/1 var(--f-print); letter-spacing: .8px; text-transform: uppercase; }
.bk-hand b { display: inline-flex; align-items: center; gap: 4px; font: 700 28px/1 var(--f-hand); letter-spacing: 0; text-transform: none; }
.bk-hand .icon { width: 26px; height: 26px; }
.bk-block { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.bk-block + .bk-block { padding-top: 8px; border-top: 1px dashed rgba(29,27,23,.3); }
.bk-title { font: 700 14px/1 var(--f-print); letter-spacing: .8px; text-transform: uppercase; }
.bk-go { position: relative; margin: 4px 0 0 7px; padding: 4px 12px 6px; font: 700 25px/1 var(--f-hand); color: var(--pen-red);
  transform: rotate(-2deg); }
.bk-go::after { content: ""; position: absolute; inset: -3px -7px; border: 2.5px solid rgba(184,36,26,.85);
  border-radius: 50% 46% 52% 48% / 58% 46% 54% 42%; transform: rotate(2.5deg); pointer-events: none; }
.bk-go:hover { filter: brightness(1.25); }
.bk-go:active { translate: 0 2px; }
.bk-go:disabled { color: #9a968c; cursor: default; }
.bk-go:disabled::after { border: 2px dashed rgba(120,115,105,.45); }
body.busy .bk-go { pointer-events: none; }
.bk-hint { font: 700 17px/1.1 var(--f-hand); color: var(--pencil); }
.bk-rules { font: 12.5px/1.25 var(--f-text); color: var(--ink-soft); }
/* строчка кореша со значком коробки: «закинул», «добрал из общака» */
.with-icon { display: flex; align-items: center; gap: 6px; }
.with-icon > .icon { flex: none; width: 24px; height: 24px; }
.short .banka-note { width: 272px; padding: 12px 14px 10px; gap: 5px; }
.short .bk-hand { padding-bottom: 4px; }
.short .bk-block { gap: 3px; }
.short .bk-block + .bk-block { padding-top: 5px; }
.short .bk-rules { display: none; }
.short .bk-go { font-size: 22px; }
.short .banka-sum { font-size: 34px; }
.short .banka-tape { font-size: 25px; }
/* стоя: записка внизу, под большим пальцем, коробка — над ней и заходит низом под записку: крышку видно целиком, скрутки
   тоже, прячется только нижний бок. Коробка берёт, сколько записка оставила по высоте (подставка .banka-stand меряет место:
   cqw, cqh), и не шире слоя; вокруг крышки — двор: тычок туда закрывает. Буквы на крышке — от ширины коробки. */
.tall .win.banka { width: 100%; height: 100%; padding: 0; container-type: size; }
.tall .win.banka .win-body { flex-direction: column; align-items: center; justify-content: flex-end; }
.tall .banka-stand { flex: 1 1 0; min-height: 150px; width: 100%; display: flex; align-items: flex-end; justify-content: center;
  container-type: size; }
/* 22 % высоты кадра — под запиской: низ кадра прозрачный, дальше бок коробки до скруток */
.tall .banka-art { height: auto; width: min(92cqw, 96cqh); translate: 0 22%; container-type: inline-size; }
.tall .banka-tape { font-size: clamp(20px, 9cqw, 40px); padding: .1em .6em .17em; }
.tall .banka-warn { font-size: clamp(14px, 5.6cqw, 24px); }
.tall .banka-sum { font-size: clamp(24px, 11.5cqw, 48px); }
.tall .banka-sum.empty { font-size: clamp(18px, 7.5cqw, 32px); }
.tall .banka-note { z-index: 1; flex: 0 1 auto; min-height: 0; width: min(100%, 400px); max-height: none; margin: 0 0 2px;
  padding: 14px 18px 12px; gap: 8px; transform: rotate(-.8deg); }
/* Всё про записку — через .banka-note: ползунок (.slide) рисует и карточка общака бригады, её не трогаем.
   Кнопки — под палец; подсказка встаёт справа от кнопки, а не влезла (кнопка с большой суммой) — строкой ниже. */
.tall .banka-note .bk-hand, .tall .banka-note .bk-title { font-size: 15px; }
.tall .banka-note .bk-block { flex-flow: row wrap; align-items: center; gap: 3px 14px; }
.tall .banka-note .bk-title, .tall .banka-note .slide { flex: 1 0 100%; }
.tall .banka-note .bk-go { flex: none; margin: 5px 0 3px 8px; padding: 6px 14px 8px; font-size: 26px; }
.tall .banka-note .bk-hint { flex: 1 1 0; min-width: 8em; font-size: 18px; line-height: 1.05; }
.tall .banka-note .bk-rules { font-size: 13.5px; line-height: 1.3; }
/* Слой пониже (Telegram не во весь экран, маленький телефон, планшет): правила ещё влезают, коробка поменьше.
   Почти квадратное окно ПК — правила убираем, как боком, записку ужимаем: «Забрать» видно без прокрутки, а коробке
   с суммой на крышке остаётся хоть сколько-то. */
@container (max-height: 560px) {
  .tall .banka-stand { min-height: 110px; }
  .tall .banka-note { padding: 10px 16px 8px; gap: 4px; }
  .tall .banka-note .bk-hand { padding-bottom: 4px; }
  .tall .banka-note .bk-block { row-gap: 1px; }
  .tall .banka-note .bk-block + .bk-block { padding-top: 4px; }
  .tall .banka-note .slide-line { height: 38px; }
  .tall .banka-note .bk-go { margin: 2px 0 2px 8px; padding: 3px 12px 5px; font-size: 23px; }
  .tall .banka-note .bk-rules { display: none; }
}

/* ---------- подгон дня: объявление с отрывными номерками ----------
   Тот же лист и номерки, что у «двор закрыт» (.notice, .tabs, .tab), только номерки — с днём и подарком, а не с телефоном. */
.win.podgon { max-width: 480px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.win.podgon > .win-x { position: absolute; right: -18px; top: -14px; z-index: 5; }
.win.podgon .win-body { padding: 8px 6px; overflow: visible; }
.notice.podgon { max-width: none; margin: 0 auto; transform: rotate(var(--r, 0deg)); }
.notice.podgon .notice-sheet p { font-size: 15px; }
.podgon-note { margin-top: 8px; font: 700 20px/1.1 var(--f-hand); color: var(--pen-red); transform: rotate(-1.5deg); }
.podgon-note.done { color: #5a554b; }
.notice.podgon .tab { height: 74px; flex-direction: column; gap: 3px; }
.notice.podgon .tab span, .tab.falling .tab-day, .tab.falling .tab-gift { writing-mode: horizontal-tb; transform: none; white-space: normal; text-align: center; }
.tab-day { font: 700 13px/1 var(--f-print); text-transform: uppercase; letter-spacing: .8px; color: var(--ink); }
.tab-gift { font: 700 13px/1.15 var(--f-hand); color: var(--ink); }
/* Сегодняшний номерок — квадратный, как все, и обведён красной ручкой от руки; у каждого дня обводка своя
   (app.js, PEN_BOXES — SVG в переменной --pen-box). */
.notice.podgon .tab.today::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pen-box) 0 0 / 100% 100% no-repeat; }
.notice.podgon .tab.today:hover { transform: rotate(-3deg); }
.notice.podgon .tab:disabled:not(.torn) { opacity: .7; }
.tab.falling { flex-direction: column; gap: 3px; }

/* «Отсидеть» из случая на деле — красной ручкой поперёк шапки газеты. */
.gz-sit { margin-top: 4px; font: 700 20px/1.1 var(--f-hand); color: var(--pen-red); transform: rotate(-1.2deg); }

.short .phone-screen { max-height: 230px; }
.short .phone-pad { display: none; }
.short .notice.podgon .tab { height: 62px; }
.short .notice.podgon .notice-sheet p { font-size: 14px; }
/* стоя: объявление во всю ширину, номерки — длинные полоски в седьмую часть листа: «день» мелко, номер крупно, под ним
   бабки и семки — значок над числом (app.js, winDaily); падающий номерок — тот же (tearDaily, класс tall); крестик —
   на углу листа, внутри экрана. Размеры номерка — в --tab-px: у висящего это пиксель сцены, а падающий живёт в body,
   вне сцены, её масштаб до него не доходит — ему пиксель умножен на --s, как полётам цифр (иначе в миг отрыва буквы
   прыгают: на планшете мельчают, на телефоне крупнеют). Высоту и ширину падающий берёт у висящего (tearDaily). */
.tall .win.podgon { padding: 0; }
.tall .win.podgon > .win-x { right: -4px; top: -16px; }
.tall .win.podgon .win-body { padding: 8px 6px 4px; }
.tall .notice.podgon .notice-sheet { padding: 18px 16px 12px; }
.tall .notice.podgon .notice-head { font-size: 27px; letter-spacing: 6px; }
.tall .notice.podgon .notice-title { font-size: 30px; }
.tall .notice.podgon .notice-sheet p { font-size: 16px; line-height: 1.26; }
.tall .notice.podgon .tab { --tab-px: 1px; height: 146px; }
.tab.falling.tall { --tab-px: calc(1px * var(--s)); }
.tall .notice.podgon .tab, .tab.falling.tall { justify-content: flex-start; gap: calc(7 * var(--tab-px));
  padding-top: calc(9 * var(--tab-px)); }
.tall .notice.podgon .tab-day, .tab.falling.tall .tab-day { display: flex; flex-direction: column; align-items: center;
  font: 700 calc(14 * var(--tab-px))/1 var(--f-hand); letter-spacing: calc(.6 * var(--tab-px)); }
.tall .notice.podgon .tab-day b, .tab.falling.tall .tab-day b { font-size: calc(30 * var(--tab-px)); line-height: .9; letter-spacing: 0; }
.tall .notice.podgon .tab-gift, .tab.falling.tall .tab-gift { display: flex; flex-direction: column; align-items: center;
  gap: var(--tab-px); font-size: calc(18 * var(--tab-px)); line-height: 1; }
.tall .notice.podgon .tab-gift b, .tab.falling.tall .tab-gift b { font: 700 calc(20 * var(--tab-px))/1 var(--f-hand); }

/* ---------- значки крупнее (владелец: на ПК мелко) и мобила в шапке ярлыком ---------- */
.res .icon { width: 32px; height: 32px; }
.res.auth .icon { width: 26px; height: 26px; }
.money .icon { width: 32px; height: 32px; }
.corner-art { width: 40px; height: 40px; }
.spot.corner .sign { font-size: 16px; }
.hud-phone { position: relative; width: auto; height: auto; display: flex; align-items: center; gap: 6px; padding: 3px 12px 4px 6px;
  color: var(--ink); transform: rotate(-1.5deg); filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.hud-phone::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  box-shadow: inset 0 0 12px rgba(100,78,35,.3); clip-path: polygon(0 4%, 55% 0, 100% 3%, 99% 96%, 45% 100%, 1% 97%); }
.hud-phone:hover { filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)) brightness(1.05); }
.hud-phone:active { translate: 0 2px; }
.hud-phone .icon { width: 38px; height: 38px; filter: none; }
.hud-phone-label { font: 700 16px/1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; }
.hud-phone em { right: -8px; top: -7px; min-width: 20px; height: 20px; font-size: 15px; }
.hud-free { padding-right: 6px; }
.short .hud-phone-label { display: none; }
.short .hud-phone { padding: 3px 8px 4px 6px; }

/* ---------- дела на сегодня: отрывной календарь ----------
   Листок отрывного календаря на гвозде (система 12): картонка с дырочкой под гвоздь, листок с перфорацией по верху; слева
   печать — месяц красным, крупное число, день недели, восход и заход; справа синей ручкой — дела, сделанное зачёркнуто,
   награда обведена красной ручкой; внизу мелким шрифтом совет дня, под листком — стопка следующих. Всё вёрсткой. */
.win.kalendar { max-width: 680px; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  overflow: visible; filter: drop-shadow(0 14px 20px rgba(0,0,0,.65)); }
.win.kalendar > .win-x { position: absolute; right: -14px; top: 6px; z-index: 5; }
.win.kalendar .win-body { padding: 14px 4px 4px; overflow: visible; }
.kal { position: relative; transform: rotate(-.6deg); }
.kal-nail { position: absolute; left: 50%; top: -9px; z-index: 3; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e2e2e2, #777 55%, #2c2c2c); box-shadow: 0 3px 3px rgba(0,0,0,.6); }
.kal-pad { position: relative; padding: 16px 9px 0; border-radius: 3px; background: linear-gradient(#6d4b2f, #573b24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 6px rgba(0,0,0,.35); }
.kal-pad::before { content: ""; position: absolute; left: 50%; top: 3px; width: 18px; height: 9px; margin-left: -9px;
  border-radius: 9px; background: #1e140c; box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.kal-sheet { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 14px; padding: 11px 14px 8px;
  color: var(--ink); background: #f4f0e3 linear-gradient(180deg, rgba(90,70,30,.08), transparent 14%);
  box-shadow: inset 0 0 18px rgba(100,78,35,.18);
  /* верх листка — перфорация: по ней его и оторвут завтра */
  -webkit-mask: radial-gradient(circle 2.6px at 50% 0, transparent 96%, #000) 0 0 / 10px 100% repeat-x;
          mask: radial-gradient(circle 2.6px at 50% 0, transparent 96%, #000) 0 0 / 10px 100% repeat-x; }
.kal-print { display: flex; flex-direction: column; align-items: center; text-align: center; padding-right: 12px;
  border-right: 1px dashed rgba(29,27,23,.25); }
.kal-month { display: flex; align-items: center; gap: 7px; font: 700 15px/1 var(--f-print); letter-spacing: 3px;
  text-transform: uppercase; color: var(--pen-red); }
.kal-month i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.kal-day { margin-top: 1px; font: 700 100px/.92 var(--f-print); letter-spacing: -3px; color: #1d1b17; }
.kal-day.red, .kal-wday.red { color: var(--pen-red); }
.kal-wday { font: 700 16px/1 var(--f-print); letter-spacing: 2.5px; text-transform: uppercase; }
.kal-sun { margin-top: 5px; font: 12.5px/1.1 var(--f-text); color: var(--ink-soft); white-space: nowrap; }
.kal-sun + .kal-sun { margin-top: 2px; }
.kal-hand { --pen: #22408f; min-width: 0; padding-top: 1px; color: var(--pen); transform: rotate(-.8deg); }
.kal-title { font: 700 26px/1 var(--f-hand); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kal-title::first-letter { text-transform: uppercase; }
.kal-list { margin: 7px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; }
.kal-task { font: 700 20px/1.08 var(--f-hand); transform: rotate(var(--tilt, 0deg)); }
.kal-task::marker { font: 700 19px var(--f-hand); color: var(--pen); }
.kal-task.done .kal-text { color: rgba(34,64,143,.62); text-decoration: line-through; text-decoration-color: rgba(34,64,143,.9);
  text-decoration-thickness: 2px; }
.kal-count, .kal-tick { margin-left: 8px; white-space: nowrap; font: 700 18px/1 var(--f-hand); color: #6f6c66; }
.kal-tick { font-size: 22px; color: #1f6b2a; }
.kal-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 4px 0 2px; }
.kal-note { font: 700 17px/1 var(--f-hand); color: var(--pen-red); }
.kal-note.took { margin-left: 8px; color: #1f6b2a; }
.kal-act { position: relative; padding: 3px 11px 5px; font: 700 20px/1 var(--f-hand); color: var(--pen-red); transform: rotate(-2deg); }
.kal-act.small { margin-left: 8px; padding: 1px 9px 3px; font-size: 18px; }
.kal-act::after { content: ""; position: absolute; inset: -2px -6px; border: 2.5px solid rgba(184,36,26,.85); pointer-events: none;
  border-radius: 50% 46% 52% 48% / 58% 46% 54% 42%; transform: rotate(2.5deg); }
.kal-act:hover { filter: brightness(1.25); }
.kal-act:active { translate: 0 2px; }
.kal-legend { margin-top: 9px; font: 700 16px/1.1 var(--f-hand); color: #6f6c66; }
.kal-tip { grid-column: 1 / -1; margin-top: 9px; padding-top: 5px; border-top: 1px solid rgba(29,27,23,.2);
  font: italic 12.5px/1.25 var(--f-news); color: #3d3a33; }
.kal-tip b { font: 700 11px/1 var(--f-print); letter-spacing: .6px; text-transform: uppercase; }
/* стопка следующих листков — торцом под этим */
.kal-stack { height: 10px; margin: 0 -1px; border-radius: 0 0 2px 2px;
  background: repeating-linear-gradient(180deg, #ebe6d6 0 2px, #cbc3ad 2px 3px); }
.task-news { color: #22408f; }
.spot.corner.locked { filter: grayscale(.75) brightness(.8) drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.short .kal-day { font-size: 84px; }
.short .kal-task { font-size: 19px; }
.short .kal-list { gap: 4px; }
/* дело с листка календаря в газете — обведено красной ручкой */
.job-today { justify-self: start; padding: 1px 8px 2px; font: 700 16px/1 var(--f-hand); color: var(--pen-red); white-space: nowrap;
  border: 2px solid rgba(184,36,26,.8); border-radius: 46% 54% 48% 52% / 60% 45% 55% 40%; transform: rotate(-1.5deg); }
/* стоя: листок узкий — печать над делами, как на настоящем отрывном календаре (app.js, kalPrintTall: восход и заход
   по бокам от числа), дела ручкой во всю ширину; крестик — на углу картонки, внутри экрана; не влез по высоте — листок
   прокручивается внутри окна */
.tall .win.kalendar { padding: 0; gap: 0; }
.tall .win.kalendar > .win-x { right: -2px; top: -4px; }
.tall .win.kalendar .win-body { padding: 18px 4px 4px; overflow-x: hidden; overflow-y: auto; }
.tall .kal-sheet { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 8px; }
.tall .kal-print { padding: 0 0 8px; border-right: 0; border-bottom: 1px dashed rgba(29,27,23,.25); }
.tall .kal-face { display: flex; align-items: center; justify-content: center; gap: 10px; align-self: stretch; }
.tall .kal-face .kal-sun { flex: 1 1 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 700 13px/1 var(--f-print); letter-spacing: 1.5px; text-transform: uppercase; }
.tall .kal-face .kal-sun b { font: 700 21px/1 var(--f-print); letter-spacing: 0; color: var(--ink); }
.tall .kal-day { font-size: 96px; }
.tall .kal-sun { font-size: 14px; }
.tall .kal-hand { padding-top: 10px; }
.tall .kal-task { font-size: 21px; }
.tall .kal-act { min-height: 36px; padding: 6px 12px 7px; }
.tall .kal-act.small { padding: 5px 10px 6px; }
.tall .kal-legend { font-size: 17px; }
.tall .kal-tip { font-size: 14px; }
.tall .kal-tip b { font-size: 13px; }
/* стоя на низком экране: у телефона сцена стоя — 420 в ширину, её высота — 420 × высота / ширина экрана, так что низкая
   она ровно тогда, когда экран не уже 21:41 (Telegram не во весь экран, телефон 16:9; планшет и узкое окно ПК попадают
   сюда же — им плотнее не мешает). Там листок плотнее — число помельче, промежутки меньше, — чтобы три длинных дела,
   «забрать» и совет дня влезли без прокрутки. */
@media (min-aspect-ratio: 21/41) {
  .tall .win.kalendar .win-body { padding-top: 14px; }
  .tall .kal-pad { padding-top: 14px; }
  .tall .kal-sheet { padding: 9px 14px 6px; }
  .tall .kal-day { font-size: 80px; }
  .tall .kal-print { padding-bottom: 6px; }
  .tall .kal-hand { padding-top: 6px; }
  .tall .kal-list { margin-top: 5px; gap: 3px; }
  .tall .kal-pick { margin: 2px 0 0; }
  .tall .kal-legend { margin-top: 6px; }
  .tall .kal-tip { margin-top: 6px; padding-top: 4px; }
}
/* не влез и так (окно совсем низкое) — низ листка тает у края окна: видно, что он идёт дальше; долистал — край чёткий.
   Это анимация по прокрутке самого окна: пока прокручивать нечего, её нет. */
@supports (animation-timeline: scroll()) {
  .tall .win.kalendar .win-body { animation: kal-more linear both; animation-timeline: scroll(self); }
}
@keyframes kal-more {
  0%, 96% { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
  100% { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- бригада: доски беседки во дворе ----------
   Решение владельца (2026-09-25): имена вырезаны ножом, по пацану на доску; движ до сходняка — зарубками; всё, что жмут, —
   бумажки на гвоздях. Доски — картинка bg/doski (app.js ставит её в --doski); без неё — полосы досок градиентом. */
.win.besedka { max-width: 1060px; height: 100%; max-height: 660px; padding: 16px 20px 14px; border: 3px solid #1b140d; border-radius: 3px;
  background: var(--doski) center / cover,
    repeating-linear-gradient(180deg, #8d7a5f 0 56px, #3d3023 56px 59px);
  box-shadow: inset 0 0 70px rgba(0,0,0,.38), 0 12px 26px rgba(0,0,0,.7);
  /* кромка вырезанной буквы: светлый скол снизу и лёгкий ореол — чтобы читалось и на щели между досками */
  --kerf: 0 1px 0 rgba(255,238,205,.62), 0 0 6px rgba(255,238,205,.32), 0 -1px 0 rgba(0,0,0,.5); }
.win.besedka::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,240,210,.14), transparent 60%), linear-gradient(rgba(20,14,8,.04), rgba(20,14,8,.12)); }
.win.besedka > .win-x { position: absolute; right: -12px; top: -14px; z-index: 5; }
.win.besedka .win-body { padding: 0 0 4px; overflow: hidden; }
.bs { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.bs-left, .bs-right { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(40,28,18,.6) transparent; }
/* Вырезано ножом: тёмная борозда, светлая кромка снизу, как у надписи на доске. */
.carve { font-family: var(--f-print); text-transform: uppercase; color: #2b1d11; text-shadow: var(--kerf); }
/* Маркером по доске — пояснения и итоги. */
.pencil { font: 700 17px/1.15 var(--f-hand); color: #1c140c; text-shadow: 0 1px 0 rgba(255,238,205,.45), 0 0 5px rgba(255,238,205,.3); }
.pencil.big { font-size: 20px; }
.bs-name { font-size: 36px; line-height: 1; letter-spacing: 4px; transform: rotate(-1deg); overflow-wrap: anywhere; }
.bs-meta { font-size: 15px; letter-spacing: 1.2px; }
.bs-intro { font-size: 18px; max-width: 520px; }
.bs-h { font-size: 20px; letter-spacing: 2.5px; }
/* пацаны — по доске на каждого, в две колонки; себя обвела ручка */
.bs-men { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.bs-man { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 5px 30px 6px 10px; text-align: left;
  border-bottom: 3px solid rgba(40,28,18,.45); transition: background .1s; }
.bs-man:hover { background: rgba(255,240,210,.14); }
.bs-man:active { translate: 0 1px; }
.bs-man-name { font: 700 21px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; color: #2b1d11;
  text-shadow: var(--kerf); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-man.boss .bs-man-name { color: #5c1a10; }
.bs-man-meta { font: 700 15px/1.1 var(--f-hand); color: #2f2419; }
.bs-man-marks { position: absolute; right: 6px; top: 6px; font-size: 13px; letter-spacing: 1px; }
.bs-man.me::after { content: ""; position: absolute; inset: -1px -2px 1px; border: 2.5px solid rgba(184,36,26,.8); pointer-events: none;
  border-radius: 46% 54% 48% 52% / 60% 45% 55% 40%; transform: rotate(-.8deg); }
.bs-man.empty { opacity: .55; pointer-events: none; }
.bs-got { margin-top: 2px; }
/* движ — зарубки ножом: четыре черты и пятая поперёк */
.bs-buzz { display: flex; flex-direction: column; gap: 6px; }
/* сколько до сходняка — бумажный ярлычок под зарубками */
.bs-tag { align-self: flex-start; padding: 4px 10px 5px; font: 700 15px/1.1 var(--f-hand); color: var(--ink); transform: rotate(-.8deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.45); }
.bs-tally { display: flex; gap: 16px; min-height: 36px; align-items: center; }
.bs-group { position: relative; display: inline-flex; gap: 6px; height: 34px; min-width: 42px; }
.bs-group i { width: 4px; height: 100%; background: #2b1d11; border-radius: 2px; transform: rotate(3deg);
  box-shadow: 1px 1px 0 rgba(255,238,205,.45); }
.bs-group i:nth-child(2n) { transform: rotate(-2deg); }
.bs-group b { position: absolute; left: -6px; right: -6px; top: 50%; height: 4px; margin-top: -2px; background: #2b1d11; border-radius: 2px;
  transform: rotate(-28deg); box-shadow: 1px 1px 0 rgba(255,238,205,.45); }
/* бумажки на гвоздях: то, что жмут */
.bs-notes { display: flex; flex-wrap: wrap; gap: 14px 12px; padding-top: 4px; }
.bs-note { --tilt: -1.5deg; position: relative; width: 146px; min-height: 60px; padding: 15px 9px 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center; transform: rotate(var(--tilt));
  box-shadow: 0 4px 8px rgba(0,0,0,.45); transition: transform .08s; }
.bs-note:nth-child(3n+2) { --tilt: 1.4deg; }
.bs-note:nth-child(3n) { --tilt: -.6deg; }
.bs-note:hover { transform: rotate(var(--tilt)) translateY(-1px); filter: brightness(1.04); }
.bs-note:active { transform: rotate(var(--tilt)) translateY(2px); }
.bs-note b { font: 700 15px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: var(--ink); overflow-wrap: anywhere; }
.bs-note span { font: 14px/1.15 var(--f-text); color: var(--ink-soft); }
.bs-note.go b { color: var(--pen-red); }
.bs-note.done, .bs-note[disabled] { opacity: .62; pointer-events: none; }
.bs-note.off b { color: #4a4640; }
body.busy .bs-note, body.busy .bs-pin { pointer-events: none; }
.bs-nail { position: absolute; left: 50%; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e2e2e2, #7a7a7a 55%, #2a2a2a); box-shadow: 0 1px 1px rgba(0,0,0,.65); }
/* памятка — листок на гвозде внизу слева: мелкий текст по щелям между досками не читается */
.bs-rules { position: relative; margin-top: auto; align-self: flex-start; max-width: 560px; padding: 15px 12px 8px;
  font: 700 16px/1.15 var(--f-hand); color: var(--ink); transform: rotate(-.6deg); box-shadow: 0 4px 8px rgba(0,0,0,.45); }
/* приглашение по ссылке — большая бумажка на гвозде сверху справа */
.bs-invite { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 10px; transform: rotate(-.8deg);
  box-shadow: 0 5px 10px rgba(0,0,0,.45); }
.bs-invite b { font: 700 18px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .6px; color: var(--pen-red); }
.bs-invite > span { font: 15px/1.2 var(--f-text); color: var(--ink); }
.bs-invite .bs-why { font: 700 17px/1.1 var(--f-hand); color: var(--pen-red); }
.bs-invite .row { margin-top: 4px; }
/* бригады на районе — листок на гвозде, строками; «проситься» — бумажный ярлык */
.bs-sheet { position: relative; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 8px;
  transform: rotate(.5deg); box-shadow: 0 5px 10px rgba(0,0,0,.45); }
.bs-sheet-h { font: 700 17px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink); }
.bs-sheet .bs-row { border-bottom: 1px dashed rgba(29,27,23,.35); }
.bs-sheet .bs-row:last-child { border-bottom: 0; }
.bs-sheet .bs-row-name { color: var(--ink); text-shadow: none; font-size: 17px; white-space: normal; overflow-wrap: anywhere; }
.bs-sheet .bs-row-meta { color: var(--ink-soft); }
.bs-sheet .bs-line { font: 700 17px/1.15 var(--f-hand); color: var(--ink-soft); padding: 4px 0; }
.bs-sheet .bs-search input { background: rgba(0,0,0,.05); }
/* свои заявки — записка на гвозде под «сколотить» */
.bs-apps { position: relative; align-self: flex-start; max-width: 320px; padding: 15px 12px 8px; font: 700 17px/1.15 var(--f-hand);
  color: var(--ink); transform: rotate(-1deg); box-shadow: 0 4px 8px rgba(0,0,0,.45); }
.bs-list { display: flex; flex-direction: column; }
.bs-row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; padding: 5px 4px 6px;
  border-bottom: 3px solid rgba(40,28,18,.4); }
.bs-row-name { font: 700 19px/1.05 var(--f-print); text-transform: uppercase; letter-spacing: 1.2px; color: #2b1d11;
  text-shadow: var(--kerf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-row-meta { grid-column: 1; font: 700 15px/1.1 var(--f-hand); color: #2f2419; }
.bs-row .bs-pin { grid-column: 2; grid-row: 1 / span 2; }
.bs-pin { padding: 4px 10px 5px; background: var(--paper); color: var(--ink); font: 700 13px/1 var(--f-print); text-transform: uppercase;
  letter-spacing: .6px; transform: rotate(1.5deg); box-shadow: inset 0 0 8px rgba(100,78,35,.3), 0 2px 3px rgba(0,0,0,.45); white-space: nowrap; }
.bs-pin:hover { filter: brightness(1.05); }
.bs-pin:active { translate: 0 1px; }
.bs-pin.go { color: var(--pen-red); }
.bs-pin.done { color: #1f6b2a; }
.bs-pin[disabled] { opacity: .55; pointer-events: none; }
.bs-search { display: flex; gap: 8px; align-items: center; }
.bs-search input, .bs-input { flex: 1; min-width: 0; padding: 4px 8px; font: 700 19px/1.1 var(--f-hand); color: var(--ink);
  background: rgba(236,226,196,.9); border: 0; border-bottom: 2px dashed rgba(29,27,23,.5); outline: none; user-select: text; }
.bs-input { width: 100%; margin: 4px 0; font-size: 24px; background: transparent; }
.bs-perk { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(29,27,23,.3); }
.bs-perk b { font: 700 15px/1.1 var(--f-print); text-transform: uppercase; letter-spacing: .5px; }
.bs-perk.on b { color: #1f6b2a; }
/* Карточка без картинки (бригада, «точно?»): в одну колонку. */
.modal-card:not(:has(.modal-art)) { grid-template-columns: 1fr; }
.modal-card:not(:has(.modal-art)) > * { grid-column: 1; }
.short .win.besedka { padding: 10px 12px 8px; }
.short .win.besedka > .win-x { right: -6px; top: -8px; }
.short .bs { gap: 12px; }
.short .bs-name { font-size: 26px; letter-spacing: 3px; }
.short .bs-man { padding: 3px 24px 4px 6px; }
.short .bs-man-name { font-size: 17px; }
.short .bs-man-meta { font-size: 13.5px; }
.short .bs-note { width: 124px; min-height: 50px; padding: 13px 6px 6px; }
.short .bs-note b { font-size: 13px; }
.short .bs-note span { font-size: 12.5px; }
.short .bs-rules, .short .bs-intro { font-size: 14.5px; line-height: 1.1; }
.short .bs-rules { padding: 13px 10px 6px; }
.short .bs-tally { min-height: 26px; }
.short .bs-group { height: 24px; }
/* стоя: беседка во всю высоту, доски одной колонкой. Левая и правая половины рассыпаются (display: contents) и встают
   по порядку: имя бригады, приглашение по ссылке, движ, что подогнали, бумажки на гвоздях — то, что жмут каждый день,
   видно без прокрутки, — потом пацаны по доске на каждого и памятка внизу. Без бригады: имя, приглашение, листок-пояснение,
   «сколотить», свои заявки, бригады на районе. Листается всё окно (.win-body): после действия окно перерисовывается,
   а прокрутка остаётся на месте. Пояснения маркером стоя — листки на гвоздях (app.js, crewMemo): по щелям не читаются.
   Доски — того же размера, что боком (картинка 960×480, доска с щелью ~63 пикселя), а не растянутые по высоте окна;
   сдвиг — чтобы имя бригады со строкой под ним легли на одну доску, а не на щель. Картинка кончается посреди доски,
   и повтор (repeat-y) давал на стыке доску в две трети ширины. Поэтому копии одна под другой через 438,5 пикселя —
   ровно семь досок: щель нижней копии ложится на щель верхней, а обрезок доски снизу картинки уходит под следующую. */
.tall .win.besedka { max-height: none; padding: 12px 10px 8px;
  background: var(--doski) center -9px / auto 480px no-repeat, var(--doski) center 429.5px / auto 480px no-repeat,
    var(--doski) center 868px / auto 480px no-repeat, var(--doski) center 1306.5px / auto 480px no-repeat,
    repeating-linear-gradient(180deg, #8d7a5f 0 56px, #3d3023 56px 59px); }
.tall .win.besedka > .win-x { right: -4px; top: -6px; }
.tall .win.besedka .win-body { overflow-y: auto; padding: 0 2px 6px; }
.tall .bs { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; }
.tall .bs-left, .tall .bs-right { display: contents; }
.tall .bs-name, .tall .bs-meta { order: 1; }
.tall .bs-invite { order: 2; }
.tall .bs-intro { order: 3; }
.tall .bs-buzz, .tall .bs-line { order: 4; }
.tall .bs-got { order: 5; }
.tall .bs-notes, .tall .bs-apps { order: 6; }
.tall .bs-men, .tall .bs-sheet { order: 7; }
.tall .bs-rules { order: 8; align-self: stretch; max-width: none; }
/* крестик в углу — первая строка под него не подлезает */
.tall .bs-name { font-size: 30px; letter-spacing: 3px; padding-right: 34px; overflow-wrap: break-word; }
.tall .bs-name.long { font-size: 24px; letter-spacing: 2px; }
.tall .bs-meta { margin-top: -6px; text-wrap: balance; }
.tall .bs-memo { position: relative; align-self: stretch; padding: 15px 12px 8px; font: 700 17px/1.15 var(--f-hand); color: var(--ink);
  transform: rotate(-.6deg); box-shadow: 0 4px 8px rgba(0,0,0,.45); }
.tall .bs-memo.big { font-size: 19px; }
.tall .bs-got.bs-memo { transform: rotate(.7deg); }
.tall .bs-apps { align-self: stretch; max-width: none; }
/* бумажки — по две в ряд во всю ширину (на планшете — по три); пацаны — по одному на доску, на планшете в две колонки */
.tall .bs-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 12px; }
.tall .bs-note { width: auto; min-height: 62px; }
.tall .bs-note span { font-size: 15px; }
.tall .bs-men { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 12px; }
/* Доска пацана — своя: кусок доски из той же картинки (bg/doski, 960×480 — доска с щелью ~63 пикселя), у каждой строки
   свой кусок. Иначе мелкие строки ложатся на щели фона и не читаются. */
.tall .bs-man { background: var(--doski) -100px -146px / 960px 480px no-repeat; box-shadow: inset 0 1px 0 rgba(255,238,205,.22); }
.tall .bs-man:nth-child(3n+2) { background-position: -100px -396px; }
.tall .bs-man:nth-child(3n) { background-position: -260px -334px; }
/* подсветка — только под мышь: на телефоне :hover залипает на доске, по которой тыкнули */
@media (hover: hover) { .tall .bs-man:hover { filter: brightness(1.07); } }
.tall .bs-man:active { filter: brightness(1.07); }
.tall .bs-man.empty { opacity: 1; }
.tall .bs-man.empty > * { opacity: .72; }
/* строка под именем и значки подгона — крупнее: интерфейс телефона мельче, а маркер по доске и так бледнее печатного.
   Значки — в конце строки под именем (она короткая), чтобы имени осталась вся ширина доски. */
.tall .bs-man { padding-right: 12px; }
.tall .bs-man-meta { padding-right: 44px; font-size: 18px; }
.tall .bs-man-marks { right: 8px; top: auto; bottom: 6px; font-size: 16px; }
/* ярлыки «проситься», «искать», «вписаться» и поиск — под палец */
.tall .bs-pin { padding: 12px 14px 13px; font-size: 15px; }
.tall .bs-invite > .bs-pin { align-self: flex-start; }
.tall .bs-search input { padding: 7px 8px; }

/* ---------- пивко в шапке: бутылка с номерком — сколько в заначке ---------- */
.hud-beer { position: relative; width: 32px; height: 38px; margin-right: 8px; display: grid; place-items: center; }
.hud-beer .icon { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px #000); }
.hud-beer.dry .icon { filter: grayscale(.7) brightness(.75) drop-shadow(0 1px 1px #000); }
.hud-beer em { position: absolute; right: -8px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  font: 700 14px/1 var(--f-hand); font-style: normal; color: #15130e; background: #e8a13a; border-radius: 3px; transform: rotate(-8deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ---------- главный экран: значки по краям, пацан посередине ----------
   Решение владельца 2026-09-25 (как в «Тюряге»): вместо построек на карте — значки занятий по краям, картинка
   «Остановки» — фон. Слева — куда пойти во дворе, справа — своё и ежедневное, внизу справа крупно «Обход». Пацан —
   во весь рост посередине, растёт со сценой (--me-h задаёт app.js от высоты экрана). Значок — предмет из мира игры
   (icon/<id>) и подпись на бумажке; две колонки значков с каждого края — боком, стоя (потом) — по одной. */
.map.hub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; padding: 10px 12px 8px;
  background: linear-gradient(90deg, rgba(8,9,10,.4), transparent 24%, transparent 76%, rgba(8,9,10,.4)); }
.hub-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.hub-grid { display: grid; grid-template-columns: repeat(2, calc(var(--ico, 60px) + 34px)); gap: 6px 4px; align-content: start; }
.hub-mid { display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.hub-me { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: filter .12s; }
.hub-me .doll { height: var(--me-h, 260px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); }
.hub-me .doll .ph { border-radius: 14px; }
.hub-me:hover { filter: brightness(1.08); }
.hub-me:active { translate: 0 2px; }
.hub-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0 0; }
.hub-icon-art { width: var(--ico, 60px); height: var(--ico, 60px); filter: drop-shadow(0 4px 4px rgba(0,0,0,.7));
  transition: transform .12s; }
.hub-icon .ph { border-radius: 10px; }
.hub-icon:hover .hub-icon-art { transform: translateY(-2px) scale(1.06); }
.hub-icon:active .hub-icon-art { transform: translateY(1px) scale(.96); }
/* подпись — бумажка с печатными буквами; длинное имя бригады ложится в две строки */
.hub-icon-name { max-width: 100%; padding: 2px 6px 3px; font: 700 13px/1.05 var(--f-print); text-transform: uppercase;
  letter-spacing: .5px; text-align: center; color: var(--ink); background: rgba(236,226,196,.96); transform: rotate(-1.5deg);
  box-shadow: 0 2px 3px rgba(0,0,0,.5); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-icon:nth-child(2n) .hub-icon-name { transform: rotate(1.2deg); }
/* замок в подписи закрытого значка — чуть мельче, чем в тексте: иначе бумажка выше, чем у открытых, и режет его край */
.hub-icon-name span.icon.inline { width: 1.35em; height: 1.35em; vertical-align: -0.18em; margin: -0.15em .04em; }
.hub-icon:hover .hub-icon-name { background: #f6eed6; }
.hub-icon.locked .hub-icon-art { filter: grayscale(.85) brightness(.7) drop-shadow(0 4px 4px rgba(0,0,0,.7)); }
.hub-icon.locked .hub-icon-name { color: #5e584e; }
.hub-icon .corner-dot { right: 16px; top: 0; }
.hub-icon .corner-tag { right: 6px; bottom: 16px; }
/* «Обход» — главный путь новичка: на районы с боссами. Крупно, в правом нижнем углу, как указатель */
.hub-icon.big { margin-top: auto; align-self: flex-end; }
.hub-icon.big .hub-icon-art { width: calc(var(--ico, 60px) * 1.45); height: calc(var(--ico, 60px) * 1.45); }
.hub-icon.big .hub-icon-name { padding: 3px 14px 4px; font-size: 18px; letter-spacing: 1px; }
.hub-icon.big .corner-dot { right: 10px; top: 6px; width: 14px; height: 14px; }
.short .map.hub { padding: 6px 8px 4px; }
.short .hub-grid { gap: 4px 2px; }
.short .hub-icon-name { font-size: 12px; padding: 1px 5px 2px; }
.short .hub-icon.big .hub-icon-name { font-size: 16px; }

/* ---------- стенка на стенку: две стенки бойцов на пустыре (система 10) ----------
   Во весь экран, как бой (layer fp): сверху счёт и время, стенка чужих, посередине что происходит и лента ударов, стенка
   своих, снизу твоя дыхалка, здоровье и «Свалить». Бойцы — фотки-карточки на скотче: чужие с красной полосой (тычок —
   удар), свои — с зелёной. Пустырь рисует CSS: сумерки, фонарь посередине, земля. Раскладка стоя — в конце раздела. */
.sk { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 26% at 50% 50%, rgba(255,196,110,.20), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
    linear-gradient(#18202c 0%, #332d3a 34%, #5d4235 47%, #2b2925 52%, #191816 100%);
  color: var(--text); }
.sk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 48px; }
.sk-team { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 10px 4px; color: var(--ink);
  background: rgba(236,226,196,.95); box-shadow: 0 2px 4px rgba(0,0,0,.5); transform: rotate(-1deg); }
.sk-team.them { transform: rotate(1deg); }
.sk-team b { font: 700 18px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.sk-team.us b { color: #2c6b35; }
.sk-team.them b { color: #a3291f; }
.sk-score { font: 700 24px/1 var(--f-hand); font-variant-numeric: tabular-nums; }
.sk-clock { flex: none; font: 700 26px/1 var(--f-print); letter-spacing: 1px; color: #f3ecd9; text-shadow: 0 2px 0 #000; }
.sk-clock.hot { color: #ff6b61; }
.sk-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-content: start; }
.sk-empty { grid-column: 1 / -1; padding: 10px; text-align: center; font: 700 18px/1.1 var(--f-hand); color: #b9b2a2; }
.sk-card { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 5px 8px 6px; text-align: left;
  border-top: 4px solid #3f8f4a; box-shadow: 0 3px 6px rgba(0,0,0,.55); transform: rotate(-.8deg); }
.sk-card:nth-child(2n) { transform: rotate(.9deg); }
.sk-card.enemy { border-top-color: #c2372b; cursor: crosshair; touch-action: manipulation; }
.sk-card.enemy:hover { filter: brightness(1.08); }
.sk-card.enemy:active { translate: 0 2px; }
.sk-card.me { box-shadow: 0 0 0 2px var(--seeds), 0 3px 6px rgba(0,0,0,.55); }
.sk-card.down { filter: grayscale(.75) brightness(.72); }
.sk-card.off { opacity: .5; }
.sk-name { font: 700 18px/1 var(--f-hand); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-meta { font: 12px/1 var(--f-text); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-hp { display: block; height: 7px; overflow: hidden; border-radius: 2px; background: rgba(0,0,0,.28); }
.sk-hp i { display: block; height: 100%; background: linear-gradient(90deg, #2f8a3c, var(--green)); transition: width .25s ease-out; }
.sk-card.enemy .sk-hp i { background: linear-gradient(90deg, #9c2a23, var(--red)); }
.sk-down { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-7deg); padding: 1px 7px 2px;
  white-space: nowrap; font: 700 16px/1 var(--f-hand); color: #fff; background: rgba(163,36,28,.92); }
.sk-you { position: absolute; right: -6px; top: -9px; padding: 1px 6px 2px; font: 700 14px/1 var(--f-hand); color: var(--ink);
  background: var(--seeds); transform: rotate(8deg); box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.sk-card.sk-hit { animation: sk-shake .36s ease-out; }
.sk-card.sk-koed { animation: sk-drop .4s ease-in; }
.sk-breath.sk-hit { animation: sk-shake .36s ease-out; }
@keyframes sk-shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
@keyframes sk-drop { 40% { translate: 0 4px; rotate: -6deg; } 100% { translate: 0 0; } }
.sk-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.sk-say { max-width: 640px; text-align: center; font: 700 19px/1.15 var(--f-hand); color: #f3ecd9; text-shadow: 0 2px 2px #000; }
.sk-say.paper.big { padding: 8px 16px 9px; font-size: 22px; color: var(--ink); text-shadow: none; transform: rotate(-1deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.sk-log { display: flex; flex-direction: column; align-items: center; gap: 1px; font: 13px/1.25 var(--f-text); color: #d8d2c4; }
.sk-line.ours { color: #c3e6ab; }
.sk-line.theirs { color: #ffb8ad; }
.sk-line.ko { font-weight: 700; }
.sk-bottom { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 6px; background: rgba(0,0,0,.5); }
.sk-bottom:empty { display: none; }
.sk-breath { display: flex; align-items: center; gap: 4px; }
.sk-breath span { margin-right: 4px; font: 12.5px/1 var(--f-text); color: #b9b2a2; }
.sk-breath i { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.sk-breath i.on { background: #8fd3ff; box-shadow: 0 0 6px rgba(143,211,255,.8); }
.sk-breath i.half { background: linear-gradient(90deg, rgba(143,211,255,.8) 50%, rgba(255,255,255,.12) 50%); }
.sk-me { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 13px/1 var(--f-text); color: #d8d2c4; }
.sk-mine { font: 700 17px/1 var(--f-hand); color: var(--seeds); white-space: nowrap; }
.sk-leave { flex: none; padding: 5px 12px 6px; font: 700 18px/1 var(--f-hand); color: var(--pen-red); transform: rotate(2deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.sk-stamp { position: fixed; left: 50%; top: 45%; z-index: 19; pointer-events: none; padding: 6px 20px 8px; border: 5px solid;
  font: 700 calc(54px * var(--s))/1 var(--f-print); letter-spacing: 3px; text-transform: uppercase; color: #ddd;
  background: rgba(0,0,0,.35); transform: translate(-50%, -50%) rotate(-8deg); animation: sk-stamp 2.4s ease-out forwards; }
.sk-stamp.win { color: var(--seeds); }
.sk-stamp.lose { color: #ff6b61; }
@keyframes sk-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2); }
  14% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}
.short .sk { gap: 4px; padding: 6px 10px 8px; }
.short .sk-card { padding: 3px 7px 4px; gap: 2px; }
.short .sk-name { font-size: 16px; }
.short .sk-say { font-size: 17px; }

/* карточка «Стенка на стенку» в беседке и выбор, кому и когда её забить */
.sk-month { font: 700 18px/1.15 var(--f-hand); color: var(--pen-red); }
.sk-rows { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.sk-row { padding: 6px 9px 8px; border-left: 4px solid rgba(0,0,0,.2); background: rgba(0,0,0,.04); }
.sk-row.hot { border-left-color: var(--pen-red); background: rgba(184,36,26,.07); }
.sk-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 700 19px/1.1 var(--f-hand); }
.sk-row-head span { font: 14px/1 var(--f-text); color: var(--ink-soft); white-space: nowrap; }
.sk-row-status { margin: 2px 0 5px; font: 14.5px/1.2 var(--f-text); }
.sk-row .row:empty { display: none; }
.sk-rules { font: 13.5px/1.3 var(--f-text); color: var(--ink-soft); }
.sk-h { margin-top: 4px; font: 700 14px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.sk-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 5px 9px 6px; border-radius: 4px;
  border: 2px solid rgba(0,0,0,.25); background: rgba(0,0,0,.05); color: var(--ink); font: 13px/1.1 var(--f-text); }
.sk-chip b { font: 700 17px/1 var(--f-hand); }
.sk-chip.on { border-color: var(--pen-red); background: rgba(184,36,26,.1); }
.sk-chip.time { font: 700 15px/1 var(--f-print); letter-spacing: .5px; }
.sk-chip:disabled { opacity: .4; text-decoration: line-through; }
.sk-days { display: flex; flex-direction: column; gap: 8px; }
.sk-day { display: flex; flex-direction: column; gap: 4px; }
.sk-day-name { font: 13px/1 var(--f-text); color: var(--ink-soft); }

/* стоя: четыре бойца в ряд (десять — три ряда), шрифты мельче, низ — в две строки */
.tall .sk { padding: 8px 8px 10px; gap: 5px; }
.tall .sk-top { padding-right: 44px; gap: 6px; }
.tall .sk-team { padding: 2px 7px 3px; gap: 5px; }
.tall .sk-team b { font-size: 14px; }
.tall .sk-score { font-size: 20px; }
.tall .sk-clock { font-size: 21px; }
.tall .sk-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tall .sk-card { padding: 4px 6px 5px; }
.tall .sk-name { font-size: 15.5px; }
.tall .sk-meta { font-size: 11px; }
.tall .sk-say { font-size: 16px; }
.tall .sk-say.paper.big { font-size: 19px; }
.tall .sk-log { font-size: 12px; }
.tall .sk-bottom { flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; }
.tall .sk-me { flex-basis: 100%; order: 3; }
.tall .sk-mine { font-size: 15px; }
.tall .sk-chip { padding: 7px 10px 8px; }
.tall .sk-rows { max-height: none; }

/* капт на экране боя: над часами — за какую точку; ничья точка — хозяев нет */
.sk-center { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sk-kind { padding: 1px 8px 2px; font: 700 15px/1 var(--f-hand); color: var(--ink); white-space: nowrap; background: rgba(236,226,196,.92);
  transform: rotate(-1.5deg); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.sk-team.them.free b { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font: 700 18px/1 var(--f-hand); }
.sk-row.capt .sk-row-head b { color: var(--pen-red); }

/* «Базар» — чат боя: бумажка в нижней полосе с номерком новых; развернул — листок с вкладками «Базар» и «Кто кого».
   Боком листок справа поверх стенок, стоя — снизу во всю ширину. Текст — только буквы (h(), без разметки). */
.skc-open { position: relative; flex: none; padding: 5px 12px 6px; font: 700 18px/1 var(--f-hand); color: var(--ink);
  transform: rotate(-1.5deg); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.skc-open.on { outline: 2px solid var(--pen-red); outline-offset: 1px; }
.skc-open em { position: absolute; right: -8px; top: -9px; min-width: 20px; padding: 2px 5px; border-radius: 10px; font: 700 13px/1 var(--f-text);
  font-style: normal; color: #fff; background: var(--pen-red); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.skc { position: absolute; z-index: 4; right: 10px; top: 58px; bottom: 62px; width: min(340px, 40%); display: flex; flex-direction: column;
  gap: 6px; padding: 8px 10px 10px; color: var(--ink); transform: rotate(-.4deg); box-shadow: 0 8px 20px rgba(0,0,0,.6); }
.skc[hidden] { display: none; }
.skc-tabs { display: flex; align-items: center; gap: 6px; }
.skc-tab { padding: 4px 10px 5px; border: 0; border-bottom: 3px solid transparent; background: none; font: 700 19px/1 var(--f-hand);
  color: var(--ink-soft); cursor: pointer; }
.skc-tab.on { color: var(--ink); border-bottom-color: var(--pen-red); }
.skc-hide { margin-left: auto; padding: 4px 6px; border: 0; background: none; font: 700 16px/1 var(--f-hand); color: var(--ink-soft); cursor: pointer; }
.skc-lines, .skc-tally { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px;
  overscroll-behavior: contain; }
.skc-lines[hidden], .skc-tally[hidden], .skc-form[hidden] { display: none; }
.skc-line { font: 15px/1.25 var(--f-text); overflow-wrap: anywhere; }
.skc-line b { font-weight: 700; }
.skc-line.ours b { color: #2c6b35; }
.skc-line.theirs b { color: #a3291f; }
.skc-note { margin: auto 0; text-align: center; font: 700 18px/1.2 var(--f-hand); color: var(--ink-soft); }
.skc-form { display: flex; gap: 6px; }
.skc-input { flex: 1; min-width: 0; padding: 6px 8px; border: 2px solid rgba(0,0,0,.3); border-radius: 3px; background: #fbf7ea;
  font: 16px/1.2 var(--f-text); color: var(--ink); }
.skc-input:focus { outline: none; border-color: var(--pen-red); }
.skc-send { flex: none; padding: 5px 12px; border: 2.5px solid var(--pen-red); border-radius: 52% 48% 55% 45% / 58% 45% 55% 42%;
  background: none; font: 700 19px/1 var(--f-hand); color: var(--pen-red); cursor: pointer; }
.skc-h { margin-top: 4px; font: 700 13px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.skc-pair { padding: 3px 6px 4px; border-left: 3px solid rgba(0,0,0,.25); background: rgba(0,0,0,.04); }
.skc-pair.ours { border-left-color: #3f8f4a; }
.skc-pair.theirs { border-left-color: #c2372b; }
.skc-who { font: 15px/1.2 var(--f-text); overflow-wrap: anywhere; }
.skc-who small { color: var(--ink-soft); }
.skc-nums { font: 13.5px/1.2 var(--f-text); color: var(--ink-soft); }
.skc-hit { font: 13.5px/1.25 var(--f-text); }
.skc-hit.ours { color: #2c6b35; }
.skc-hit.theirs { color: #a3291f; }
.tall .skc { left: 6px; right: 6px; width: auto; top: auto; bottom: 92px; height: 58%; transform: none; }
.tall .skc-open { font-size: 16px; padding: 4px 10px 5px; }
.short .skc { top: 50px; bottom: 54px; }

/* ---------- капт по-новому: дуэль от первого лица и доска (система 10, решение 35) ----------
   Дуэль — каркас боя с боссом (.fp, app.js: fightShell в режиме capt): соперник посередине, рука справа, слева имя, здоровье
   и листок с раскладом бригад. Своё у капта: таймер хода — большая цифра сбоку от головы соперника (владелец: «цифру убери
   с головы куда-нибудь в сторону»), удары — две бумажки под большим пальцем, дыхалка кружками, подошва «с ноги». Доска —
   для тех, кто ждёт выхода, выбыл или смотрит: бригады с бойцами и кто с кем дерётся. Пустырь рисует CSS, как у стенки.
   Раскладка стоя — в конце раздела. */
.kp { position: absolute; inset: 0; overflow: hidden; color: var(--text);
  background:
    radial-gradient(ellipse 55% 26% at 50% 50%, rgba(255,196,110,.20), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px),
    linear-gradient(#18202c 0%, #332d3a 34%, #5d4235 47%, #2b2925 52%, #191816 100%); }
.fly.good { color: var(--green); }

/* Соперник-пацан: кукла в рост, видна по пояс — её верх растянут на кадр босса, лицо там же, где у босса (26 % высоты). */
.kp-figure { position: relative; width: 100%; height: 100%; overflow: hidden; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.kp-doll { position: absolute; left: 50%; top: 6%; height: 182%; aspect-ratio: 2 / 3; transform: translateX(-50%); }
.kp-doll .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.kp-doll .ph { border-radius: 14px 14px 0 0; }

/* Таймер хода: цифра сбоку от головы, появляется большой, уменьшается и тает. Выбрал удар — тусклая: ждём соперника. */
.kp-count { position: absolute; left: calc(47% + 58px); top: 46px; z-index: 4; width: 100px; height: 124px; pointer-events: none;
  display: flex; align-items: center; justify-content: center; transition: opacity .15s, scale .15s; }
.kp-count.dim { opacity: .4; scale: .62; }
.kp-digit { font: 700 124px/1 var(--f-print); color: #fff7e0; text-shadow: 0 5px 0 #000, 0 0 26px rgba(0,0,0,.7);
  font-variant-numeric: tabular-nums; animation: kp-tick .98s ease-in forwards; }
.kp-digit.hot { color: #ff6b61; }
@keyframes kp-tick { 0% { transform: scale(1.15); opacity: 1; } 70% { opacity: .85; } 100% { transform: scale(.3); opacity: 0; } }

/* «С ноги»: подошва летит снизу в грудь соперника (app.js, captKick); пока не летит — её не видно. */
.kp-boot { position: absolute; left: 50%; top: 50%; z-index: 2; width: 130px; height: 234px; opacity: 0; pointer-events: none;
  transform: translate(-40%, 140%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.6));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 270'%3E%3Cpath d='M75 6C112 6 138 34 138 82C138 118 124 140 120 168C116 196 128 214 126 236C124 256 104 266 75 266C46 266 26 256 24 236C22 214 34 196 30 168C26 140 12 118 12 82C12 34 38 6 75 6Z' fill='%23f1ede2' stroke='%2316130e' stroke-width='5'/%3E%3Cpath d='M75 20C104 20 124 44 124 82C124 112 112 132 108 162C105 188 114 210 112 232C110 246 96 252 75 252C54 252 40 246 38 232C36 210 45 188 42 162C38 132 26 112 26 82C26 44 46 20 75 20Z' fill='%2326282d'/%3E%3Cg stroke='%2347494f' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M44 60H106M40 82H110M42 104H108M50 126H100M52 196H98M50 216H100M54 236H96'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }

/* Удары — бумажки справа внизу, под большим пальцем; выбранная — жёлтая. */
.kp-moves { position: absolute; right: 10px; bottom: 10px; z-index: 5; display: flex; gap: 8px; }
.kp-move { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 128px; min-height: 58px;
  padding: 6px 6px 7px; color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.55); transform: rotate(-1deg);
  touch-action: manipulation; }
.kp-move + .kp-move { transform: rotate(1.2deg); }
.kp-move b { font: 700 25px/1 var(--f-hand); }
.kp-move small { font: 12.5px/1.1 var(--f-text); color: var(--ink-soft); text-align: center; }
.kp-move:active { translate: 0 2px; }
.kp-move:disabled { opacity: .5; cursor: default; }
.kp-move.picked { --tint: #f2c230; opacity: 1; box-shadow: 0 0 0 2px #000, 0 3px 6px rgba(0,0,0,.55); }
.kp-breath { position: absolute; left: 10px; bottom: 40px; z-index: 5; padding: 3px 8px 4px; border-radius: 4px; background: rgba(0,0,0,.5); }
.kp-fight .fp-side { bottom: 72px; }
.kp-fight .fp-hint:empty, .kp-fight .fp-log:empty { display: none; }
.kp-fight .fp-ladder { right: 250px; gap: 5px; }
.kp-tag { min-width: 0; max-width: 100%; padding: 2px 8px 3px; font: 700 13px/1.1 var(--f-text); color: #f3ecd9; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; background: rgba(0,0,0,.55); }
.kp-tag.hot { color: #ff8a7e; }
.kp-tag.near { font-weight: 400; color: #d8d2c4; }

/* «Базар» и «Свалить» — бумажки левее крестика; листок базара — как у стенки. */
.kp-tools { position: absolute; right: 60px; top: 9px; z-index: 6; display: flex; align-items: center; gap: 12px; }
.kp-tools:empty { display: none; }
.kp .skc { z-index: 7; bottom: 78px; }
/* В дуэли листок базара уступает таймеру хода: цифру сбоку от головы соперника он не закрывает. */
.kp.duel .skc { width: min(340px, calc(53% - 176px)); }

/* Бригады и бойцы: на листке дуэли — на бумаге, на доске — по тёмному. */
.kp-crew { display: flex; flex-direction: column; gap: 3px; }
.kp-crew + .kp-crew { margin-top: 5px; }
.kp-crew.out { opacity: .6; }
.kp-crew-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.kp-crew-head b { min-width: 0; font: 700 18px/1 var(--f-hand); color: #a3291f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-crew.mine .kp-crew-head b { color: #2c6b35; }
.kp-crew-head span { flex: none; font: 12px/1 var(--f-text); color: var(--ink-soft); }
.kp-crew-head em { flex: none; margin-left: auto; font: 700 11.5px/1 var(--f-print); font-style: normal; letter-spacing: .4px;
  text-transform: uppercase; color: var(--ink-soft); }
.kp-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 3px; }
.kp-chip { position: relative; min-width: 0; padding: 2px 5px 3px; color: var(--ink); background: rgba(255,255,255,.4);
  border-top: 3px solid #c2372b; }
.kp-crew.mine .kp-chip { border-top-color: #3f8f4a; }
.kp-chip b { display: block; font: 700 14.5px/1 var(--f-hand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-chip em { position: absolute; right: 3px; top: 1px; font: 700 11px/1 var(--f-text); font-style: normal; color: var(--pen-red); }
.kp-chip i { display: block; height: 4px; margin-top: 2px; background: rgba(0,0,0,.25); }
.kp-chip u { display: block; height: 100%; background: #a3291f; transition: width .25s ease-out; }
.kp-crew.mine .kp-chip u { background: #2f8a3c; }
.kp-chip small { display: block; margin-top: 1px; font: 11px/1 var(--f-text); color: var(--ink-soft); }
.kp-chip.fight { box-shadow: 0 0 0 2px var(--seeds); }
.kp-chip.me b { color: var(--pen-red); }
.kp-chip.out, .kp-chip.left { opacity: .5; filter: grayscale(1); }
.kp-chip.out b, .kp-chip.left b { text-decoration: line-through; }
.kp-sheet .h2 { margin-bottom: 2px; }

/* Доска: сверху точка и часы, что происходит, кто с кем дерётся и бригады; снизу — своё здоровье и дыхалка. */
.kp-board { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px 10px; overflow: hidden; }
.kp-head { display: flex; align-items: center; gap: 6px 14px; min-height: 40px; padding-right: 250px; }
.kp-title { display: flex; flex-direction: column; gap: 1px; padding: 3px 12px 4px; color: var(--ink); transform: rotate(-1deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.kp-title b { font: 700 19px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; }
.kp-title small { font: 700 14px/1 var(--f-hand); color: var(--ink-soft); }
.kp-rage { font: 700 17px/1 var(--f-hand); color: #ff8a7e; text-shadow: 0 1px 2px #000; }
.kp-msg { align-self: center; max-width: 640px; text-align: center; font: 700 20px/1.15 var(--f-hand); color: #f3ecd9; text-shadow: 0 2px 2px #000; }
.kp-msg:empty { display: none; }
.kp-rules { align-self: center; max-width: 640px; text-align: center; font: 14px/1.3 var(--f-text); color: #d8d2c4; text-shadow: 0 1px 2px #000; }
.kp-msg.paper.big { margin: auto; padding: 8px 16px 9px; font-size: 22px; color: var(--ink); text-shadow: none; transform: rotate(-1deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.5); }
.kp-head ~ .kp-msg.paper.big { margin: 0; }
.kp-cols { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px;
  align-items: start; align-content: start; scrollbar-width: none; }
.kp-cols::-webkit-scrollbar { display: none; }
.kp-cols > :only-child { grid-column: 1 / -1; }
.kp-h { font: 700 13px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: #b9b2a2; }
.kp-duels { display: flex; flex-direction: column; gap: 6px; }
.kp-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 3px 8px; padding: 5px 8px 6px;
  border-left: 4px solid rgba(255,255,255,.2); background: rgba(0,0,0,.45); }
.kp-duel.mine { border-left-color: var(--seeds); }
.kp-duel em { font: 12px/1 var(--f-text); font-style: normal; color: #b9b2a2; }
.kp-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kp-side b { font: 700 18px/1 var(--f-hand); color: #ffb8ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-side.ours b { color: #c3e6ab; }
.kp-side .sk-hp i { background: linear-gradient(90deg, #9c2a23, var(--red)); }
.kp-side.ours .sk-hp i { background: linear-gradient(90deg, #2f8a3c, var(--green)); }
.kp-duel-note { grid-column: 1 / -1; font: 13px/1.2 var(--f-text); color: #d8d2c4; }
.kp-roster { display: flex; flex-direction: column; gap: 8px; }
.kp-board .kp-crew + .kp-crew { margin-top: 0; }
.kp-board .kp-crew-head b { font-size: 20px; color: #ffb8ad; }
.kp-board .kp-crew.mine .kp-crew-head b { color: #c3e6ab; }
.kp-board .kp-crew-head span, .kp-board .kp-crew-head em { color: #b9b2a2; }
.kp-board .kp-chips { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; }
.kp-board .kp-chip { padding: 3px 7px 4px; background: rgba(236,226,196,.94); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.kp-board .kp-chip b { font-size: 16.5px; }
.kp-board .kp-chip.fight { box-shadow: 0 0 0 2px var(--seeds), 0 2px 4px rgba(0,0,0,.5); }
.kp-mine { display: flex; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 6px; background: rgba(0,0,0,.5); }
.short .kp-move { width: 118px; min-height: 52px; }
.short .kp-move b { font-size: 23px; }
.short .kp-digit { font-size: 108px; }
.short .kp-board { gap: 5px; padding: 6px 10px 8px; }
.short .kp-msg { font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
  .kp-digit { animation: none; opacity: .85; }
}

/* стоя: таймер — справа от головы, под столбиком с именем; удары — во всю ширину над своим здоровьем, над ними дыхалка
   и бумажки; доска — одной колонкой */
.tall .kp-count { left: auto; right: 8px; top: calc(var(--fp-top, 220px) + 2px); width: 108px; height: 118px; }
.tall .kp-digit { font-size: 112px; }
.tall .kp-moves { left: 8px; right: 8px; bottom: 42px; }
.tall .kp-move { flex: 1; width: auto; min-height: 60px; }
.tall .kp-move small { font-size: 13.5px; }
.tall .kp-breath { left: 8px; bottom: 112px; }
.tall .kp.duel .kp-tools { top: auto; right: 8px; bottom: 110px; }
.tall .kp-fight .fp-side { bottom: auto; }
.tall .kp-fight .fp-side > .fp-ladder { flex-wrap: wrap; row-gap: 4px; padding: 2px 0 0; }
.tall .kp-fight .fp-hint { bottom: 148px; }
.tall .kp-fight .fp-log { bottom: 180px; }
.tall .kp-tag { font-size: 13.5px; }
.tall .kp .skc { bottom: 150px; height: 52%; }
.tall .kp.duel .skc { width: auto; height: auto; top: min(calc(var(--fp-top, 220px) + 128px), calc(100% - 350px)); }
.tall .kp-tools { top: auto; right: 8px; bottom: 9px; }
.tall .kp-board { gap: 6px; padding: 8px 8px 52px; }
.tall .kp-head { flex-wrap: wrap; padding-right: 46px; }
.tall .kp-title b { font-size: 17px; }
.tall .kp-msg { font-size: 18px; }
.tall .kp-msg.paper.big { font-size: 20px; }
.tall .kp-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.tall .kp-mine { flex-wrap: wrap; gap: 6px 10px; padding: 6px 8px; }
.tall .kp-mine .sk-me { flex-basis: 100%; order: 3; }

/* ---------- город: живая 3D-карта во весь экран (система 10) ----------
   Холст — webapp/city.js (свой стиль меток — внутри модуля, под .cty); здесь — шапка (чёрная полоса, как у игры), записка
   «едем», список точек (если 3D не завелось) и листок зоны — бумага на скотче внизу. */
.cty-win { position: absolute; inset: 0; overflow: hidden; background: #dfe4e7; color: var(--ink); }
.cty-map, .cty-host { position: absolute; inset: 0; }
.cty-map[hidden] { display: none; }
.cty-hud { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 7px 56px 7px 10px; color: #eceae4;
  background: #17140f repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px);
  box-shadow: 0 3px 0 #000, 0 6px 14px rgba(0,0,0,.35); }
.cty-title { display: flex; flex-direction: column; gap: 1px; padding: 3px 10px 4px; transform: rotate(-1deg); color: var(--ink); }
.cty-title b { font: 700 20px/1 var(--f-print); letter-spacing: 2px; text-transform: uppercase; }
.cty-title small { font: 700 14px/1.05 var(--f-hand); color: var(--ink-soft); }
.cty-crews { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.cty-crew { display: flex; align-items: center; gap: 5px; font: 700 18px/1 var(--f-hand); white-space: nowrap; }
.cty-crew i { width: 12px; height: 16px; flex: none; background: var(--c); clip-path: polygon(0 0, 100% 12%, 70% 38%, 100% 64%, 0 70%); }
.cty-crew em { font: 13px/1 var(--f-text); font-style: normal; color: #b9b2a2; }
.cty-crew.mine b { box-shadow: inset 0 -3px 0 var(--c); }
.cty-crew.none { font: 15px/1.1 var(--f-text); color: #b9b2a2; }
.cty-btns { margin-left: auto; flex: none; display: flex; align-items: center; gap: 9px; }
.cty-mode { position: relative; flex: none; padding: 4px 11px 5px; font: 700 17px/1 var(--f-hand); color: var(--ink);
  transform: rotate(1.5deg); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.cty-mode:first-child { transform: rotate(-1.2deg); }
.cty-mode.on { box-shadow: 0 0 0 2px var(--pen-red), 0 2px 3px rgba(0,0,0,.5); }
.cty-hot { position: absolute; right: -4px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 2px #17140f; }
.cty-note { position: absolute; left: 50%; top: 50%; z-index: 6; max-width: calc(100% - 32px); padding: 10px 18px 12px; text-align: center;
  font: 700 23px/1.15 var(--f-hand); transform: translate(-50%, -50%) rotate(-1deg); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.cty-note[hidden] { display: none; }
.cty-list { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; z-index: 4; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; align-content: start; padding: 12px;
  background: linear-gradient(#2a2e34, #1c1f23); }
.cty-list[hidden] { display: none; }
.cty-broken { grid-column: 1 / -1; font: 700 18px/1.2 var(--f-hand); color: #f3ecd9; }
.cty-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px 9px; text-align: left;
  border-left: 7px solid var(--c, #8a8f96); color: var(--ink); box-shadow: 0 3px 6px rgba(0,0,0,.45); cursor: pointer; }
.cty-row:nth-child(2n) { transform: rotate(.5deg); }
.cty-row.sel { outline: 2.5px solid var(--pen-red); outline-offset: 1px; }
.cty-row b { font: 700 19px/1.05 var(--f-hand); }
.cty-row span { font: 14px/1.15 var(--f-text); color: var(--ink-soft); }
.cty-row em { font: 700 14px/1 var(--f-print); font-style: normal; letter-spacing: .5px; text-transform: uppercase; color: var(--pen-red); }
.cty-row em.soon { color: var(--ink-soft); }
.cty-card { position: absolute; z-index: 7; left: 12px; bottom: 12px; width: min(400px, calc(100% - 24px)); max-height: calc(100% - 84px);
  overflow-y: auto; padding: 14px 16px 14px; transform: rotate(-.4deg); box-shadow: 0 10px 22px rgba(0,0,0,.35);
  overscroll-behavior: contain; }
.cty-card[hidden] { display: none; }
.cty-card h2 { margin: 0 34px 6px 0; font: 700 21px/1.05 var(--f-print); letter-spacing: 1.2px; text-transform: uppercase; text-wrap: balance; }
.cty-card p { margin: 6px 0 0; font: 15.5px/1.3 var(--f-text); }
.cty-card .row { margin-top: 10px; }
.cty-x { position: absolute; right: 6px; top: 4px; width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  font: 700 28px/1 var(--f-hand); color: var(--ink); }
.cty-who { display: flex; align-items: center; gap: 7px; font: 700 20px/1.1 var(--f-hand); }
.cty-flag { width: 14px; height: 19px; flex: none; background: var(--c); clip-path: polygon(0 0, 100% 12%, 70% 38%, 100% 64%, 0 70%); }
.cty-flavor { font-style: italic; color: var(--ink-soft); }
.cty-guard { color: var(--pen-red); font: 700 18px/1.15 var(--f-hand) !important; }
.cty-capt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; padding: 5px 8px 6px;
  border-left: 4px solid rgba(0,0,0,.25); background: rgba(0,0,0,.04); font: 14.5px/1.2 var(--f-text); }
.cty-capt.hot { border-left-color: var(--pen-red); background: rgba(184,36,26,.08); }
.cty-capt b { font: 700 17px/1.05 var(--f-hand); color: var(--pen-red); }
.cty-h { margin-top: 10px; font: 700 14px/1 var(--f-print); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
/* расклад: капты города (тычок — к точке) и бригады с флагом своего цвета */
.cty-go { width: 100%; text-align: left; color: var(--ink); cursor: pointer; }
.cty-go.mine { box-shadow: inset -4px 0 0 var(--seeds); }
.cty-brow { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; margin-top: 8px; padding: 6px 8px 7px;
  border-left: 4px solid var(--c); background: rgba(0,0,0,.04); font: 14.5px/1.2 var(--f-text); }
.cty-brow > * { grid-column: 2; }
.cty-brow > .cty-flag { grid-column: 1; grid-row: 1; margin-top: 2px; }
.cty-brow.mine { background: rgba(184,36,26,.07); }
.cty-bname { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cty-bname b { font: 700 20px/1.05 var(--f-hand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cty-bname em { flex: none; font: 700 13px/1 var(--f-print); font-style: normal; letter-spacing: .5px; text-transform: uppercase;
  color: var(--pen-red); }
.cty-bmeta { font-size: 13.5px; color: var(--ink-soft); }
.cty-can { font-weight: 700; color: #2c6b35; }
.cty-full { color: var(--ink-soft); }
.cty-rules { font-size: 13.5px !important; color: var(--ink-soft); }
.tall .cty-hud { gap: 5px 10px; padding: 6px 50px 6px 8px; }
.tall .cty-title b { font-size: 17px; }
.tall .cty-crew { font-size: 16px; }
.tall .cty-list { top: 84px; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; }
.tall .cty-card { left: 6px; right: 6px; bottom: 6px; width: auto; max-height: 60%; transform: none; }

/* ---------- стоя: сцена 420 условных пикселей шириной и выше по окну (app.js, fitStage — класс tall) ----------
   Решение владельца 2026-09-25: телефон стоя — вертикально, ПК и телефон боком — как было. Шапка — в две строки: аватар,
   имя с авторитетом, пивко с мобилой и бабки сверху, силы, задор и семки снизу. У каждого окна раскладка стоя — рядом
   с его разделом (.tall …); здесь — сцена, шапка, «Остановка», кореш, карточка и общая рамка окон. */
.tall { --hud-h: 94px; border-radius: 0; }
.tall .hud { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 3px 10px;
  align-items: center; padding: 5px 10px 6px 8px; }
.tall .hud-me { grid-row: 1 / span 2; }
.tall .hud-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tall .hud-who { flex: 1 1 0; min-width: 0; }
.tall .res.energy, .tall .res.vigor { flex: 1 1 0; min-width: 0; }
.tall .hud-free { flex: none; padding-right: 0; }
.tall .hud-name { font-size: 20px; }
.tall .hud-phone-label { display: none; }
.tall .hud-phone { padding: 2px 7px 3px 5px; }
.tall .hud-phone .icon { width: 32px; height: 32px; }
.tall .hud-beer { margin-right: 10px; }
.tall .money { font-size: 22px; }
.tall .money .icon { width: 28px; height: 28px; }

/* «Остановка» стоя: по одному столбцу значков с каждого края, пацан посередине — сколько даёт высота. Его картинка шире
   фигуры: столбцы значков лежат поверх, чтобы прозрачный край куклы не съедал тычок по значку. */
.tall .map.hub { padding: 10px 8px 8px; column-gap: 2px;
  background: linear-gradient(90deg, rgba(8,9,10,.45), transparent 30%, transparent 70%, rgba(8,9,10,.45)); }
.tall .hub-side { position: relative; z-index: 1; }
.tall .hub-grid { grid-template-columns: calc(var(--ico, 60px) + 26px); gap: 10px; }
.tall .hub-icon-name { font-size: 12px; padding: 1px 5px 2px; }
.tall .hub-icon.big .hub-icon-name { font-size: 16px; padding: 2px 10px 3px; }
/* Номерок — на картинке, а не на подписи: «На сегодня» при узком столбце ложится в две строки. */
.tall .hub-icon .corner-tag { bottom: auto; top: calc(var(--ico, 60px) - 16px); }

/* Кореш стоя — поменьше, облако по тексту и не до правого края: внизу справа «Обход» и «Дела», наверху — крестик окна.
   Садится подальше от пальца (say(), класс atop — наверх, под шапку): облако тычок забирает себе, а тыкают подряд —
   заметки газеты, кнопки общака и качалки (владелец 2026-09-25: кореш мешал быстро тыкать дела). Случай на деле
   (pinned) — во всю ширину: там выбирают. */
.tall .say { left: 4px; right: 6px; bottom: 8px; }
.tall .say-art { width: 92px; }
.tall .say-bubble { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 196px); margin-bottom: 16px; padding: 8px 11px;
  font-size: 14.5px; }
.tall .say.atop { top: calc(var(--hud-h) + 6px); bottom: auto; }
.tall .say.atop .say-bubble { max-width: calc(100% - 136px); }
.tall .say.pinned .say-bubble { flex: 1 1 auto; max-width: none; }
.tall .say-phrase { font-size: 17px; }
.tall .case-opt { min-height: 44px; justify-content: center; }

/* Карточка стоя: картинка сверху, текст под ней. */
.tall .modal { padding: 10px; }
.tall .modal-card { grid-template-columns: 1fr; padding: 14px 14px 12px; max-height: 100%; overflow-y: auto; }
.tall .modal-card > :not(.modal-art) { grid-column: 1; }
.tall .modal-art { grid-row: auto; justify-self: center; width: 120px; height: 120px; }
.tall .modal-card .big-title { text-align: center; }
/* Одна кнопка в последней строке («Понял», «Закрыть») — во всю ширину, под палец. */
.tall .modal-card > .row:last-child > .btn:only-child { flex: 1; min-height: 42px; }

/* Общая рамка окон стоя: окно во всю ширину, заголовок помельче. */
.tall .win-layer { padding: 8px 6px; }
.tall .win { padding: 10px 10px; gap: 8px; }
.tall .win.board { padding: 0 2px 4px; border-width: 18px; }
.tall .win-head { gap: 8px; }
.tall .win-photo .art { width: 46px; height: 56px; border-width: 3px 3px 9px; }
.tall .win-strip { margin-top: 2px; }
.tall .strip { padding: 5px 20px 6px 12px; }
.tall .win-title { font-size: 21px; }
.tall .win-sub { font-size: 14px; }
.tall .win-x { width: 42px; height: 42px; }
.tall .win-body.paper { padding: 10px 10px; }