/* ZURU Fuggler × Детский мир — client mini app.
   Kraft-paper look per customer mockups. No frameworks, no build step.

   Structure:
     1. design tokens        7. figure card (persona)
     2. base / layout        8. progress blocks
     3. typography           9. passport
     4. buttons             10. dossier + modals
     5. forms               11. screens (checks / info / support / rules)
     6. states              12. chrome (topbar, tabbar, toast) + responsive     */

/* ============ 1. DESIGN TOKENS ============ */
:root {
  /* palette */
  --color-background: #c9b48c;          /* kraft */
  --color-surface: #e6d8b8;             /* paper-warm: cards, panels */
  --color-surface-alt: #eee4cb;         /* paper: inner blocks */
  --color-text: #221d16;                /* ink */
  --color-muted: rgba(34, 29, 22, .62);
  --color-line: rgba(34, 29, 22, .35);
  --color-primary: #7cc400;             /* action green */
  --color-primary-dark: #5e9900;
  --color-accent: #e73278;              /* pink */
  --color-danger: #c9163f;              /* stamp red */
  --color-warn-bg: #f4e6b6;
  --color-ok-bg: #e8f3cf;
  --color-danger-bg: #f6dfd9;
  --shadow-card: 3px 4px 0 rgba(40, 28, 10, .35);
  --shadow-raised: 2px 3px 0 rgba(40, 28, 10, .35);
  --shadow-modal: 4px 5px 0 rgba(0, 0, 0, .4);

  /* legacy aliases (kept so older selectors keep working) */
  --kraft: var(--color-background);
  --paper: var(--color-surface-alt);
  --paper-warm: var(--color-surface);
  --ink: var(--color-text);
  --pink: var(--color-accent);
  --red: var(--color-danger);
  --green: var(--color-primary);
  --green-dark: var(--color-primary-dark);
  --shadow: rgba(40, 28, 10, .35);

  /* spacing scale — 8 / 12 / 16 / 24 / 32 / 48 */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-0: 4px;                        /* hairline gaps only */

  /* radii */
  --radius-card: 20px;
  --radius-block: 12px;
  --radius-button: 12px;
  --radius-pill: 999px;
  --radius: var(--radius-block);         /* legacy alias */

  /* typography */
  --font-ui: 'Rubik', system-ui, -apple-system, sans-serif;
  /* рукописный акцент в текущем макете не используется; вернём — добавим Caveat в fonts.css */
  --font-hand: 'Comic Sans MS', cursive;
  --fs-h1: clamp(26px, 6.4vw, 44px);
  --fs-h2: clamp(20px, 4.6vw, 30px);
  --fs-h3: clamp(17px, 3.4vw, 22px);
  --fs-body: clamp(14px, 2.6vw, 17px);
  --fs-small: clamp(13px, 2.2vw, 15px);
  --fs-caption: clamp(11px, 1.9vw, 13px);
  --lh-tight: 1.2;
  --lh-normal: 1.45;
  --ls-caps: .06em;
  --icon-sm: 20px;                       /* emoji-иконки в интерфейсе */
  --icon-lg: 44px;

  /* layout */
  --container: 1200px;
  --container-pad: var(--space-4);
  --tabbar-h: 64px;

  /* persona artwork: single scale standard for every character */
  --fig-scale: 1;                        /* контейнер уже даёт поля — картинку не ужимаем */
  --fig-inset: 4%;                       /* visual padding inside the media box */
  --fig-ratio: 3 / 4;                    /* под текущие вертикальные фото 3:4;
                                            для финальных квадратных PNG 2000×2000 → 1 / 1 */
}

/* ============ 2. BASE / LAYOUT ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background:
    radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(60,40,10,.22), transparent 55%),
    var(--color-background);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;                    /* no horizontal scroll, ever */
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }

img { max-width: 100%; }

/* single container for every block on the page */
.container,
#app {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
#app {
  /* шапка фиксированная — освобождаем под неё место; высоту считает app.js */
  padding-top: calc(var(--topbar-h, 48px) + var(--space-3));
  padding-bottom: calc(var(--tabbar-h) + var(--space-5) + var(--tg-bottom, env(safe-area-inset-bottom, 0px)));
}

.screen { display: none; animation: fadein .18s ease; }
.screen.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* ============ 3. TYPOGRAPHY ============ */
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 900; }

.screen-title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: var(--space-0) 0 var(--space-3);
}
.sub-title {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: var(--space-0) 0 var(--space-2);
}
.hint { font-size: var(--fs-caption); color: var(--color-muted); margin: var(--space-1) 0; }
.muted { color: var(--color-muted); }
.muted-line { font-weight: 400; color: var(--color-muted); font-size: var(--fs-caption); }

.wanted-tag {
  display: inline-block;
  background: var(--color-accent); color: #fff;
  font-weight: 900; font-size: var(--fs-caption);
  letter-spacing: .1em; text-transform: uppercase;
  padding: var(--space-0) var(--space-1);
  transform: rotate(-2deg);
  margin-bottom: var(--space-1);
}

/* clamp helpers */
.clamp-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ 4. BUTTONS ============ */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  width: 100%; min-height: 48px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-small);
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid var(--color-text); border-radius: var(--radius-button);
  box-shadow: var(--shadow-raised);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: transform .06s ease, opacity .15s ease;
}
.btn:active { transform: translate(1px, 2px); box-shadow: none; }
.btn-primary { --btn-bg: var(--color-primary); }
.btn-dark { --btn-bg: var(--color-text); --btn-fg: #fff; }
.btn-secondary { --btn-bg: var(--color-surface-alt); }
.btn-ghost { --btn-bg: transparent; box-shadow: none; border-style: dashed; }
.btn-danger { --btn-bg: var(--color-danger); --btn-fg: #fff; }

.btn:disabled, .btn[disabled] { opacity: .45; cursor: default; }
.btn:disabled:active { transform: none; box-shadow: var(--shadow-raised); }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* size modifiers: width auto so they can sit inline, height stays tap-friendly */
.btn-small { width: auto; min-height: 48px; font-size: var(--fs-caption); padding: var(--space-1) var(--space-2); }
.btn-mini  { width: auto; min-height: 44px; font-size: var(--fs-caption); padding: var(--space-0) var(--space-2);
             border-width: 1.5px; box-shadow: none; }
.btn-inline { margin-top: var(--space-1); }

.actions { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }

/* chips (card switcher, support topics as pills where needed) */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-0);
  min-height: 36px; padding: var(--space-0) var(--space-2);
  border: 1.5px solid var(--color-text); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text);
  font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-caption);
  cursor: pointer;
}
.chip.active { background: var(--color-text); color: #fff; }
.chip .chip-note { font-weight: 400; opacity: .7; }

/* ============ 5. FORMS ============ */
.field,
.form-fields input, .form-fields textarea,
.support-form textarea, .support-form input,
.manual-input textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-2);
  font-family: var(--font-ui); font-size: var(--fs-small); color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-text); border-radius: var(--radius-button);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.field, .form-fields textarea, .support-form textarea { min-height: 96px; resize: vertical; line-height: var(--lh-normal); }
.field:focus, .form-fields input:focus, .form-fields textarea:focus,
.support-form textarea:focus, .manual-input textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(231, 50, 120, .18);
}
.field.is-error, .is-error .field { border-color: var(--color-danger); background: var(--color-danger-bg); }
.field-error { color: var(--color-danger); font-size: var(--fs-caption); font-weight: 700; margin-top: var(--space-0); }

.form-fields { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0 var(--space-1); }

.consent-row {
  display: flex; gap: var(--space-1); align-items: flex-start; text-align: left;
  font-size: var(--fs-caption); line-height: var(--lh-normal);
  margin: var(--space-2) 0 var(--space-1);
}
.consent-row input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }

/* ============ 6. STATES ============ */
.empty-note {
  text-align: center; color: var(--color-muted); font-size: var(--fs-small);
  padding: var(--space-5) var(--space-2);
}
.skeleton {
  background: linear-gradient(90deg, rgba(34,29,22,.08), rgba(34,29,22,.16), rgba(34,29,22,.08));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--radius-block);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-line { height: 14px; margin-bottom: var(--space-1); }
.sk-card { aspect-ratio: 3 / 4.6; }

/* ============ 7. FIGURE CARD (persona) ============ */
.char-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;              /* каждый ряд одной высоты — карточки не прыгают */
  gap: var(--space-4);
  align-items: stretch;
}

.fig-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  position: relative;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border: 1.5px dashed rgba(231, 50, 120, .75);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  cursor: pointer; text-align: left;
  transition: transform .12s ease;
}
.fig-card:active { transform: scale(.985); }
.fig-card.tier-big { border-style: solid; border-width: 2px; border-color: var(--color-accent); }
.fig-card.tier-superboss { border: 2.5px solid var(--color-text); background: #efdfb4; }

.fig-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-0); margin-bottom: var(--space-1); }
.fig-num {
  background: var(--color-text); color: #fff;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .05em;
  padding: 2px var(--space-0); border-radius: 4px;
}
.fig-cond { font-size: var(--fs-caption); font-weight: 900; color: var(--color-muted); white-space: nowrap; }

/* media box: contain, никогда не обрезает персонажа.
   flex:1 — забирает всю свободную высоту карточки, чтобы не оставалось пустот
   (карточки в ряду выровнены grid-auto-rows: 1fr). */
.fig-media {
  position: relative; width: 100%;
  flex: 1 1 auto; min-height: 0; aspect-ratio: var(--fig-ratio);
  padding: var(--fig-inset);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.fig-img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transform: scale(var(--fig-scale));
  transition: filter .2s ease, opacity .2s ease;
}
/* непойманный монстрик: силуэт угадывается, но узнать персонажа нельзя */
/* закрытое досье: читаются только форма и цветовое пятно, силуэт не угадывается */
.fig-card.is-locked .fig-img {
  /* силуэт не читается, но цветовое пятно остаётся: обесцвечивать сильно нельзя,
     иначе плитка выглядит пустой */
  filter: grayscale(.25) blur(16px) brightness(.98) contrast(1.05);
  opacity: .85;
  transform: scale(1.3);             /* прячем размытые края внутри контейнера */
}
.fig-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(28px, 7vw, 52px); font-weight: 900; color: var(--color-text); opacity: .55;
  text-shadow: 0 2px 0 rgba(255,255,255,.5); pointer-events: none;
}
.fig-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; height: 100%; font-size: clamp(24px, 6vw, 44px);
}

.fig-body { display: flex; flex-direction: column; flex: 0 0 auto; gap: 2px; }
/* имена персонажей ZURU длинные («БАБУЛЯ СТРАШУНЬЯ») — две строки вместо многоточия,
   высота фиксирована, чтобы плитки в сетке оставались одинаковыми */
.fig-name {
  font-size: var(--fs-small); font-weight: 900; line-height: 1.15;
  min-height: calc(2 * 1.15em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fig-type {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fig-card.tier-superboss .fig-type { color: var(--color-text); }
.fig-status {
  margin-top: auto; padding-top: var(--space-1);
  font-size: var(--fs-caption); line-height: 1.3; color: var(--color-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fig-card.is-open .fig-status { color: var(--color-danger); font-weight: 700; }

/* caught stamp over the artwork */
.stamp {
  width: 76%; aspect-ratio: 1; border-radius: 50%;
  border: 2.5px solid var(--color-danger);
  box-shadow: inset 0 0 0 1.5px var(--color-danger);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--color-danger); transform: rotate(-14deg);
  animation: stamp-in .3s cubic-bezier(.2, 2.2, .5, 1);
  background:
    radial-gradient(circle at 32% 28%, rgba(201,22,63,.12), transparent 55%),
    radial-gradient(circle at 70% 74%, rgba(201,22,63,.10), transparent 50%);
}
.stamp .t1 { font-weight: 900; font-size: clamp(7px, 1.5vw, 11px); letter-spacing: 0; white-space: nowrap; }
.stamp .t2 { font-size: clamp(6px, 1.3vw, 9px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stamp-over {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg);
  width: 62%; z-index: 2; pointer-events: none;
}
@keyframes stamp-in { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } }

.grid-hint {
  text-align: center; font-size: var(--fs-caption); color: var(--color-muted);
  margin-top: var(--space-2);
}

/* ============ 8. PROGRESS BLOCKS ============ */
.card-status { margin-top: var(--space-3); display: grid; gap: var(--space-2); }

.pblock {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block);
  padding: var(--space-2);
}
.pblock.is-ok { border-color: var(--color-primary-dark); background: var(--color-ok-bg); }
.pblock.is-done { border-color: var(--color-text); background: #ddd3bb; }
.pb-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-1); }
.pb-title {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-muted);
}
.pb-value { font-size: var(--fs-h3); font-weight: 900; white-space: nowrap; }
/* значение-фраза («Осталось покупок на 1 000 ₽») — отдельной строкой, с переносом */
.pb-line { font-size: var(--fs-h3); font-weight: 900; margin-top: var(--space-0); }
.pb-note {
  font-size: var(--fs-caption); color: var(--color-muted); margin-top: var(--space-0);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pb-note b { color: var(--color-text); }

.progressbar {
  height: 8px; background: rgba(34,29,22,.15); border-radius: var(--radius-pill);
  overflow: hidden; margin-top: var(--space-1);
}
.progressbar > div {
  height: 100%; background: var(--color-accent); border-radius: var(--radius-pill);
  transition: width .4s ease;
}

/* legacy status-line kept for any leftover markup */
.status-line {
  background: var(--color-surface-alt); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block); padding: var(--space-2); font-size: var(--fs-small);
}
.status-line.ok { border-color: var(--color-primary-dark); background: var(--color-ok-bg); }
.status-line.done { border-color: var(--color-text); background: #ddd3bb; }

/* ============ 9. PASSPORT ============ */
.passport {
  background: var(--color-surface);
  border: 2px solid rgba(34,29,22,.55);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  position: relative;
}
.passport::before {
  content: "🖇"; position: absolute; top: -12px; right: var(--space-3);
  font-size: var(--icon-sm); transform: rotate(12deg);
}
.passport-head { text-align: center; margin-bottom: var(--space-2); }
.passport-head h1 {
  font-size: var(--fs-h1); text-transform: uppercase;
  letter-spacing: .03em; line-height: var(--lh-tight);
}
.card-picker { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center; margin: var(--space-2) 0; }
.card-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-1);
  font-size: var(--fs-caption); margin: var(--space-0) 0 var(--space-2);
}
.card-meta .card-id { font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.card-meta .card-count { font-size: var(--fs-caption); white-space: nowrap; }

/* ============ 10. DOSSIER + MODALS ============ */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 14, 6, .62); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--space-3) + var(--tg-top, env(safe-area-inset-top, 0px)))
           var(--space-3)
           calc(var(--space-3) + var(--tg-bottom, env(safe-area-inset-bottom, 0px)));
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--color-surface); border: 2px solid var(--color-text);
  border-radius: var(--radius-card); box-shadow: var(--shadow-modal);
  width: 100%; max-width: 420px;
  max-height: calc(100vh - var(--space-5));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-3); text-align: center;
}
.modal-box h3 { font-size: var(--fs-h3); margin-bottom: var(--space-1); }

.dossier-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); }
.file-tag {
  background: var(--color-text); color: #fff; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: .06em; padding: 3px var(--space-1); border-radius: 4px;
}
.dossier-status { font-size: var(--fs-caption); font-weight: 900; letter-spacing: .06em; }
.dossier-status.caught { color: var(--color-danger); }
.dossier-status.wanted { color: var(--color-muted); }

/* высота по самой картинке: крупные планы бывают и горизонтальными, и вертикальными —
   фиксированная пропорция оставляла бы пустые поля */
.dossier-photo {
  position: relative; width: 92%; margin: 0 auto var(--space-2);
  display: flex; align-items: center; justify-content: center;
}
.dossier-photo img {
  width: 100%; height: auto; max-height: 42vh;
  object-fit: contain; object-position: center;
  transform: scale(var(--fig-scale)); display: block;
  border-radius: var(--radius-block);
}
.dossier-photo { overflow: hidden; border-radius: var(--radius-block); }
.dossier-photo.locked img {
  filter: grayscale(.85) blur(16px) brightness(1.02) contrast(1.05);
  opacity: .82; transform: scale(1.14);
}
/* картинка-постер: имя и описание впечатаны в саму картинку */
.dossier-photo.is-poster { width: 100%; }
.dossier-photo.is-poster img { max-height: 62vh; }
.dossier-photo .stamp-over { width: 58%; }
.wanted-plate {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) rotate(-3deg);
  background: var(--color-text); color: #fff; font-size: var(--fs-caption); font-weight: 900;
  letter-spacing: .1em; padding: 3px var(--space-1);
}
/* «ЛИЧНОСТЬ ЗАСЕКРЕЧЕНА» вместо имени: длиннее имени, поэтому мельче и в две строки */
.secret-name { font-size: var(--fs-h3); letter-spacing: .04em; }
.tier-line { font-size: var(--fs-caption); color: var(--color-muted); margin-bottom: var(--space-2); }
/* подсказка про порог стоит под тизером, поэтому отступ ей нужен сверху */
.tier-line.locked-hint { margin: var(--space-2) 0; }
.dossier-desc {
  font-size: var(--fs-small); line-height: var(--lh-normal); text-align: left;
  margin-bottom: var(--space-2);
}
.dossier-traits { text-align: left; margin-bottom: var(--space-2); }
.traits-title { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin-bottom: var(--space-0); }
.dossier-traits ul { list-style: none; display: grid; gap: var(--space-0); }
.dossier-traits li { font-size: var(--fs-small); line-height: 1.35; }
.redact { display: inline-block; vertical-align: middle; background: var(--color-text);
          color: transparent; border-radius: 3px; user-select: none; }

/* result / onboarding modal bits */
.result-emoji { font-size: var(--icon-lg); margin-bottom: var(--space-1); }
.result-sums { text-align: left; font-size: var(--fs-small); margin: var(--space-2) 0; }
.gain-line { font-size: var(--fs-h3); font-weight: 900; color: var(--color-danger); margin: var(--space-1) 0; }
.admin-row {
  display: flex; justify-content: space-between; gap: var(--space-1);
  font-size: var(--fs-small); padding: var(--space-0) 0;
  border-bottom: 1px dashed rgba(34,29,22,.25);
}
.admin-row:last-of-type { border-bottom: none; }
.onboarding-steps { text-align: left; margin: var(--space-2) 0 var(--space-3); list-style: none; display: grid; gap: var(--space-1); }
.onboarding-steps li { display: flex; gap: var(--space-1); font-size: var(--fs-small); line-height: var(--lh-normal); }
.onboarding-steps .ob-note { color: var(--color-muted); font-size: var(--fs-caption); margin-top: 2px; }
.onboarding-steps .n, .rule-step .n {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: var(--fs-caption);
}

/* scanner modal */
.video-wrap { position: relative; border-radius: var(--radius-block); overflow: hidden; background: #000; margin: var(--space-2) 0; }
#scanner-video { width: 100%; display: block; max-height: 46vh; object-fit: cover; }
.video-frame {
  position: absolute; inset: 12%; border: 2px solid rgba(124,196,0,.9);
  border-radius: var(--radius-block); box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none;
}
.scanner-error { color: var(--color-danger); font-size: var(--fs-caption); font-weight: 700; margin: var(--space-1) 0; }
.manual-input { text-align: left; margin: var(--space-2) 0; font-size: var(--fs-caption); }
.manual-input summary { cursor: pointer; font-weight: 700; color: var(--color-muted); }
.manual-input textarea { margin-top: var(--space-1); font-family: ui-monospace, monospace; font-size: var(--fs-caption); min-height: 72px; }

/* ============ 11. SCREENS ============ */
/* checks */
/* «Отсканировать чек» липнет под шапкой: кнопка нужна под рукой и при пустом списке,
   и когда чеков накопилось на несколько экранов. --topbar-h считает app.js */
.checks-actions {
  position: sticky; top: var(--topbar-h, 48px); z-index: 10;
  margin: 0 calc(-1 * var(--container-pad)) var(--space-2);
  padding: var(--space-1) var(--container-pad) var(--space-3);
  background: linear-gradient(var(--color-background) 0 72%, rgba(201, 180, 140, 0));
}

.checks-summary {
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); font-size: var(--fs-small); margin-bottom: var(--space-3);
  display: grid; gap: var(--space-0);
}
.checks-summary .big { font-size: var(--fs-h2); font-weight: 900; }
.checks-list { display: grid; gap: var(--space-1); }
.check-item {
  background: var(--color-surface-alt); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block); padding: var(--space-2); font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
.check-item .row1 { display: flex; justify-content: space-between; gap: var(--space-1); font-weight: 700; font-size: var(--fs-small); }
.check-item .stamps-gain { color: var(--color-danger); font-weight: 900; white-space: nowrap; }
.check-item.refunded { opacity: .6; }
.check-item.refunded .row1 { text-decoration: line-through; }
.check-item.refunded .stamps-gain { text-decoration: none; }
.check-status {
  display: inline-block; margin-top: var(--space-0); font-size: var(--fs-caption); font-weight: 700;
  padding: 2px var(--space-1); border-radius: 6px; background: #e6dcbf;
}
.check-status.pending { background: var(--color-warn-bg); }
.check-status.rejected { background: var(--color-danger-bg); color: var(--color-danger); }

/* info: steps as cards */
.paper-note {
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); font-size: var(--fs-small); line-height: var(--lh-normal);
  margin-bottom: var(--space-2);
}
.paper-note p + p { margin-top: var(--space-1); }

.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.step-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-3);
}
.step-head { display: flex; align-items: center; gap: var(--space-1); }
.step-card .n { flex: 0 0 auto; width: 28px; height: 28px; }
.step-title { font-size: var(--fs-small); font-weight: 900; }
/* тексты шагов — от заказчика, до 4 строк на мобильном: не обрезаем многоточием */
.step-text {
  font-size: var(--fs-caption); line-height: 1.4; color: var(--color-muted);
}
.rule-step { display: flex; gap: var(--space-1); margin-bottom: var(--space-2); align-items: flex-start; }
.rule-step .txt { font-size: var(--fs-small); line-height: var(--lh-normal); padding-top: 3px; }
.dates-note { font-size: var(--fs-caption); color: var(--color-muted); margin-top: var(--space-2); }

/* support */
.support-form {
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.sf-label {
  display: block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-muted); margin: var(--space-0) 0 var(--space-1);
}
.sf-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-2); }
.topic-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0);
  min-height: 76px; padding: var(--space-1);
  background: var(--color-surface-alt); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block); cursor: pointer; text-align: center;
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 700; color: var(--color-text);
  transition: border-color .15s ease, background .15s ease;
}
.topic-card .tc-icon { font-size: var(--icon-sm); line-height: 1; }
.topic-card.active {
  background: var(--color-ok-bg); border-color: var(--color-primary-dark); border-width: 2px;
  box-shadow: inset 0 0 0 1px var(--color-primary-dark);
}
.sf-file-row { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0; flex-wrap: wrap; }
.sf-file-name { font-size: var(--fs-caption); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-0); }
/* прикреплённые файлы обращения */
.sf-file-chip {
  display: inline-flex; align-items: center; gap: var(--space-0);
  background: var(--color-surface-alt); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-pill); padding: 3px var(--space-1);
  font-size: var(--fs-caption); color: var(--color-text); max-width: 100%;
}
.sf-file-chip b { cursor: pointer; color: var(--color-danger); font-size: 13px; padding-left: 2px; }

.support-list { display: grid; gap: var(--space-2); }
.support-item {
  background: var(--color-surface-alt); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block); padding: var(--space-2);
}
.support-item.has-monster { position: relative; }
.support-item.resolved { border-color: var(--color-primary-dark); background: #eef5dd; }
.support-item.rejected { border-color: rgba(201,22,63,.6); }
.si-head { display: flex; justify-content: space-between; gap: var(--space-1); align-items: baseline; }
.si-kind { font-weight: 700; font-size: var(--fs-small); }
.si-status { font-size: var(--fs-caption); font-weight: 700; color: var(--color-muted); white-space: nowrap; }
.si-msg { font-size: var(--fs-small); line-height: var(--lh-normal); margin: var(--space-0) 0; white-space: pre-wrap; }
.si-clip { font-size: var(--fs-caption); color: var(--color-muted); margin-left: var(--space-0); white-space: nowrap; }
.si-date { font-size: var(--fs-caption); color: var(--color-muted); }
.si-answer {
  margin-top: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-block);
  background: #fff8e2; border: 1px solid rgba(34,29,22,.25);
  font-size: var(--fs-small); line-height: var(--lh-normal); white-space: pre-wrap; text-align: left;
}

/* переписка с оператором внутри обращения */
.si-thread { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }
.si-bubble {
  border-radius: var(--radius-block); padding: var(--space-1) var(--space-2);
  max-width: 92%; text-align: left;
}
.si-bubble.me { background: var(--color-surface); border: 1px solid var(--color-line); align-self: flex-start; }
.si-bubble.op { background: #fff8e2; border: 1px solid var(--color-primary-dark); align-self: flex-end; }
.si-bubble-who {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px;
}
.si-bubble.op .si-bubble-who { color: var(--color-primary-dark); }
.si-bubble-text { font-size: var(--fs-small); line-height: var(--lh-normal); white-space: pre-wrap; }
.si-bubble-date { font-size: var(--fs-caption); color: var(--color-muted); margin-top: 2px; }

/* rules */
.rules-screen {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto;
  background: var(--color-background);
  background-image:
    radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(60,40,10,.22), transparent 55%);
  padding: calc(var(--space-4) + var(--tg-top, env(safe-area-inset-top, 0px)))
           var(--container-pad)
           calc(var(--space-4) + var(--tg-bottom, env(safe-area-inset-bottom, 0px)));
}
.rules-screen.hidden { display: none; }
.rules-inner { max-width: 640px; margin: 0 auto; }
.rules-head { text-align: center; margin-bottom: var(--space-3); }
.rules-head h2 { font-size: var(--fs-h2); text-transform: uppercase; margin: var(--space-1) 0 var(--space-0); }
.rules-sub { font-size: var(--fs-caption); color: var(--color-muted); }
.rules-body {
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.rules-section + .rules-section { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed rgba(34,29,22,.25); }
.rules-section h4 { font-size: var(--fs-small); margin-bottom: var(--space-0); }
.rules-section p { font-size: var(--fs-small); line-height: var(--lh-normal); }
.rules-foot {
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-3);
}

/* gate (outside Telegram) */
.gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
        padding: calc(var(--space-4) + var(--tg-top, env(safe-area-inset-top, 0px))) var(--space-4) var(--space-4); }
.gate.hidden { display: none; }
.gate-box {
  background: var(--color-surface); border: 2px solid var(--color-text);
  border-radius: var(--radius-card); box-shadow: var(--shadow-modal);
  padding: var(--space-4) var(--space-3); max-width: 420px; text-align: center;
}
.gate-box h3 { font-size: var(--fs-h3); margin: var(--space-1) 0; }
.gate-box p { font-size: var(--fs-small); line-height: var(--lh-normal); margin-bottom: var(--space-3); }
.gate-box .btn { text-decoration: none; }
body.gated .topbar, body.gated #app, body.gated .tabbar { display: none; }

/* ============ 12. CHROME + RESPONSIVE ============ */
/* Telegram 8.x показывает мини-апп под своей шапкой и статус-баром: сдвигаем
   содержимое вниз на безопасную зону, иначе заголовки лезут под «Закрыть» и часы.
   --tg-top проставляет app.js из SDK; без него работает env() самого устройства. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1);
  padding: calc(var(--space-1) + var(--tg-top, env(safe-area-inset-top, 0px)))
           var(--container-pad) var(--space-1);
  background: var(--color-text); color: #fff;
  box-shadow: 0 2px 8px rgba(40,28,10,.35);
}
.topbar-inner {
  width: 100%; max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1);
}
.topbar-title { display: flex; align-items: center; line-height: 1.1; }
.brand { font-weight: 900; letter-spacing: .08em; font-size: var(--fs-small); }
.sub { font-size: var(--fs-caption); opacity: .75; letter-spacing: .04em; }

/* пара логотипов: Fuggler — тёмный щит, «Детский мир» — синяя или белая версия
   по фону. Белая на светлом фоне пропадает, поэтому выбор жёстко привязан к месту */
.logo-pair { display: inline-flex; align-items: center; gap: var(--space-1); }
.logo-pair img { display: block; height: 26px; width: auto; }
.logo-pair .logo-dm { height: 19px; }
.logo-x { font-weight: 700; opacity: .5; font-size: var(--fs-caption); }
/* на тёмном фоне щит сливается — сажаем его на светлую плашку */
.logo-pair.on-dark .logo-plate {
  display: inline-flex; align-items: center;
  background: rgba(244,236,216,.94); border-radius: 6px; padding: 3px 6px;
}
.logo-pair.on-dark .logo-plate img { height: 24px; }
.logo-pair.on-dark .logo-dm { height: 21px; }
.logo-pair.on-dark .logo-x { opacity: .6; }
/* на светлых экранах логотипы крупнее: это заглавный блок, а не служебная шапка */
.rules-head .logo-pair img, .gate-box .logo-pair img { height: 34px; }
.rules-head .logo-pair .logo-dm, .gate-box .logo-pair .logo-dm { height: 25px; }
.rules-head .logo-pair, .gate-box .logo-pair { margin-bottom: var(--space-2); }
.demo-badge {
  display: none; background: var(--color-accent); color: #fff;
  font-size: var(--fs-caption); font-weight: 900; letter-spacing: .08em;
  padding: 3px var(--space-1); border-radius: 6px; align-self: center;
}
body.demo .demo-badge { display: inline-block; }
body.live .demo-only { display: none; }

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--color-text);
  padding: var(--space-0) var(--space-1) calc(var(--space-0) + var(--tg-bottom, env(safe-area-inset-bottom, 0px)));
  box-shadow: 0 -2px 8px rgba(40,28,10,.35);
}
.tabbar.hidden { display: none; }
.tab {
  flex: 1; min-height: 52px; background: none; border: none; color: rgba(255,255,255,.6);
  font-family: var(--font-ui); font-size: var(--icon-sm); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: var(--radius-block);
}
.tab span { font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em; }
.tab.active { color: #fff; background: rgba(231,50,120,.25); }
/* пять пунктов меню: на узких экранах подпись мельче, но в одну строку —
   иначе «Как играть» переносится и кнопка выше соседних (бриф-26 §1) */
@media (max-width: 380px) {
  .tab span { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
}

/* full-screen busy lock while a request is in flight */
.busy-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 14, 6, .55); backdrop-filter: blur(2px);
}
.busy-overlay.hidden { display: none; }
.busy-box {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid var(--color-text); border-radius: var(--radius-block);
  box-shadow: var(--shadow-modal);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small); font-weight: 700;
}
.busy-spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2.5px solid var(--color-text); border-top-color: transparent;
  animation: spin .7s linear infinite;
}

/* winner banner on the card screen */
.win-banner {
  background: var(--color-ok-bg); border: 2px solid var(--color-primary-dark);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); margin-bottom: var(--space-3);
  font-size: var(--fs-small); line-height: var(--lh-normal);
}
.win-banner.hidden { display: none; }
.win-banner .btn { margin-top: var(--space-2); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--space-3)); transform: translateX(-50%);
  background: var(--color-text); color: #fff; font-size: var(--fs-caption); font-weight: 500;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); z-index: 60;
  max-width: min(520px, calc(100vw - var(--space-5))); box-shadow: 0 4px 14px rgba(0,0,0,.4);
  text-align: center; animation: fadein .2s ease;
}
.toast.hidden { display: none; }

/* --- tablet --- */
@media (max-width: 1023px) {
  .char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .steps-grid.mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- mobile --- */
@media (max-width: 767px) {
  :root { --container-pad: var(--space-3); }
  .char-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid.mission-grid { grid-template-columns: 1fr; gap: var(--space-1); }
  .mission-grid .mission-or { display: block; }
  .sf-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-0); }
  .fig-card { padding: var(--space-2); border-radius: var(--radius-block); }
  .passport { padding: var(--space-2); }
  .btn-small, .btn-mini { width: 100%; }
  .sf-file-row .btn-small { width: auto; }
}

/* --- very narrow phones --- */
@media (max-width: 359px) {
  .sf-kinds { grid-template-columns: 1fr; }
  .topic-card { min-height: 48px; flex-direction: row; gap: var(--space-1); }
  .card-meta { flex-direction: column; align-items: flex-start; }
  .card-meta .card-count { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- прогресс вверху паспорта (правки заказчика, слайд 10) ---------- */
.card-progress-top {
  background: var(--paper); border: 1.5px solid rgba(34,29,22,.3); border-radius: 12px;
  padding: 10px 12px; margin: 4px 0 10px;
}
.cpt-row { display: flex; align-items: baseline; gap: 8px; }
.cpt-main { font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
.cpt-of { font-size: 13px; opacity: .6; font-weight: 700; }
.cpt-bar { margin: 7px 0 6px; }
.cpt-next { font-size: 13px; opacity: .85; }
.cpt-next b { font-weight: 800; }
.cpt-prize {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: var(--pink); color: #fff; font-weight: 800; font-size: 12.5px;
  letter-spacing: .02em; text-align: center;
}
.catalog-note { font-size: 12px; opacity: .65; margin: 6px 2px 2px; text-align: center; }

/* ---------- FAQ ---------- */
.faq-body { text-align: left; margin: 6px 0 12px; max-height: 62vh; overflow-y: auto; }
.faq-item { border-bottom: 1px solid rgba(34,29,22,.18); padding: 2px 0; }
.faq-item summary {
  cursor: pointer; padding: 11px 26px 11px 2px; font-weight: 700; font-size: 14px;
  list-style: none; position: relative; line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; position: absolute; right: 4px; top: 9px; font-size: 20px; font-weight: 400; opacity: .5;
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 4px 12px; font-size: 13.5px; line-height: 1.5; opacity: .9; }

/* внутри Telegram системная шапка уже показывает имя мини-приложения —
   свой topbar с тем же «ZURU FUGGLER × Детский мир» не дублируем (правки заказчика) */
body.live .topbar { display: none; }

/* ---------- поделиться досье ---------- */
.share-box { max-width: 420px; }
.share-preview {
  margin: var(--space-2) 0; min-height: 180px; display: flex;
  align-items: center; justify-content: center;
}
.share-img {
  width: 100%; border-radius: var(--radius-block);
  border: 1.5px solid var(--color-line); box-shadow: 2px 3px 0 var(--color-shadow);
}
.share-loading { font-size: var(--fs-small); color: var(--color-muted); padding: var(--space-4) 0; }
.share-direct { margin-top: var(--space-2); }
.share-direct-title {
  font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-muted); margin-bottom: var(--space-1);
}
.share-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.share-link {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--space-1) 4px; border-radius: var(--radius-block);
  border: 1.5px solid var(--color-line); background: var(--color-surface);
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 700;
  color: var(--color-text); cursor: pointer;
}
.share-link:active { background: var(--color-surface-alt); }
.sl-ico { font-size: 20px; line-height: 1; }

.share-copy-hint { margin-top: var(--space-1); text-align: left; }

/* документы организатора под блоком «Условия» */
.legal-links { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; }
.legal-links .btn { width: 100%; justify-content: flex-start; text-align: left; }

/* номер обращения в окне «Обращение отправлено» */
.ticket-no { font-weight: 900; letter-spacing: .04em; margin: var(--space-1) 0; }
.checks-summary .cs-row { margin-top: 2px; }

/* ============ 13. ФОТО-АКЦИЯ (режимы soon / photo / gap) ============ */

/* Чеки принимаются только в режиме checks: во всех остальных этапах кнопки
   сканирования прячем — иначе они нажимаются и не делают ничего (бриф-16 §2) */
body[data-mode]:not([data-mode="checks"]) #screen-card .actions,
body[data-mode]:not([data-mode="checks"]) .checks-actions { display: none; }

/* в тизер-режимах дело без верхнего прогресса и без выбора дела */
body[data-mode="soon"] .card-progress-top,
body[data-mode="photo"] .card-progress-top,
body[data-mode="gap"] .card-progress-top,
body[data-mode="soon"] .card-picker,
body[data-mode="photo"] .card-picker,
body[data-mode="gap"] .card-picker { display: none; }

.tab.hidden { display: none; }
/* в проекте нет глобального .hidden — каждый блок гасит себя сам */
/* .hidden в проекте точечный, глобального правила нет: перечисляем блоки миссии
   явно, иначе «скрытый» пустой блок остаётся видимой рамкой с отступами */
.photo-bonus.hidden, .photo-preview.hidden, .photo-limit-note.hidden,
#photo-task.hidden, #photo-blocks.hidden, #photo-map-link.hidden, .bonus-status.hidden { display: none; }
/* суточный лимит — объясняем, что это не бан и печать на месте */
.photo-limit-note {
  margin-top: var(--space-2); padding: var(--space-2);
  background: var(--color-warn-bg); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block); font-size: var(--fs-small);
}

/* задание фото-миссии */
.task-title { font-size: var(--fs-h3); margin-bottom: var(--space-1); }
.task-steps { margin: 0 0 var(--space-1) 1.1em; font-size: var(--fs-small); line-height: 1.5; }
.task-body { font-size: var(--fs-small); margin-bottom: var(--space-1); }
.task-steps li { margin-bottom: var(--space-0); }

/* блок «печать твоя» */
.photo-bonus {
  background: var(--color-ok-bg); border: 2px solid var(--color-primary-dark);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); margin-bottom: var(--space-3); text-align: center;
}
.photo-bonus .pb-emoji { font-size: var(--icon-lg); }
.photo-bonus h3 { font-size: var(--fs-h3); margin: var(--space-0) 0 var(--space-1); }
.photo-bonus p { font-size: var(--fs-small); }
.photo-bonus .pb-when { font-size: var(--fs-caption); color: var(--color-muted);
                        margin-bottom: var(--space-1); }

/* превью выбранного кадра */
.photo-preview {
  background: var(--color-surface); border: 2px solid var(--color-text);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-2); margin: var(--space-3) 0;
}
.photo-preview img {
  width: 100%; max-height: 46vh; object-fit: contain;
  border-radius: var(--radius-block); display: block; background: rgba(34,29,22,.06);
}
.photo-preview-actions { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.photo-preview-actions .btn-small { width: 100%; }
.actions.is-spent .hint { color: var(--color-danger); font-weight: 700; }

/* список заявок */
.photo-list { display: flex; flex-direction: column; gap: var(--space-1); }
.photo-item {
  background: var(--color-surface-alt); border: 1.5px solid var(--color-line);
  border-radius: var(--radius-block); padding: var(--space-2);
}
.photo-item .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-1); }
.photo-status { font-size: var(--fs-caption); font-weight: 900; padding: 2px var(--space-1); border-radius: 6px; background: #e6dcbf; }
.photo-status.pending { background: var(--color-warn-bg); }
.photo-status.ok { background: var(--color-ok-bg); }
.photo-status.bad { background: var(--color-danger-bg); color: var(--color-danger); }
.photo-text { font-size: var(--fs-small); margin-top: var(--space-0); }
.photo-item .btn-mini { margin-top: var(--space-1); width: 100%; }

/* заглушки режимов */
.stage-box {
  background: var(--color-surface); border: 2px solid var(--color-text);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-3); text-align: center; margin-top: var(--space-4);
}
.stage-emoji { font-size: 56px; line-height: 1; margin-bottom: var(--space-2); }
.stage-box h2 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.stage-box p { font-size: var(--fs-small); margin-top: var(--space-2); }
.stage-note {
  margin-top: var(--space-3); padding: var(--space-2);
  background: var(--color-ok-bg); border: 1.5px solid var(--color-primary-dark);
  border-radius: var(--radius-block); font-weight: 700; font-size: var(--fs-small);
}

/* бонусная строка в списке чеков и метка в досье */
.check-item.is-bonus { border-style: dashed; background: var(--color-ok-bg); }
.by-photo {
  font-size: var(--fs-caption); font-weight: 700; color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

/* печать за фото начислена, но досье откроется со стартом чековой акции */
.fig-card.is-stamped { border-style: solid; border-color: var(--color-primary-dark); }
.fig-stamped {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) rotate(-4deg);
  background: var(--color-primary); color: var(--color-text);
  font-size: var(--fs-caption); font-weight: 900; letter-spacing: .06em;
  padding: 3px var(--space-1); border: 1.5px solid var(--color-text);
  border-radius: 6px; white-space: nowrap; z-index: 2;
}
.fig-card.is-stamped .fig-status { color: var(--color-primary-dark); font-weight: 700; }

/* пояснительная плашка среди прогресс-блоков */
.pblock.is-note { font-size: var(--fs-small); background: var(--color-surface-alt); }

/* спор по фото: снимок уже у нас, файл прикладывать не нужно */
.sf-photo-note { color: var(--color-primary-dark); font-weight: 700; }

/* условия фото-акции списком и подводка к основной акции */
.cond-list { margin: 0 0 0 1.1em; font-size: var(--fs-small); line-height: 1.5; }
.cond-list li { margin-bottom: var(--space-0); }
/* заголовок теперь стоит секцией снаружи, отбивку даёт он */
.next-stage { font-size: var(--fs-small); }

/* ================================================================
   Экран «Миссия», карта, «Призы» и декоративные монстрики.
   Блок восстановлен 15.09.2026: при вырезании панели диагностики (бриф-38)
   он ушёл вместе с ней — правила лежали следом за служебным блоком, и удаление
   «от маркера до маркера» захватило их. Состав — как на 14.09, с правками
   брифов 19–37. */

/* ---------- «Миссия»: плашка, состояние, задания ---------- */
/* плашка играет роль заголовка вкладки — своего у экрана больше нет (бриф-23 §2) */
.mission-headline {
  text-align: center; font-weight: 900; letter-spacing: .04em;
  font-size: var(--fs-h2); text-transform: uppercase;
  margin: var(--space-0) 0 var(--space-2);
}
.mission-state { margin-bottom: var(--space-3); }
/* в заголовок состояния подставляется дата — держим один регистр с текстом заказчика */
.mission-state .step-title { text-transform: uppercase; }
.mission-note { margin-top: var(--space-2); text-align: center; }
.step-title .task-n { font-variant-numeric: tabular-nums; }
.mission-tasks-title { margin-top: var(--space-4); text-align: center; }
.mission-tasks-hint { text-align: center; margin-bottom: var(--space-2); }
/* задания — альтернативы: одинаковый значок вместо порядкового номера */
.step-card.is-task .task-mark { color: var(--color-accent); font-size: var(--fs-caption); }
/* «или» между вариантами: в один столбец разделяет их, в ряд — не нужно */
.mission-or {
  text-align: center; font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-caption); color: var(--color-muted); letter-spacing: .08em;
  display: none;
}
/* Итог и блок подписки идут вместе с остальными карточками: смысловое
   разделение несёт нумерация в тексте, отдельных приёмов не нужно (бриф-22 §2) */
.step-card.is-final, .step-card.is-subscribe { margin-top: var(--space-2); }
.step-card.is-subscribe .btn { margin-top: var(--space-2); }
/* кнопка внутри шага «Как играть» */
.step-btn { margin-top: var(--space-2); align-self: flex-start; }
/* распознанное задание: в окне результата и под статусом фото */
.task-done { font-weight: 700; margin-bottom: var(--space-1); }
.photo-task-done { font-size: var(--fs-caption); color: var(--color-muted); margin-top: 2px; }

/* ---------- декоративные монстрики (assets.monsters) ----------
   Акцент, а не иллюстрация: небольшой размер, прижаты к краю блока с выходом
   за границу — так читаются наклейкой. Не больше одного на экран. */
.has-monster { position: relative; }
.monster { position: absolute; width: 104px; height: auto; pointer-events: none; z-index: 2; }
.monster-empty { right: -6px; bottom: -10px; width: 96px; }
.monster-item { right: -8px; top: -22px; width: 84px; }
.monster-map { left: -4px; bottom: -6px; width: 92px; }
/* монстрик выглядывает из-под сетки: в шапке он спорил с заголовком.
   Отступ сверху перекрывает вылет картинки над блоком (бриф-37 §1) */
.monster-row { min-height: 64px; margin-top: 30px; }
.monster-dossier { right: 4px; top: -22px; width: 96px; }
.monster-intro { right: -8px; top: -34px; width: 108px; }
.monster-state { right: -10px; top: -30px; width: 96px; }
.monster-loc { right: -6px; top: -26px; width: 92px; z-index: 3; }
.monster-dossier-open { right: -6px; bottom: -30px; width: 92px; }
.monster-prize { right: -8px; top: -30px; width: 96px; }
.monster-progress { right: -6px; bottom: -18px; width: 96px; }
.monster-outro { right: -4px; top: -34px; width: 88px; }
.monster-support { position: static; display: block; width: 120px; margin: var(--space-2) auto 0; }
/* экран правил прокручивается: картинка выше его края срезалась, поэтому
   сажаем её внутрь, а место даёт padding шапки (бриф-40 §1) */
.monster-rules { right: -16px; top: -6px; width: 92px; }
.monster-onboarding { right: -10px; top: -36px; width: 104px; }

/* блокам с монстриком нужен воздух с его стороны, иначе он ложится на текст */
.empty-note.has-monster { padding-right: 96px; }
.photo-item.has-monster { padding-right: 74px; }
.subscribe-note.has-monster { padding-right: 92px; margin-top: var(--space-4); }
.mission-state.has-monster { padding-right: 84px; margin-top: var(--space-4); }
.prize-block.has-monster { padding-right: 90px; margin-top: var(--space-4); }
.info-outro.has-monster { padding-right: 84px; margin-top: var(--space-4); margin-bottom: 40px; }
/* 88, а не 74: сумма прибавки прижата к правому краю и упиралась в картинку */
.check-item.has-monster, .support-item.has-monster { padding-right: 88px; }
.modal-box.has-monster { padding-top: var(--space-4); }
.rules-head.has-monster { padding-top: 46px; }
/* обёртка модалки: у .modal-box свой скролл и он обрезает выступающие картинки,
   поэтому монстрик живёт рядом с коробкой, а не внутри неё */
.modal-stack {
  position: relative; display: flex; width: 100%; max-width: 420px;
  max-height: 100%; padding-top: var(--space-4);
}
.modal-stack .modal-box { max-height: 100%; }
/* второй монстрик «Призов» — по другому краю и ниже; место освобождаем снизу,
   колонка отступа во всю высоту блока смотрелась пустой (бриф-34 §3) */
.prize-block.is-main.has-monster { padding-right: var(--space-3); padding-bottom: 52px; }
.prize-block.is-main .monster-prize { right: auto; left: -6px; top: auto; bottom: -18px; }
/* блок прогресса: место под картинку снизу, иначе она ложится на последнюю строку */
#prizes-progress.has-monster { padding-right: var(--space-3); padding-bottom: 46px; }
/* отступ по ширине картинки (92 px), иначе она ложится на левый край кнопки */
.map-cta { display: inline-block; padding-left: 96px; }

@media (max-width: 380px) {
  .monster { width: 84px; }
  .monster-intro { width: 92px; }
  .monster-support { width: 104px; }
  .monster-dossier { width: 82px; top: -18px; }
  .empty-note.has-monster { padding-right: 80px; }
}

/* ---------- вкладка «Призы» ---------- */
.prize-block {
  background: var(--color-surface); border: 2px solid rgba(34,29,22,.5);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.prize-block.is-guaranteed { background: var(--color-ok-bg); border-color: var(--color-primary-dark); }
.prize-title { font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .04em; }
.prize-threshold {
  font-weight: 700; font-size: var(--fs-small); color: var(--color-accent);
  margin: var(--space-0) 0 var(--space-2);
}
.prize-text p { font-size: var(--fs-small); line-height: var(--lh-normal); margin-bottom: var(--space-1); }
.prize-text p:last-child { margin-bottom: 0; }
.prize-list { list-style: none; display: grid; gap: var(--space-1); margin: 0 0 var(--space-2); }
.prize-list li {
  display: flex; align-items: center; gap: var(--space-1);
  background: var(--color-surface-alt); border: 2px solid var(--color-line);
  border-radius: var(--radius-block); padding: var(--space-1) var(--space-2);
}
.prize-icon { font-size: 22px; line-height: 1; }
.prize-name { font-weight: 700; font-size: var(--fs-small); }
/* призыв подписаться на канал в «Как играть» */
.subscribe-note { margin-bottom: var(--space-3); }
.subscribe-note .btn { margin-top: var(--space-2); }

/* ---------- карта маршрута ---------- */
.map-box { max-width: 640px; }
.map-head { text-align: center; margin-bottom: var(--space-2); }
.map-sub { font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.map-time { font-size: var(--fs-caption); font-weight: 700; margin-top: var(--space-0); }
.map-pic { position: relative; width: 100%; height: 0; overflow: hidden; border-radius: var(--radius-block); margin-bottom: var(--space-2); }
.map-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* зоны кликабельны, но невидимы: постоянная рамка портила рисунок карты.
   Отклик — короткое затемнение в момент касания (бриф-33 §1) */
.map-spot {
  position: absolute; border: 0; border-radius: 12px; padding: 0;
  background: transparent; color: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map-spot:active { background: rgba(20,14,6,.18); }
.map-list { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
.map-loc {
  display: flex; align-items: center; gap: var(--space-1); text-align: left; width: 100%;
  background: var(--color-surface-alt); border: 2px solid var(--color-line);
  border-radius: var(--radius-block); padding: var(--space-1) var(--space-2); cursor: pointer;
  font: inherit; color: inherit;
}
.map-loc-n {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: var(--fs-caption);
}
.map-loc-title { font-weight: 700; flex: 1 1 auto; }
.map-loc-badge { font-size: var(--fs-caption); color: var(--color-muted); }
.map-intro, .map-outro { font-size: var(--fs-small); line-height: var(--lh-normal); }
.map-hints { list-style: none; display: grid; gap: var(--space-1); margin: var(--space-2) 0; }
.map-hints li { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-small); }
.map-hint-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-block); flex: 0 0 auto; }
.map-note { text-align: center; }
/* Готовая карточка локации от заказчика: во всю ширину модалки, нижняя полоса
   с нарисованной кнопкой «НАЗАД!» срезана — своя кнопка идёт ниже.
   ВНИМАНИЕ: 85% — не опечатка и не баг вёрстки. Карточки приходят квадратными
   (600×600), и эти 15% высоты приходятся ровно на нарисованную кнопку. Показать
   картинку целиком (padding-top: 100%) нельзя: у участника окажутся две кнопки
   «назад», из которых нарисованная не нажимается. Если заказчик пришлёт карточки
   другой пропорции, значение придётся пересчитать под них — оно завязано на квадрат. */
.map-loc-pic-wrap {
  position: relative; width: 100%; height: 0; padding-top: 85%;
  overflow: hidden; border-radius: var(--radius-block); margin-bottom: var(--space-2);
}
.map-loc-pic { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }
.map-cta-note {
  text-align: center; font-size: var(--fs-small); color: var(--color-muted);
  border: 2px dashed var(--color-line); border-radius: var(--radius-block);
  padding: var(--space-1) var(--space-2); margin-bottom: var(--space-2);
}
.map-box .btn { margin-top: var(--space-1); }

@media (max-width: 360px) {
  /* «ГАРАНТИРОВАННЫЙ» шире колонки при кегле 17 и лезет под картинку.
     Правило стоит после секции «Призы»: та же специфичность, побеждает последнее */
  .prize-title { font-size: 14px; }
}

.dossier-items, .step-items { margin: var(--space-1) 0 0 var(--space-2); padding-left: var(--space-2); }
.dossier-items li, .step-items li { margin-bottom: var(--space-0); }
.dossier-after, .dossier-footer { margin-top: var(--space-1); }
.info-outro {
  text-align: center; font-weight: 700; margin: var(--space-3) 0;
}
.grid-hint.hidden { display: none; }

/* окошки экрана «Миссия»: три шага в ряд, статусная карточка без номера */
.mission-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* выделен только блок состояния: задания и итог — обычные карточки (бриф-21 §2) */
.step-card.is-status {
  grid-column: 1 / -1;
  background: var(--color-ok-bg); border-color: var(--color-primary-dark);
}
.step-card.is-status .step-title { font-size: var(--fs-h3); }

/* подпись про бонусный штамп */
.bonus-status {
  font-size: var(--fs-small); font-weight: 700; text-align: center;
  padding: var(--space-1) var(--space-2); margin-bottom: var(--space-2);
  border: 2px dashed rgba(34,29,22,.4); border-radius: var(--radius-block);
  color: var(--color-muted); background: var(--color-surface);
}
.bonus-status.is-reserved, .bonus-status.is-active {
  color: var(--color-text); border-style: solid;
  background: var(--color-ok-bg); border-color: var(--color-primary-dark);
}

/* причина отказа под статусом чека */
.check-reason { font-size: var(--fs-caption); color: var(--color-muted); margin-top: 2px; }

/* шапка и блоки вкладки «Досье»: пояснение — часть шапки, блок про штамп
   стоит над сеткой, поэтому строка card-meta в этом режиме блочная */
.dossier-intro {
  font-size: var(--fs-small); line-height: var(--lh-normal);
  color: var(--color-muted); margin-top: var(--space-1);
}
.card-meta.is-dossier { display: block; margin: var(--space-2) 0; }
.dossier-bonus { font-size: var(--fs-small); }
.dossier-bonus.is-done { background: var(--color-ok-bg); border-color: var(--color-primary-dark); }