/* UM. Дизайн-система «вечер у огня»: теплая темнота, искры с фото, лисий оранжевый.
   Цвета посчитаны в OKLCH, нейтральные подкрашены в теплый тон, контраст текста не ниже 4.5:1.
   Шрифты: Literata для вопросов и заголовков, Onest для интерфейса, Cinzel только в логотипе.
   Шкала шрифтов с шагом 1.25: 13, 16, 20, 25, 31, 39. Отступы по сетке 4 px. */

@font-face { font-family: "Literata"; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/literata-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: "Literata"; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/literata-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: "Onest"; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/onest-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: "Onest"; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/onest-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: "Onest"; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/onest-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: "Onest"; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/onest-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: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/cinzel-latin-600-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  /* Нейтральные, подкрашенные в теплый тон */
  --bg: #170c0d;          /* ночь */
  --surface: #241819;     /* угли */
  --surface-2: #352526;   /* пепел */
  --line: #4a3838;
  --ink: #f7ebdd;         /* слоновая кость */
  --muted: #cab2a3;       /* дым */
  --paper: #f5e7d5;       /* лицевая сторона карточки */
  --paper-ink: #342120;
  --paper-muted: #79635c;
  /* Акцент: лисий оранжевый, тот же, что у лис в логотипе */
  --ember: #ee7933;
  --ember-soft: #f9b379;
  --ember-deep: #943b12;

  /* Подложки поверх фото: плотные, без размытия */
  --panel: rgba(36, 24, 25, .94);
  --panel-2: rgba(53, 37, 38, .94);

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
  --logo: "Cinzel", var(--serif);

  --fs-1: 13px; --fs-2: 16px; --fs-3: 20px; --fs-4: 25px; --fs-5: 31px; --fs-6: 39px;
  --r-ctl: 14px; --r-group: 20px; --r-card: 24px;
  --ease: cubic-bezier(.25, 1, .5, 1);
  --veil: .3;

  /* В полноэкранном режиме сверху лежат кнопки Telegram: отступаем на системную зону и на зону кнопок */
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

/* Цвета тем: одинаковая яркость в OKLCH, поэтому набор смотрится цельно.
   --c для заливки рубашки и подписи на светлой карточке, --c-soft для текста на темном. */
.c-warmup   { --c: #865900; --c-soft: #dbb87e; }
.c-past     { --c: #964d09; --c-soft: #e9b089; }
.c-roots    { --c: #4c701a; --c-soft: #acc98f; }
.c-us       { --c: #9c4535; --c-soft: #efaa9c; }
.c-love     { --c: #914373; --c-soft: #e6a8ca; }
.c-heart    { --c: #9b4153; --c-soft: #efa7b1; }
.c-conflict { --c: #734f99; --c-soft: #cab0ea; }
.c-rules    { --c: #4c5ca7; --c-soft: #aabbf5; }
.c-dreams   { --c: #00727a; --c-soft: #77cfd3; }
.c-together { --c: #0069a1; --c-soft: #8cc5f0; }
.c-hot      { --c: #89202b; --c-soft: #eca0a0; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--ink); }
body { background: var(--bg); font: 400 var(--fs-2)/1.5 var(--sans); min-height: 100vh; overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 2px; }

/* Фон: фото уже затемнено в файле, сверху вуаль. На экранах для чтения она плотнее. */
#bg { position: fixed; inset: 0; z-index: 0; background:
  linear-gradient(180deg, rgba(23, 12, 13, .7) 0%, rgba(23, 12, 13, .35) 40%, rgba(23, 12, 13, .2) 70%, rgba(23, 12, 13, .6) 100%),
  url('bg.jpg') center bottom / cover no-repeat, var(--bg); }
#bg::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--veil); transition: opacity .4s var(--ease); }
html[data-veil="read"] { --veil: .78; }

#app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: calc(8px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); min-height: 100vh; display: flex; flex-direction: column; }
#view { flex: 1; display: flex; flex-direction: column; }

/* Шапка */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 52px; margin: 0 -8px; }
.top-left { display: flex; justify-self: start; }
.top-actions { display: flex; justify-self: end; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; display: grid; place-items: center; color: var(--muted); transition: background .2s var(--ease), color .2s var(--ease); }
.icon-btn:active { background: var(--panel-2); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
/* Кнопка «Обсудить» в шапке: с подписью и счетчиком */
.discuss-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(249, 179, 121, .45); border-radius: 999px; background: rgba(238, 121, 51, .14); color: var(--ember-soft); font-size: var(--fs-1); font-weight: 600; white-space: nowrap; }
.discuss-btn.to-game { background: var(--ember); border-color: var(--ember); color: var(--bg); }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ember); color: var(--bg); font-size: 12px; font-weight: 600; line-height: 1; }
.big-discuss .badge { margin-left: 4px; }
.wordmark { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 6px; border: 0; border-radius: 14px; background: none; color: var(--ink); white-space: nowrap; transition: transform .15s var(--ease); }
.wordmark:active { transform: scale(.95); }
.wordmark .um { font: 600 24px/1 var(--logo); letter-spacing: .12em; padding-left: .12em; }
.wordmark .fox { width: 28px; height: 28px; }
.wordmark .fox.r { transform: scaleX(-1); }

/* Типографика */
/* Заголовок главной строчными: тихий голос записки, без заглавных, которые читаются акростихом */
.display { font: 500 42px/1.04 var(--serif); letter-spacing: -.02em; margin: 0; }
.title { font: 500 var(--fs-5)/1.15 var(--serif); letter-spacing: -.01em; margin: 16px 0 8px; }
.lead { font-size: var(--fs-2); line-height: 1.55; color: var(--muted); margin: 0; max-width: 34em; }
.caption { font-size: var(--fs-1); line-height: 1.45; color: var(--muted); margin: 0; }
.center { text-align: center; }
.spacer { flex: 1; min-height: 16px; }

/* Кнопки: одна главная (оранжевая), одна второстепенная, одна текстовая */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: var(--r-ctl); background: var(--ember); color: var(--bg); font: 600 var(--fs-2)/1.2 var(--sans); text-align: center; transition: transform .15s var(--ease), background .2s var(--ease), opacity .2s; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn.ghost, .btn.secondary { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.text { min-height: 44px; background: transparent; color: var(--ember-soft); box-shadow: none; }
.btn.danger { color: var(--c-soft, #eca0a0); }
.actions { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Главная */
.demo-note { margin: 4px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--panel); color: var(--muted); font-size: var(--fs-1); text-align: center; }
.hero { padding: 32px 0 8px; }
.hero .lead { margin-top: 16px; }
.steps { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; }
.steps li::before { content: counter(s); font: 500 var(--fs-3)/1 var(--serif); color: var(--ember-soft); }
.steps b { font-weight: 600; }
.steps span { color: var(--muted); }
.promise { margin: 20px 0 24px; color: var(--muted); }
.about { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.about p { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--muted); }
.about p + p { margin-top: 8px; }
.about b { color: var(--ink); font-weight: 600; }
.code-input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 var(--fs-3)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.code-input:focus { outline: none; border-color: var(--ember-soft); }

/* Комната ожидания и приглашение */
.lobby { padding-top: 16px; display: flex; flex-direction: column; flex: 1; }
.code-box { margin: 24px 0 16px; padding: 20px; border-radius: var(--r-group); background: var(--panel); display: grid; gap: 4px; justify-items: center; }
.code-box .code { font: 600 var(--fs-5)/1.1 var(--sans); letter-spacing: .22em; padding-left: .22em; font-variant-numeric: tabular-nums; }
.waiting { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 24px; color: var(--muted); }
/* Песочные часы: песок пересыпается, потом часы переворачиваются */
.hourglass { width: 22px; height: 22px; flex: none; overflow: visible; }
.hourglass .hg { transform-origin: 12px 12px; animation: hg-flip 2.8s infinite; }
.hourglass .hg-frame { fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.hourglass .hg-glass { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.hourglass .hg-top, .hourglass .hg-bot { fill: var(--ember); }
.hourglass .hg-top { transform-origin: 12px 10.6px; animation: hg-top 2.8s linear infinite; }
.hourglass .hg-bot { transform-origin: 12px 19.6px; animation: hg-bot 2.8s linear infinite; }
.hourglass .hg-stream { fill: none; stroke: var(--ember); stroke-width: 1; stroke-linecap: round; animation: hg-stream 2.8s linear infinite; }
@keyframes hg-flip { 0%, 72% { transform: rotate(0deg); } 92%, 100% { transform: rotate(180deg); } }
@keyframes hg-top { 0% { transform: scaleY(1); } 70%, 100% { transform: scaleY(0); } }
@keyframes hg-bot { 0% { transform: scaleY(0); } 70%, 100% { transform: scaleY(1); } }
@keyframes hg-stream { 0%, 2% { opacity: 0; } 6%, 66% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* Статус партии */
.status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.played { color: var(--muted); }
.played b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.turn { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: var(--fs-1); font-weight: 600; white-space: nowrap; }
.turn.mine { background: rgba(238, 121, 51, .18); color: var(--ember-soft); }


/* Карточка: главный элемент игры. Лицом вверх это светлая печатная карта на темном столе. */
.stage { position: relative; perspective: 1400px; margin: 0 0 20px; }
.card { position: relative; width: 100%; aspect-ratio: 5 / 6.3; max-height: 50vh; margin: 0 auto; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.45, 0, .55, 1); }
.card.flipped { transform: rotateY(180deg); }
.stage.compact .card { aspect-ratio: auto; height: 32vh; min-height: 220px; }
.face { position: absolute; inset: 0; border-radius: var(--r-card); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3); }
/* Safari на iOS не всегда прячет обратную сторону, поэтому стороны
   переключаются еще и прозрачностью ровно в середине поворота. */
.card .back, .card .front { transition: opacity 0s linear .3s; }
.card .front { opacity: 0; transform: rotateY(180deg); }
.card.flipped .back { opacity: 0; pointer-events: none; }
.card.flipped .front { opacity: 1; }

.back { background: var(--c); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.back::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; pointer-events: none; }
.back::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.4px); background-size: 12px 12px; pointer-events: none; }
.back-title { position: relative; z-index: 1; font: 500 var(--fs-3)/1.25 var(--serif); }
.back-hint { position: absolute; z-index: 1; left: 0; right: 0; bottom: 28px; font-size: var(--fs-1); color: rgba(247, 235, 221, .82); }
.badge-18 { position: absolute; z-index: 1; top: 22px; right: 22px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .28); font-size: 12px; font-weight: 600; }
.emblem { position: relative; z-index: 1; display: flex; gap: 2px; }
.fox-mono { width: 56px; height: 56px; color: var(--ink); --fox-detail: var(--c); }
.fox-mono.r { transform: scaleX(-1); }
.fox-mono .d { fill: var(--fox-detail); }
.fox-mono .s { fill: none; stroke: var(--fox-detail); stroke-linecap: round; }

.front { background: var(--paper); color: var(--paper-ink); display: flex; flex-direction: column; padding: 24px; }
.front-cat { font-size: var(--fs-1); font-weight: 600; color: var(--c); }
.front .q { flex: 1; display: flex; align-items: center; margin: 0; padding: 8px 0 18%; font: 500 var(--fs-4)/1.32 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
/* Влюбленные лисы на фоне лицевой стороны: очень прозрачные, в цвете темы */
.front .lovers { position: absolute; left: -6%; width: 112%; bottom: -7%; color: var(--c); opacity: .1; pointer-events: none; }
.front > :not(.lovers):not(.seal) { position: relative; }
.stage.compact .front .lovers { left: 14%; width: 72%; bottom: -10%; }
.stage.compact .front .q { font-size: var(--fs-3); line-height: 1.38; }

/* Сияние рубашки: единственная постоянная анимация в игре */
.halo { position: absolute; inset: 6% 6%; border-radius: 32px; background: var(--c); filter: blur(32px); opacity: .45; animation: halo 4s ease-in-out infinite; pointer-events: none; transition: opacity .4s var(--ease); }
.stage.is-open .halo { opacity: 0; animation: none; }
@keyframes halo { 0%, 100% { opacity: .3; transform: scale(.97); } 50% { opacity: .6; transform: scale(1.03); } }
.shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .26) 50%, transparent 60%); background-size: 260% 100%; animation: shine 4s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 130% 0; } 50%, 100% { background-position: -30% 0; } }

/* Колода для вытягивания: фирменная рубашка */
.deck { position: relative; width: 68%; aspect-ratio: 5 / 6.3; max-height: 42vh; margin: 20px auto 0; padding: 0; border: 0; background: none; --c: var(--ember-deep); }
.deck .layer { position: absolute; inset: 0; border-radius: var(--r-card); background: var(--c); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .8); }
.deck .layer:nth-child(1) { transform: rotate(-6deg) translate(-10px, 6px); opacity: .5; }
.deck .layer:nth-child(2) { transform: rotate(4deg) translate(8px, 2px); opacity: .75; }
.deck .top-card { position: absolute; inset: 0; border-radius: var(--r-card); background: var(--c); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--ink); transition: transform .2s var(--ease); }
.deck .top-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 16px; }
.deck .top-card span { position: relative; font: 500 var(--fs-4)/1 var(--serif); }
.deck:active .top-card { transform: translateY(-6px); }
.deck[disabled] { opacity: .55; }
.hint.deck-hint { margin: 40px 0 0; }

/* Ответы: открываются одновременно, как и задумано */
.answers { display: grid; gap: 8px; margin-bottom: 12px; }
.answer { padding: 12px 16px; border-radius: 16px; background: var(--panel); animation: rise .36s var(--ease) both; }
.answer .who { font-size: var(--fs-1); font-weight: 600; color: var(--muted); }
.answer .txt { margin-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.note { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--panel); }
.hint { margin: 0 0 12px; text-align: center; font-size: var(--fs-1); color: var(--muted); }

textarea { display: block; width: 100%; min-height: 96px; resize: none; padding: 14px 16px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 400 var(--fs-2)/1.45 var(--sans); }
textarea::placeholder { color: var(--muted); opacity: .8; }
textarea:focus { outline: none; border-color: var(--ember-soft); }
.answer-form { display: grid; gap: 8px; }

.reveal-actions { display: grid; gap: 8px; }

/* Правый нижний угол ответа партнера: реакции лисами и флажок пометки */
.zone { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 8px; }
.react, .flag { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 3px; border: 0; border-radius: 12px; background: transparent; transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.react::before, .flag::before { content: ""; position: absolute; inset: -2px; }
.react svg { width: 100%; height: 100%; display: block; }
.react:active, .flag:active { transform: scale(.9); }
.react.on { background: rgba(238, 121, 51, .22); box-shadow: inset 0 0 0 2px var(--ember); }
.flag { color: var(--muted); }
.flag svg { width: 22px; height: 22px; }
.flag.on { color: var(--ember); }
.zone-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--line); }
.got-react { display: inline-flex; align-items: center; gap: 4px; color: var(--ember-soft); font-size: var(--fs-1); font-weight: 600; vertical-align: middle; }
.got-react svg { width: 28px; height: 28px; }
.a .got-react svg { width: 22px; height: 22px; }

/* Список «Обсудить» */
.my-note { display: flex; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--ink); font-size: var(--fs-1); line-height: 1.45; }
.my-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--muted); }

/* Окно «Пометка для себя» */
#sheet { position: fixed; inset: 0; z-index: 65; display: flex; align-items: flex-end; justify-content: center; background: rgba(23, 12, 13, .7); animation: kiss-in .2s var(--ease) both; }
.sheet { width: 100%; max-width: 520px; padding: 24px 20px calc(20px + var(--safe-bottom)); border-radius: 24px 24px 0 0; background: var(--surface); display: grid; gap: 12px; animation: sheet-up .3s var(--ease) both; }
.sheet-title { margin: 0; font: 500 var(--fs-4)/1.2 var(--serif); }
.sheet .caption svg { width: 14px; height: 14px; vertical-align: -2px; }
.sheet-q { margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--panel-2); font: 500 var(--fs-2)/1.45 var(--serif); }
.sheet-opt { padding: 0; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Экраны со списками: группы в стиле настроек Telegram */
.screen-head { margin-bottom: 8px; }
.group-title { margin: 24px 4px 8px; font-size: var(--fs-1); font-weight: 600; color: var(--muted); }
.group { border-radius: var(--r-group); background: var(--panel); overflow: hidden; }
.item { padding: 16px; }
.item + .item { border-top: 1px solid var(--line); }
.item .cat-label { font-size: var(--fs-1); font-weight: 600; color: var(--c-soft); }
.item .q { margin: 4px 0 0; font: 500 var(--fs-3)/1.35 var(--serif); }
.item .a { margin-top: 8px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.item .a b { color: var(--ink); font-weight: 600; }
.item .item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.item.done { opacity: .6; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--panel-2); color: var(--ink); font-size: var(--fs-1); font-weight: 600; }
.pill-btn.on { background: var(--c); color: #fff; }
.empty { padding: 32px 16px; text-align: center; color: var(--muted); }
.screen-foot { margin-top: 24px; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 16px 0 4px; padding: 4px; border-radius: var(--r-ctl); background: var(--panel); }
.seg button { min-height: 44px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: var(--fs-1); font-weight: 600; line-height: 1.2; }
.seg button.on { background: var(--surface-2); color: var(--ink); }

/* Настройки */
.opt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--c-soft); }
.opt.plain { grid-template-columns: 1fr auto; }
.opt .lbl { display: grid; gap: 2px; font-weight: 600; }
.opt .lbl small { font-size: var(--fs-1); font-weight: 400; color: var(--muted); line-height: 1.45; }
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s var(--ease); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.switch input:checked + i { background: var(--c, var(--ember)); box-shadow: none; }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--ember-soft); outline-offset: 2px; }
.list-btn { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font-weight: 600; text-align: left; }
.list-btn + .list-btn { border-top: 1px solid var(--line); }
.list-btn.danger { color: #eca0a0; }

/* Шторка, загрузка, уведомления */
.loading { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
#toast { position: fixed; left: 20px; right: 20px; bottom: calc(20px + var(--safe-bottom)); z-index: 60; max-width: 480px; margin: 0 auto; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--ink); color: var(--bg); box-shadow: 0 16px 32px -12px rgba(0, 0, 0, .7); animation: rise .25s var(--ease) both; }

/* Лисы целуются: каждые 25 карточек вместе. Только трансформации и прозрачность. */
#kiss { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: rgba(23, 12, 13, .88); text-align: center; animation: kiss-in .3s var(--ease) both; }
#kiss.out { animation: kiss-out .35s var(--ease) both; }
.kiss-stage { position: relative; width: 240px; height: 132px; margin-bottom: 16px; }
.kiss-fox { position: absolute; top: 6px; width: 120px; height: 120px; }
.kiss-fox img { display: block; width: 100%; height: 100%; }
.kiss-fox img.flip { transform: scaleX(-1); }
/* Носы соприкасаются, когда правая лиса стоит на 89% ширины левой */
.kiss-fox.l { left: 13px; transform-origin: 94% 50%; animation: fox-l 3s var(--ease) both; }
.kiss-fox.r { left: 120px; transform-origin: 6% 50%; animation: fox-r 3s var(--ease) both; }
.kiss-heart { position: absolute; left: 50%; top: 12px; width: 34px; height: 34px; margin-left: -17px; fill: #ef8fa0; opacity: 0; animation: heart 3s var(--ease) both; }
.kiss-title { margin: 0; font: 500 var(--fs-5)/1.15 var(--serif); opacity: 0; animation: kiss-text 3s var(--ease) both; }
.kiss-sub { margin: 0; color: var(--muted); opacity: 0; animation: kiss-text 3s var(--ease) both; animation-delay: .1s; }
@keyframes kiss-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kiss-out { to { opacity: 0; } }
@keyframes fox-l {
  0% { transform: translateX(-140px); opacity: 0; }
  12% { opacity: 1; }
  42% { transform: translateX(-16px); }
  52% { transform: translateX(5px) rotate(-7deg); }
  60% { transform: translateX(-2px) rotate(0deg); }
  68% { transform: translateX(4px) rotate(-5deg); }
  78%, 100% { transform: translateX(-6px) rotate(0deg); opacity: 1; }
}
@keyframes fox-r {
  0% { transform: translateX(140px); opacity: 0; }
  12% { opacity: 1; }
  42% { transform: translateX(16px); }
  52% { transform: translateX(-5px) rotate(7deg); }
  60% { transform: translateX(2px) rotate(0deg); }
  68% { transform: translateX(-4px) rotate(5deg); }
  78%, 100% { transform: translateX(6px) rotate(0deg); opacity: 1; }
}
@keyframes heart {
  0%, 50% { opacity: 0; transform: translateY(14px) scale(.4); }
  60% { opacity: 1; transform: translateY(0) scale(1); }
  85% { opacity: 1; transform: translateY(-18px) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(.9); }
}
@keyframes kiss-text { 0%, 55% { opacity: 0; transform: translateY(6px); } 72%, 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .card, .answer, .halo, .shine, #toast, .sheet, #sheet { transition: none; animation: none; }
  .hourglass .hg, .hourglass .hg-top, .hourglass .hg-bot, .hourglass .hg-stream { animation: none; }
  .kiss-fox.l, .kiss-fox.r, .kiss-heart, .kiss-title, .kiss-sub { animation: none; opacity: 1; }
}

/* v1.1: карточка без переворота */
.card.static { transform: none; transition: none; }
.card.static.enter { animation: card-in .35s var(--ease); }
.card.static .front { opacity: 1; transform: none; transition: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* выбор пола */
.gender-pick .pick-title { margin: 0 0 10px; text-align: center; font: 500 var(--fs-3)/1.3 var(--serif); }
.gender-pick .row { display: flex; gap: 10px; }
.gender-pick .row .btn { flex: 1; }
.gender-pick .caption { margin-top: 12px; text-align: center; opacity: .75; font-size: var(--fs-1); line-height: 1.45; }
.seg2 { display: inline-flex; border-radius: 999px; background: rgba(255,255,255,.08); padding: 3px; gap: 2px; flex-shrink: 0; }
.seg2 button { border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--fs-1); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.seg2 button.on { background: var(--ember); color: #1b120c; }

/* приватность и донат */
.privacy { margin: 28px 0 0; }
.privacy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.privacy li { font-size: var(--fs-1); line-height: 1.5; opacity: .88; padding-left: 16px; position: relative; }
.privacy li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.donate { padding: 14px; display: grid; gap: 12px; }
.donate .stars { display: flex; gap: 8px; flex-wrap: wrap; }
.donate .ton { display: grid; gap: 8px; }
.ton-addr { font-size: 12px; word-break: break-all; opacity: .8; }
.pill-btn { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; font: inherit; font-size: var(--fs-1); padding: 9px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; }
.pill-btn:active { transform: scale(.97); }

/* реакции в 1.5 раза меньше, зона нажатия остается удобной */
.react { width: 27px; height: 27px; padding: 2px; border-radius: 9px; }
.react::before { inset: -7px; }

/* v1.1: ответ улетает в карточку и запечатывается */
.seal { position: absolute; right: 18px; bottom: 18px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; transform: rotate(-12deg);
  background: radial-gradient(circle at 35% 30%, var(--ember-soft), var(--ember) 55%, var(--ember-deep));
  box-shadow: 0 3px 8px rgba(80, 30, 10, .35), inset 0 0 0 3px rgba(255, 255, 255, .14), inset 0 -3px 6px rgba(0, 0, 0, .18); }
.seal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(255, 240, 225, .5); }
.seal span { font: 600 13px/1 var(--logo); letter-spacing: .06em; color: rgba(255, 244, 232, .95); }
.seal.stamp { animation: stamp .5s cubic-bezier(.3, 1.4, .5, 1) .38s both; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-30deg) scale(1.9); }
  60% { opacity: 1; transform: rotate(-8deg) scale(.88); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}
.answer.reveal-a { animation: rise .45s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .seal.stamp { animation: none; } }

/* «Следующая карточка >>>» */
.next-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.next-btn .chev { width: 26px; height: 12px; flex-shrink: 0; }
.next-btn .chev path { opacity: .35; animation: chev 1.6s ease-in-out infinite; }
.next-btn .chev path:nth-child(2) { animation-delay: .2s; }
.next-btn .chev path:nth-child(3) { animation-delay: .4s; }
@keyframes chev { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .next-btn .chev path { animation: none; opacity: .8; } }

/* выбор: хранить ответы или удалять после прочтения */
.keep-pick { display: grid; gap: 8px; margin-bottom: 4px; }
.pick-title.small { margin: 0; text-align: center; font: 500 var(--fs-2)/1.3 var(--serif); }
.seg2.wide { display: flex; width: 100%; }
.seg2.wide button { flex: 1; padding: 9px 8px; }
.keep-pick .caption { margin: 0; text-align: center; opacity: .75; font-size: var(--fs-1); line-height: 1.45; }

/* ---------- Знакомство при первом запуске ---------- */
html.onb-open, html.onb-open body { overflow: hidden; }
#onb { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: calc(var(--safe-top, 0px) + 8px) 0 calc(var(--safe-bottom, 0px) + 16px);
  background: radial-gradient(120% 70% at 50% 0%, rgba(238, 121, 51, .14), transparent 60%), var(--bg); color: var(--ink);
  animation: onb-in .35s var(--ease) both; }
#onb.closing { animation: onb-out .28s var(--ease) both; }
@keyframes onb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes onb-out { to { opacity: 0; transform: scale(1.02); } }
.onb-top { display: flex; justify-content: flex-end; padding: 0 12px; min-height: 44px; }
.onb-skip { border: 0; background: transparent; color: var(--muted); font: 500 var(--fs-1)/1 var(--sans); padding: 12px; min-height: 44px; cursor: pointer; }
.onb-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.onb-track::-webkit-scrollbar { display: none; }
.onb-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 24px; box-sizing: border-box; max-width: 100vw; }
.onb-copy { max-width: 26em; }
.onb-copy h2 { margin: 0; font: 500 30px/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.onb-copy p { margin: 12px 0 0; font-size: var(--fs-2); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.onb-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: o; }
.onb-list li { counter-increment: o; display: grid; grid-template-columns: 26px 1fr; align-items: baseline; font-size: var(--fs-2); line-height: 1.4; }
.onb-list li::before { content: counter(o); font: 500 var(--fs-3)/1 var(--serif); color: var(--ember-soft); }
.onb-bottom { display: grid; gap: 16px; padding: 12px 24px 0; }
.onb-dots { display: flex; justify-content: center; gap: 6px; }
.onb-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width .3s var(--ease), background .3s var(--ease); }
.onb-dots i.on { width: 20px; background: var(--ember); }
.onb-cta .row { display: flex; gap: 10px; }
.onb-cta .row .btn { flex: 1; }

/* иллюстрации слайдов: из тех же элементов, что и игра */
.onb-art { height: min(34vh, 260px); display: grid; place-items: center; position: relative; }
.art-logo { gap: 10px; align-content: center; }
.art-logo .emblem, .art-pair .emblem { transform: scale(2.1); color: var(--ember); }
.art-logo .onb-word { margin-top: 36px; font: 600 40px/1 var(--logo); letter-spacing: .14em; color: var(--ink); }
.mini-card { position: relative; width: 200px; aspect-ratio: 5 / 6.3; border-radius: 18px; background: var(--paper); color: var(--paper-ink); padding: 18px 16px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; transform: rotate(-4deg); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); }
.mc-cat { font: 600 11px/1 var(--sans); color: #b5523a; }
.mc-q { font: 500 17px/1.3 var(--serif); }
.art-card .mini-card { width: 168px; transform: rotate(-5deg) translate(-22px, -6px); }
.mini-answers { position: absolute; right: calc(50% - 128px); bottom: 6px; display: grid; gap: 8px; }
.mini-answers span { display: grid; gap: 5px; width: 118px; padding: 10px 12px; border-radius: 12px; background: var(--panel); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .8); transform: rotate(3deg); }
.mini-answers i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.mini-answers i + i { width: 60%; }
.art-lovers .lovers { width: min(78vw, 300px); color: var(--ember); opacity: .9; }
.mini-card.sealed { width: 160px; transform: rotate(3deg); justify-content: center; }
.mc-lines { display: grid; gap: 8px; }
.mc-lines i { display: block; height: 8px; border-radius: 4px; background: rgba(60, 30, 20, .14); }
.mc-lines i:nth-child(2) { width: 80%; } .mc-lines i:nth-child(3) { width: 55%; }
.mini-card .seal { right: 14px; bottom: 14px; }
.onb-slide .onb-art { animation: art-in .6s var(--ease) both; }
@keyframes art-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-height: 760px) { .onb-copy h2 { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { #onb, #onb.closing, .onb-slide .onb-art { animation: none; } }

/* страница «Об игре» и строка-ссылка в настройках */
.link-row { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.chev-r { font-size: 22px; color: var(--muted); padding-left: 12px; }
.btn.text.inline { display: inline-flex; width: auto; }
.center { text-align: center; }
.onb-foxes { display: flex; gap: 6px; align-items: flex-end; }
.onb-foxes img { width: 92px; height: auto; }
.onb-foxes img.r { transform: scaleX(-1); }
.art-logo .onb-word { margin-top: 18px; }
.onb-list.bullets li::before { content: ""; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--ember); transform: translateY(-2px); }

/* смена экрана после ответа без горизонтальной прокрутки */
#view { overflow-x: clip; }

/* страница «Об игре»: один шрифт для заголовков (Literata), один для текста (Onest) */
.about-page .title { margin-bottom: 8px; }
.about-sec { padding: 28px 0 4px; }
.about-sec + .about-sec { border-top: 1px solid var(--line); margin-top: 24px; }
.about-sec h2 { margin: 0 0 14px; font: 500 var(--fs-4)/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.about-sec p { margin: 0 0 10px; font: 400 var(--fs-2)/1.6 var(--sans); color: var(--muted); }
.about-sec p.sub { margin-top: 16px; color: var(--ink); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 7px 12px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font: 500 var(--fs-1)/1.2 var(--sans); color: var(--ink); }
.about-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: a; }
.about-list li { position: relative; padding-left: 34px; font: 400 var(--fs-2)/1.55 var(--sans); color: var(--muted); }
.about-list b { font-weight: 600; color: var(--ink); }
.about-list.num li { counter-increment: a; }
.about-list.num li::before { content: counter(a); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ember); color: var(--bg); font: 600 13px/1 var(--sans); margin-top: 1px; }
.about-list.dot li::before { content: ""; position: absolute; left: 8px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }
.credit { margin-top: 4px; font-style: italic; opacity: .8; }
.onb-cta .btn.picked { box-shadow: inset 0 0 0 2px var(--ember); }

/* ---------- Лобби: ждем вторую половинку ---------- */
.lobby { padding-top: 8px; }
.lobby-pair { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px 0 22px; }
.lobby-pair .lf { width: 76px; height: 76px; }
.lobby-pair .lf.ghost { transform: scaleX(-1); opacity: .22; filter: grayscale(1) brightness(1.6); animation: ghost 2.4s ease-in-out infinite; }
@keyframes ghost { 0%, 100% { opacity: .16; } 50% { opacity: .34; } }
.lobby-gap { display: flex; gap: 5px; }
.lobby-gap i { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); opacity: .3; animation: chev 1.5s ease-in-out infinite; }
.lobby-gap i:nth-child(2) { animation-delay: .2s; } .lobby-gap i:nth-child(3) { animation-delay: .4s; }
.lobby .title.center { text-align: center; text-wrap: balance; }
.lobby .lead.center { text-align: center; margin: 12px auto 0; max-width: 22em; }
.status-chip { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 0; padding: 7px 14px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font: 500 var(--fs-1)/1 var(--sans); color: var(--muted); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(238, 121, 51, .6); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(238, 121, 51, .55); } 100% { box-shadow: 0 0 0 10px rgba(238, 121, 51, 0); } }
.lobby .actions { gap: 4px; }
.or { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: var(--fs-1); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 0; border-radius: var(--r-group); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer; margin-bottom: 8px; }
.code-row:active { transform: scale(.99); }
.code-label { display: grid; gap: 3px; font: 600 var(--fs-2)/1.2 var(--sans); }
.code-label small { font: 400 var(--fs-1)/1.35 var(--sans); color: var(--muted); }
.code-row .code { font: 600 var(--fs-3)/1 var(--sans); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ember-soft); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .lobby-pair .lf.ghost, .lobby-gap i, .pulse { animation: none; } }
.small-print { font-size: 12px; opacity: .7; margin-top: -4px; }

/* ---------- Записки к ответам ---------- */
.top-actions { align-items: center; gap: 2px; }
.env-btn { position: relative; }
.env-btn.has { color: var(--ember-soft); animation: env-nudge 2.4s ease-in-out infinite; }
.env-btn.on { color: var(--ink); }
.env-btn .dot { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font: 700 11px/17px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
@keyframes env-nudge { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-10deg); } 94% { transform: rotate(8deg); } }
.letter-btn svg { width: 22px; height: 22px; }

/* лист для письма */
.letter-sheet .paper { position: relative; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(80, 40, 20, .08); transform-origin: top center; }
.letter-sheet .paper textarea { width: 100%; min-height: 120px; border: 0; background: transparent; color: var(--paper-ink); font: 400 17px/1.5 var(--serif); padding: 14px 16px 40px; resize: none; box-sizing: border-box; }
.letter-sheet .paper textarea::placeholder { color: var(--paper-muted); }
.letter-sheet .paper:focus-within { box-shadow: inset 0 0 0 2px var(--ember); }
.paper-seal { right: 12px; bottom: 10px; opacity: 0; transform: scale(1.8) rotate(-30deg); }
.letter-sheet.sealing .paper { animation: fold .8s var(--ease) forwards; }
.letter-sheet.sealing .paper textarea { color: transparent; transition: color .2s; }
.letter-sheet.sealing .paper-seal { animation: stamp .45s cubic-bezier(.3, 1.4, .5, 1) .25s both; }
@keyframes fold { 0% { transform: none; } 45% { transform: scaleY(.55); } 100% { transform: scaleY(.55) translateY(-12px); opacity: .0; } }
.lt-quote { display: grid; gap: 6px; padding: 10px 12px; border-left: 3px solid var(--ember); border-radius: 4px 10px 10px 4px; background: rgba(255, 255, 255, .04); }
.lt-q { margin: 0; font: 500 var(--fs-2)/1.35 var(--serif); color: var(--ink); }
.lt-a { margin: 0; font-size: var(--fs-1); line-height: 1.5; color: var(--muted); }
.lt-a b { color: var(--ink); font-weight: 600; }

/* экран «Записки» */
.letters { display: grid; gap: 14px; margin-top: 16px; }
.envelope { position: relative; overflow: hidden; height: 150px; border: 0; border-radius: 18px; background: var(--paper); color: var(--paper-ink); cursor: pointer; display: flex; align-items: flex-end; padding: 16px 18px; text-align: left; box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .8); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 92px; background: #ead6bf; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; transition: transform .45s var(--ease); }
.env-seal { position: absolute; left: 50%; top: 92px; margin: -23px 0 0 -23px; width: 46px; height: 46px; z-index: 2; }
.env-seal span { font-size: 12px; }
.env-text { position: relative; z-index: 1; display: grid; gap: 2px; }
.env-text b { font: 600 var(--fs-2)/1.2 var(--sans); }
.env-text small { font-size: var(--fs-1); color: var(--paper-muted); }
.envelope { animation: env-wait 3s ease-in-out infinite; }
@keyframes env-wait { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.envelope.opening { animation: none; }
.envelope.opening .env-seal { animation: seal-break .45s ease-in forwards; }
.envelope.opening .env-flap { transform: rotateX(180deg); transition-delay: .35s; }
@keyframes seal-break { 0% { transform: rotate(-12deg) scale(1); } 40% { transform: rotate(-4deg) scale(1.15); } 100% { transform: rotate(25deg) scale(.4); opacity: 0; } }
.letter { padding: 16px 18px; border-radius: 18px; background: var(--panel); display: grid; gap: 12px; }
.letter header { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-1); color: var(--muted); }
.letter header span { color: var(--ember-soft); font-weight: 600; }
.lt-text { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--paper); color: var(--paper-ink); font: 400 18px/1.5 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-text.wiped { font-style: italic; color: var(--paper-muted); font-size: var(--fs-2); }
.letter footer { display: flex; justify-content: flex-end; }
.lt-status { font-size: var(--fs-1); color: var(--muted); }
.lt-status.read { color: var(--ember-soft); }
.letter.unfold .lt-text { transform-origin: top center; animation: unfold .6s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes unfold { from { transform: scaleY(.15); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.lt-mini { margin-top: 6px; border: 0; background: transparent; color: var(--ember-soft); font: 600 var(--fs-1)/1 var(--sans); padding: 6px 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .env-btn.has, .envelope, .letter.unfold .lt-text { animation: none; } }

/* ---------- Записки v1.4: переписка по карточке ---------- */
.thread { padding: 16px; border-radius: 20px; background: var(--panel); display: grid; gap: 14px; }
.thread-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.thread-head .front-cat { font-size: 12px; font-weight: 600; color: var(--c, var(--ember-soft)); }
.thread-head .lt-q { margin-top: 4px; }
.thread-flag { flex-shrink: 0; margin: -4px -6px 0 0; }
.lt-q.small { font-size: var(--fs-1); }
.thread-branch { display: grid; gap: 10px; }
.thread-branch + .thread-branch { padding-top: 12px; border-top: 1px dashed var(--line); }
.branch-ans { padding: 8px 12px; border-left: 3px solid var(--ember); border-radius: 4px 10px 10px 4px; background: rgba(255, 255, 255, .04); }
.lt-item { display: grid; gap: 6px; }
.lt-meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-1); color: var(--muted); }
.lt-meta b { color: var(--ember-soft); font-weight: 600; }
.lt-foot { display: flex; justify-content: flex-end; min-height: 8px; }
.lt-foot .btn.text { min-height: 36px; padding: 0 4px; }
.lt-item.unfold .lt-text { transform-origin: top center; animation: unfold .6s cubic-bezier(.2, .8, .25, 1) both; }
.replies { display: grid; gap: 10px; margin-left: 14px; padding-left: 14px; border-left: 2px solid rgba(249, 179, 121, .35); }
.replies .lt-text { font-size: 17px; }
.envelope.small { height: 112px; }
.envelope.small .env-flap { height: 66px; }
.envelope.small .env-seal { top: 66px; width: 38px; height: 38px; margin: -19px 0 0 -19px; }

/* ---------- Меню слева вверху ---------- */
.menu-btn { position: relative; }
.menu-btn.on { background: var(--panel-2); color: var(--ink); }
.menu-dot { position: absolute; top: 9px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 2px var(--bg); }
#menu { position: fixed; inset: 0; z-index: 55; }
.menu-pop { position: fixed; min-width: 236px; max-width: calc(100vw - 24px); padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -16px rgba(0, 0, 0, .85); transform-origin: top left; animation: menu-in .18s cubic-bezier(.2, .8, .25, 1) both; display: grid; gap: 2px; }
#menu.closing .menu-pop { animation: menu-out .14s ease-in forwards; }
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes menu-out { to { opacity: 0; transform: scale(.96); } }
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 500 var(--fs-2)/1.2 var(--sans); text-align: left; cursor: pointer; }
.menu-item:active, .menu-item:focus-visible { background: var(--panel-2); outline: none; }
.menu-item.current { background: rgba(238, 121, 51, .14); color: var(--ember-soft); }
.mi-icon { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.menu-item.current .mi-icon { color: var(--ember-soft); }
.mi-icon svg { width: 22px; height: 22px; }
.mi-label { flex: 1; }
.mi-hint { font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .menu-pop, #menu.closing .menu-pop { animation: none; } }

/* v1.6: новые темы, свои карточки, действия */
.c-money    { --c: #6b6a00; --c-soft: #cfcd7a; }
.c-work     { --c: #3f6a63; --c-soft: #9fd0c6; }
.c-friends  { --c: #a03e72; --c-soft: #f0a6cf; }
.c-thanks   { --c: #9a5a00; --c-soft: #f0bf7a; }
.c-care     { --c: #2f7346; --c-soft: #9fd6ad; }
.c-story    { --c: #8a3fa0; --c-soft: #d9a8ec; }
.c-acts     { --c: #b4431b; --c-soft: #f6a882; }
.c-own      { --c: #5b4a3f; --c-soft: #e2c8b4; }
.act-hint { margin: 0 0 6px; font-size: var(--fs-1); line-height: 1.45; color: var(--paper-muted); position: relative; }
.answer-form .row { display: flex; gap: 8px; }
.answer-form .row .btn { flex: 1; }
.own-form { display: grid; gap: 10px; margin-top: 18px; }
.own-form .paper { border-radius: 14px; background: var(--paper); }
.own-form textarea { width: 100%; min-height: 96px; border: 0; background: transparent; color: var(--paper-ink); font: 400 17px/1.45 var(--serif); padding: 14px 16px; resize: none; box-sizing: border-box; }
.own-form textarea::placeholder { color: var(--paper-muted); }
.own-secret { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(238, 121, 51, .12); color: var(--ember-soft); font-size: var(--fs-1); line-height: 1.45; }
.own-secret svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.own-item { align-items: center; gap: 8px; }
.own-item .lbl { white-space: normal; }
.book-list { margin-top: 12px; }
.book-list summary { cursor: pointer; color: var(--ember-soft); font: 600 var(--fs-1)/1.4 var(--sans); padding: 6px 0; }
.book-list ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-1); line-height: 1.45; }

/* ---------- Что нового ---------- */
#whatsnew { position: fixed; inset: 0; z-index: 65; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 5, 6, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: onb-in .2s ease both; }
#whatsnew.closing { animation: onb-out .2s ease forwards; }
.wn { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 24px 20px calc(20px + var(--safe-bottom)); border-radius: 26px 26px 0 0; background: var(--surface); box-shadow: 0 -20px 48px -20px rgba(0, 0, 0, .8); display: grid; gap: 18px; animation: sheet-up .32s var(--ease) both; }
.wn-head { display: grid; gap: 8px; }
.wn-badge { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(238, 121, 51, .16); color: var(--ember-soft); font: 600 12px/1.2 var(--sans); }
.wn-head h2 { margin: 0; font: 500 var(--fs-4)/1.2 var(--serif); }
.wn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wn-list li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.wn-ico { width: 36px; height: 36px; border-radius: 12px; background: var(--panel-2); display: grid; place-items: center; font-size: 18px; }
.wn-list b { display: block; font: 600 var(--fs-2)/1.3 var(--sans); }
.wn-list li > div > span { display: block; margin-top: 2px; font-size: var(--fs-1); line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { #whatsnew, .wn { animation: none; } }

/* Демо внутри Telegram */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(238, 121, 51, .12); box-shadow: inset 0 0 0 1px rgba(249, 179, 121, .3); }
.demo-bar span { font-size: var(--fs-1); line-height: 1.4; color: var(--ember-soft); }
.demo-bar .pill-btn { flex-shrink: 0; min-height: 36px; padding: 6px 12px; }
.demo-bar .pill-btn.hot { background: var(--ember); border-color: var(--ember); color: var(--bg); font-weight: 600; }
/* подсказка на карточке-действии не уходит под печать */
.front .act-hint { padding-right: 56px; }
/* пояснение к пункту с новой строки */
.about-list b, .steps li b { display: block; }
.steps li span { display: block; }

/* v1.7: статус хода справа, реакции сверху справа, статистика */
.status { justify-content: flex-end; }
.ans-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.react-bar { display: flex; gap: 6px; margin: -6px -6px 0 0; }
.react-bar .react, .zone .react { width: 36px; height: 36px; padding: 2px; border-radius: 11px; }
.react-bar .react::before { inset: -4px; }
.react-bar .react.on { background: rgba(238, 121, 51, .22); box-shadow: inset 0 0 0 2px var(--ember); }
.got-react svg { width: 32px; height: 32px; }
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.st-tile { padding: 14px; border-radius: 18px; background: var(--panel); display: grid; gap: 2px; align-content: start; }
.st-tile b { font: 500 32px/1.05 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.st-tile span { font-size: var(--fs-1); line-height: 1.3; color: var(--ink); }
.st-tile small { font-size: 12px; color: var(--muted); }
.st-bars { padding: 12px 14px; display: grid; gap: 10px; }
.st-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: var(--fs-1); }
.st-bar span { grid-column: 1; }
.st-bar b { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; }
.st-bar i { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--c-soft, var(--ember)); }
.st-row { display: flex; gap: 10px; }
.st-react { display: inline-flex; align-items: center; gap: 4px; }
.st-react svg { width: 26px; height: 26px; }
.st-react b { font-variant-numeric: tabular-nums; }
.st-num { font: 500 var(--fs-3)/1 var(--serif); color: var(--ember-soft); }
.mine-react svg { width: 30px; height: 30px; }

/* Сделать вместе: общий список дел */
.todo-form { display: flex; gap: 8px; margin-top: 18px; }
.todo-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--paper); color: var(--paper-ink); font: 400 17px/1.3 var(--serif); }
.todo-form input::placeholder { color: var(--paper-muted); }
.todo-form .btn { width: auto; flex-shrink: 0; padding: 0 18px; min-height: 48px; }
.todo-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px 14px 16px; border-top: 1px solid var(--line); }
.todo-item:first-child { border-top: 0; }
.todo-check { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; padding: 0; border: 2px solid var(--muted); border-radius: 50%; background: transparent; color: var(--bg); transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.todo-check:active { transform: scale(.9); }
.todo-check svg { width: 18px; height: 18px; }
.todo-check.on { border-color: var(--ember); background: var(--ember); }
.todo-body { flex: 1; min-width: 0; }
.todo-text { margin: 0; font: 400 17px/1.4 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.todo-meta { margin: 4px 0 0; font-size: var(--fs-1); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.todo-item.done .todo-text { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
.todo-del { flex-shrink: 0; margin-top: -6px; color: var(--muted); }

/* Режим 21+ */
.c-x21      { --c: #6d0f2a; --c-soft: #ff8fa8; }
.x21-ask { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 10px 10px 10px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(109, 15, 42, .55), rgba(238, 121, 51, .22)); border: 1px solid rgba(255, 143, 168, .25); }
.x21-ask span { flex: 1; min-width: 0; font-size: var(--fs-2); font-weight: 600; }
.x21-ask .pill-btn { min-height: 36px; padding: 6px 12px; flex-shrink: 0; }
.x21-ask .pill-btn.hot { background: var(--ember); border-color: var(--ember); color: var(--bg); font-weight: 600; }

/* Лиса с сердцем: одна реакция */
.react.heart-react, .react-bar .react.heart-react, .zone .react.heart-react { width: 44px; height: 46px; padding: 0; border-radius: 12px; background: transparent; box-shadow: none; overflow: visible; isolation: isolate; }
.react.heart-react svg { overflow: visible; }
.heart-react .hb { fill: #e8b4bd; transition: fill .25s var(--ease); }
.heart-react .hl { opacity: .3; }
.heart-react.on .hb { fill: #ef3b5d; }
.heart-react.on .hl { opacity: .55; }
.heart-react .fh { transform-box: fill-box; transform-origin: 50% 55%; }
.heart-react.beat .fh { animation: heart-pulse .7s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: var(--pd, 0ms); }
.heart-react.on.beat::after { content: ""; position: absolute; left: 50%; top: 72%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(239, 59, 93, .75); border-radius: 50%; z-index: -1; animation: heart-ring .7s ease-out both; animation-delay: var(--pd, 0ms); pointer-events: none; }
@keyframes heart-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 65% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes heart-ring { 0% { transform: scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.react.heart-react:active { transform: scale(.94); }
.mine-react svg, .got-react svg { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .heart-react.beat .fh, .heart-react.on.beat::after { animation: none; } }

/* Карточки-действия */
.act-chip { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.act-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.act-row .later-btn { width: auto; padding: 0 16px; gap: 6px; }
.act-row .later-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.todo-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 12px 0 12px; padding: 0 16px; border: 1px dashed rgba(238, 121, 51, .6); border-radius: var(--r-ctl); background: rgba(238, 121, 51, .08); color: var(--ember); font: 600 var(--fs-2)/1.2 var(--sans); }
.todo-cta svg { width: 22px; height: 22px; flex-shrink: 0; }
.todo-cta:active { transform: scale(.98); }
.todo-cta.on { border-style: solid; border-color: var(--line); background: var(--panel); color: var(--ink); }
.todo-cta.on svg { color: var(--ember); }
.todo-cta small { margin-left: auto; color: var(--muted); font-size: var(--fs-1); font-weight: 500; }
.todo-ideas { margin: 6px 0 0; display: grid; gap: 2px; }
.todo-ideas p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); opacity: .85; overflow-wrap: anywhere; }
.todo-ideas b { color: var(--muted); font-weight: 600; }
.topic-item .item-actions { align-items: center; }
.topic-item .topic-del { margin-left: auto; color: var(--muted); }

/* Офлайн-режим */
.menu-toggle .mi-label small { display: block; margin-top: 2px; font-size: var(--fs-1); color: var(--muted); font-weight: 400; }
.mi-switch { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s var(--ease); }
.mi-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.mi-switch.on { background: var(--ember); box-shadow: none; }
.mi-switch.on i { transform: translateX(16px); }
.menu-toggle { min-height: 56px; }
.menu-sep { height: 1px; margin: 4px 8px; background: var(--line); }
.off-status { justify-content: space-between; }
.off-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(238, 121, 51, .12); color: var(--ember-soft); font-size: var(--fs-1); font-weight: 600; }
.off-chip svg { width: 18px; height: 18px; }
.off-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.off-tools .pill-btn { display: inline-flex; align-items: center; gap: 6px; }
.off-tools .pill-btn svg { width: 18px; height: 18px; }
.off-tools .pill-btn.on { border-color: var(--ember); color: var(--ember-soft); background: rgba(238, 121, 51, .12); }
.off-note { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.off-note svg { width: 18px; height: 18px; flex-shrink: 0; }
.off-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.off-row .zone { margin-top: 0; }
.off-note { font-size: var(--fs-2); }

/* Знакомство: новые слайды */
.mini-answers span.has-heart { position: relative; }
.mini-heart { position: absolute; right: -14px; top: -18px; width: 38px; height: 40px; transform: rotate(8deg); }
.mini-heart svg { width: 100%; height: 100%; overflow: visible; }
.mini-heart .hb { fill: #ef3b5d; }
.art-todo { position: relative; }
.mini-todo { width: 214px; padding: 16px 16px 18px; border-radius: 18px; background: var(--panel); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--line); display: grid; gap: 12px; transform: rotate(-3deg); }
.mt-title { font: 500 18px/1.1 var(--serif); color: var(--ink); }
.mt-row { display: flex; align-items: center; gap: 10px; }
.mt-row b { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border: 2px solid var(--muted); border-radius: 50%; color: var(--bg); }
.mt-row b svg { width: 13px; height: 13px; }
.mt-row.done b { border-color: var(--ember); background: var(--ember); }
.mt-row i { display: block; flex: 1; height: 7px; border-radius: 4px; background: var(--line); }
.mt-row i.short { flex: 0 0 55%; }
.mt-row.done i { opacity: .55; }
.mini-chip { position: absolute; right: calc(50% - 132px); bottom: 18px; padding: 6px 10px; border-radius: 10px; background: var(--paper); color: #b4431b; font: 600 12px/1 var(--sans); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .8); transform: rotate(5deg); }
.art-offline { align-content: center; justify-items: center; gap: 0; }
.onb-foxes.peek { position: relative; z-index: 0; margin-bottom: -26px; }
.onb-foxes.peek img { width: 74px; }
.mini-card.flat { position: relative; z-index: 1; width: 230px; aspect-ratio: auto; transform: none; padding: 16px 18px 18px; gap: 10px; }
.mini-card.flat .mc-cat { display: inline-flex; align-items: center; gap: 5px; }
.mini-card.flat .mc-cat svg { width: 15px; height: 15px; }

/* Об игре: гармошка */
.about-lead { margin: 4px 0 18px; font: 400 var(--fs-2)/1.5 var(--sans); color: var(--muted); }
.acc-group { display: grid; gap: 10px; }
.acc { border-radius: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; scroll-margin-top: calc(var(--safe-top) + 72px); }
.acc summary { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 16px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: -2px; border-radius: 18px; }
.acc-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(238, 121, 51, .12); color: var(--ember-soft); }
.acc-ico svg { width: 22px; height: 22px; }
.acc-head { flex: 1; min-width: 0; display: grid; gap: 3px; }
.acc-head b { font: 500 19px/1.2 var(--serif); color: var(--ink); }
.acc-head small { font: 400 var(--fs-1)/1.35 var(--sans); color: var(--muted); }
.acc-chev { width: 10px; height: 10px; flex: none; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); }
.acc[open] .acc-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.acc[open] { background: var(--surface); }
.acc-body { padding: 2px 18px 20px; animation: acc-in .3s var(--ease) both; }
@keyframes acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.acc-body p { margin: 0 0 12px; font: 400 var(--fs-2)/1.6 var(--sans); color: var(--muted); }
.acc-body p b { color: var(--ink); font-weight: 600; }
.acc-body .about-list { gap: 12px; }
.about-authors { margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-1) !important; line-height: 1.7 !important; color: var(--muted); }
.about-authors span { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .acc-body { animation: none; } .acc-chev { transition: none; } }

/* Главная: три входа с живыми иконками */
.hub { display: grid; gap: 10px; margin-top: 28px; }
.hub button { position: relative; border: 0; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease); }
.hub button:active { transform: scale(.98); }
.hub-main { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 14px 18px 14px 14px; border-radius: 22px; background: linear-gradient(135deg, #f08a45, var(--ember) 55%, #d9621f); color: var(--bg); box-shadow: 0 18px 36px -18px rgba(238, 121, 51, .7); }
.hub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 132px; padding: 14px; border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hub-ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: rgba(238, 121, 51, .14); color: var(--ember-soft); }
.hub-main .hub-ico { background: rgba(26, 14, 12, .16); color: var(--bg); }
.hub-txt { display: grid; gap: 4px; min-width: 0; flex: 1; }
.hub-txt b { font: 500 19px/1.15 var(--serif); }
.hub-main .hub-txt b { font: 600 20px/1.15 var(--serif); }
.hub-txt small { font: 400 var(--fs-1)/1.35 var(--sans); color: var(--muted); }
.hub-main .hub-txt small { color: rgba(26, 14, 12, .72); font-weight: 500; }
.hub-go { display: flex; opacity: .8; }
.hub-tile .badge { position: absolute; top: 14px; right: 14px; }
.hub-note { margin: 16px 2px 0; font-size: var(--fs-1); line-height: 1.5; color: var(--muted); text-align: center; }

.hi { width: 34px; height: 34px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* карты: верхняя взлетает и переворачивается */
.hi-game .c2, .hi-game .c3 { opacity: .5; }
.hi-game .c1 rect { fill: rgba(26, 14, 12, .14); }
.hi-game .h { fill: currentColor; stroke: none; }
.hi-game .c1 { transform-box: fill-box; transform-origin: 50% 100%; }
.tap .hi-game .c1 { animation: hi-flip .42s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes hi-flip { 0% { transform: none; } 45% { transform: translate(4px, -7px) rotate(12deg); } 100% { transform: none; } }
/* облачка: точки печатают, второе облако кивает */
.hi-talk .d { fill: currentColor; stroke: none; }
.hi-talk .b1, .hi-talk .b2 { transform-box: fill-box; transform-origin: 50% 100%; }
.tap .hi-talk .b1 { animation: hi-pop .42s ease; }
.tap .hi-talk .b2 { animation: hi-pop .42s ease .08s; }
.tap .hi-talk .d { animation: hi-dot .42s ease; }
.tap .hi-talk .d2 { animation-delay: .07s; } .tap .hi-talk .d3 { animation-delay: .14s; }
@keyframes hi-pop { 50% { transform: scale(1.12) translateY(-2px); } }
@keyframes hi-dot { 50% { transform: translateY(-3px); } }
/* список: галочка рисуется, квадрат заливается */
.hi-todo .ck { stroke-dasharray: 12; stroke-dashoffset: 0; }
.hi-todo .ln { opacity: .65; }
.tap .hi-todo .ck { animation: hi-draw .42s ease; }
.tap .hi-todo .box { animation: hi-fill .42s ease; }
@keyframes hi-draw { 0% { stroke-dashoffset: 12; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes hi-fill { 40% { fill: rgba(238, 121, 51, .35); } }
.tap .hub-ico { animation: hi-bump .42s ease; }
@keyframes hi-bump { 40% { transform: scale(.92); } 75% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .tap .hi *, .tap .hub-ico { animation: none !important; } }

/* Ссылка «Об игре и приватности» */
.about-link { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 16px 12px 12px; border: 0; border-radius: 18px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.about-link:active { background: var(--panel); }
.al-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--panel-2); color: var(--muted); }
.al-ico svg { width: 22px; height: 22px; }
.al-txt { flex: 1; display: grid; gap: 2px; }
.al-txt b { font: 600 var(--fs-2)/1.25 var(--sans); }
.al-txt small { font-size: var(--fs-1); color: var(--muted); }
.acc-chev.r { transform: rotate(-45deg); }
.hub-go svg, .hub-go { color: var(--bg); } .hub-go svg { width: 28px; height: 18px; }
.status:not(.off-status) { justify-content: center; }


/* Кнопка ответа в стиле «Продолжить игру» */
.answer-form .ans-cta { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; min-height: 76px; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease); }
.answer-form .ans-cta:active { transform: scale(.98); }
.hi-ans .pc { fill: rgba(26, 14, 12, .14); }
.hi-ans .ln { opacity: .7; }
.hi-ans .st { fill: #9c2b22; stroke: #ffd7c4; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.tap .hi-ans .st { animation: ans-stamp .3s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes ans-stamp { 0% { transform: translate(6px, -14px) scale(1.5); opacity: 0; } 60% { transform: scale(.85); opacity: 1; } 100% { transform: none; } }
.tap .hub-ico { animation: hi-bump .3s ease; }
.later-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; }
.later-link svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .tap .hi-ans .st { animation: none; } }
.hi-ans .st .sh { fill: #ffd7c4; stroke: none; }