/* Mafia Offline — мини-приложение. Нуар: почти чёрный стол, чёрные карты, фигура на красном круге,
   красный — только главное действие, круг портрета и активное состояние. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400-normal.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-cyrillic-500-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-500-normal.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-600-normal.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; font-display: swap; src: url(fonts/oswald-cyrillic-500-normal.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; font-display: swap; src: url(fonts/oswald-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/oswald-latin-500-normal.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: 600; font-display: swap; src: url(fonts/oswald-cyrillic-600-normal.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: 600; font-display: swap; src: url(fonts/oswald-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/oswald-latin-600-normal.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; }

/* Тема всегда тёмная: это игровой стол. Цвета логотипа — brand/README.md. */
:root {
  color-scheme: dark;
  --bg: #0C0B0B;          /* стол */
  --raise: #161415;       /* поверхность на столе */
  --raise-2: #211E1F;     /* нажатие, вложенный слой */
  --line: #2A2627;        /* волосяная линия */
  --line-2: #3E3839;      /* граница кнопок */
  --text: #F2ECE4;        /* кость */
  --muted: #A39A91;       /* вторичный текст */
  --card: #141213;        /* лицо карты — чёрное */
  --card-line: #2E292A;   /* внутренняя рамка карты */
  --card-2: #1F1C1D;
  --ink: #0C0B0B;         /* тёмный текст на светлой кнопке */
  --ink-muted: #A39A91;
  --disc: #A3221B;        /* круг за персонажем, как прожектор на афише */
  --disc-soft: #4A1914;   /* круг маленьких портретов в списках */
  --red: #B3261E;         /* только главное действие и активное состояние */
  --red-press: #951E17;
  --red-dark: #7A1712;    /* рамка рубашки */
  --red-text: #EE5D4E;    /* красный текст на тёмном */
  --on-red: #F7F1E8;      /* текст на красной кнопке — в обеих темах светлый */
  --knob: #F2ECE4;        /* бегунок переключателя */
  --medallion: #F2ECE4;   /* круг на рубашке */
  --back: #9E211A;        /* рубашка карты */
  --pop-bg: #1C191A;      /* окно подсказки «i» */
  --pop-text: #D3CBC2;
  --pop-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  --card-shadow: none;
  --deck-shadow: 0 1px 4px rgba(12, 6, 4, .35); /* тень уголка рубашки за аватаром (.seat-back) */
  --backdrop: rgba(12, 9, 8, .78);
  --ink-press: #D9D2C9;
  --face-bg: #141011;     /* под фото лица роли (студийный тёмный фон) */
  --face-ring: rgba(201, 164, 92, .42); /* латунное кольцо по краю лица роли */
  --hesh-mark: #F6F4EF;   /* знак # tech фоном рекламного блока: бумага бренда, едва заметно (памятка Hesh Tech 5а) */
  --hesh-mark-a: .05;
  --hesh-gold: #E2B04A;   /* три длинных штриха знака # tech — одно золото на тёмном и светлом (знак v2, памятка Hesh Tech 12.10) */

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', 'Roboto Condensed', sans-serif;

  --r-card: 16px;
  --r-surface: 16px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  --ease-move: cubic-bezier(.25, 1, .5, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-exit: cubic-bezier(.5, 0, .75, 0);
  --ease-press: cubic-bezier(.25, .46, .45, .94);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
}

/* Светлая тема — бумага и кремовые карты (первый вариант карт, выбор Сардора 05.10.2026). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3EDE3;
  --raise: #FFFCF7;
  --raise-2: #EBE3D6;
  --line: #E3D9CA;
  --line-2: #CDBFAB;
  --text: #1F1916;
  --muted: #6B5E55;
  --card: #EFE6D6;
  --card-line: #D8CAB2;
  --card-2: #E4D8C4;
  --ink: #FFFCF7;
  --ink-muted: #5C5047;
  --disc: #E2D5BF;
  --disc-soft: #E2D5BF;
  --red: #B8322A;
  --red-press: #9F2A23;
  --red-dark: #8F241E;
  --red-text: #A82A22;
  --knob: #FFFCF7;
  --medallion: #EFE6D6;
  --back: #B8322A;
  --pop-bg: #FFFCF7;
  --pop-text: #3A302A;
  --pop-shadow: 0 18px 40px rgba(60, 40, 25, .18), 0 2px 8px rgba(60, 40, 25, .1);
  --card-shadow: 0 1px 0 rgba(60, 40, 25, .06), 0 10px 26px -10px rgba(60, 40, 25, .28);
  --deck-shadow: 0 1px 3px rgba(60, 40, 25, .3);
  --backdrop: rgba(31, 25, 22, .42);
  --ink-press: #3A302A;
  --face-bg: #1F1916;
  --face-ring: rgba(122, 86, 40, .55);
  --hesh-mark: #0D0E11;
  --hesh-mark-a: .04;
}
/* Смена темы — мгновенно, без проезда всех цветов. */
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
/* Старый Telegram (до Bot API 7.7) сворачивает приложение свайпом вниз, когда документ в самом верху: документ на 2 px
   длиннее окна, swipeguard.js держит его на 1 px от верха (и в мире онлайн-игры, где страница не прокручивается). */
html.tg-guard body { min-height: calc(100vh + 2px); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
img, svg { display: block; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.ic { width: 24px; height: 24px; flex: none; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 32px; height: 32px; }
.ic-xl { width: 44px; height: 44px; stroke-width: 1.5; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── каркас ── */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: 12px 16px calc(var(--tabbar-h) + 32px + var(--safe-b));
}
#app.has-cta { padding-bottom: calc(96px + var(--safe-b)); }
#app.has-cta.has-tabs { padding-bottom: calc(var(--tabbar-h) + 104px + var(--safe-b)); }
#app.no-tabs:not(.has-cta) { padding-bottom: calc(32px + var(--safe-b)); }
/* Экраны: вперёд — въезд справа, назад — слева, вкладки — каскадом снизу (анимируется что-то одно). */
#app { overflow-x: hidden; overflow-x: clip; }
.view-fwd { animation: slide-fwd 300ms var(--ease-move) backwards; }
.view-back { animation: slide-back 300ms var(--ease-move) backwards; }
.view-tab > * { animation: rise 380ms var(--ease-enter) backwards; }
.view-tab > :nth-child(2) { animation-delay: 40ms; }
.view-tab > :nth-child(3) { animation-delay: 80ms; }
.view-tab > :nth-child(4) { animation-delay: 120ms; }
.view-tab > :nth-child(5) { animation-delay: 160ms; }
.view-tab > :nth-child(6) { animation-delay: 200ms; }
.view-tab > :nth-child(7) { animation-delay: 230ms; }
.view-tab > :nth-child(n+8) { animation-delay: 260ms; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes slide-fwd { from { opacity: 0; transform: translateX(32px); } }
@keyframes slide-back { from { opacity: 0; transform: translateX(-32px); } }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 20px; }
/* Знак # tech фоном рекламного блока (памятка Hesh Tech 5а, Сардор 12.10: только рекламные баннеры для игрока —
   сейчас купон «Кассы», kassa.css): под содержимым, мимо кликов и диктора; блок с ним — isolation и overflow: clip. */
.hesh-bg-mark { position: absolute; z-index: -1; width: auto; pointer-events: none; color: var(--hesh-mark); opacity: var(--hesh-mark-a); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 34px; height: 37px; flex: none; }
/* Длинный кошелёк (крупные суммы) не уходит за край: надпись логотипа сжимается, а не кошелёк. */
.brand-word { height: 15px; width: auto; min-width: 0; flex: 0 1 auto; object-fit: contain; object-position: left center; }
/* Надпись логотипа: светлая на тёмном столе, тёмная на бумаге. */
.brand-word--light { display: none; }
:root[data-theme="light"] .brand-word--dark { display: none; }
:root[data-theme="light"] .brand-word--light { display: block; }
.back {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 4px;
  margin-inline-start: -4px; border-radius: var(--r-pill); color: var(--muted); font-weight: 500;
}
.back:active { background: var(--raise); }

/* Кошелёк в шапке: монеты и бриллианты (переход в профиль) и «+» — лист «Пополнить» (webapp/topup.js). */
.wallet {
  display: inline-flex; align-items: center; flex: none; height: 40px; padding-inline-end: 4px;
  border: 1px solid var(--line); border-radius: var(--r-pill); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.wallet-main {
  display: inline-flex; align-items: center; gap: 10px; height: 100%; padding: 0 8px 0 12px;
  border-radius: var(--r-pill); transition: background-color 150ms ease;
}
.wallet-main span { display: inline-flex; align-items: center; gap: 4px; }
.wallet .ic { width: 16px; height: 16px; color: var(--muted); }
.wallet-main:active { background: var(--raise); }
/* Узкий экран: кошелёк с «+» важнее надписи — остаётся только знак. */
@media (max-width: 374px) {
  .top .brand-word { display: none !important; }
  .wallet-main { gap: 8px; padding-inline-start: 10px; }
}

/* ── типографика ── */
.eyebrow { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.display { font: 600 40px/1.02 var(--font-display); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 24px; }
.title { font: 600 32px/1.05 var(--font-display); letter-spacing: -.005em; text-wrap: balance; margin-bottom: 16px; }
.lead { color: var(--muted); margin-bottom: 24px; text-wrap: pretty; }
.sec {
  display: flex; align-items: center; gap: 2px;
  margin: 32px 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em;
}
.sec small { font-weight: 400; color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.note { color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 12px; text-wrap: pretty; }

/* ── игральная карта ── */
.pcard {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  text-align: start;
  background: var(--card);
  color: var(--text);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px var(--card-line);
}
.pcard::after {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid var(--card-line);
  border-radius: 11px;
  pointer-events: none;
  opacity: .7;
}
.idx {
  position: absolute; top: 14px; left: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: 600 20px/1 var(--font-display); color: var(--red);
}
.idx::after { content: ''; width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); }
.idx--end { top: auto; left: auto; bottom: 14px; right: 14px; transform: rotate(180deg); }

/* «Комната закрыта» (10.10): ведущий закрыл набор — спокойная плашка над выбором режима, не ошибка; «×» — прочитано. */
.room-closed {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
  padding: 14px 6px 14px 14px; margin-bottom: 12px; animation: fade-in 220ms var(--ease-out) backwards;
}
.room-closed-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--brass); box-shadow: inset 0 0 0 1.5px currentColor; }
.room-closed-ic .ic { width: 18px; height: 18px; }
.room-closed-t { display: grid; gap: 2px; padding-top: 1px; min-width: 0; }
.room-closed-t b { font-size: 16px; font-weight: 600; }
.room-closed-t span { font-size: 14px; line-height: 1.4; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }
.room-closed-x { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px 0; border-radius: 50%; color: var(--muted); }
.room-closed-x .ic { width: 20px; height: 20px; }
.room-closed-x:active { background: var(--raise-2); color: var(--text); }
.room-closed-x:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .room-closed-x:hover { color: var(--text); } }

/* Режимы на главном экране: две карты, сданные на стол. */
.deck { display: grid; gap: 12px; margin-bottom: 32px; }
.mode {
  min-height: 160px;
  padding: 22px 20px 20px 52px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 12px;
  transition: transform 180ms var(--ease-out);
}
.mode:nth-child(1) { transform: rotate(-1.2deg); }
.mode:nth-child(2) { transform: rotate(.9deg); }
.mode:active { transform: rotate(0) scale(.985); }
.mode-title { grid-column: 1; font: 600 30px/1.1 var(--font-display); }
.mode-ic { grid-column: 2; grid-row: 1 / 3; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--disc); color: var(--text); }
.mode-ic .ic { width: 30px; height: 30px; stroke-width: 1.75; }
.mode-text { grid-column: 1; color: var(--muted); margin-top: 6px; max-width: 30ch; text-wrap: pretty; }
.mode-go {
  grid-column: 2; grid-row: 3; align-self: end;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text); color: var(--ink);
}

/* ── поверхности и списки ── */
.surface { background: var(--raise); border-radius: var(--r-surface); }
.list > li + li, .list > .row + .row { border-top: 1px solid var(--line); }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 10px 14px; text-align: start;
}
button.row, a.row { transition: background-color 150ms ease; }
button.row:active, a.row:active { background: var(--raise-2); }
.row:first-child { border-top-left-radius: var(--r-surface); border-top-right-radius: var(--r-surface); }
.row:last-child { border-bottom-left-radius: var(--r-surface); border-bottom-right-radius: var(--r-surface); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { color: var(--muted); font-size: 13px; line-height: 1.4; }
.row-end { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.tile {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--raise-2); color: var(--text);
}
.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--raise-2);
  font: 600 15px/1 var(--font-display); color: var(--text);
}
.rank { width: 28px; flex: none; text-align: center; font: 600 18px/1 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  background: var(--raise-2); color: var(--muted);
}
.empty { padding: 20px 16px; color: var(--muted); text-align: center; text-wrap: pretty; }

.stack { display: grid; gap: 8px; }
.gap-top { margin-top: 12px; }
.cluster { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── кнопки ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 16px; white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-block { width: 100%; }
.btn-primary { background: var(--red); color: var(--on-red); }
.btn-primary:active:not(:disabled) { background: var(--red-press); }
.btn-primary:disabled { background: var(--raise-2); color: var(--muted); }
.btn-secondary { border: 1px solid var(--line-2); color: var(--text); height: 48px; padding: 0 20px; }
.btn-secondary:active:not(:disabled) { background: var(--raise-2); }
.btn-secondary:disabled { color: var(--muted); border-color: var(--line); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-ghost { height: 44px; padding: 0 12px; color: var(--muted); font-weight: 500; }
.btn-ghost:active { color: var(--text); }
.btn-danger { color: var(--red-text); }
.btn-ink { background: var(--text); color: var(--ink); height: 44px; padding: 0 18px; font-size: 15px; }
.btn-ink:active:not(:disabled) { background: var(--ink-press); }
.btn-ink-line { border: 1px solid var(--line-2); color: var(--text); height: 44px; padding: 0 18px; font-size: 15px; }
.btn-ink-line:active:not(:disabled) { background: var(--raise-2); }
.btn[aria-busy="true"] { pointer-events: none; opacity: .7; }
.icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-2);
  transition: background-color 150ms ease;
}
.icon-btn:active:not(:disabled) { background: var(--raise-2); }
.icon-btn:disabled { color: var(--line-2); border-color: var(--line); }

/* Нижняя панель с главным действием. */
.cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px 16px calc(12px + var(--safe-b));
  background: var(--bg); border-top: 1px solid var(--line);
}
.has-tabs .cta { bottom: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: 12px; }
.cta-in { max-width: 448px; margin: 0 auto; display: grid; gap: 8px; }
.cta-hint { text-align: center; color: var(--muted); font-size: 13px; }

/* ── вкладки ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--bg); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b);
}
.tabbar-in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); height: var(--tabbar-h); }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-size: 12px; font-weight: 500; transition: color 150ms ease;
}
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"]::before {
  content: ''; position: absolute; top: -1px; left: 50%; width: 28px; height: 2px;
  margin-left: -14px; background: var(--red); border-radius: 0 0 2px 2px;
}

/* ── поля ── */
.field-label { display: block; font-weight: 600; margin-bottom: 8px; }
.join-row { display: flex; gap: 8px; }
.input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px;
  background: var(--raise); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  transition: border-color 150ms ease;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:focus { outline: none; border-color: var(--text); }
.input-code { font: 500 20px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.input-code::placeholder { font: 400 15px/1 var(--font-body); letter-spacing: 0; text-transform: none; }
.field-err { color: var(--red-text); font-size: 13px; margin-top: 8px; }
.names { display: grid; gap: 8px; padding: 12px; }
.names .input { height: 44px; border-radius: 12px; }

/* Переключатель. */
.switch {
  position: relative; width: 48px; height: 28px; flex: none; border-radius: var(--r-pill);
  background: var(--line-2); transition: background-color 180ms ease;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--knob); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 180ms var(--ease-out);
}
.switch[aria-checked="true"] { background: var(--red); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch:disabled { opacity: .4; }
/* Строки «Звук» в профиле: нажимается вся строка; атмосфера гаснет, пока звук выключен. */
.snd-row { cursor: pointer; transition: background-color 150ms ease; }
.snd-row:not(.is-off):active { background: var(--raise-2); }
.snd-row.is-off { cursor: default; }
.snd-row.is-off :is(.tile, .row-title) { opacity: .45; }

/* Счётчик. */
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper-val { min-width: 2ch; text-align: center; font: 600 28px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.stepper-sm .icon-btn { width: 36px; height: 36px; }
.stepper-sm .stepper-val { font-size: 20px; }

/* Выбор варианта. */
.options { display: grid; gap: 12px; }
.option {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 18px 16px; text-align: start; width: 100%;
  background: var(--raise); border: 1px solid transparent; border-radius: var(--r-surface);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.option[aria-checked="true"] { border-color: var(--text); background: var(--raise-2); }
.option-title { font-weight: 600; font-size: 17px; margin-bottom: 2px; }
.option-text { color: var(--muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); margin-top: 2px; display: grid; place-items: center; }
.option[aria-checked="true"] .radio { border-color: var(--red); }
.option[aria-checked="true"] .radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

/* ── билет комнаты ── */
.ticket { padding: 22px 20px 20px; text-align: center; }
.ticket-label { display: block; color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.ticket-code { display: block; font: 600 46px/1.1 var(--font-display); letter-spacing: .16em; margin-right: -.16em; font-variant-numeric: tabular-nums; }
/* Кнопки не заходят в углы карты (индексы «M♦» сверху и снизу): поля по бокам, а если в ряд не помещаются
   (320 px, длинные подписи) — второй ряд, а не наезд на нижний индекс. */
.ticket-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; padding-inline: 12px; }
.ticket-host { color: var(--muted); margin-top: 4px; }

/* Состав ролей. */
.comp { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px;
  border-radius: var(--r-pill); font-size: 14px; background: var(--raise);
}
.chip .ic { width: 20px; height: 20px; color: var(--muted); }
.chip b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── карта роли ── */
.flip {
  position: relative; display: block; width: min(72vw, 288px); aspect-ratio: 5 / 7; margin: 8px auto 0;
  perspective: 1200px; touch-action: manipulation; transition: transform 140ms var(--ease-press);
}
.flip:not(.is-open):active { transform: scale(.97); }
.flip-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.3, .7, .2, 1); }
.flip.is-open .flip-in { transform: rotateY(180deg); }
/* Сторона, оказавшаяся сзади, выключается в момент, когда карта стоит ребром. Одного backface-visibility
   на iPhone мало: рубашка с медальоном просвечивала сквозь лицо карты. Кривая переворота (.3,.7,.2,1)
   проходит 90° на 19% времени — 100 мс из 520; при 250 мс карта пропадала целиком на полторы десятых секунды. */
.side {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s linear 100ms;
}
.side-face { transform: rotateY(180deg); visibility: hidden; }
.flip.is-open .side-face { visibility: visible; }
.flip.is-open .side-back { visibility: hidden; }
.flip.is-static .flip-in { transform: none; transition: none; }
.flip.is-static .side-face { transform: none; visibility: visible; transition: none; }
/* Открытие: карта приподнимается над столом, пока переворачивается. */
.flip.animate { animation: card-lift 560ms cubic-bezier(.3, .7, .2, 1); }
.flip.is-static.animate { animation: none; }
@keyframes card-lift { 45% { transform: translateY(-12px) scale(1.04); } }
/* Сдача: карта влетает справа; передача: улетает влево. */
.flip.deal-in { animation: deal-card 520ms var(--ease-enter) backwards; }
@keyframes deal-card { from { opacity: 0; transform: translate(110%, 24px) rotate(14deg); } }
.flip.fly-out { transform: translate(-125%, -12px) rotate(-12deg); opacity: 0; transition: transform 240ms var(--ease-exit), opacity 240ms ease; }

.card-back {
  background-color: var(--back);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 0 18 9 9 18 0 9Z' fill='none' stroke='%237C1913' stroke-width='1'/%3E%3C/svg%3E");
  display: grid; place-items: center;
}
.card-back::after { content: ''; position: absolute; inset: 10px; border: 2px solid var(--red-dark); border-radius: 10px; }
.medallion { width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--medallion); border: 3px solid var(--red-dark); display: grid; place-items: center; }
.medallion .figure { width: 74%; height: auto; }

/* Сетка: портрет занимает всё, что осталось после текста. Длинное имя в две строки («Комиссар Каттани»)
   уменьшает портрет, а не выталкивает описание за край карты. */
.card-face {
  background: var(--card); color: var(--text); display: grid; grid-template-rows: minmax(0, 1fr) auto auto auto;
  justify-items: center; text-align: center; padding: 20px 20px 32px;
}
.card-face::after { content: ''; position: absolute; inset: 6px; border: 1px solid var(--card-line); border-radius: 13px; pointer-events: none; opacity: .6; }
.card-face .corner { position: absolute; top: 12px; left: 14px; color: var(--red-text); font: 600 18px/1 var(--font-display); }
.card-face .corner--end { top: auto; left: auto; bottom: 12px; right: 14px; transform: rotate(180deg); }
/* Портрет на красном круге — как фигура на киноафише. */
.portrait {
  display: block; height: 100%; max-width: 100%; aspect-ratio: 1; min-height: 0; overflow: hidden;
  border-radius: 50%; background: var(--disc);
}
.portrait .ch { display: block; width: 100%; height: 100%; }
.role-name { font: 600 27px/1.1 var(--font-display); text-wrap: balance; margin-top: 12px; }
/* Команда — красная подпись между двумя чертами. */
.team {
  display: inline-flex; align-items: center; gap: 8px; height: 24px; margin: 6px 0 10px;
  font-size: 13px; font-weight: 600; color: var(--red-text);
}
.team::before, .team::after { content: ''; width: 16px; height: 1px; background: currentColor; opacity: .8; }
.team--town { color: var(--muted); }
.role-short { color: var(--muted); font-size: 14px; line-height: 1.4; text-wrap: pretty; }
/* Узкая карта (окно роли, экраны 320 px): текст чуть меньше, чтобы портрет не съёживался. */
.card-face { container-type: size; }
@container (max-width: 200px) {
  .role-name { font-size: 22px; margin-top: 8px; }
  .team { height: 22px; font-size: 12px; margin: 6px 0 8px; }
  .role-short { font-size: 13px; line-height: 1.35; }
}
.flip-hint { text-align: center; color: var(--muted); font-size: 14px; margin-top: 16px; min-height: 21px; }

/* Персонаж оживает после переворота: плечи, голова, шляпа падает на место, предмет выпрыгивает, моргание. */
/* Только у оживляемых групп: у вложенных групп рисунка свой transform, его не трогаем. */
.ch-body, .ch-head, .ch-top, .ch-prop, .ch-eyes { transform-box: fill-box; transform-origin: 50% 100%; }
.ch .ch-eyes { transform-origin: 50% 50%; }
.flip.animate .ch-body { animation: ch-rise 460ms 140ms var(--ease-enter) backwards; }
.flip.animate .ch-head { animation: ch-head 480ms 200ms var(--ease-enter) backwards; }
.flip.animate .ch-top { animation: ch-drop 640ms 320ms var(--ease-enter) backwards; }
.flip.animate .ch-prop { animation: ch-prop 560ms 480ms var(--ease-enter) backwards; }
.flip.animate .ch-eyes { animation: ch-blink 220ms 1150ms ease-in-out; }
.flip.animate .role-name { animation: rise 360ms 280ms var(--ease-enter) backwards; }
.flip.animate .team { animation: rise 360ms 340ms var(--ease-enter) backwards; }
.flip.animate .role-short { animation: rise 360ms 400ms var(--ease-enter) backwards; }
.flip.animate .corner { animation: fade 300ms 420ms ease backwards; }
@keyframes ch-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes ch-head { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes ch-drop {
  0% { opacity: 0; transform: translateY(-34px) rotate(-10deg); }
  55% { opacity: 1; transform: translateY(4px) rotate(3deg); }
  78% { transform: translateY(-2px) rotate(-1deg); }
}
@keyframes ch-prop {
  0% { opacity: 0; transform: scale(.3) rotate(-24deg); }
  65% { opacity: 1; transform: scale(1.08) rotate(5deg); }
}
@keyframes ch-blink { 50% { transform: scaleY(.1); } }
@keyframes fade { from { opacity: 0; } }

/* Маленькие портреты в списках: шляпа приподнимается при нажатии. */
.ch-avatar { position: relative; display: block; width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; background: var(--disc-soft); isolation: isolate; }
.ch-avatar .ch { display: block; width: 100%; height: 100%; }
/* Значок роли — фото вещи роли (07.10, webapp/photo.js → itemHtml, app.js → chAvatar): поверх рисунка,
   тонкое латунное кольцо по краю. */
.ch-avatar.has-face { background: var(--face-bg); }
.ch-avatar .rf-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; }
.ch-avatar.has-face::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--face-ring); pointer-events: none; }
/* Фото без вспышки (08.10, photo.js → ph-in): картинка прозрачна, пока не загрузилась, потом короткое проявление.
   Место держит пустой круг цвета лица (.is-wait — манифест фото ещё в пути): прежний рисунок под фото не кладётся. */
img.ph-in { opacity: 0; transition: opacity 180ms var(--ease-out); }
img.ph-in.is-in { opacity: 1; }
.ava-photo.is-wait { background: var(--face-bg); }
/* фото-лица ботов вне площади: круг .ava (стол, места, итоги) и .avatar (комната офлайн). Раньше — в square-photo.css;
   тот теперь грузится только с миром партии (webapp/lazy.js), а лица нужны и офлайн-комнате. Сила селекторов прежняя. */
.ava.ava-photo picture, .avatar.ava-photo picture { display: contents; }
.ava-photo, .avatar.ava-photo { position: relative; overflow: hidden; }
.ava.ava-photo img, .avatar.ava-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { img.ph-in { transition: none; } }
/* Превью фото (11.10, photo.js → data-lq / photoPicture lq): пока фото грузится — на его месте размытая крошечная копия
   (манифест img/lqip), фото проявляется поверх (только opacity), превью уходит после проявления. Слой превью — ::before
   узла под картинкой (картинка в узле — absolute, она позже в разметке и рисуется выше). --lq-blur — по размеру слоя. */
.ph-lq { overflow: hidden; }
.ph-lq::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--lq) var(--lq-pos, 50% 50%) / cover no-repeat; filter: blur(var(--lq-blur, 18px)); transform: scale(1.1);
}
.ph-lq.ph-lq:not(.has-photo) img { opacity: 0; }
.ph-lq img { transition: opacity 420ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .ph-lq img { transition: none; } }
.ch-avatar .ch-top, .ch-avatar .ch-prop { transition: transform 220ms var(--ease-enter); }
button.row:active .ch-avatar .ch-top { transform: translateY(-4px) rotate(-6deg); }
@media (hover: hover) and (pointer: fine) {
  button.row:hover .ch-avatar .ch-top { transform: translateY(-4px) rotate(-6deg); }
  button.row:hover .ch-avatar .ch-prop { transform: rotate(8deg); }
}

/* Передача телефона. */
.pass-head { text-align: center; margin-bottom: 8px; }
.pass-head .display { margin-bottom: 8px; }
.progress { display: flex; gap: 4px; margin-bottom: 20px; }
.progress i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress i.on { background: var(--text); }
.progress i.cur::after { content: ''; position: absolute; inset: 0; background: var(--red); transform-origin: left center; animation: seg-fill 460ms var(--ease-enter) backwards; }
@keyframes seg-fill { from { transform: scaleX(0); } }
.done { text-align: center; padding: 40px 0 16px; }
.done .tile { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px; }
.done .tile .ic { width: 36px; height: 36px; }

/* ── лист ведущего ── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { padding: 14px 12px; }
.stat b { display: block; font: 600 36px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13px; }
.verdict { display: grid; gap: 6px; padding: 18px 20px 18px 24px; margin-bottom: 12px; overflow: hidden; }
.verdict::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); border-radius: 4px 0 0 4px; }
.verdict-team { font: 600 30px/1.05 var(--font-display); }
.verdict-sub { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; text-wrap: pretty; }
.verdict.is-settled .verdict-sub .ic { color: var(--red-text); }
.order li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; }
.order li + li { border-top: 1px solid var(--line); }
.order .step { width: 24px; flex: none; text-align: center; font: 600 16px/1 var(--font-display); color: var(--muted); }
.order .ic { color: var(--muted); }
.order .edge { color: var(--muted); }
.who { text-align: start; }
.who[aria-pressed="true"] .row-title { text-decoration: line-through; color: var(--muted); }
.who[aria-pressed="true"] .row-sub { opacity: .7; }
.who .state { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.who[aria-pressed="true"] .state { background: var(--raise-2); border-color: var(--muted); color: var(--muted); }
.who .state .ic { width: 16px; height: 16px; stroke-width: 2.25; }
.role-line { display: inline-flex; align-items: center; gap: 6px; }
.role-line .ic { width: 16px; height: 16px; }

.timer { padding: 16px; display: grid; gap: 14px; margin-top: 12px; }
.timer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timer-val { font: 600 44px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.timer-val.is-zero { color: var(--red-text); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--bg); border-radius: var(--r-pill); border: 1px solid var(--line); }
.seg button { height: 36px; border-radius: var(--r-pill); font-weight: 600; font-size: 14px; color: var(--muted); transition: background-color 150ms ease, color 150ms ease; }
.seg button[aria-pressed="true"] { background: var(--raise-2); color: var(--text); }
.timer-ctl { display: flex; gap: 8px; }
.timer-ctl .btn { flex: 1; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.center { display: flex; justify-content: center; margin-top: 12px; }

/* ── онлайн ── */
.phase { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.phase-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--raise); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.phase-chip .ic { width: 18px; height: 18px; }
.phase-left { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.steps li { display: flex; gap: 14px; padding: 16px; }
.steps li + li { border-top: 1px solid var(--line); }
.steps .n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font: 600 16px/1 var(--font-display); }

/* ── профиль ── */
.me { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.me .avatar { width: 56px; height: 56px; font-size: 22px; }
.me .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.me-name { font: 600 26px/1.15 var(--font-display); }
.wallet-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wtile { display: flex; align-items: center; gap: 12px; padding: 14px; }
.wtile b { display: block; font: 600 24px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.wtile span { color: var(--muted); font-size: 13px; }
.wtile .ic { color: var(--muted); }
.item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px; align-items: start; }
.item + .item { border-top: 1px solid var(--line); }
.item-desc { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 2px 0 10px; text-wrap: pretty; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack { padding: 16px 8px 14px; text-align: center; display: grid; justify-items: center; gap: 6px; transition: background-color 150ms ease, border-color 150ms ease; }
.pack:active { background: var(--raise-2); }
.pack b { font: 600 28px/1 var(--font-display); }
.pack .price { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pack .price .ic { width: 14px; height: 14px; }
.langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.langs button {
  height: 42px; padding: 0 4px; border-radius: 12px; background: var(--raise); color: var(--muted);
  font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  touch-action: manipulation; transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-enter);
}
.langs button:active { transform: scale(.96); }
@media (max-width: 359px) { .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.langs button[aria-pressed="true"] { background: var(--raise-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--red); }

/* ── всплывающие ── */
.toast {
  position: fixed; z-index: 60; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px));
  max-width: calc(100% - 32px); width: max-content;
  padding: 12px 16px; border-radius: 12px; background: var(--raise-2); border: 1px solid var(--line-2);
  font-weight: 500; font-size: 14px; transform: translateX(-50%);
  animation: toast-in 200ms var(--ease-out) backwards;
}
.toast.out { opacity: 0; transform: translate(-50%, -8px); transition: opacity 160ms var(--ease-in), transform 160ms var(--ease-in); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }

/* Шторка снизу: затемнение — свой слой (гаснет вместе со сдвигом пальцем, webapp/sheet.js), панель прокручивается
   сама и не передаёт прокрутку странице; страница под шторкой стоит (касания по затемнению не прокручивают). */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  touch-action: none; overscroll-behavior: contain;
}
.modal-scrim { position: absolute; inset: 0; background: var(--backdrop); animation: fade-in 240ms ease backwards; }
.modal.closing .modal-scrim { animation: fade-out 200ms ease forwards; }
.modal.closing .modal-panel { animation: sheet-out 200ms var(--ease-exit) forwards; }
.modal.is-leaving, .modal.closing { pointer-events: none; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(48px); } }
.modal-panel {
  position: relative; width: 100%; max-width: 480px; max-height: 92dvh; overflow: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  background: var(--raise); border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0;
  padding: 12px 16px calc(20px + var(--safe-b));
  animation: sheet-in 340ms var(--ease-drawer) backwards;
}
/* Ручка: видимая черта 36×4, а тянуть можно за всю верхнюю кромку (sheet.js → GRIP_ZONE). */
.modal-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 12px; }
.modal.is-dragging .modal-panel { user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .modal-grip { cursor: grab; }
  .modal.is-dragging .modal-panel { cursor: grabbing; }
}
.modal .flip { width: min(64vw, 240px); }
.modal-desc { margin-top: 20px; text-wrap: pretty; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }

.loading { min-height: 60dvh; display: grid; place-items: center; color: var(--muted); }
.loading .brand-mark { width: 64px; height: 70px; margin: 0 auto 16px; }
.error-box { text-align: center; padding: 48px 8px; display: grid; gap: 16px; justify-items: center; }

/* Меньше движения: всё мгновенно, карта не крутится, а меняет сторону. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0ms !important;
  }
  .mode, .mode:nth-child(1), .mode:nth-child(2) { transform: none; }
  .flip-in, .flip.is-open .flip-in { transform: none !important; }
  .side-face { transform: none; }
}

@media (min-width: 720px) {
  #app { padding-top: 32px; }
  .display { font-size: 44px; }
}

/* ── дополнения к спискам и строкам ── */
.option-title, .option-text, .row-title, .row-sub, .step-title, .row-sub-strong { display: block; }
.row-sub-strong { font-weight: 500; line-height: 1.45; text-wrap: pretty; }
.step-title { font-weight: 600; margin-bottom: 2px; }
.flip-in { display: block; }
.resume { margin: 0 0 12px; }
.col { width: 64px; flex: none; text-align: end; font-variant-numeric: tabular-nums; color: var(--muted); }
.col.strong { color: var(--text); font-weight: 600; }
.row-head { min-height: 40px; font-size: 13px; color: var(--muted); }
.row.is-me { background: var(--raise-2); }
.row.is-out .row-title { text-decoration: line-through; color: var(--muted); }
.row.is-out .avatar { opacity: .5; }
.actions.flush { margin-top: 0; }
.centered { text-align: center; }
.order li > span:last-child { flex: 1; }
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: 28px 0 10px; }
.sec-row .sec { margin: 0; }
.sec-row .count { color: var(--muted); font-size: 13px; font-weight: 600; }
.title-row { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }
.title-row .title { margin: 0; }
.actions .btn { padding: 0 12px; min-width: 0; font-size: 15px; }

/* ── движение по всему приложению ── */
button, .btn, .tab, .row, .pack, .chip { touch-action: manipulation; }

/* Карта приговора сдаётся на стол (.verdict.deal-in). */
@keyframes deal { from { opacity: 0; transform: translate(40px, 90px) rotate(14deg) scale(.92); } }

/* Вкладки: красная метка переезжает, значок отвечает на нажатие. */
.tabbar-in { position: relative; }
.tab[aria-current="page"]::before { content: none; }
.tab-ind { position: absolute; top: -1px; left: 0; width: 25%; height: 2px; pointer-events: none; transition: transform 320ms var(--ease-move); }
.tab-ind::before { content: ''; position: absolute; left: 50%; width: 28px; height: 2px; margin-left: -14px; background: var(--red); border-radius: 0 0 2px 2px; }
.tab .ic { transition: transform 140ms var(--ease-press); }
.tab:active .ic { transform: scale(.88); }
.tab.tab-pop .ic { animation: tab-pop 380ms var(--ease-enter); }
@keyframes tab-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } }

/* Панель главного действия выезжает снизу. */
.cta-enter { animation: cta-up 340ms var(--ease-enter) backwards; }
@keyframes cta-up { from { transform: translateY(100%); } }

/* Число поменялось — подпрыгнуло. */
small[data-pop], .pop-inline { display: inline-block; }
.pop { animation: pop 340ms var(--ease-enter); }
@keyframes pop { 40% { transform: scale(1.2); } }

/* Новый игрок в комнате въезжает в список. */
.row-new { animation: row-in 380ms var(--ease-enter) backwards; }
@keyframes row-in { from { opacity: 0; transform: translateX(-14px); } }

/* Выбывший: имя зачёркивается линией слева направо. */
.who .row-title { position: relative; width: fit-content; max-width: 100%; }
.who .row-title::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--muted);
  transform: scaleX(0); transform-origin: left center; transition: transform 220ms var(--ease-enter);
}
.who[aria-pressed="true"] .row-title { text-decoration: none; }
.who[aria-pressed="true"] .row-title::after { transform: scaleX(1); }
.who .state { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }

/* Итог партии сдаётся картой. */
.verdict.deal-in { animation: deal 560ms var(--ease-enter) backwards; }

/* Таймер: полоса времени, последние секунды толкаются, в ноль — встряска. */
.timer-bar { height: 4px; border-radius: 2px; background: var(--bg); overflow: hidden; }
.timer-bar i { display: block; height: 100%; background: var(--text); transform-origin: left center; transition: transform 260ms linear; }
.timer-val { display: inline-block; }
.timer-val.is-warn { color: var(--red-text); }
.timer-val.tick { animation: tick 300ms var(--ease-enter); }
@keyframes tick { 30% { transform: scale(1.12); } }
.shake { animation: shake 420ms cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 15%, 45%, 75% { transform: translateX(-6px); } 30%, 60%, 90% { transform: translateX(6px); } }

/* Все роли розданы: галочка рисуется. */
.done-mark { animation: done-pop 520ms var(--ease-enter) backwards; }
.done-mark .ic path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 380ms 240ms ease-out forwards; }
@keyframes done-pop { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Подтверждение на самой кнопке. */
.swap-in { display: inline-flex; align-items: center; gap: 8px; animation: swap-in 220ms var(--ease-enter); }
@keyframes swap-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }

/* Выбор варианта: точка проявляется. */
.option[aria-checked="true"] .radio::after { animation: pop-dot 260ms var(--ease-enter); }
@keyframes pop-dot { from { transform: scale(0); } }

/* Союзники появляются вместе с открытой картой. */
#secret:not([hidden]) { animation: rise 360ms 360ms var(--ease-enter) backwards; }

.pack { transition: background-color 150ms ease, border-color 150ms ease, transform 140ms var(--ease-press); }
.pack:active { transform: scale(.96); }
.chip { transition: transform 140ms var(--ease-press); }

/* Загрузка: знак дышит, пока ждём сервер. */
.pulse { animation: mark-pulse 1.4s ease-in-out infinite; }
@keyframes mark-pulse { 50% { opacity: .7; transform: scale(.94) rotate(-3deg); } }

/* ── подсказка «i» ── */
.info {
  position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; margin: -8px -6px -8px 0;
  border-radius: 50%; color: var(--muted); vertical-align: middle; transition: color 150ms ease, background-color 150ms ease;
}
.info .ic { width: 18px; height: 18px; }
.title-row .info .ic { width: 22px; height: 22px; }
.info[aria-expanded="true"] { color: var(--text); background: var(--raise-2); }
.info:active { background: var(--raise-2); }
@media (hover: hover) and (pointer: fine) { .info:hover { color: var(--text); } }
/* Первый заход в раздел: вокруг значка дважды расходится кольцо. */
.info-intro::after {
  content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid var(--red-text); opacity: 0;
  animation: info-ring 1.3s var(--ease-out) 600ms 2 backwards; pointer-events: none;
}
@keyframes info-ring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.5); } }
.info-pop {
  position: fixed; z-index: 70; padding: 16px 16px 14px;
  background: var(--pop-bg); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--pop-shadow);
  animation: info-in 180ms var(--ease-enter) backwards;
  overflow-y: auto; overscroll-behavior: contain;
}
.info-pop.out { opacity: 0; transform: scale(.97); transition: opacity 120ms ease, transform 120ms ease; }
@keyframes info-in { from { opacity: 0; transform: scale(.95) translateY(-4px); } }
.info-title { font: 600 18px/1.2 var(--font-display); margin-bottom: 10px; }
.info-text { color: var(--pop-text); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.info-steps { display: grid; gap: 10px; counter-reset: step; }
.info-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--pop-text); font-size: 14px; line-height: 1.5; text-wrap: pretty; counter-increment: step; }
.info-steps li::before {
  content: counter(step); width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; background: var(--raise-2); color: var(--red-text); font: 600 13px/1 var(--font-display);
}

/* ── кошелёк сессии ── */
.money { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.money .ic { width: 16px; height: 16px; color: var(--muted); }
.itags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; color: var(--muted); }
.itag { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; }
.itag .ic { width: 16px; height: 16px; }
.itag.is-wait { opacity: .45; }
.results { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.res { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--raise); color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.res--mafia { color: var(--red-text); }
.price-btn { gap: 5px; padding: 0 12px; font-variant-numeric: tabular-nums; }
.price-btn .ic { width: 16px; height: 16px; }
.purse { display: grid; gap: 4px; padding: 2px 2px 14px; }
.purse-label { color: var(--muted); font-size: 13px; }
.purse-val { font: 600 52px/1 var(--font-display); letter-spacing: -.01em; }
.purse-hint { color: var(--muted); font-size: 13px; }
.wait-line { display: inline-flex; align-items: center; gap: 4px; color: var(--red-text); }
.wait-line .ic { width: 14px; height: 14px; }
.log-row { min-height: 48px; font-size: 14px; }
.log-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--raise-2); color: var(--muted); }
.log-row.is-use .log-ic { color: var(--red-text); }
.log-amt { font-weight: 600; }

/* Лист ведущего: строка игрока — отметка «выбыл» и его предметы. */
.who-row { display: flex; align-items: center; }
.who-row .who { flex: 1; min-width: 0; }
.who-list > .who-row + .who-row { border-top: 1px solid var(--line); }
.who-list > .who-row:first-child .who { border-top-left-radius: var(--r-surface); }
.who-list > .who-row:last-child .who { border-bottom-left-radius: var(--r-surface); }
.ichips { display: flex; gap: 6px; padding-inline-end: 12px; }
.ichip {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; min-width: 36px; padding: 0 9px; justify-content: center;
  border-radius: var(--r-pill); background: var(--raise-2); color: var(--text); font-size: 13px; font-weight: 600;
  transition: background-color 150ms ease, transform 220ms var(--ease-enter), opacity 200ms ease;
}
.ichip .ic { width: 18px; height: 18px; }
.ichip-q { display: none; }
.ichip.is-ask { background: var(--red); color: var(--on-red); animation: pop 300ms var(--ease-enter); }
.ichip.is-ask .ichip-q { display: inline; }
.ichip.is-ask b { display: none; }
.ichip.is-used { transform: scale(.2); opacity: 0; pointer-events: none; }
.ichip:active { transform: scale(.94); }

/* Окна: выбор победителя и покупка за игрока. */
.modal-title { font: 600 24px/1.15 var(--font-display); margin: 4px 0 12px; text-wrap: balance; }
.modal-money { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.modal-money .itags { margin: 0; }
.pick { display: grid; gap: 8px; }
.pick-opt { grid-template-columns: 1fr auto; align-items: center; }
.pick-opt .option-text { font-weight: 600; }
.pick--mafia .option-title { color: var(--red-text); }

/* Номер игрока в кружке слева; выбыл — в кружке крестик. Предметы справа не сдвигают отметки. */
.who .state { width: 34px; height: 34px; position: relative; border-color: var(--line-2); color: var(--text); }
.who .state-n { font: 600 16px/1 var(--font-display); font-variant-numeric: tabular-nums; transition: opacity 150ms ease, transform 150ms ease; }
.who .state .ic { position: absolute; inset: 0; margin: auto; opacity: 0; transform: scale(.6); transition: opacity 150ms ease, transform 180ms var(--ease-enter); }
.who[aria-pressed="true"] .state { background: var(--raise-2); border-color: var(--red-text); color: var(--red-text); }
.who[aria-pressed="true"] .state-n { opacity: 0; transform: scale(.6); }
.who[aria-pressed="true"] .state .ic { opacity: 1; transform: none; }

/* Боты в комнате. */
.add-bot { margin-top: 6px; padding: 0 8px; gap: 6px; }
.row.is-bot .avatar { color: var(--muted); }
.row.is-bot .avatar .ic { width: 20px; height: 20px; }
.icon-btn-sm { width: 32px; height: 32px; border-color: var(--line); }

/* ── светлая тема: кремовые карты, портрет в арке, мягкая тень вместо рамки ── */
:root[data-theme="light"] .pcard,
:root[data-theme="light"] .flip .side { box-shadow: var(--card-shadow); }
:root[data-theme="light"] .pcard { box-shadow: inset 0 0 0 1px var(--card-line), var(--card-shadow); }
:root[data-theme="light"] .portrait { border-radius: 999px 999px 14px 14px; border: 1.5px solid var(--card-line); }
:root[data-theme="light"] .card-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 0 18 9 9 18 0 9Z' fill='none' stroke='%23A22B24' stroke-width='1'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .team { color: var(--red-text); }
:root[data-theme="light"] .team--town { color: var(--ink-muted); }
:root[data-theme="light"] .mode-ic { color: var(--text); }
:root[data-theme="light"] .surface { box-shadow: 0 1px 0 rgba(60, 40, 25, .04); }
:root[data-theme="light"] .info-pop { border-color: var(--line); }
:root[data-theme="light"] .ch-avatar { box-shadow: inset 0 0 0 1px var(--card-line); }

/* ── профиль: именная карта ── */
.ava {
  position: relative; display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  background: var(--disc-soft); color: var(--text); font: 600 17px/1 var(--font-display);
}
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava .ch { display: block; width: 100%; height: 100%; }
.ava-lg { width: 64px; height: 64px; font-size: 24px; }
.ava-xl { width: 104px; height: 104px; font-size: 38px; box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--card-line); }
.me-card { display: grid; justify-items: center; text-align: center; padding: 30px 20px 22px; margin-bottom: 28px; }
.me-ava { position: relative; border-radius: 50%; animation: pop 420ms var(--ease-enter) backwards; }
.me-ava:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.me-pen {
  position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--red); color: var(--on-red);
  box-shadow: 0 0 0 3px var(--card); transition: transform 160ms var(--ease-enter);
}
.me-ava:active .me-pen { transform: scale(.9); }
.me-card .me-name { margin-top: 16px; font: 600 30px/1.1 var(--font-display); text-wrap: balance; overflow-wrap: anywhere; animation: rise 360ms 80ms var(--ease-enter) backwards; }
.me-rank { margin: 8px 0 18px; animation: rise 360ms 140ms var(--ease-enter) backwards; }
.me-stats {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--card-line); padding: 14px 0;
  animation: rise 360ms 200ms var(--ease-enter) backwards;
}
.me-stats div + div { border-inline-start: 1px solid var(--card-line); }
.me-stats b { display: block; font: 600 28px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.me-stats span { color: var(--muted); font-size: 12px; }
.me-next { width: 100%; margin-top: 16px; display: grid; gap: 8px; color: var(--muted); font-size: 13px; animation: rise 360ms 260ms var(--ease-enter) backwards; }
.me-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.me-bar i { display: block; height: 100%; background: var(--red); transform-origin: left; animation: grow 700ms 380ms var(--ease-enter) backwards; }
@keyframes grow { from { transform: scaleX(0); } }
.list + .wallet-tiles, .empty-line + .wallet-tiles { margin-top: 24px; }
.empty-line { color: var(--muted); font-size: 14px; line-height: 1.45; padding: 4px 0 8px; text-wrap: pretty; }

/* окно редактирования */
.pe-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.pe-name { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.pe-name .join-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.pe-name .input { width: 100%; height: 44px; border-radius: 12px; min-width: 0; }
.pe-name .btn-sm { height: 44px; border-radius: 12px; }
.pe-name .btn-ghost { height: 32px; padding: 0 4px; gap: 6px; }
.sub { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
.ava-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.ava-row .ava-opt { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--raise-2); font-size: 14px; font-weight: 600; text-align: start; cursor: pointer; }
.ava-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; }
.ava-grid .ava-opt { display: grid; place-items: center; border-radius: 50%; aspect-ratio: 1; }
.ava-grid .ava { width: 100%; height: auto; aspect-ratio: 1; }
.ava-opt { position: relative; touch-action: manipulation; transition: transform 140ms var(--ease-enter); }
.ava-opt:active { transform: scale(.94); }
.ava-opt[aria-pressed="true"] .ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--red); }
.ava-row .ava-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--red); }
.ava-row .ava-opt[aria-pressed="true"] .ava { box-shadow: none; }
.ava-opt:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.ava-opt:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }
.ava-grid .ava-opt { animation: pop 300ms var(--ease-enter) backwards; }
.ava-grid .ava-opt:nth-child(n+2) { animation-delay: 20ms; }
.ava-grid .ava-opt:nth-child(n+5) { animation-delay: 50ms; }
.ava-grid .ava-opt:nth-child(n+9) { animation-delay: 80ms; }
.ava-grid .ava-opt:nth-child(n+13) { animation-delay: 110ms; }
@media (prefers-reduced-motion: reduce) {
  .me-ava, .me-card .me-name, .me-rank, .me-stats, .me-next, .me-bar i, .ava-grid .ava-opt { animation: none; }
}
:root[data-theme="light"] .ava { box-shadow: inset 0 0 0 1px var(--card-line); }
:root[data-theme="light"] .ava-xl { box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--card-line); }

/* ── справа налево (арабский, персидский) ── */
:root[dir="rtl"] .ic-dir { transform: scaleX(-1); }
:root[dir="rtl"] .tab-ind { left: auto; right: 0; }
:root[dir="rtl"] .switch::after { left: auto; right: 3px; }
:root[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-20px); }
:root[dir="rtl"] .verdict::before { left: auto; right: 0; border-radius: 0 4px 4px 0; }
:root[dir="rtl"] .progress i.cur::after,
:root[dir="rtl"] .who .row-title::after,
:root[dir="rtl"] .timer-bar i,
:root[dir="rtl"] .me-bar i { transform-origin: right center; }
:root[dir="rtl"] .me-pen { right: auto; left: -2px; }
:root[dir="rtl"] .view-fwd { animation-name: slide-back; }
:root[dir="rtl"] .view-back { animation-name: slide-fwd; }
:root[dir="rtl"] .row-new { animation-name: row-in-rtl; }
@keyframes row-in-rtl { from { opacity: 0; transform: translateX(14px); } }

/* ═════════════ онлайн-игра: комната по роли ═════════════ */
/* Цвета сцены — свои токены: нуар по умолчанию, бумага в светлой теме. */
.scene {
  --sc-wall: #1D1A1B; --sc-wall-2: #171415; --sc-trim: #2E2829; --sc-floor: #110F10; --sc-joint: #272223;
  --sc-ink: #0A0909; --sc-frame: #2E2829; --sc-glass: #0E1117; --sc-gap: #040303; --sc-spill: rgba(242, 236, 228, .16);
  --sc-panel: #2C2324; --sc-inset: #241D1E; --sc-knob: #9C8A66; --sc-wood: #2E2521; --sc-wood-2: #241D1A;
  --sc-cloth: #4A1914; --sc-cloth-2: #5E221B; --sc-cream: #D8CAB2; --sc-paper: #EFE6D6; --sc-red: #B3261E;
  --sc-day: #B7AC9E; --sc-sun: #F4EEE4; --sc-cloud: #D6CCBF; --sc-dusk: #0C111D; --sc-moon: #ECE5D6; --sc-star: #CFC6B8;
  --sc-night: #03050B; --sc-night-o: .55; --sc-sil: #020202; --sc-zzz: #ECE5D6;
  --sc-glow-a: rgba(255, 214, 150, .34); --sc-glow-b: rgba(255, 214, 150, 0); --sc-vig: #5A0B07;
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 3 / 2; border-radius: 20px; margin-bottom: 16px;
  background: var(--sc-wall); box-shadow: inset 0 0 0 1px var(--line);
}
:root[data-theme="light"] .scene {
  --sc-wall: #E7DCC9; --sc-wall-2: #DCCDB5; --sc-trim: #C2AF92; --sc-floor: #CBB99D; --sc-joint: #BBA88A;
  --sc-ink: #1F1916; --sc-frame: #6E5C4C; --sc-glass: #F6F0E4; --sc-gap: #1F1916; --sc-spill: rgba(255, 246, 225, .5);
  --sc-panel: #8A6E58; --sc-inset: #7A604C; --sc-knob: #C9A45C; --sc-wood: #8F735C; --sc-wood-2: #7A614D;
  --sc-cloth: #B8322A; --sc-cloth-2: #9F2A23; --sc-cream: #F4EDE0; --sc-paper: #FFFCF7;
  --sc-day: #F2E3C6; --sc-sun: #FFF8EA; --sc-cloud: #FFFFFF; --sc-dusk: #1C2440;
  --sc-night: #141A30; --sc-night-o: .5; --sc-sil: #120E0C; --sc-vig: #7A120C;
}
.scene > .sc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sc .s-wall { fill: var(--sc-wall); }
.sc .s-wall-2 { fill: var(--sc-wall-2); }
.sc .s-floor { fill: var(--sc-floor); }
.sc .s-trim { stroke: var(--sc-trim); stroke-width: 3; fill: none; }
.sc .s-joint { stroke: var(--sc-joint); stroke-width: 1; fill: none; }
.sc .s-frame { fill: var(--sc-frame); }
.sc .s-glass { fill: var(--sc-glass); }
.sc .s-bars { stroke: var(--sc-frame); stroke-width: 4; fill: none; }
.sc .s-curtain { fill: var(--sc-cloth); }
.sc .s-gap { fill: var(--sc-gap); }
.sc .s-spill { fill: var(--sc-spill); opacity: 0; }
.sc .s-gaplight { fill: #8C7656; opacity: 0; }
.sc .s-halo { fill: url(#sc-halo); }
.sc .s-halo-a { stop-color: #FFD9A0; stop-opacity: .55; }
.sc .s-halo-b { stop-color: #FFD9A0; stop-opacity: 0; }
.sc .s-panel { fill: var(--sc-panel); }
.sc .s-inset { fill: var(--sc-inset); }
.sc .s-knob { fill: var(--sc-knob); }
.sc .s-wood { fill: var(--sc-wood); }
.sc .s-wood-2 { fill: var(--sc-wood-2); }
.sc .s-pillow { fill: var(--sc-cream); }
.sc .s-blanket { fill: var(--sc-cloth); }
.sc .s-fold { stroke: var(--sc-cloth-2); stroke-width: 2; fill: none; }
.sc .s-picture { fill: var(--sc-frame); }
.sc .s-picture-in { fill: var(--sc-wall-2); }
.sc .s-metal { fill: var(--sc-knob); stroke: var(--sc-knob); }
.sc .s-shoe { fill: none; stroke: var(--sc-knob); stroke-linecap: round; }
.sc .s-metal-line, .sc .s-cord { stroke: var(--sc-frame); stroke-width: 3; fill: none; stroke-linecap: round; }
.sc .s-shade, .sc .s-lamp { fill: var(--sc-cloth); }
.sc .s-card { fill: var(--sc-paper); }
.sc .s-card-red { fill: var(--sc-red); }
.sc .s-glass-cup { fill: var(--sc-knob); opacity: .8; }
.sc .s-smoke { stroke: var(--sc-cream); stroke-width: 2; fill: none; opacity: .35; stroke-linecap: round; stroke-dasharray: 6 5; }
.sc .s-cork { fill: #6B4F36; }
.sc .s-photo { fill: var(--sc-paper); }
.sc .s-string { stroke: var(--sc-red); stroke-width: 1.6; fill: none; }
.sc .s-pin { fill: var(--sc-red); }
.sc .s-file { fill: #A88A5A; }
.sc .s-file-2 { fill: #C2A574; }
.sc .s-cabinet { fill: var(--sc-cream); }
.sc .s-cross { stroke: var(--sc-red); stroke-width: 8; fill: none; }
.sc .s-cross-sm { stroke: var(--sc-red); stroke-width: 3; fill: none; }
.sc .s-iv { fill: var(--sc-cream); opacity: .8; }
.sc .s-bag { fill: #3A2A24; }
.sc .s-frame-gold { fill: var(--sc-knob); }
.sc .s-mirror { fill: #3B4250; }
:root[data-theme="light"] .sc .s-mirror { fill: #C9D2DA; }
.sc .s-shine { stroke: var(--sc-cream); stroke-width: 2; opacity: .4; fill: none; stroke-linecap: round; }
.sc .s-perfume { fill: var(--sc-red); }
.sc .s-perfume-2 { fill: var(--sc-knob); }
.sc .s-stem { stroke: #3F5A3A; stroke-width: 2; fill: none; }
.sc .s-rose { fill: var(--sc-red); }
.sc .s-coat { fill: #3A302A; }
.sc .s-hat { fill: var(--sc-ink); }
.sc .s-radio { fill: #3A302A; }
.sc .s-mug { fill: var(--sc-cream); }
.sc .s-bin { fill: #3A3B3D; }
.sc .s-bin-lid { fill: #4A4B4E; }
.sc .s-box { fill: #8A6A48; }
.sc .s-box-top { fill: #9C7B56; }
.sc .s-crate { fill: var(--sc-red); }
.sc .s-fuse { stroke: var(--sc-cream); stroke-width: 1.4; fill: none; }
.sc .s-bulb-glass { fill: #F4E6C4; }
.sc .s-tally { stroke: var(--sc-red); stroke-width: 2; opacity: .55; fill: none; }
.sc .s-stain { stroke: var(--sc-red); stroke-width: 6; opacity: .25; fill: none; stroke-linecap: round; }
.sc .s-blade { fill: #C9C9CB; }
.sc .s-handle { fill: var(--sc-ink); }
.sc .s-chain { stroke: #77787B; stroke-width: 3; fill: none; stroke-dasharray: 4 3; }
.sc .s-paper { fill: var(--sc-paper); }
/* контур — как у кремовых карт */
.sc :is(.s-frame, .s-panel, .s-wood, .s-wood-2, .s-pillow, .s-blanket, .s-picture, .s-cork, .s-photo, .s-file, .s-file-2,
  .s-cabinet, .s-bag, .s-radio, .s-mug, .s-bin, .s-bin-lid, .s-box, .s-crate, .s-perfume, .s-perfume-2, .s-lamp, .s-shade,
  .s-card, .s-card-red, .s-coat, .s-iv, .s-paper, .s-frame-gold, .s-curtain) { stroke: var(--sc-ink); stroke-width: 1.6; stroke-linejoin: round; }
/* небо */
.sc .s-day { fill: var(--sc-day); }
.sc .s-sun { fill: var(--sc-sun); }
.sc .s-cloud { fill: var(--sc-cloud); opacity: .8; }
.sc .s-dusk { fill: var(--sc-dusk); }
.sc .s-moon { fill: var(--sc-moon); }
.sc .s-star { fill: var(--sc-star); }
.sc .s-sky-night { opacity: 0; transition: opacity 1400ms var(--ease-out); }
.scene.is-night .s-sky-night { opacity: 1; }
.sc .s-sky-day { transition: transform 1400ms var(--ease-out); }
.scene.is-night .s-sky-day { transform: translateY(14px); }
/* ночь: тень на всю комнату, свет лампы у тех, кто не спит */
.sc .s-night { fill: var(--sc-night); opacity: 0; transition: opacity 1400ms var(--ease-out); }
.scene.is-night .s-night { opacity: var(--sc-night-o); }
.sc .s-glow { fill: url(#sc-glow-g); }
.sc .s-glow-top { stop-color: var(--sc-glow-a); }
.sc .s-glow-bottom { stop-color: var(--sc-glow-b); }
.sc .s-lampglow { opacity: 0; transition: opacity 600ms ease; }
.sc .s-moonbeam { fill: #FFE3A8; opacity: .07; transition: opacity 1400ms var(--ease-out), fill 1400ms var(--ease-out); }
.scene.is-night .s-moonbeam { fill: #C9D6F2; opacity: .1; }
.scene.is-night.is-lamp .s-lampglow { opacity: 1; }
.sc .s-bulb { transform-box: view-box; transform-origin: 270px 0; }
.scene.is-night.is-lamp .s-bulb { animation: sc-swing 4s ease-in-out infinite; }
@keyframes sc-swing { 50% { transform: rotate(4deg); } }
/* сон: в спальне герой ложится, у остальных закрываются глаза */
.sc .s-hero-lie { display: none; }
.scene.is-asleep .s-hero-lie { display: inline; }
.scene.is-asleep .s-hero-up { display: none; }
.scene.is-asleep .s-hero .ch-eyes { transform: scaleY(.12); }
.sc .s-zzz text { fill: var(--sc-zzz); font: 600 18px/1 var(--font-display); opacity: 0; }
.scene.set-backroom .s-zzz { transform: translate(-32px, 2px); }
.scene:is(.set-office, .set-clinic, .set-lair) .s-zzz { transform: translate(-27px, 0); }
.scene.set-boudoir .s-zzz { transform: translate(-6px, 4px); }
.scene.set-post .s-zzz { transform: translate(-8px, 6px); }
.scene.set-street .s-zzz { transform: translate(-6px, 12px); }
.scene.set-bedroom .s-zzz { transform: translate(-8px, 30px); }
.scene.is-night.is-asleep .s-zzz text { animation: sc-z 3.2s ease-in-out infinite; }
.scene.is-night.is-asleep .s-zzz text:nth-child(2) { animation-delay: .5s; }
.scene.is-night.is-asleep .s-zzz text:nth-child(3) { animation-delay: 1s; }
@keyframes sc-z { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .9; } 70% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 0; } }
.scene.is-night.is-lamp .s-smoke { animation: sc-smoke 2.4s linear infinite; }
@keyframes sc-smoke { to { stroke-dashoffset: -22; } }
/* выбыл */
.sc .s-hero { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 600ms ease; }
.scene.is-dead .s-hero { opacity: .32; filter: grayscale(1); }
.scene.is-dead .s-zzz { display: none; }
.sc .s-vignette { opacity: 0; pointer-events: none; }
.sc .s-vig-edge { stop-color: var(--sc-vig); stop-opacity: .9; }
.scene.is-dead .s-vignette { opacity: .45; }
/* эффекты: в покое невидимы */
.sc .s-flash { fill: #FFF6E8; opacity: 0; pointer-events: none; }
.sc .s-intruder, .sc .s-helper, .sc .s-beam, .sc .s-shieldfx, .sc .s-heart, .sc .s-docsfx, .sc .s-spark, .sc .s-hole { opacity: 0; }
.sc .s-sil :is(path, ellipse, circle, rect) { fill: var(--sc-sil) !important; stroke: var(--sc-sil) !important; }
.sc .s-coat-lit { fill: var(--sc-cream); stroke: var(--sc-ink); stroke-width: 2; }
.sc .s-beam-cone { fill: url(#sc-beam-g); }
.sc .s-beam-a { stop-color: #FFF3D6; stop-opacity: .75; }
.sc .s-beam-b { stop-color: #FFF3D6; stop-opacity: 0; }
.sc .s-bubble { fill: none; stroke: #CFE3FF; stroke-width: 3; }
.sc .s-heart-p { fill: var(--sc-red); stroke: var(--sc-ink); stroke-width: 1.6; }
.sc .s-spark-p { fill: #FFE7A8; }
.sc .s-hole-in { fill: var(--sc-ink); }
.sc .s-crack { stroke: var(--sc-ink); stroke-width: 1.2; fill: none; }
.sc :is(.s-door, .s-intruder, .s-helper, .s-beam, .s-shieldfx, .s-heart, .s-docsfx, .s-spark) { transform-box: view-box; }
.sc .s-door { transform-origin: 22px 137px; }
.sc .s-beam { transform-origin: 84px 120px; }
.sc .s-shieldfx { transform-origin: 270px 124px; }
.sc .s-spark { transform-origin: 158px 140px; }

/* Сцены событий: один класс play-* на .scene, 3.8 с, конец держится, пока сцену не разморозят. */
.scene[class*="play-"] .sc * { animation-duration: 3.8s; animation-fill-mode: both; animation-timing-function: var(--ease-move); }
.scene:is(.play-killed, .play-saved, .play-guarded, .play-shield, .play-lucky, .play-blocked) .s-door { animation-name: sc-door; }
.scene:is(.play-killed, .play-saved, .play-guarded, .play-shield, .play-lucky, .play-blocked) :is(.s-spill, .s-gaplight) { animation-name: sc-spill; }
.scene:is(.play-checked, .play-docs) .s-door { animation-name: sc-door-peek; }
.scene:is(.play-checked, .play-docs) :is(.s-spill, .s-gaplight) { animation-name: sc-spill; }
.scene:is(.play-killed, .play-guarded, .play-shield, .play-lucky) .s-intruder { animation-name: sc-enter; }
.scene.play-saved .s-intruder { animation-name: sc-enter-flee; }
.scene.play-saved .s-helper { animation-name: sc-help; }
.scene.play-guarded .s-helper { animation-name: sc-guard; }
.scene.play-blocked .s-helper { animation-name: sc-visit; }
.scene:is(.play-checked, .play-docs) .s-helper { animation-name: sc-peek; }
.scene:is(.play-killed, .play-guarded, .play-shield, .play-lucky, .play-boom) .s-flash { animation-name: sc-flash; }
.scene:is(.play-killed, .play-guarded, .play-shield, .play-lucky) .s-spark { animation-name: sc-spark; }
.scene:is(.play-killed, .play-boom, .play-lynched) .s-hero { animation-name: sc-fall; }
.scene:is(.play-killed, .play-boom, .play-lynched) .s-vignette { animation-name: sc-vig; }
.scene.play-shield .s-shieldfx { animation-name: sc-bubble; }
.scene.play-lucky .s-hole { animation-name: sc-hole; }
.scene.play-lucky .s-hero { animation-name: sc-duck; }
.scene:is(.play-checked, .play-docs) .s-beam { animation-name: sc-beam; }
.scene.play-docs .s-docsfx { animation-name: sc-docs; }
.scene.play-blocked .s-heart { animation-name: sc-heart; }
.scene.play-boom > .sc { animation: sc-shake 3.8s var(--ease-move) both; }
.scene.play-report .s-lampglow { animation-name: sc-flicker; }
@keyframes sc-door { 0%, 12% { transform: scaleX(1); } 24%, 80% { transform: scaleX(.16) skewY(-4deg); } 94%, 100% { transform: scaleX(1); } }
@keyframes sc-door-peek { 0%, 12% { transform: scaleX(1); } 24%, 80% { transform: scaleX(.55) skewY(-2deg); } 94%, 100% { transform: scaleX(1); } }
@keyframes sc-spill { 0%, 12% { opacity: 0; } 24%, 80% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sc-enter { 0%, 20% { opacity: 0; transform: translateX(0); } 28% { opacity: 1; transform: translateX(0); } 44%, 74% { opacity: 1; transform: translateX(86px); } 88% { opacity: 1; transform: translateX(0); } 95%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes sc-enter-flee { 0%, 20% { opacity: 0; transform: translateX(0); } 28% { opacity: 1; transform: translateX(0); } 42%, 52% { opacity: 1; transform: translateX(80px); } 66% { opacity: 1; transform: translateX(-6px); } 74%, 100% { opacity: 0; transform: translateX(-6px); } }
@keyframes sc-help { 0%, 40% { opacity: 0; transform: translateX(0); } 50% { opacity: 1; transform: translateX(30px); } 82% { opacity: 1; transform: translateX(44px); } 94%, 100% { opacity: 0; transform: translateX(44px); } }
@keyframes sc-guard { 0%, 30% { opacity: 0; transform: translateX(0); } 42%, 56% { opacity: 1; transform: translateX(120px); } 70% { opacity: 1; transform: translateX(120px) translateY(10px) rotate(-6deg); } 90%, 100% { opacity: 0; transform: translateX(120px) translateY(10px) rotate(-6deg); } }
@keyframes sc-visit { 0%, 20% { opacity: 0; transform: translateX(0); } 34%, 80% { opacity: 1; transform: translateX(70px); } 94%, 100% { opacity: 0; transform: translateX(70px); } }
@keyframes sc-peek { 0%, 18% { opacity: 0; } 28%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sc-flash { 0%, 50% { opacity: 0; } 52% { opacity: .85; } 60%, 100% { opacity: 0; } }
@keyframes sc-spark { 0%, 49% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.15); } 60%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes sc-fall { 0%, 52% { opacity: 1; transform: none; } 66%, 100% { opacity: .4; transform: translateY(16px) rotate(9deg); } }
@keyframes sc-vig { 0%, 52% { opacity: 0; } 64% { opacity: .9; } 100% { opacity: .55; } }
@keyframes sc-bubble { 0%, 50% { opacity: 0; transform: scale(.6); } 56% { opacity: .95; transform: scale(1.04); } 74% { opacity: .7; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1.1); } }
@keyframes sc-hole { 0%, 52% { opacity: 0; } 54%, 100% { opacity: 1; } }
@keyframes sc-duck { 0%, 48% { transform: none; } 54% { transform: translateY(8px); } 70%, 100% { transform: none; } }
@keyframes sc-beam { 0%, 22% { opacity: 0; transform: rotate(16deg); } 34% { opacity: 1; transform: rotate(10deg); } 60%, 80% { opacity: 1; transform: rotate(0deg); } 92%, 100% { opacity: 0; transform: rotate(0deg); } }
@keyframes sc-docs { 0%, 44% { opacity: 0; transform: translateY(24px); } 56%, 80% { opacity: 1; transform: translateY(-6px); } 94%, 100% { opacity: 0; transform: translateY(-18px); } }
@keyframes sc-heart { 0%, 36% { opacity: 0; transform: translateY(10px) scale(.6); } 48% { opacity: 1; transform: translateY(0) scale(1.1); } 80% { opacity: .9; transform: translateY(-36px) scale(1); } 94%, 100% { opacity: 0; transform: translateY(-50px) scale(1); } }
@keyframes sc-shake { 0%, 48% { transform: none; } 51% { transform: translate(-6px, 3px); } 54% { transform: translate(6px, -3px); } 57% { transform: translate(-4px, 2px); } 60%, 100% { transform: none; } }
@keyframes sc-flicker { 0%, 100% { opacity: 1; } 20% { opacity: .4; } 24% { opacity: 1; } 30% { opacity: .55; } 34% { opacity: 1; } }

/* кольцо таймера фазы (шапка онлайн-игры, layout.css) */
.ring { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(10, 9, 9, .66); color: #F2ECE4; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .ring-bg { stroke: rgba(242, 236, 228, .18); }
.ring .ring-fg { stroke: #F2ECE4; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 300ms ease; }
.ring.is-low .ring-fg { stroke: #EE5D4E; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* подпись события внизу сцены и утренняя газета */
.cine-cap {
  position: absolute; inset: auto 0 0; z-index: 3; padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(6, 5, 5, .9), rgba(6, 5, 5, 0)); color: #F2ECE4;
  display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: end;
  animation: rise 420ms var(--ease-enter) backwards;
}
.cine-cap .ch-avatar { grid-row: span 2; width: 48px; height: 48px; }
.cine-cap b { font: 600 22px/1.12 var(--font-display); text-wrap: balance; }
.cine-cap span { color: #CFC6BC; font-size: 14px; line-height: 1.35; }
.cine-cap.no-ava { grid-template-columns: 1fr; }
.cine-paper {
  position: absolute; inset: 14px 18px auto; z-index: 3; padding: 14px 16px 12px;
  background: #EFE6D6; color: #1F1916; border-radius: 6px; transform: rotate(-1.5deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45); animation: paper-in 520ms var(--ease-enter) backwards;
}
@keyframes paper-in { from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(.94); } }
.cine-paper h3 { font: 600 20px/1 var(--font-display); text-align: center; padding-bottom: 8px; border-bottom: 3px double #1F1916; margin-bottom: 8px; }
.cine-paper li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.cine-paper li + li { border-top: 1px solid #D8CAB2; }
.cine-paper .ch-avatar { width: 36px; height: 36px; box-shadow: inset 0 0 0 1px #D8CAB2; }
/* Лицо игрока в газете — газетный снимок: прямые углы, тонкая рамка, сепия; роль — тёмный кружок со значком в углу. */
.cine-paper .paper-face { position: relative; flex: none; display: grid; }
.cine-paper .paper-ava {
  width: 40px; height: 40px; border-radius: 3px; background: #CDBFA6; color: #1F1916;
  box-shadow: 0 0 0 1px #B9A98F; filter: grayscale(1) sepia(.35) contrast(1.08);
}
.cine-paper .paper-role {
  position: absolute; inset-inline-end: -6px; bottom: -6px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: #1F1916; color: #EFE6D6; box-shadow: 0 0 0 2px #EFE6D6;
}
.cine-paper .paper-role .ic { width: 12px; height: 12px; }
.cine-paper small { display: block; color: #6B5E55; font-size: 12px; }
.cine-paper p { text-align: center; font: 600 18px/1.2 var(--font-display); padding: 10px 0; }
.scene .cine-skip { position: absolute; inset: 0; z-index: 4; }

/* выбор цели и голосование: игроки сеткой, как за столом */
.g-state { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--raise); font-weight: 600; margin-bottom: 12px; animation: pop 320ms var(--ease-enter); }
.g-state .ic { color: var(--muted); flex: none; }
.g-state.is-done .ic { color: var(--red-text); }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 8px; }
.seat {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 2px 6px; border-radius: 16px;
  text-align: center; touch-action: manipulation; transition: transform 140ms var(--ease-enter), background-color 150ms ease;
}
button.seat:active:not(:disabled) { transform: scale(.94); }
button.seat:disabled { opacity: .38; }
.seat .ava { width: 54px; height: 54px; font-size: 20px; transition: box-shadow 160ms ease; }
.seat .seat-name { max-width: 100%; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .seat-sub { color: var(--muted); font-size: 11px; min-height: 13px; }
.seat.is-picked { background: var(--raise); }
.seat.is-picked .ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--red); }
.seat.is-out .ava { filter: grayscale(1); opacity: .45; }
.seat.is-out .seat-name { color: var(--muted); text-decoration: line-through; }
.seat.is-ally .ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--red-text); }
.seat .seat-badge {
  position: absolute; top: 4px; inset-inline-end: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--red); color: var(--on-red); font: 600 13px/22px var(--font-display); font-variant-numeric: tabular-nums;
  animation: pop 300ms var(--ease-enter);
}
.seat .seat-team { position: absolute; top: 40px; inset-inline-start: calc(50% + 12px); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--on-red); }
/* Уголок рубашки колоды игрока из-за круга (11.10): карта позади аватара, чуть повёрнута. Места онлайн-партии
   (game-ui.js → seatsHtml) и офлайн-комната «свой телефон»: список участников и лист ведущего (app.js → deckCorner,
   обёртка .off-ava). Размер и место — --sb-*: по умолчанию под круг мест (54 px), у строк списка круг 34–36 px.
   У выбывшего на месте — нет: полупрозрачный круг показал бы карту насквозь. Прячем visibility, не display: в светлой
   теме :root[data-theme="light"] .card-back.cb (card.css) сильнее и возвращал display: block — уголок был виден. */
.seat .seat-ava, .off-ava { position: relative; isolation: isolate; }
.seat-back {
  position: absolute; z-index: -1; top: var(--sb-top, -4px); inset-inline-start: var(--sb-start, -11px); width: var(--sb-w, 26px);
  aspect-ratio: 5 / 7; overflow: hidden; border-radius: 3px; transform: rotate(-14deg); box-shadow: var(--deck-shadow);
}
[dir="rtl"] .seat-back { transform: rotate(14deg); }
.seat.is-out .seat-back { visibility: hidden; }
/* Офлайн-комната: круг участника в списке и номер в листе ведущего. Номер — на сплошном круге цвета поверхности (карта
   не просвечивает под цифрой); выбыл — уголок гаснет, но остаётся: чья колода, видно и у выбывшего. */
.off-ava { display: grid; flex: none; --sb-w: 20px; --sb-top: -4px; --sb-start: -8px; }
.off-ava .state { background: var(--raise); }
.off-ava .seat-back { transition: opacity 160ms ease; }
.who[aria-pressed="true"] .off-ava .seat-back { opacity: .4; }
.seat .seat-team .ic { width: 13px; height: 13px; }
.voters { display: flex; justify-content: center; min-height: 18px; }
.voters .ava { width: 18px; height: 18px; font-size: 8px; box-shadow: 0 0 0 1.5px var(--bg); }
.voters .ava + .ava { margin-inline-start: -6px; }
/* казнить или помиловать */
.verdict-vote { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vbar { position: relative; overflow: hidden; height: 6px; border-radius: 3px; background: var(--line); margin-top: 8px; }
.vbar i { position: absolute; inset: 0; background: var(--red); transform-origin: left center; transition: transform 400ms var(--ease-enter); }
:root[dir="rtl"] .vbar i { transform-origin: right center; }
/* летопись */
.chron li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; }
.chron li + li { border-top: 1px solid var(--line); }
.chron .ch-avatar { width: 34px; height: 34px; }
.chron small { display: block; color: var(--muted); font-size: 12px; }
.chron .chron-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--raise-2); color: var(--muted); flex: none; }
/* итог игры */
.g-end { display: grid; justify-items: center; text-align: center; padding: 8px 0 20px; }
.g-end .display { font: 600 64px/1 var(--font-display); animation: pop 520ms var(--ease-enter); }
.g-end.is-won .display { color: var(--red-text); }
.g-end .ch-avatar { width: 96px; height: 96px; margin-bottom: 14px; animation: rise 460ms var(--ease-enter) backwards; }
.g-end .team { margin-top: 10px; }
.g-end p { color: var(--muted); font-size: 14px; margin-top: 4px; }
.row .crown { color: var(--red-text); }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene { animation: none !important; transition: none !important; }
  .cine-cap, .cine-paper { animation: none; }
}
.g-state small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 2px; }
.vcard { padding: 12px 14px; }
.vcard b { display: block; font: 600 26px/1 var(--font-display); margin-top: 4px; }
.scene.is-asleep.play-killed .s-hero { animation-name: sc-die-sleep; }
@keyframes sc-die-sleep { 0%, 52% { opacity: 1; } 66%, 100% { opacity: .45; } }

/* ── комната в приложении: стол (чат) ── */
/* Лента как в живом чате матча: аватар, имя, текст — без пузырей; ведущий — отдельной плашкой. */
.ava-sm { width: 32px; height: 32px; font-size: 13px; }
.ava-sm .ic { width: 18px; height: 18px; }
.chat { overflow: hidden; }
.chat-list {
  max-height: min(56vh, 440px); min-height: 120px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 0; scroll-padding-bottom: 8px;
}
.chat-empty { padding: 36px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.msg { display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px; }
.msg-body { min-width: 0; flex: 1; }
.msg-who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.msg-tag {
  font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--muted);
}
.msg-text { font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
.msg.is-me { background: var(--raise-2); border-radius: 12px; margin: 2px 6px; padding-inline: 8px; }
.msg.is-me .msg-who { color: var(--text); }
.msg.is-team .msg-tag { border-color: var(--red-dark); color: var(--red-text); }
.msg.is-last .msg-text { font-style: italic; }
.msg-sys {
  display: block; margin: 6px 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg);
}
.msg-sys .msg-who { color: var(--red-text); font-size: 12px; margin-bottom: 4px; }
.msg-sys .msg-text { font-size: 14px; color: var(--text); }
.msg-sys b { font-weight: 600; }
.msg.is-new { animation: msg-in 260ms var(--ease-enter) backwards; }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }

.chat-form { display: flex; gap: 8px; margin: 10px 0 8px; }
.chat-form .input { transition: border-color 150ms ease, opacity 150ms ease; }
.chat-form.is-team .input { border-color: var(--red-dark); }
.chat-form.is-team .input:focus { border-color: var(--red-text); }
.chat-form.is-off .input { opacity: .55; }
.chat-send {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text); color: var(--ink); touch-action: manipulation;
  transition: background-color 150ms ease, transform 120ms var(--ease-press);
}
.chat-send:active:not(:disabled) { transform: scale(.94); background: var(--ink-press); }
.chat-send:disabled { background: var(--raise-2); color: var(--line-2); }
.chat-send:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.chat-send[aria-busy="true"] { opacity: .6; }
.chat-send .ic { width: 22px; height: 22px; }
:root[data-theme="light"] .msg-sys { background: var(--raise-2); border-color: var(--line); }
.ticket + .g-state { margin-top: 12px; }

/* ── iPhone увеличивает страницу, если у поля шрифт меньше 16px: поле стола уезжало за край ── */
.input { font-size: 16px; }

/* ── день и ночь во время игры: вся страница темнеет ночью и светлеет днём ── */
:root { --bg-night: #06080D; }
:root[data-theme="light"] { --bg-night: #DED7CB; }
body, .cta { transition: background-color 1200ms var(--ease-out); }
body.g-night { --bg: var(--bg-night); }

/* небо в окне: солнце садится, луна поднимается, звёзды мерцают */
.sc .s-sun, .sc .s-moon-g { transform-box: fill-box; transition: transform 1600ms var(--ease-out); }
.scene.is-night .s-sun { transform: translateY(40px); }
.sc .s-moon-g { transform: translateY(36px); }
.scene.is-night .s-moon-g { transform: none; }
.scene.is-night .s-star { animation: sc-twinkle 3.6s ease-in-out infinite; }
.scene.is-night .s-star:nth-of-type(2n) { animation-delay: 1.4s; }
@keyframes sc-twinkle { 50% { opacity: .3; } }

/* заставка «Ночь N» / «День N» в сцене */
.cine-phase {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: radial-gradient(circle at 50% 45%, rgba(6, 8, 16, .35), rgba(6, 8, 16, .8)); color: #F2ECE4;
  animation: cp-in 2200ms var(--ease-out) both;
}
.cine-phase.is-day { background: radial-gradient(circle at 50% 45%, rgba(255, 236, 196, .18), rgba(40, 28, 16, .6)); }
.cine-phase-ic {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #1C2440; color: #ECE5D6; animation: cp-rise 2200ms var(--ease-enter) both;
}
.cine-phase.is-day .cine-phase-ic { background: #F4E3B5; color: #2A1E10; }
.cine-phase-ic .ic { width: 32px; height: 32px; }
.cine-phase b { font: 600 34px/1 var(--font-display); animation: cp-title 2200ms var(--ease-enter) both; }
@keyframes cp-in { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cp-rise { 0% { transform: translateY(28px) scale(.7); opacity: 0; } 32% { transform: none; opacity: 1; } 100% { transform: translateY(-4px); } }
@keyframes cp-title { 0%, 14% { transform: translateY(10px); opacity: 0; } 38%, 100% { transform: none; opacity: 1; } }

/* ── состав игры: роли кружками и сколько их в игре ── */
.comp {
  display: flex; align-items: center; gap: 6px; margin: -4px -16px 20px; padding: 2px 16px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.comp::-webkit-scrollbar { display: none; }
.comp-chip, .comp-label { flex: none; }
.comp-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-inline-end: 4px; }
.comp-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 3px; border-radius: var(--r-pill);
  background: var(--raise); touch-action: manipulation; transition: transform 120ms var(--ease-press), opacity 400ms ease;
}
.comp-chip:active { transform: scale(.95); }
.comp-chip:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.comp-chip .ch-avatar { width: 26px; height: 26px; }
.comp-chip b { font: 600 14px/1 var(--font-display); }
.comp-chip.is-out { opacity: .42; }
.comp-chip.is-out b { text-decoration: line-through; }

/* гибель за столом: аватар вздрагивает и гаснет */
.seat-ava { display: grid; }
.seat-out { animation: seat-out 900ms var(--ease-out); }
@keyframes seat-out { 0% { transform: scale(1); } 22% { transform: scale(1.16) rotate(-5deg); } 100% { transform: scale(1); } }

/* ── вкладки стола: общий и свои ── */
.chat-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--raise); }
.chat-tabs button {
  position: relative; height: 30px; padding: 0 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--muted); touch-action: manipulation;
  transition: background-color 160ms ease, color 160ms ease;
}
.chat-tabs button[aria-selected="true"] { background: var(--raise-2); color: var(--text); }
.chat-tabs button[data-tab="team"][aria-selected="true"] { color: var(--red-text); }
.chat-tabs button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.chat-tabs .dot {
  position: absolute; top: 4px; inset-inline-end: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); transform: scale(0); transition: transform 220ms var(--ease-enter);
}
.chat-tabs .has-new .dot { transform: scale(1); }
.chat { transition: box-shadow 200ms ease; }
.chat.is-team { box-shadow: inset 0 0 0 1px var(--red-dark); }
.chat-list.tab-in { animation: fade-in 220ms var(--ease-out); }
.msg-sys.is-team { margin: 4px 10px; padding: 7px 12px; border: 0; background: var(--raise-2); }
.msg-sys.is-team .msg-text { font-size: 13px; color: var(--muted); }
.msg-sys.is-team b { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .cine-phase, .cine-phase-ic, .cine-phase b { animation: none !important; }
}

 { background: none; border: 1.5px dashed var(--line-2); box-shadow: none; }

/* ── главная: афиша (12.10, выбор Сардора — вариант 1 «Афиша») ── */
/* Вечерний город 1931 года во весь блок, вопрос и главная кнопка на фото. Фото тёмное в обеих темах — текст на нём
   всегда светлый (--on-red), низ кадра притемнён под текст. Нет фото — та же афиша на тёмном фоне. */
.poster {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(360px, calc(100dvh - 330px), 470px); margin: 0 0 12px; border-radius: 20px; background: var(--face-bg);
}
.poster-ph, .poster-ph .ph-pic { position: absolute; inset: 0; display: block; }
.poster-ph { z-index: -2; --lq-blur: 22px; }
.poster-ph .ph-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30% !important; opacity: 0; transition: opacity 420ms var(--ease-out); }
.poster-ph.has-photo .ph-pic img { opacity: 1; }
.poster::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 9, 8, 0) 28%, rgba(12, 9, 8, .7) 60%, rgba(12, 9, 8, .94) 100%);
}
.poster-txt { display: grid; gap: 8px; width: 100%; padding: 20px; color: var(--on-red); }
.poster .eyebrow { margin: 0; color: rgba(247, 241, 232, .74); }
.poster .display { margin: 0; color: var(--on-red); }
.poster-lead { margin: 0 0 8px; color: rgba(247, 241, 232, .8); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.poster-lead b { color: var(--on-red); font-weight: 600; }
/* Режимы — две плитки под афишей: значок, название, одна-две строки о режиме. */
.home-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mode-tile {
  display: grid; align-content: start; justify-items: start; gap: 6px; padding: 14px; text-align: start; color: var(--text);
  transition: background-color 150ms ease, transform 120ms ease;
}
.mode-tile:active { background: var(--raise-2); transform: scale(.98); }
.mode-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.mode-tile .tile { margin-bottom: 4px; }
.mode-tile-t { font: 600 22px/1.1 var(--font-display); letter-spacing: -.005em; }
.mode-tile-s { color: var(--muted); font-size: 13px; line-height: 1.4; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  .poster-ph .ph-pic img, .mode-tile { transition: none; }
  .mode-tile:active { transform: none; }
}
@media (orientation: landscape) and (max-height: 600px) { .poster { min-height: 300px; } }

/* ── награда дня одной строкой: точки серии и «Забрать» ── */
.daily { margin-bottom: 12px; padding-block: 12px; }
.daily-ic { color: var(--red-text); }
.daily-head { display: flex; align-items: center; gap: 2px; min-width: 0; }
.daily-head .row-title { min-width: 0; }
.daily-claim { flex: none; }
.dly-dots { display: flex; gap: 5px; margin-top: 6px; }
.dly-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.dly-dots i.is-big { background: var(--brass); }
.dly-dots i.is-done { background: var(--muted); }
.dly-dots i.is-today { background: var(--red); box-shadow: 0 0 0 2px var(--raise), 0 0 0 3.5px var(--red); }
.coin-fly {
  position: fixed; z-index: 60; width: 24px; height: 24px; display: grid; place-items: center; color: var(--text); pointer-events: none;
  animation: coin-fly 720ms var(--ease-move) both;
}
.coin-fly .ic { width: 22px; height: 22px; }
@keyframes coin-fly {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  18% { transform: translate(0, -18px) scale(1.1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .coin-fly { animation: none !important; }
}

/* ── как играть: шаги на живых сценах ── */
.learn-entry { margin-bottom: 18px; }
.learn-home { margin-bottom: 18px; }
.learn-home .learn-entry { margin-bottom: 0; }
.learn-scene { margin-bottom: 16px; }
/* Кадр шага — фото 1931 (08.10): занимает экран по высоте (над ним «Назад», под ним заголовок, текст и кнопки — ~400 px),
   на низком экране — 3:2, как прежняя сцена; камера медленно едет от --cam-from к --cam-to (только transform),
   фото проявляется, когда загрузилось. Фото одно в обеих темах — под ним тёплая чернота кадра. */
.learn-photo {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 16px; border-radius: 20px;
  background: var(--ph-bg, #0B0605); box-shadow: inset 0 0 0 1px var(--line);
}
@supports (height: 1dvh) { .learn-photo { aspect-ratio: auto; height: clamp(208px, calc(100dvh - 400px), 560px); } }
.learn-cam { position: absolute; inset: 0; transform: var(--cam-to); animation: learn-cam 9s var(--ease-out) both; }
.learn-ph, .learn-ph .ph-pic { position: absolute; inset: 0; display: block; }
.learn-photo .learn-ph .ph-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms var(--ease-out); }
.learn-ph.has-photo .ph-pic img { opacity: 1; }
@keyframes learn-cam { from { transform: var(--cam-from); } to { transform: var(--cam-to); } }
@media (prefers-reduced-motion: reduce) {
  .learn-cam { animation: none; }
  .learn-photo .learn-ph .ph-pic img { transition: none; }
}
.learn-dots { display: flex; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.learn-dots li { width: 18px; height: 4px; border-radius: 2px; background: var(--line-2); transform-origin: left center; transition: background-color 200ms ease, transform 260ms var(--ease-move); }
.learn-dots li.is-past { background: var(--muted); }
.learn-dots li.is-on { background: var(--red); transform: scaleX(1.6); margin-inline-end: 10px; }
.learn-title { margin-bottom: 8px; }
.learn-text { margin: 0; max-width: 46ch; color: var(--muted); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
:root[dir="rtl"] .learn-dots li { transform-origin: right center; }

/* ── вне Telegram: вход через бота, подсказка «На экран „Домой“», «нет связи» ── */
/* Приложение на экране «Домой» и APK: сверху — место под строку состояния (в Telegram это делает сам Telegram). */
:root.standalone #app { padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); }

/* Вход: знак наверху ведёт взгляд, главное действие — внизу, под большим пальцем. */
#app.login-app { padding-bottom: calc(20px + var(--safe-b)); }
.login { display: flex; flex-direction: column; min-height: calc(100dvh - 32px - var(--safe-b)); }
:root.standalone .login { min-height: calc(100dvh - 32px - var(--safe-b) - max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px))); }
.login-brand { display: grid; justify-items: center; gap: 20px; margin-top: max(48px, 12dvh); }
.login-mark { width: 116px; height: 127px; }
.login-word { height: 22px; width: auto; }
.login-brand.is-small { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 4px; }
.login-brand.is-small .login-mark { width: 30px; height: 33px; }
.login-brand.is-small .login-word { height: 14px; }
.login-main { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 16px; }
.login-lead { color: var(--muted); max-width: 30ch; text-wrap: balance; }
.login-actions { display: grid; gap: 4px; margin-top: 28px; }
.login-actions .btn-block { width: 100%; }
.login-row { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 44px; }
.login-row .info { margin: 0; width: 44px; height: 44px; }
a.btn { text-decoration: none; }

/* Ждём подтверждения: кольцо — сколько ещё живёт ссылка, внутри — самолётик Telegram. */
.login-wait { justify-content: center; }
.login-ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 24px; color: var(--text); }
.login-ring .ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.login-ring circle { fill: none; stroke-width: 2.5; }
.login-ring .ring-bg { stroke: var(--line-2); }
.login-ring .ring-fg { stroke: var(--red); stroke-linecap: round; }
.login-ring .ic { width: 32px; height: 32px; animation: login-drift 2.8s var(--ease-move) infinite; }
@keyframes login-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -3px); } }
.login-wait .title { margin-bottom: 8px; }
.login-wait .lead { margin-bottom: 12px; max-width: 30ch; }
.login-left { color: var(--muted); font-size: 13px; min-height: 20px; }

@media (min-width: 720px) {
  .login { justify-content: center; min-height: calc(100dvh - 64px); }
  .login-brand { margin-top: 0; }
  .login-main { flex: none; padding-top: 16px; }
  .login-wait { padding-top: 40px; }
}

/* Подсказка установки: тихая плашка, закрывается крестиком (на экране входа iPhone — без крестика). */
.pwa-hint { display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 12px; margin-top: 24px; }
.pwa-hint .row-title, .pwa-hint .row-sub { white-space: normal; text-wrap: pretty; }
.pwa-hint .row-title { font-size: 14px; line-height: 1.35; }
.pwa-hint .info { margin: 0; width: 40px; height: 40px; flex: none; }
.pwa-hint .btn-sm { flex: none; }
.pwa-x { width: 40px; height: 40px; border: 0; color: var(--muted); }
.login .pwa-hint { margin-top: 20px; }

/* Нет связи. */
.offline { min-height: 72dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 8px; }
.offline-ic { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: var(--muted); margin-bottom: 24px; }
.offline .title { margin-bottom: 8px; }
.offline .lead { max-width: 30ch; }

/* Телефон боком (решение Сардора 07.10: играть только вертикально) — просьба повернуть поверх всего.
   Только сенсорный экран низкой высоты: планшет и компьютер (и окно браузера мышью) — как раньше. */
.rotate-ask { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-ask {
    position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 24px; background: var(--bg); color: var(--text); text-align: center;
  }
  .rotate-ask .ic { width: 56px; height: 56px; color: var(--muted); animation: rotate-ask 1.6s var(--ease-move) .3s infinite; }
  .rotate-ask p { margin: 0; font: 600 20px/1.2 var(--font-display); letter-spacing: .01em; max-width: 24ch; }
}
@keyframes rotate-ask { 0%, 25% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-ask .ic { animation: none; } }