/* Warm Cinematic: palette tokens from v0.2; rendering follows illustration 127.
   Fonts are served locally from vendor/fonts (SIL OFL 1.1), as required by the player CSP. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(vendor/fonts/cormorant-garamond-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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url(vendor/fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(vendor/fonts/inter-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url(vendor/fonts/inter-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(vendor/fonts/inter-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url(vendor/fonts/inter-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* Палитра */
  --bg-primary: #101116;
  --bg-secondary: #191b22;
  --surface-card: #242630;
  --accent-primary: #853d4a;
  --accent-hover: #9d4a59;
  --accent-gold: #ebc19a; /* редко: только статус New */
  --state-free: #8fd3a3;
  --text-primary: #f4eee7;
  --text-secondary: #b9b8bf;
  --border-default: #41424b;
  --state-error: #d77c7c;
  --scrim: rgb(16 17 22 / 0.64); /* bg.primary поверх медиа: кнопки и чипы */
  /* Типографика: заголовки Cormorant Garamond, интерфейс и текст сцен Inter */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: 32px; /* крупный заголовок 30-36 */
  --fs-section: 24px; /* секции 22-26 */
  --fs-body: 17px; /* тело 16-18 */
  --fs-caption: 13px; /* подписи 12-14 */
  /* Геометрия: сетка 4 px */
  --gutter: 16px; /* поля экрана */
  --gap-section: 24px; /* между крупными секциями */
  --r-card: 14px;
  --r-btn: 12px;
  --cta-h: 52px; /* главный CTA */
  --tap: 44px; /* минимальная зона касания */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Полоса под нижней кнопкой экрана: нижние кнопки стоят над ней. Круг «Report» (п.179) стоял в этой полосе,
     с п.195 кнопка жалобы ушла в левый верхний угол; размер полосы прежний, раскладка экранов не меняется. */
  --foot-strip: max(var(--tap), calc(36px + var(--safe-bottom)));
  /* Кнопка жалобы (п.195): тусклый приглушённый бордовый круг 22 px, знак «!» светлый (контраст 7.6:1) */
  --report-dim: #7d3238;
  /* Ровный фон вместо медиа: тёплое свечение из accent.primary */
  --placeholder: radial-gradient(120% 80% at 25% 0%, rgb(133 61 74 / 0.38) 0%, rgb(133 61 74 / 0) 62%), linear-gradient(180deg, var(--surface-card) 0%, var(--bg-secondary) 45%, var(--bg-primary) 100%);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.4; overscroll-behavior: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#app { height: 100dvh; display: flex; justify-content: center; align-items: stretch; }
.app { position: relative; width: 100%; max-width: 480px; height: 100%; background: var(--bg-primary); overflow: hidden; }
/* Колонка шириной телефона на любом экране: история (.app) и экраны вне истории (лента Feed, Library, автор, врата, ошибки).
   На широком экране видео не растягивается на всю ширину. */
#app > .screen { position: relative; inset: auto; flex: none; width: 100%; max-width: 480px; height: 100%; }
@media (min-width: 560px) and (min-height: 700px) {
  #app { align-items: center; }
  .app, #app > .screen { height: min(100dvh, 900px); border-radius: 28px; box-shadow: 0 30px 80px rgb(0 0 0 / 0.6); border: 1px solid var(--border-default); }
}
button { font: inherit; color: inherit; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg-primary); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.screen.center { align-items: center; justify-content: center; text-align: center; padding: var(--gap-section) var(--gutter); gap: 16px; }
.screen-enter { animation: enter 0.28s ease both; }
@keyframes enter { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* Типографика */
.title { margin: 0; font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.08; font-weight: 600; letter-spacing: 0.005em; overflow-wrap: anywhere; }
.title:empty { display: none; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.kicker.pad { padding: calc(20px + var(--safe-top)) var(--gutter) 4px; }
.lead { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.45; min-height: 0; overflow: hidden; }
.lead:empty { display: none; }
.hint { color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.4; text-align: center; display: flex; justify-content: center; }
.hint[hidden], .choices[hidden] { display: none; }
.loading { padding: var(--gap-section) var(--gutter); text-align: center; color: var(--text-secondary); font-size: 15px; }

/* Кнопки: радиус 12, касание не меньше 44, главный CTA 52 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 20px; border: 1px solid transparent; border-radius: var(--r-btn); font-family: var(--font-ui); font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn.primary { min-height: var(--cta-h); background: var(--accent-primary); color: var(--text-primary); }
.btn.primary:active { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--text-primary); border-color: var(--border-default); }
.btn.ghost:active { background: var(--surface-card); }
.btn.danger { background: transparent; color: var(--state-error); border-color: var(--state-error); }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
@media (hover: hover) {
  .btn.primary:not(:disabled):hover { background: var(--accent-hover); }
  .btn.ghost:not(:disabled):hover { background: var(--surface-card); }
}
.icon-btn { position: relative; width: var(--tap); height: var(--tap); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--scrim); color: var(--text-primary); cursor: pointer; }
.icon-btn[hidden] { display: none; }
:is(.icon-btn, .btn, .choice, .act-row, .node, .home-tab, .story-card, .face, .author-chip, .shift-logline, .sheet-handle, .auth-link, .report-btn):focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.foot { display: flex; flex-direction: column; }
.foot .btn { width: 100%; }

/* Медиа сверху */
.stage-host { position: relative; flex: 1 1 0; min-height: 96px; overflow: hidden; }
.stage { position: absolute; inset: 0; }
.stage.enter { animation: fade 0.4s ease both; }
.stage.leave { animation: fadeout 0.4s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { to { opacity: 0; } }
.stage-fill { position: absolute; inset: 0; background: var(--poster, none) center / cover no-repeat, var(--placeholder); }
/* margin: auto: рамка ролика, ограниченная размером исходника (capToSource), стоит по центру сцены */
.stage-img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.stage-img.on { opacity: 1; }
/* Незагруженная картинка или ролик: не видно и не ловит касания (на телефонах браузер рисует на его месте светлую плашку со значком) */
.stage-img:not(.on) { visibility: hidden; pointer-events: none; }
.stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(rgb(16 17 22 / 0), rgb(16 17 22 / 0.85)); pointer-events: none; }
.stage-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
.stage-portrait.big { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 1; }
.stage-portrait-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-section); }
.stage-portrait.badge { position: absolute; left: var(--gutter); bottom: 36px; z-index: 2; }
.avatar { position: relative; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: linear-gradient(145deg, var(--surface-card), var(--bg-secondary)); border: 2px solid var(--border-default); flex: none; color: var(--text-primary); font-family: var(--font-display); font-weight: 600; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.md { width: 52px; height: 52px; font-size: 22px; }
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }
/* Большой портрет ограничен и шириной, и высотой окна: на низком экране имя героя под ним не уходит под панель */
.avatar.xl { width: min(34vw, 148px); height: min(34vw, 148px); width: min(34vw, 148px, 28dvh); height: min(34vw, 148px, 28dvh); font-size: 56px; }

/* Верхняя панель сцены */
.bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: calc(8px + var(--safe-top)) 12px 20px; background: linear-gradient(rgb(16 17 22 / 0.78), rgb(16 17 22 / 0)); }
.crumb { flex: 1; text-align: center; font-size: var(--fs-caption); color: var(--text-primary); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
.settings-btn { position: absolute; top: calc(8px + var(--safe-top)); right: 12px; z-index: 3; }
.event-chip { position: absolute; z-index: 4; top: calc(60px + var(--safe-top)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 2 * var(--gutter)); background: var(--scrim); border: 1px solid var(--border-default); color: var(--text-primary); padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-chip[hidden] { display: none; }

/* Нижняя панель: текст, выбор, «Continue». На карточках (меню, заставка) ровный фон; в сцене поверх картинки (ниже) */
.sheet { --sheet-pt: 20px; --sheet-gap: 12px; flex: 0 1 auto; max-height: 62%; display: flex; flex-direction: column; gap: var(--sheet-gap); padding: var(--sheet-pt) var(--gutter) var(--foot-strip); background: var(--bg-secondary); border-radius: var(--r-card) var(--r-card) 0 0; margin-top: -14px; position: relative; z-index: 3; box-shadow: 0 -12px 32px rgb(0 0 0 / 0.45); }
/* Сцена (текст и картинка): картинка на весь экран, текст и варианты поверх неё на затемнении, а не в непрозрачной панели.
   Затемнение под текстом не светлее 66% bg.primary: text.primary читается (AA) даже на белом кадре. Видеосцену не трогаем:
   там поверх ролика только выход (.video-mode ниже). */
.scene:not(.video-mode) .stage-host { position: absolute; inset: 0; min-height: 0; }
.scene .sheet { margin-top: auto; max-height: calc(100% - 64px - var(--safe-top)); background: linear-gradient(rgb(16 17 22 / 0.66), rgb(16 17 22 / 0.88)); border-radius: 0; box-shadow: none; }
.scene .sheet::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 96px; background: linear-gradient(rgb(16 17 22 / 0), rgb(16 17 22 / 0.66)); pointer-events: none; }
.scene .text, .scene .choice-question { text-shadow: 0 1px 3px rgb(0 0 0 / 0.55); }
/* Над текстом (его высота --sheet-h из SceneView): портрет героя, «Open video» */
.scene .stage-portrait.big { inset: calc(56px + var(--safe-top)) 0 var(--sheet-h, 0px); }
.scene .stage-portrait.badge { bottom: calc(var(--sheet-h, 0px) + 12px); }
.scene .stage-link { top: calc((100% - var(--sheet-h, 0px)) / 2); }
.text { flex: 0 1 auto; min-height: 0; overflow: hidden; font-family: var(--font-ui); font-size: 18px; line-height: 1.45; white-space: pre-line; color: var(--text-primary); }
.text b { font-weight: 600; }
.text.swap { animation: txt 0.3s ease both; }
@keyframes txt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sheet.no-text .text { display: none; }
.scene-next { width: 100%; }

/* ChoiceButton: Default, Pressed, Selected (один раз), Processing (второе касание не проходит), Disabled (только недоступный вариант) */
.choices { display: flex; flex-direction: column; gap: 8px; flex: none; }
.choice { position: relative; width: 100%; min-height: var(--tap); text-align: left; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--r-btn); padding: 11px 16px; font-family: var(--font-ui); font-size: var(--choice-size, 17px); line-height: 1.3; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.choice b { font-weight: 600; }
/* Pressed: surface.card с полупрозрачным accent.primary сверху */
.choice:active { background: linear-gradient(rgb(133 61 74 / 0.24), rgb(133 61 74 / 0.24)), var(--surface-card); border-color: var(--accent-hover); }
.choice.selected { background: var(--accent-primary); border-color: var(--accent-primary); }
.choice.processing { cursor: progress; }
.choice.processing::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgb(244 238 231 / 0), var(--text-primary), rgb(244 238 231 / 0)) no-repeat; background-size: 40% 100%; animation: processing 0.9s linear infinite; }
@keyframes processing { from { background-position: -60% 0; } to { background-position: 160% 0; } }
.choices.busy .choice { pointer-events: none; }
.choice:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) { .choice:not(:disabled):not(.selected):hover { border-color: var(--accent-hover); } }
.choice-question { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--text-primary); }
.choice-question[hidden] { display: none; }

/* Видеосцена: ролик на весь экран, поверх него ничего, кроме маленькой кнопки выхода. Касание ставит ролик на паузу. */
.scene.video-mode .sheet, .scene.video-mode .event-chip, .scene.video-mode .report-btn, .scene.video-mode .crumb,
.scene.video-mode .voice-btn, .scene.video-mode .stage-portrait, .scene.video-mode .stage::after { display: none; }
.scene { touch-action: auto; }
.scene.video-mode .bar { background: none; pointer-events: none; }
.scene.video-mode .act-back { pointer-events: auto; width: 32px; height: 32px; opacity: 0.72; }
/* Кнопка видна маленькой, а зона касания у неё 44×44 */
.scene.video-mode .act-back::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.scene.video-mode .act-back svg { width: 18px; height: 18px; }

/* Сцена с картинкой: текст убирается вниз. Ручка во всю ширину и 44 px высотой: занимает верхний отступ панели и стоит
   вплотную к тексту (её зона касания не заходит под текст и варианты) */
.sheet-handle { flex: none; align-self: center; width: 100%; height: var(--tap); margin: calc(-1 * var(--sheet-pt)) 0 calc(-1 * var(--sheet-gap)); background: none; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; }
.sheet:has(.sheet-handle:not([hidden])) { touch-action: none; }
.sheet:has(.sheet-scroll) { touch-action: pan-y; }
.sheet-handle[hidden] { display: none; }
.sheet-handle-chevron { width: 14px; height: 14px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: translateY(-4px) rotate(45deg); }
.sheet.collapsed .sheet-handle-chevron { transform: translateY(4px) rotate(225deg); }
.sheet.collapsed .text, .sheet.collapsed .hint { display: none; }
.scene .sheet.collapsed { --sheet-pt: 0px; --sheet-gap: 0px; padding: 0 var(--gutter) var(--safe-bottom); background: none; }
.scene .sheet.collapsed::before { display: none; }

/* Низкий экран (телефон лёжа): плотнее, варианты в две колонки, всё в окне без прокрутки */
@media (max-height: 520px) {
  .scene .sheet { --sheet-pt: 16px; --sheet-gap: 8px; }
  .choice-question { font-size: 19px; }
}
@media (max-height: 420px) and (min-width: 400px) {
  .scene .choices { display: grid; grid-template-columns: 1fr 1fr; }
  .scene .choice { padding: 8px 12px; }
}

/* Карточки истории: меню, заставка акта */
.card .stage-host { flex: 1 1 0; }
/* На высоком экране панель меню и заставки берёт место под полосой «Report» у обложки; до 659 px как раньше (80%) */
.card-sheet { max-height: max(80%, calc(100% - 132px - var(--safe-top))); margin-top: -14px; }
/* Описание на карточке не схлопывается в ноль: не ниже двух строк мелкого кегля (12 px, нижняя граница fitText), место
   освобождают ступени ужатия (fitCard). Высота в px, а не в em: fitText меняет кегль уже после проверки ступеней */
.card-sheet > .lead { min-height: 35px; }
.card:not(:has(.stage-host:not([hidden]))) .card-sheet { flex: 1 1 auto; max-height: none; margin: 0; border-radius: 0; padding-top: calc(28px + var(--safe-top)); box-shadow: none; justify-content: center; }
.acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.act-row { width: 100%; min-height: var(--tap); display: grid; grid-template-columns: 24px 1fr auto 28px; align-items: center; gap: 8px; text-align: left; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--r-btn); padding: 8px 12px; cursor: pointer; }
.act-row:disabled { opacity: 0.5; cursor: default; }
.act.open .act-row, .act.started .act-row { border-color: var(--accent-hover); }
.act-n { color: var(--text-secondary); font-size: 14px; font-variant-numeric: tabular-nums; }
.act-t { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-s { color: var(--text-secondary); font-size: var(--fs-caption); white-space: nowrap; }
.act-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--text-secondary); }
.act-mark svg { width: 16px; height: 16px; }
.act.open .act-mark, .act.started .act-mark { background: var(--accent-primary); color: var(--text-primary); }
.pager { display: flex; justify-content: center; gap: 12px; }
.pager:empty { display: none; }
/* Тело меню не сжимается ниже содержимого: переполнение видит fitCard и ужимает экран ступенями */
.menu-body { display: flex; flex-direction: column; gap: 12px; }

/* Кнопки поверх обложки: «назад» слева, справа журнал, «Нравится» и настройки */
.card > .act-back { position: absolute; top: calc(8px + var(--safe-top)); left: 12px; z-index: 6; }
.menu-tools { position: absolute; top: calc(8px + var(--safe-top)); right: 12px; z-index: 6; display: flex; gap: 8px; }
.menu-tools .settings-btn { position: relative; top: auto; right: auto; }

/* Меню истории и заставка акта при малой высоте: ступенями (fitCard в app.js) ужимаются отступы и медиа, главная кнопка всегда
   в экране, прокрутки нет. fit-1: отступы, обложка, лица; fit-2: без ряда персонажей и большого портрета, плотнее списки;
   fit-3: обложка только под верхние кнопки, без подзаголовков, состав акта в один ряд. Дальше меню показывает меньше актов. */
.card.fit-1 .stage-host { min-height: calc(60px + var(--safe-top)); }
.card.fit-1 .card-sheet { max-height: calc(100% - 48px - var(--safe-top)); gap: 8px; padding-top: 16px; margin-top: -12px; }
.card.fit-1 .title { font-size: 30px; }
.card.fit-1 .faces { margin-bottom: 0; gap: 8px; }
.card.fit-1 .face { width: 52px; }
.card.fit-1 .face .avatar.md, .card.fit-1 .cast .avatar.md { width: 40px; height: 40px; font-size: 17px; }
.card.fit-1 .stage-portrait.big .avatar.xl { width: min(24vw, 96px); height: min(24vw, 96px); font-size: 38px; }
.card.fit-1 .menu-body { gap: 8px; }
.card.fit-1 .cast { margin-top: 4px; gap: 8px; }
.card.fit-2 .faces, .card.fit-2 .stage-portrait.big { display: none; }
.card.fit-2 .acts { gap: 4px; }
.card.fit-2 .act-row { padding: 4px 12px; }
.card.fit-2 .cast-item { padding: 4px; gap: 2px; }
.card.fit-2 .cast .avatar.md { width: 32px; height: 32px; font-size: 15px; }
.card.fit-3 .stage-host { flex: 0 0 auto; height: calc(60px + var(--safe-top)); min-height: 0; }
.card.fit-3 .card-sheet { flex: 1 1 auto; max-height: none; margin-top: 0; border-radius: 0; gap: 6px; padding-top: 4px; }
.card.fit-3 .foot, .card.fit-3 .card-sheet > .btn { margin-top: auto; }
.card.fit-3 .kicker, .card.fit-3 .lead, .card.fit-3 .cast-note { display: none; }
.card.fit-3 .title { font-size: 22px; }
.card.fit-3 .act-row { padding: 2px 12px; }
.card.fit-3 .cast { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); margin-top: 0; }
.card.fit-3 .cast .avatar.md { width: 28px; height: 28px; font-size: 12px; }

/* Состав акта на заставке */
.cast { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cast-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px; border-radius: var(--r-card); border: 1px solid var(--border-default); background: var(--surface-card); min-width: 0; cursor: default; }
.cast-name { font-size: var(--fs-caption); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.cast-note { font-size: 12px; color: var(--text-secondary); }
.cast-item.me { border-color: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent-hover); }
.cast-item.me .cast-note { color: var(--text-primary); font-weight: 600; }
.cast-item.locked { opacity: 0.5; }
.cast-item.locked .avatar { filter: grayscale(1); }

/* Персонажи в меню истории и досье */
.faces { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.faces::-webkit-scrollbar { display: none; }
.face-item { flex: none; }
.face { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; background: none; border: 0; padding: 0; cursor: pointer; border-radius: var(--r-btn); }
.face-name { font-size: 12px; line-height: 1.15; color: var(--text-secondary); text-align: center; max-width: 64px; overflow-wrap: anywhere; }
.dossier { align-items: center; text-align: center; max-height: 100%; overflow-y: auto; }
.dossier-name { margin: 0; }
.dossier-role, .dossier-info { margin: 0; }
.dossier-info { color: var(--text-primary); font-size: 15px; line-height: 1.45; }
.dossier-ig { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: var(--tap); display: inline-flex; align-items: center; }
.dossier .btn { align-self: stretch; }

/* Чипы жанра и тегов, длительность */
.meta-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip { font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border-default); color: var(--text-secondary); white-space: nowrap; }
.chip-genre { color: var(--text-primary); background: var(--surface-card); }
.chip-free { font-weight: 600; letter-spacing: 0.04em; }
.meta-duration { font-size: var(--fs-caption); color: var(--text-secondary); margin-left: 2px; }
.menu-meta { margin: 0; }
.story-tags { font-size: 12px; color: var(--text-secondary); line-height: 1.3; overflow-wrap: anywhere; }

/* Публичная метрика карточки: только покупки. Меньше 10: «New» (единственное место accent.gold), 10 и больше: число */
.metric { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
.metric-new { background: var(--accent-gold); color: var(--bg-primary); }
.metric-purchases { background: var(--scrim); color: var(--text-primary); border: 1px solid var(--border-default); }
/* Free is green everywhere; New keeps its gold. Owned uses the neutral purchase style. */
.chip-free, .metric-free { background: var(--state-free); color: var(--bg-primary); border: 1px solid var(--state-free); }
.metric-owned { background: var(--scrim); color: var(--text-primary); border: 1px solid var(--border-default); }
/* Gold is only for New; price uses the neutral badge style. */
.metric-price { background: var(--scrim); color: var(--text-primary); border: 1px solid var(--border-default); }

/* Итоги акта и финал истории: один экран. Результат, карта контактов, действия */
.summary-wrap { position: absolute; inset: 0; background: var(--bg-primary); }
.summary-card { background: var(--bg-primary); }
.summary-card .summary-stage { flex: 0 0 auto; height: min(24%, 160px); }
@media (max-height: 700px) { .summary-card .summary-stage { display: none; } }
.summary-result { flex: 0 1 auto; display: flex; flex-direction: column; gap: 8px; padding: calc(64px + var(--safe-top)) var(--gutter) 4px; min-height: 0; }
.summary-card.has-stage .summary-result { padding-top: 12px; }
@media (max-height: 700px) { .summary-card.has-stage .summary-result { padding-top: calc(64px + var(--safe-top)); } }
.summary-result .title { font-size: 30px; }
.summary-result .lead { font-size: 16px; line-height: 1.45; max-height: 7.5em; color: var(--text-primary); }
.summary-status { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--text-secondary); }
.summary-map { flex: 1 1 0; min-height: 130px; display: flex; flex-direction: column; padding: 8px 0 0; }
.summary-map .kicker { padding: 0 var(--gutter); }
.summary-map .map { flex: 1; min-height: 0; }
.summary-actions { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px var(--gutter) var(--foot-strip); background: var(--bg-primary); border-top: 1px solid var(--border-default); }
.summary-actions .btn { width: 100%; }
.summary-row { display: flex; gap: 8px; }
.summary-row .btn { flex: 1; }
@media (max-height: 600px) { .summary-result .title { font-size: 26px; } .summary-status { font-size: 18px; } }

/* Карта персонажей */
.map { position: relative; flex: 1; min-height: 0; }
.map-edges, .map-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-edges { color: var(--text-secondary); }
.edge { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.8; }
.edge-label { font-size: 11px; fill: var(--text-primary); paint-order: stroke; stroke: var(--bg-primary); stroke-width: 4px; stroke-linejoin: round; font-family: var(--font-ui); }
.node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; width: 84px; margin-left: 0; }
button.node { cursor: pointer; }
.node-name { font-size: 12px; text-align: center; line-height: 1.15; max-width: 84px; text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.node.sel .avatar { border-color: var(--accent-hover); box-shadow: 0 0 0 3px rgb(157 74 89 / 0.5); }
.node.crossed { opacity: 0.65; }
.node.crossed .avatar { filter: grayscale(1) brightness(0.7); }
.node.crossed .node-name { text-decoration: line-through; }
.node .cross { position: absolute; top: calc(var(--r) - 1px); left: 50%; width: calc(var(--r) * 2.2); height: 3px; background: var(--state-error); border-radius: 2px; transform: translate(-50%, -50%) rotate(-40deg); }
.thought { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 8px; z-index: 8; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); padding: 12px 16px; font-size: 15px; line-height: 1.4; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.5); }
.thought.top { bottom: auto; top: 44px; }
.thought[hidden] { display: none; }
.thought b { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }

/* Диалоги */
.modal { position: absolute; inset: 0; z-index: 50; background: rgb(16 17 22 / 0.8); display: grid; place-items: center; padding: var(--gutter); }
.dialog { width: 100%; max-width: 420px; background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: var(--r-card); padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 64px rgb(0 0 0 / 0.5); }
.dialog > .title { font-size: 26px; }
/* Кнопка X окна (п.178, ui/closable.js): первая в окне, в правом верхнем углу; окно прокручивается под ней, X остаётся на месте.
   Край прилипания у прокручиваемого окна это край содержимого (под отступом 24px), поэтому top: -16px держит X в 8px от верха окна
   и в покое, и при прокрутке. Пока окно занято (aria-busy: идёт покупка или запрос удаления аккаунта), X приглушена и не нажимается. */
.modal-x { position: sticky; top: -16px; z-index: 1; flex: none; align-self: flex-end; margin: -16px -12px -12px 0; background: var(--bg-primary); border: 1px solid var(--border-default); color: var(--text-secondary); }
.modal-x:hover { color: var(--text-primary); }
.dialog[aria-busy="true"] > .modal-x { opacity: 0.4; pointer-events: none; }
.row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); font-size: 16px; }
.row input { width: 22px; height: 22px; accent-color: var(--accent-primary); }

/* Story Journal: только то, что уже есть в прогрессе (пройденные герои, их выборы и концовки); пустым не показывается */
.journal { max-height: 100%; overflow-y: auto; gap: 16px; }
.journal-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.journal-act { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-default); }
.journal-hero { display: flex; flex-direction: column; gap: 4px; }
.journal-hero-name { font-size: 15px; font-weight: 600; }
.journal-choices { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-primary); font-size: 15px; line-height: 1.4; }
.journal-ending { margin: 0; color: var(--text-secondary); font-size: 14px; }
.journal-ending b { color: var(--text-primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Каталог историй и экраны ошибок */
.error-screen .btn, .catalog-empty .btn, .author-missing .btn { min-width: 220px; }

/* Главный экран: табы Feed и Library, лента тизеров, полки Library */
.home { background: var(--bg-primary); touch-action: auto; }
.home-tabs { position: absolute; top: calc(10px + var(--safe-top)); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--scrim); border: 1px solid var(--border-default); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.home-tab { min-height: var(--tap); min-width: 88px; padding: 0 20px; background: transparent; border: 0; border-radius: 999px; color: var(--text-secondary); font-weight: 600; font-size: 15px; cursor: pointer; }
.home-tab.on { color: var(--text-primary); background: var(--surface-card); }
.home-account { position: absolute; z-index: 21; top: calc(14px + var(--safe-top)); right: 12px; }
.home-account.signed-in { background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-default); }
/* В Library под плавающими табами плотная полоса: прокрученные полки не просвечивают сквозь табы */
.home[data-tab="library"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 19; height: calc(72px + var(--safe-top)); background: linear-gradient(var(--bg-primary) 70%, rgb(16 17 22 / 0)); pointer-events: none; }
.shift, .library-panel { position: absolute; inset: 0; }
.shift[hidden], .library-panel[hidden] { display: none; }

/* Лента Feed: полноэкранные тизеры */
.shift-scroll { position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
.shift-scroll::-webkit-scrollbar { display: none; }
.shift-item, .shift-clone { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: var(--bg-primary); }
.shift-bg { position: absolute; inset: 0; background: var(--placeholder); }
.shift-poster, .shift-video { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: cover; }
.shift-video { opacity: 0; transition: opacity 0.3s; }
.shift-video.on { opacity: 1; }
.shift-item::after, .shift-clone::after { content: ""; position: absolute; inset: 30% 0 0 0; background: linear-gradient(rgb(16 17 22 / 0), rgb(16 17 22 / 0.55) 35%, rgb(16 17 22 / 0.94)); pointer-events: none; }
.shift-over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gutter) calc(64px + var(--safe-bottom)); }
.shift-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shift-label { color: var(--text-primary); text-shadow: 0 1px 4px rgb(0 0 0 / 0.6); }
.shift-title { margin: 0; font-size: 36px; line-height: 1.04; text-shadow: 0 2px 12px rgb(0 0 0 / 0.5); }
.shift-author { align-self: flex-start; min-height: 32px; color: var(--text-primary); text-shadow: 0 1px 4px rgb(0 0 0 / 0.6); }
.shift-meta { flex-wrap: nowrap; overflow: hidden; gap: 6px; }
.shift-meta .chip { flex: none; padding: 5px 9px; font-size: 12px; background: var(--scrim); color: var(--text-primary); border-color: rgb(244 238 231 / 0.24); }
.shift-meta .chip-genre { background: var(--surface-card); border-color: var(--surface-card); }
/* Раскрытие логлайна: строка 21 px, зона касания 45 (отступы внутри кнопки, снаружи столько же отрицательного поля: раскладка та же) */
.shift-logline { position: relative; display: block; width: 100%; margin: -12px 0; text-align: left; background: none; border: 0; padding: 12px 0; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); cursor: pointer; }
.shift-over.expanded { background: linear-gradient(rgb(16 17 22 / 0), rgb(16 17 22 / 0.86) 18%); padding-top: 28px; }
.shift-over.expanded .shift-logline { white-space: normal; overflow: visible; text-overflow: clip; max-height: 40vh; overflow-y: hidden; }
.shift-actions { order: 99; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.shift-actions .shift-watch { flex: 1 1 auto; }
.shift-actions .shift-continue { background: var(--scrim); min-height: var(--cta-h); }
.shift-actions .shift-like { flex: none; width: var(--cta-h); height: var(--cta-h); border: 1px solid var(--border-default); }
.like-btn.on svg path { fill: var(--accent-hover); stroke: var(--text-primary); }
/* Подсказка свайпа: видна до первого свайпа */
.shift-hint { position: absolute; z-index: 10; left: 50%; bottom: calc(18px + var(--safe-bottom)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: var(--scrim); color: var(--text-primary); font-size: var(--fs-caption); letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; animation: nudge 1.6s ease-in-out infinite; }
.shift-hint::before { content: "↑ "; }
.shift-hint[hidden] { display: none; }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }

/* Library */
.library-panel { overflow-y: auto; background: var(--bg-primary); padding: calc(76px + var(--safe-top)) 0 calc(32px + var(--safe-bottom)); display: flex; flex-direction: column; gap: var(--gap-section); user-select: none; }
/* Логотип в шапке Library (на ленте Feed логотипа нет). Это знак, не кнопка. */
.library-head { padding: 0 var(--gutter); }
.brand-logo { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: 0.01em; color: var(--text-primary); }
.shelf-title { margin: 0 var(--gutter) 12px; font-family: var(--font-display); font-size: var(--fs-section); font-weight: 600; line-height: 1.15; }
.new-count { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.followed-author { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.followed-author > .author-chip { margin: 0 var(--gutter); align-self: flex-start; color: var(--text-primary); }
.followed-author > .hint { margin: 0 var(--gutter); justify-content: flex-start; }
.shelf-authors .empty + .followed-author { margin-top: 16px; }
.library-panel .catalog-note { margin: 0 var(--gutter); justify-content: flex-start; text-align: left; }
.library-panel .refresh { margin: 0 var(--gutter); align-self: flex-start; }
/* Измерение просмотра (п.103): переключатель и что записывается, в Library и в листе аккаунта */
.privacy { display: flex; flex-direction: column; gap: 4px; }
.library-panel .privacy { margin: 0 var(--gutter); }
.privacy-label { flex: 1; }
.privacy-state { color: var(--text-secondary); font-size: var(--fs-caption); }
.privacy .hint { justify-content: flex-start; text-align: left; }

/* Пустые состояния: спокойный текст и одна кнопка по смыслу. Без давления и счётчиков */
.empty { margin: 0 var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.empty-text { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.45; }
.empty-hero { padding: 20px; border-radius: var(--r-card); background: var(--placeholder); border: 1px solid var(--border-default); gap: 16px; }
.empty-hero .empty-text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-section); line-height: 1.2; color: var(--text-primary); }
.empty-hero .empty-cta { align-self: stretch; }

/* StoryCard: обложка, публичная метрика, прогресс, название, логлайн, жанр и теги, «Continue» у начатой; автор под карточкой */
.stories { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story-item { flex: none; width: 152px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
.story-card { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: left; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: var(--r-card); }
.story-frame { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: var(--r-card); overflow: hidden; background: var(--placeholder); border: 1px solid var(--border-default); }
.story-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-frame .metric { position: absolute; top: 8px; left: 8px; }
/* Метрика и Free столбиком: рамка широкой карточки Continue Watching всего 84 px, в строку два бейджа в неё не влезают. */
.story-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.story-frame .story-badges .metric { position: static; }
.story-progress { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; background: rgb(16 17 22 / 0.7); overflow: hidden; }
.story-progress-fill { display: block; height: 100%; background: var(--text-primary); }
.story-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.story-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.12; overflow-wrap: anywhere; }
.story-logline { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-meta { font-size: 12px; color: var(--text-secondary); letter-spacing: 0.02em; }
.story-cta { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-btn); background: var(--accent-primary); color: var(--text-primary); font-size: var(--fs-caption); font-weight: 600; }
/* Новая история отмеченного автора (с прошлого раза): винная метка, не золото: «New» значит только меньше 10 покупок */
.story-new { position: absolute; top: 8px; right: 8px; padding: 4px 8px; border-radius: 999px; background: var(--accent-primary); color: var(--text-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.story-item.is-new .story-frame { border-color: var(--accent-hover); }
.story-author { margin-top: 0; margin-bottom: 6px; } /* место под зону касания подписи (44) внутри полки, без вертикальной прокрутки */
/* Continue Watching: широкий горизонтальный блок, как в макете: обложка слева, текст справа (название, акт и доля пройденного,
   жанр и длительность, «Continue»). Полки ниже видны сразу; несколько начатых историй листаются вбок */
.story-item.wide { width: calc(100% - 28px); }
.story-item.wide:only-child { width: 100%; }
.story-item.wide .story-card { flex-direction: row; gap: 12px; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border-default); }
.story-item.wide .story-frame { flex: none; width: 84px; border-radius: 10px; }
.story-item.wide .story-text { flex: 1 1 auto; justify-content: center; }
.story-item.wide :is(.story-logline, .story-tags) { display: none; }
.story-progress-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-primary); }

/* Автор истории: подпись у карточки и в меню, страница автора (контракт 1.6) */
.author-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 32px; padding: 0; border: 0; background: none; color: var(--text-secondary); font-size: var(--fs-caption); text-align: left; border-radius: 999px; }
button.author-chip { position: relative; cursor: pointer; }
button.author-chip::before { content: ""; position: absolute; inset: -6px 0; }
.author-chip .author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.sm { width: 24px; height: 24px; font-size: 12px; border-width: 1px; }
.menu-author { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; margin-right: 4px; }
.menu-author[hidden] { display: none; }
.menu-author .author-chip { color: var(--text-primary); }
/* Страница автора: компактная шапка, как в макете: полоса обложки во всю ширину, небольшой аватар на её краю, имя, @адрес,
   о себе, действия, поля 16. Истории начинаются сразу под шапкой */
.author-page { overflow-y: auto; touch-action: auto; padding: 0 0 calc(32px + var(--safe-bottom)); }
.author-page > .act-back { position: absolute; top: calc(8px + var(--safe-top)); left: 12px; z-index: 6; }
.author-body { display: flex; flex-direction: column; gap: var(--gap-section); }
.author-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 var(--gutter); }
.author-cover { align-self: stretch; height: calc(104px + var(--safe-top)); margin: 0 calc(-1 * var(--gutter)); background: linear-gradient(rgb(16 17 22 / 0.1), rgb(16 17 22 / 0.35) 55%, var(--bg-primary)), var(--poster, none) center 30% / cover no-repeat, var(--placeholder); }
.author-head .author-avatar { width: 76px; height: 76px; font-size: 32px; margin: -48px 0 4px; border-color: var(--accent-hover); }
.author-title { font-size: var(--fs-display); }
.author-handle { margin: 0; color: var(--text-secondary); font-size: 14px; }
.author-bio { margin-top: 4px; overflow: visible; overflow-wrap: anywhere; font-size: 16px; color: var(--text-primary); }
.author-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; width: 100%; }
.author-actions .author-explore { flex: 1 1 160px; }
.author-stories-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; overflow: visible; }
.author-stories-list .story-item { width: auto; }
.author-stories .empty { align-items: flex-start; }

/* Отметка автора (Follow, бесплатно) и автопокупка (Auto-buy, отдельное явное действие): разные элементы, разный вид */
.follow-btn { min-height: var(--tap); padding: 0 20px; background: transparent; color: var(--text-primary); border-color: var(--text-secondary); }
.follow-btn.on { border-color: var(--border-default); background: var(--surface-card); }
.follow-btn.compact { min-height: 32px; padding: 0 12px; font-size: var(--fs-caption); border-radius: 999px; }
/* Касание у маленькой кнопки 44×44 */
.follow-btn.compact { position: relative; }
.follow-btn.compact::before { content: ""; position: absolute; inset: -6px 0; }
.subscribe-block { margin: 0 var(--gutter); padding: 20px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-default); border-radius: var(--r-card); background: var(--bg-secondary); }
.subscribe-block .shelf-title { margin: 0; }
.subscribe-lead { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.45; }
.subscribe-terms { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; color: var(--text-primary); font-size: 14px; line-height: 1.45; }
.subscribe-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.subscribe-soon { justify-content: flex-start; text-align: left; }

/* Аккаунт зрителя: вход и регистрация, врата, «Нравится» */
.auth { max-height: 100%; overflow-y: auto; gap: 12px; }
.auth .title { font-size: 26px; }
.auth .lead { overflow: visible; font-size: 15px; }
.auth-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--border-default); border-radius: var(--r-btn); background: var(--surface-card); }
.auth-modes .auth-mode { min-height: var(--tap); padding: 10px 8px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption); color: var(--text-secondary); }
.auth-input { width: 100%; min-height: var(--tap); font: inherit; font-size: 16px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-btn); padding: 10px 12px; user-select: text; -webkit-user-select: text; }
.auth-input:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 1px; }
/* Показ пароля (бриф п.171): глаз поверх правого края поля, в полный рост касания. */
.auth-secret { position: relative; }
.auth-secret .auth-input { padding-right: calc(var(--tap) + 4px); }
.auth-reveal { position: absolute; right: 0; bottom: 0; width: var(--tap); height: var(--tap); display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: var(--r-btn); color: var(--text-secondary); cursor: pointer; }
.auth-reveal:hover { color: var(--text-primary); }
.auth-reveal:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.auth-notice { margin: 0; color: var(--text-primary); font-size: 14px; }
.auth-notice[hidden] { display: none; }
.auth-error { margin: 0; color: var(--state-error); font-size: 14px; }
.auth-error[hidden] { display: none; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.auth-link { min-height: var(--tap); background: none; border: 0; padding: 0; color: var(--text-primary); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-link[hidden] { display: none; }
/* Выход в обычный браузер из встроенного (п.219): ссылку видно целиком с начала, её можно выделить и скопировать. */
.auth-exit-link { color: var(--text-secondary); text-overflow: ellipsis; }
.auth .btn { width: 100%; }

/* Удаление аккаунта (бриф п.134): пункт листа аккаунта, последствия, отдельное подтверждение, дата завершения, уведомление об
   отмене входом. Подтверждение модально, как подтверждение покупки (п.142): первые доли секунды его кнопки касаний не ждут. */
.account-deletion { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--r-btn); background: var(--surface-card); border: 1px solid var(--border-default); }
.account-deletion[hidden], .account-delete-row[hidden] { display: none; }
.account-deletion .kicker { margin: 0; }
.account-deletion .hint { justify-content: flex-start; text-align: left; }
.account-delete-row { display: flex; flex-direction: column; }
.btn.account-delete { color: var(--state-error); }
.account-deletion-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-primary); font-size: 15px; line-height: 1.4; }
.account-deletion-modal .dialog:focus { outline: none; }
/* Лист выше экрана (узкий телефон, ждущее удаление): окно прокручивается, строки не сжимаются и не наезжают друг на друга. */
.account-deletion-modal .dialog > * { flex-shrink: 0; }
.deletion-confirm.arming .btn { pointer-events: none; }
.account-notice { position: fixed; z-index: 60; top: calc(12px + var(--safe-top)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 2 * var(--gutter))); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); box-shadow: 0 12px 32px rgb(0 0 0 / 0.5); }
.account-notice-text { margin: 0; flex: 1; font-size: 15px; line-height: 1.4; color: var(--text-primary); }
.account-notice .btn { flex: none; min-height: var(--tap); padding: 8px 16px; }
.gate-screen { background: var(--placeholder); gap: 12px; }
.gate-screen .title { font-size: 36px; max-width: 340px; }
.gate-screen .lead { max-width: 320px; overflow: visible; margin-bottom: 8px; }
.gate-screen .btn { width: min(100%, 320px); }

/* «Пожаловаться» (п.195): тусклый бордовый круг 22 px со знаком «!» в левом верхнем углу экрана. Зона касания 44×44,
   круг в её центре. Над содержимым экрана, под модальными окнами (z-index 50). */
.report-btn { position: absolute; z-index: 9; left: 12px; top: calc(8px + var(--safe-top)); display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.report-dot { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--report-dim); color: var(--text-primary); font-family: var(--font-ui); font-weight: 800; font-size: 13px; line-height: 1; box-shadow: inset 0 0 0 1px rgb(16 17 22 / 0.45), 0 2px 6px rgb(0 0 0 / 0.4); pointer-events: none; transition: transform 0.15s; }
.report-btn:hover .report-dot, .report-btn:focus-visible .report-dot { transform: scale(1.08); }
/* Экраны истории (меню, заставка акта, итоги): левый верхний угол занят кнопкой «назад» (12..56, 8..52 + safe area).
   Под ней сразу заголовок листа: на низких экранах ступени ужатия поднимают его к 72 px, поэтому кнопка жалобы
   встаёт рядом с «назад», в той же верхней полосе: больше там ничего нет. */
.card > .report-btn, .summary-wrap > .report-btn { left: 64px; }
/* Корень сцены: под кнопкой «назад» картинка сцены, там кнопка жалобы и встаёт (12..56, 52..96 + safe area).
   Зоны касания примыкают: круг 22 px в зоне 44 px, между кругами 11 px. Хлебная крошка сцены по центру, до левого края не доходит. */
.scene > .report-btn { top: calc(52px + var(--safe-top)); }
/* Плашка этапа (event-chip) по центру под верхней панелью: с ней кнопка жалобы уходит ещё ниже, чтобы не лечь на текст. */
.scene:has(.event-chip:not([hidden])) > .report-btn { top: calc(96px + var(--safe-top)); }
.report { gap: 12px; }
.report .title { font-size: var(--fs-section); }
/* Поле жалобы и обратной связи: шрифт не меньше 16 px (п.199), иначе iOS при фокусе увеличивает страницу сам
   и в установленной оболочке обратно не возвращает. */
.report-text { width: 100%; resize: none; font: inherit; font-size: 16px; color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-btn); padding: 10px 12px; user-select: text; -webkit-user-select: text; }

/* Выбор языка озвучки и субтитров на заставке акта (контракт 1.7, бэклог п.104). Только здесь: поверх видео ничего нет. */
.intro-body { display: flex; flex-direction: column; gap: 12px; }
.lang-pick { display: flex; flex-direction: column; gap: 8px; }
.lang-row { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lang-label { font-size: var(--fs-caption); color: var(--text-secondary); }
.lang-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-opt { min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); font-size: 15px; cursor: pointer; }
.lang-opt.on { background: var(--accent-primary); border-color: var(--accent-hover); font-weight: 600; }
.lang-opt:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.card.fit-1 .intro-body { gap: 8px; }
.card.fit-2 .lang-pick { gap: 4px; }
.card.fit-3 .lang-row { flex-direction: row; align-items: center; gap: 8px; }
.card.fit-3 .lang-label { flex: none; min-width: 64px; }
/* Субтитры сцены рисует браузер в кадре ролика (текстовая дорожка видео): крупно и на подложке, чтобы читались на светлом кадре. */
video::cue { font-family: Inter, system-ui, sans-serif; font-size: 18px; line-height: 1.35; color: #f4eee7; background: rgb(16 17 22 / 0.72); }

.video-status { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px; background: #101014; color: #fff; text-align: center; }
.video-status[hidden], .video-status > [hidden] { display: none; }
.scene.video-mode .bar { z-index: 9; }

/* Illustration 127: light on the photograph, soft rose controls and dark glass. */
:root {
  --r-btn: 17px;
  --rose-cta: linear-gradient(180deg, #ad6472 0%, #974b5b 48%, var(--accent-primary) 100%);
  --rose-hover: linear-gradient(180deg, #bd7583 0%, #a65b6b 48%, var(--accent-hover) 100%);
  --rose-pressed: linear-gradient(180deg, #974b5b 0%, var(--accent-primary) 100%);
}
.btn.primary, .follow-btn, .follow-btn.on, .story-cta {
  background: var(--rose-cta);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgb(244 238 231 / 0.13), 0 6px 20px rgb(69 22 33 / 0.25);
}
.btn.primary:not(:disabled):active, .follow-btn:not(:disabled):active { background: var(--rose-pressed); }
@media (hover: hover) {
  .btn.primary:not(:disabled):hover, .follow-btn:not(:disabled):hover { background: var(--rose-hover); }
}
.follow-btn { border-radius: 999px; }
.follow-btn.on { box-shadow: inset 0 0 0 1px rgb(244 238 231 / 0.24); }
.shift-item::after, .shift-clone::after { inset: 36% 0 0; background: linear-gradient(180deg, transparent, rgb(15 12 14 / 0.2) 30%, rgb(15 12 14 / 0.82) 76%, rgb(15 12 14 / 0.96)); }
.shift-over { background: none; }
.shift-meta .chip, .shift-meta .chip-genre, .menu-meta .chip:not(.chip-free) {
  background: rgb(25 23 28 / 0.48); border-color: transparent;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.shift-title, .menu .title, .author-title, .story-title { text-shadow: 0 2px 12px rgb(0 0 0 / 0.55); }
/* Keep the genre above the title; preserve the existing actions and their touch targets. */
.shift-meta { order: -2; }
.shift-badges { order: -1; }
.home-tabs { border: 0; border-radius: 0; background: transparent; backdrop-filter: blur(12px); }
.home-tab { position: relative; border-radius: 0; }
.home-tab.on { background: transparent; }
.home-tab.on::after { content: ""; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; border-radius: 2px; background: var(--accent-hover); }

/* Story Page: the cover continues behind the content without a sheet edge. */
.menu:has(.stage-host:not([hidden])) .stage-host { position: absolute; inset: 0; min-height: 0; }
.menu .stage::after { height: 76%; background: linear-gradient(transparent, rgb(15 12 14 / 0.65) 40%, rgb(15 12 14 / 0.94)); }
.menu .card-sheet { margin-top: auto; background: transparent; border-radius: 0; box-shadow: none; isolation: isolate; }
/* Ступени ужатия не поднимают лист меню к верху экрана: он остаётся внизу, над полосой кнопки жалобы (п.179), и не заходит
   под кнопки «назад» и «настройки» (верх 8 px + 44 px). На fit-3 (низкий горизонтальный экран) лист не растягивается на весь
   экран; что не влезло, уходит на следующую страницу актов (fitCard в src/app.js). */
.menu.fit-1 .card-sheet { flex: 0 1 auto; margin-top: auto; max-height: calc(100% - 56px - var(--safe-top)); }
.menu .card-sheet::before { content: ""; position: absolute; inset: -60px 0 0; z-index: -1; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); mask-image: linear-gradient(transparent, black 100px); pointer-events: none; }
.menu .acts { gap: 0; }
.menu .act-row, .menu .act.open .act-row, .menu .act.started .act-row { background: transparent; border: 0; border-bottom: 1px solid rgb(244 238 231 / 0.12); border-radius: 0; }
.menu .act.open .act-mark, .menu .act.started .act-mark { background: rgb(244 238 231 / 0.08); box-shadow: inset 0 0 0 1px rgb(244 238 231 / 0.4); }
.menu .act.done .act-mark { color: var(--text-primary); background: var(--accent-primary); }

/* Choice scene: the photograph remains visible through the lower scrim. Video rules stay untouched. */
.scene:not(.video-mode) .sheet:not(.collapsed) { background: linear-gradient(180deg, rgb(15 12 14 / 0.08), rgb(15 12 14 / 0.55) 42%, rgb(15 12 14 / 0.92)); }
.scene:not(.video-mode) .sheet::before { height: 140px; background: linear-gradient(transparent, rgb(15 12 14 / 0.08)); }
.scene .choice { background: linear-gradient(180deg, rgb(48 48 56 / 0.56), rgb(32 32 40 / 0.65)); border-color: transparent; box-shadow: inset 0 1px 0 rgb(244 238 231 / 0.1), 0 3px 12px rgb(0 0 0 / 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-right: 36px; }
.scene .choice::before { content: ""; position: absolute; right: 16px; top: calc(50% - 4px); width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: 0.8; }
.scene .choice.selected, .scene .choice:active { background: var(--rose-pressed); }
@media (hover: hover) { .scene .choice:not(:disabled):not(.selected):hover { background: linear-gradient(rgb(133 61 74 / 0.24), rgb(133 61 74 / 0.24)), rgb(48 48 56 / 0.65); border-color: transparent; } }
@media (min-height: 660px) { .scene .choice-question { font-size: 28px; } }

/* Library: title and progress share the photograph instead of a separate panel. */
.home-tabs { backdrop-filter: none; -webkit-backdrop-filter: none; }
.library-panel .story-card { position: relative; display: block; overflow: hidden; border-radius: 12px; }
.library-panel .story-frame { width: 100%; border: 0; border-radius: 12px; }
.library-panel .story-frame::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgb(15 12 14 / 0.88)); pointer-events: none; }
.library-panel .story-text { position: absolute; inset: auto 12px 20px; z-index: 1; gap: 4px; }
.library-panel :is(.story-logline, .story-tags, .story-meta) { display: none; }
.library-panel .story-title { font-size: 22px; }
.library-panel .story-frame :is(.metric, .story-badges) { z-index: 2; }
.library-panel .story-progress { z-index: 2; left: 12px; right: 12px; bottom: 10px; height: 3px; background: rgb(244 238 231 / 0.26); }
.story-progress-fill { background: var(--accent-hover); }
.library-panel .story-item.wide .story-card { padding: 0; background: none; border: 0; }
.library-panel .story-item.wide .story-frame { width: 100%; height: 164px; aspect-ratio: auto; }
.library-panel .story-item.wide .story-text { right: 60px; }
.library-panel .story-cta { position: absolute; right: -48px; bottom: 4px; width: 44px; height: 44px; overflow: hidden; color: transparent; border-radius: 50%; padding: 0; background: rgb(15 12 14 / 0.4); box-shadow: inset 0 0 0 1px rgb(244 238 231 / 0.5); }
.library-panel .story-cta::after { content: ""; position: absolute; top: 14px; left: 18px; border-left: 13px solid var(--text-primary); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* Author Page: cover, overlapping ringed portrait, then a two-column poster grid. */
.author-cover { height: calc(200px + var(--safe-top)); background: linear-gradient(transparent 40%, rgb(15 12 14 / 0.35) 72%, var(--bg-primary)), var(--poster, none) center 30% / cover no-repeat, var(--placeholder); }
.author-head .author-avatar { margin-top: -52px; border: 2px solid var(--accent-hover); box-shadow: 0 2px 12px rgb(0 0 0 / 0.3); }
.author-head { position: relative; }
.author-bio { font-size: 14px; line-height: 1.5; }
.author-actions { gap: 8px; margin-top: 4px; }
.author-actions .author-explore { min-height: 44px; }
.author-stories-list .story-frame { border: 0; border-radius: 10px; }
.author-stories-list .story-title { font-size: 21px; }
.author-stories-list :is(.story-meta, .story-tags, .story-logline), .author-stories-list .author-chip { color: var(--text-secondary); font-size: 12px; }

/* Owner-approved addition, 2026-10-25: bottom navigation only on Feed / Library. */
.home-tabs { top: auto; bottom: 0; left: 0; right: 0; transform: none; gap: 0; padding: 6px 16px calc(6px + var(--safe-bottom)); background: rgb(15 12 14 / 0.94); border-top: 1px solid rgb(244 238 231 / 0.09); }
.home-tab { flex: 1; min-height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 0 16px; font-size: 11px; font-weight: 400; }
.home-tab svg { width: 22px; height: 22px; }
.home-tab.on { color: var(--accent-hover); }
.home-tab.on::after { display: none; }
.home[data-tab="library"]::before { display: none; }
.library-panel { padding-top: calc(24px + var(--safe-top)); padding-bottom: calc(88px + var(--safe-bottom)); }
.shift-over { padding-bottom: calc(108px + var(--safe-bottom)); }
.shift-hint { bottom: calc(65px + var(--safe-bottom)); }

/* Automatic act artwork: compact landscape crop; no new authoring field. */
.menu .act-row { grid-template-columns: 64px 20px minmax(0, 1fr) auto 28px; padding: 8px 0; }
.act-thumbnail { display: block; width: 64px; height: 44px; overflow: hidden; border-radius: 7px; background: var(--placeholder); }
.act-thumbnail img, .act-thumbnail video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.menu .act-s { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px), (max-height: 659px) {
  .menu .act-row { grid-template-columns: 48px 16px minmax(0, 1fr) 28px; gap: 6px; }
  .menu .act-s { display: none; }
  .act-thumbnail { width: 48px; height: 36px; }
}

/* Preserve full touch targets next to the new footer and keep the author grid above the fold. */
.shift-author { min-height: 44px; margin-bottom: 6px; }
.shift-author::before { inset: 0; }
/* Лента (п.195): круг «Report» в левом верхнем углу тизера; панель вкладок внизу, кнопки тизера внизу, не задевают. */
.author-cover { height: calc(184px + var(--safe-top)); }
.author-body { gap: 16px; }
.library-head .brand-logo { margin: 0; }

/* Spotlight loading wordmark, using the player's existing local display font. */
.video-status:has(.logo-spot:not([hidden])) { padding: 0; }
.logo-spot {
  position: relative;
  width: 60%;
  container-type: inline-size;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}
.logo-spot[hidden] { display: none; }
.logo-spot span {
  display: block;
  font-size: 17.5cqw;
  letter-spacing: .025em;
  background: linear-gradient(180deg, #d9dce2 0%, #777d88 28%, #f1f3f5 44%, #666d78 52%, #b8bec8 72%, #525964 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.logo-spot .base { opacity: .58; }
.logo-spot .trail, .logo-spot .lit, .logo-spot .glint {
  position: absolute;
  inset: 0;
  mask-size: 200% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  animation: logo-spot-sweep 2s linear infinite;
  animation-delay: -.4s;
}
.logo-spot .trail {
  opacity: .9;
  background-image: linear-gradient(#ffe9c9, #e9bd87, #fff2df);
  mask-image: repeating-linear-gradient(90deg, transparent 0%, #000 25%, transparent 50%);
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0%, #000 25%, transparent 50%);
}
.logo-spot .lit {
  background-image: linear-gradient(180deg, #fffaf1 5%, #ecdbc6 30%, #fff 47%, #d6c4ae 54%, #fff8eb 78%, #f1ddc1 100%);
  filter: drop-shadow(0 0 3px #ffe0ad);
  mask-image: repeating-linear-gradient(90deg, transparent 0%, transparent 15%, #000 21%, #000 29%, transparent 35%, transparent 50%);
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0%, transparent 15%, #000 21%, #000 29%, transparent 35%, transparent 50%);
}
.logo-spot .glint {
  background-image: linear-gradient(#fff, #fff1da, #fff);
  opacity: .9;
  mask-image: repeating-linear-gradient(90deg, transparent 0%, transparent 22%, #000 24%, #000 26%, transparent 28%, transparent 50%);
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0%, transparent 22%, #000 24%, #000 26%, transparent 28%, transparent 50%);
}
.logo-spot .reflection {
  position: absolute;
  inset: 100% 0 auto;
  transform: scaleY(-1);
  opacity: .12;
  mask-image: linear-gradient(transparent 35%, #000);
  -webkit-mask-image: linear-gradient(transparent 35%, #000);
}
/* Each mask repeats once per logo width, matching the travel for a seamless loop. */
@keyframes logo-spot-sweep {
  from { mask-position: 100% 0; -webkit-mask-position: 100% 0; }
  to { mask-position: 0% 0; -webkit-mask-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-spot .trail, .logo-spot .lit, .logo-spot .glint { display: none; animation: none; }
}

/* Shared loading slots keep their size throughout the request. */
.loading-screen { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; background: #101014; }
.loading-section .logo-spot { width: min(40%, 180px); }
.track-loading { position: absolute; inset: 72px 0 0; z-index: 7; }
.act-thumbnail { position: relative; }
.media-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.media-loading .logo-spot { width: min(45%, 140px); }
.shift-item:has(video.on) .media-loading, .shift-clone:has(video.on) .media-loading { display: none; }
.loading-screen > .act-back { position: absolute; top: calc(16px + var(--safe-top)); left: 16px; }

.shelf { position: relative; }
.section-wait { z-index: 6; min-height: 0; }

/* Кошелёк, витрина и покупки (бриф оплаты 2026-10-24): те же поверхности и кнопки, что у Library и окон входа. */
.wallet { margin: 0 var(--gutter); padding: 16px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 6px; }
.wallet .shelf-title { margin: 0; }
.wallet-balance { display: flex; align-items: baseline; gap: 6px; }
.wallet-total { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; }
.wallet-unit { color: var(--text-secondary); font-size: 15px; }
.wallet-note, .wallet-notice { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); text-align: left; justify-content: flex-start; }
.wallet-notice { color: var(--text-primary); }
.wallet-note[hidden], .wallet-notice[hidden] { display: none; }
.wallet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wallet-actions .btn { flex: 1 1 auto; min-height: var(--tap); }
.wallet-dialog { max-height: min(80dvh, 640px); overflow-y: auto; }
/* Промокод (п.177): поле и «Apply» рядом с пополнением, строка успеха и честная причина отказа под ними. */
.wallet-promo { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; }
.wallet-promo-row { display: flex; gap: 8px; align-items: stretch; }
.wallet-promo-input { flex: 1 1 auto; min-width: 0; width: auto; text-transform: uppercase; letter-spacing: 0.04em; }
.wallet-promo-input::placeholder { text-transform: none; letter-spacing: normal; color: var(--text-secondary); }
.wallet-promo-apply { flex: 0 0 auto; min-height: var(--tap); padding-left: 18px; padding-right: 18px; }
.wallet-promo-result { margin: 0; font-size: var(--fs-caption); color: var(--text-primary); text-align: left; }
.wallet-promo-result[hidden] { display: none; }
.topup-choices { display: flex; flex-direction: column; gap: 8px; }
.topup-choice { justify-content: space-between; }
.history-list, .purchase-list, .history-unsuccessful { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.history-unsuccessful-title { margin: 16px 0 4px; font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); text-align: left; }
.history-row.unsuccessful .history-amount { font-weight: 400; color: var(--text-secondary); font-size: var(--fs-caption); }
.history-row, .purchase-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--border-default); font-size: 15px; text-align: left; }
.history-row:last-child, .purchase-row:last-child { border-bottom: 0; }
.history-date, .purchase-refund-note, .purchase-removed, .purchase-status { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--text-secondary); justify-content: flex-start; text-align: left; }
.history-amount, .purchase-total { font-weight: 600; text-align: right; }
.history-row.pending .history-amount { font-weight: 400; color: var(--text-secondary); font-size: var(--fs-caption); }
.purchase-refund { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* Шаг «Confirm Refund» с промо, срок которого прошёл (п.177): что вернётся и что сгорит, слева, как заметка над ним. */
.purchase-refund-confirm { margin: 0; justify-content: flex-start; text-align: left; }
.storefront-screen { overflow-y: auto; background: var(--placeholder); }
.storefront-poster { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; flex: none; }
.storefront-body { padding: var(--gap-section) var(--gutter) calc(var(--foot-strip) + 8px); display: flex; flex-direction: column; gap: 12px; }
.storefront-status, .storefront-gate, .storefront-short, .storefront-series-line { margin: 0; font-size: 15px; }
.storefront-actions, .storefront-series { display: flex; flex-direction: column; gap: 8px; }
.storefront-actions .btn, .storefront-body > .btn { width: 100%; }
.storefront-policy { justify-content: flex-start; text-align: left; }
.storefront-policy[hidden] { display: none; }

/* Подтверждение покупки (бриф п.142): кнопка покупки открывает окно, кредиты тратит только его последняя кнопка. То же окно
   кошелька; цена, остаток сейчас и после на карточке поверхности. */
.money-confirm { position: relative; max-height: 100%; overflow-y: auto; }
.money-confirm:focus { outline: none; }
.confirm-sheet { margin: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-radius: var(--r-btn); background: var(--surface-card); border: 1px solid var(--border-default); }
.confirm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.confirm-row dt { color: var(--text-secondary); font-size: 14px; }
.confirm-row dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.confirm-row.price dd { font-size: 20px; }
.confirm-row.after { padding-top: 8px; border-top: 1px solid var(--border-default); }
.confirm-note { justify-content: flex-start; text-align: left; }
.confirm-opens { overflow: visible; color: var(--text-primary); font-size: 15px; }
/* Только что открытое окно: второй клик двойного по кнопке покупки не запускает списание; отмена доступна. Вид тот же. */
.money-confirm.arming .confirm-spend { pointer-events: none; }
.confirm-success { align-items: center; text-align: center; }
.confirm-success .btn { align-self: stretch; }
.confirm-balance { margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-secondary); font-size: var(--fs-caption); }
.confirm-balance .money-amount { font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.1; color: var(--text-primary); }

/* Движение денег (п.142, src/ui/money-motion.js): разница у остатка, вспышка дошедшего пополнения, галочка и блик покупки.
   Семейство акцента и тёплый белый, не золото (оно только у «New»). Движутся только transform и opacity: галочка нарисована
   сразу и появляется масштабом и прозрачностью; слои касаний не ловят. При меньшем движении слоёв нет, галочка сразу на месте
   (общее правило выше). */
/* Слои разницы и вспышки живут в карточке кошелька (.shelf), теле витрины и окне, не внутри строк с текстом. */
.storefront-body { position: relative; }
/* Пока число докручивается, его узел держит ширину большего значения (money-motion.js): цифры у правого края, рядом с единицей. */
.money-num { display: inline-block; text-align: right; }
.wallet-total { text-align: right; }
.money-delta, .money-burst, .money-sweep { pointer-events: none; }
.money-delta { position: absolute; z-index: 3; left: var(--x, 0px); top: var(--y, 0px); transform-origin: left bottom; padding: 2px 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; color: var(--text-primary); opacity: 0; animation: money-delta 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.money-delta.up { background: var(--rose-cta); box-shadow: 0 4px 14px rgb(69 22 33 / 0.45), inset 0 1px 0 rgb(244 238 231 / 0.18); }
.money-delta.down { background: rgb(16 17 22 / 0.8); box-shadow: inset 0 0 0 1px rgb(189 117 131 / 0.65); }
@keyframes money-delta {
  0% { opacity: 0; transform: translate(-6px, -10%) scale(0.8); }
  16% { opacity: 1; transform: translate(-6px, -70%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-6px, -150%) scale(1); }
}
.money-burst { position: absolute; z-index: 2; left: var(--x, 50%); top: var(--y, 50%); width: 0; height: 0; }
.money-ring { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--accent-hover); box-shadow: 0 0 18px rgb(157 74 89 / 0.6), inset 0 0 14px rgb(244 238 231 / 0.16); opacity: 0; animation: money-ring 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes money-ring { 0% { opacity: 0; transform: scale(0.3); } 22% { opacity: 0.85; } 100% { opacity: 0; transform: scale(1.6); } }
.money-spark { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose-hover); box-shadow: 0 0 8px rgb(189 117 131 / 0.9); opacity: 0; animation: money-spark 1.15s cubic-bezier(0.15, 0.75, 0.3, 1) var(--w, 0ms) both; }
.money-spark.warm { left: -2.5px; top: -2.5px; width: 5px; height: 5px; background: var(--text-primary); box-shadow: 0 0 8px rgb(244 238 231 / 0.8); }
@keyframes money-spark {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(4px) scale(0.5); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(1); }
}
.money-check { width: 64px; height: 64px; flex: none; overflow: visible; animation: money-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
@keyframes money-pop { from { opacity: 0; transform: scale(0.7); } }
.money-check-ring { fill: rgb(133 61 74 / 0.22); stroke: var(--accent-hover); stroke-width: 2.5; }
.money-check-tick { fill: none; stroke: var(--text-primary); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: money-tick-in 0.35s 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
@keyframes money-tick-in { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } }
.confirm-success .confirm-title { animation: money-rise 0.4s 0.2s ease-out both; }
@keyframes money-rise { from { opacity: 0; transform: translateY(6px); } }
.money-sweep { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; }
.money-sweep::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 42%; background: linear-gradient(100deg, rgb(244 238 231 / 0) 0%, rgb(244 238 231 / 0.07) 32%, rgb(189 117 131 / 0.22) 50%, rgb(244 238 231 / 0.07) 68%, rgb(244 238 231 / 0) 100%); transform: translateX(-130%) skewX(-14deg); animation: money-sweep 1.1s 0.25s ease-in-out both; }
@keyframes money-sweep { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(380%) skewX(-14deg); } }
@media (prefers-reduced-motion: reduce) { .money-delta, .money-burst, .money-sweep { display: none; } }

/* Навигация вариант Б (бриф п.143): две вкладки внизу, Account полным экраном из угловой кнопки (аватар). Сигналы нового без
   красного кружка: светящаяся вкладка. Золото только у каталожного «New»: деньги и сигналы в семействе акцента и тёплом белом.
   Движутся только transform и opacity; при меньшем движении ореол статичен, луча, появления и веера нет (общее правило выше). */
/* Шапка Library: логотип слева, остаток с «+» справа, мимо угловой кнопки Account. */
.library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 calc(20px + var(--tap)) 0 var(--gutter); min-height: var(--tap); }
.library-balance { position: relative; flex: none; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 2px 0 12px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--border-default); }
.library-balance-amount { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.library-balance-amount[hidden] { display: none; }
.library-balance-unit { color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 400; }
.library-balance .money-delta { z-index: 4; }
.library-topup { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--rose-cta); color: var(--text-primary); font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 rgb(244 238 231 / 0.18); }
.library-topup::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.library-topup:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
/* Чип ожидающей разницы кошелька на кнопке Account: «+1,000», тот же акцент, что у разницы остатка. */
.home-account .account-chip { position: absolute; right: -8px; bottom: -8px; padding: 1px 7px; border-radius: 999px; background: var(--rose-cta); color: var(--text-primary); font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; box-shadow: 0 3px 10px rgb(69 22 33 / 0.45), inset 0 1px 0 rgb(244 238 231 / 0.18); animation: fade 0.3s ease both; }

/* Экран Account: полный экран поверх главного, сверху кошелёк, ниже профиль. */
.account-screen { z-index: 40; touch-action: auto; }
.account-head { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(12px + var(--safe-top)) var(--gutter) 8px 8px; }
.account-title { font-size: var(--fs-display); }
.account-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap-section); padding: 8px 0 calc(32px + var(--safe-bottom)); }
.account-profile { margin: 0 var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.account-profile .shelf-title { margin: 0; }
.account-profile-list { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); }
.account-profile-list .lead { overflow: visible; overflow-wrap: anywhere; color: var(--text-primary); }
.account-profile-list .account-note { justify-content: flex-start; text-align: left; }
.account-profile .btn { width: 100%; }
/* Почта и пароль (п.174): кнопки вместо открытых форм, форма в том же списке по нажатию, после смены одна строка. */
.account-credentials { display: flex; flex-direction: column; gap: 12px; }
.account-credentials .shelf-title { margin: 0; }
.account-credentials-actions { display: flex; flex-direction: column; gap: 8px; }
.account-credentials-actions[hidden], .account-credentials-status[hidden] { display: none; }
.account-credentials-status { justify-content: flex-start; text-align: left; color: var(--text-primary); }

/* Уведомления (п.173): строка в Account и экран со списком событий и способами получения. Новое названо словами, без красных точек. */
.account-notices { margin: 0 var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.account-notices[hidden] { display: none; }
.account-notices .shelf-title { margin: 0; }
.account-notices-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); }
.account-notices-btn { width: 100%; min-height: var(--tap); display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: none; border: 0; color: var(--text-primary); font-size: 16px; text-align: left; cursor: pointer; }
.account-notices-label { flex: 1; }
.account-notices-new { color: var(--text-secondary); font-size: var(--fs-caption); white-space: nowrap; }
.account-notices-new.is-new { color: var(--text-primary); font-weight: 600; }
.notices-body { padding-top: 0; }
.notices-section { margin: 0 var(--gutter); display: flex; flex-direction: column; gap: 12px; }
.notices-section .shelf-title { margin: 0; }
.notices-list { display: flex; flex-direction: column; gap: 12px; }
.notice { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); }
.notice.is-new { border-color: var(--rose-cta); }
.notice-meta { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: var(--fs-caption); }
.notice-new { padding: 0 8px; border-radius: 999px; background: var(--rose-cta); color: var(--text-primary); font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 0.02em; }
.notice-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.notice-body { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-primary); overflow-wrap: anywhere; }
.notices-empty, .notices-loading, .notices-way-text, .notices-way-note { justify-content: flex-start; text-align: left; margin: 0; }
.notices-way-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--r-card); }
.notices-way-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.notices-way-rows { display: flex; flex-direction: column; gap: 2px; }
.notices-error { margin: 0 var(--gutter); }
.notices-retry { margin: 0 var(--gutter); width: auto; align-self: flex-start; }

/* Сигнал вкладки: мини-афиша 2:3 вместо иконки, сама статична; за ней тёплый ореол дышит прозрачностью 35-65% за 2,4 с. */
.home-tab-mark { position: relative; display: grid; place-items: center; width: 22px; height: 22px; }
.home-tab.has-signal .home-tab-mark { width: 20px; height: 30px; margin-top: -8px; }
.tab-thumb { position: relative; z-index: 1; display: block; width: 20px; height: 30px; border-radius: 4px; overflow: hidden; background: var(--placeholder); box-shadow: 0 0 0 1px rgb(244 238 231 / 0.4); }
.tab-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tab-halo { position: absolute; z-index: 0; inset: -10px -14px; border-radius: 50%; background: radial-gradient(closest-side, rgb(214 140 150 / 0.95), rgb(157 74 89 / 0.55) 55%, rgb(157 74 89 / 0) 100%); opacity: 0.5; pointer-events: none; animation: tab-breathe 2.4s ease-in-out infinite; }
@keyframes tab-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } }
.home-tab.has-signal { color: var(--text-primary); }

/* Just Added: акцентная лента в углу афиши (не золото), один проход луча Spotlight, появление пришедшей афиши. */
.story-ribbon { position: absolute; z-index: 3; top: 16px; right: -36px; width: 136px; padding: 3px 0; transform: rotate(38deg); background: var(--rose-cta); color: var(--text-primary); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; box-shadow: 0 2px 10px rgb(69 22 33 / 0.5); pointer-events: none; }
.story-spot { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.story-spot::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; background: linear-gradient(100deg, rgb(255 240 222 / 0) 0%, rgb(255 240 222 / 0.12) 35%, rgb(255 244 230 / 0.42) 50%, rgb(255 240 222 / 0.12) 65%, rgb(255 240 222 / 0) 100%); opacity: 0; transform: translateX(-140%) skewX(-12deg); animation: story-spot 1.4s 0.35s ease-in-out both; }
@keyframes story-spot { 0% { opacity: 0; transform: translateX(-140%) skewX(-12deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-12deg); } }
.story-item.just-added .story-frame { box-shadow: 0 0 0 1px rgb(189 117 131 / 0.7); }
/* На Just Added говорит лента: каталожная метрика (золотое «New» или число покупок) здесь не повторяет «новое». */
.story-item.just-added .story-frame > .metric, .story-item.just-added .story-badges > .metric:not(.metric-free) { display: none; }
.story-item.arrive { animation: story-arrive 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) calc(var(--n, 0) * 90ms + 120ms) both; }
@keyframes story-arrive { from { opacity: 0; transform: translateY(-28px) scale(0.86); } }
@media (prefers-reduced-motion: reduce) { .story-spot { display: none; } }

/* Сезон в Purchased: афиша первой серии со стопкой за ней, число эпизодов, прогресс просмотра. */
.season-item { padding: 8px 8px 0 0; }
.library-panel .story-card.season-card, .story-card.season-card { overflow: visible; }
.season-frame { overflow: visible; box-shadow: 4px -4px 0 -1px var(--surface-card), 8px -8px 0 -2px #41424b; }
.season-frame .story-poster { border-radius: inherit; }
.season-frame::after { border-radius: 0 0 12px 12px; }
.season-count { font-size: 12px; color: var(--text-secondary); letter-spacing: 0.02em; }

/* Пакет сезона поверх экрана: плоская бордовая фольга, луч Spotlight только на фоне, веер афиш листается свайпом. */
.pack-screen { z-index: 60; align-items: center; gap: 16px; padding: calc(56px + var(--safe-top)) 0 calc(20px + var(--safe-bottom)); background: #0c0b0e; touch-action: auto; overflow: hidden; }
.pack-spotlight { position: absolute; top: -8%; left: 50%; width: 130%; height: 100%; transform: translateX(-50%); background: linear-gradient(rgb(255 238 216 / 0.24), rgb(255 238 216 / 0.07) 55%, rgb(255 238 216 / 0)); clip-path: polygon(44% 0, 56% 0, 86% 100%, 14% 100%); filter: blur(14px); pointer-events: none; animation: pack-light 1.2s ease-out both; }
@keyframes pack-light { from { opacity: 0; } }
.pack-close { position: absolute; top: calc(10px + var(--safe-top)); right: 12px; z-index: 3; }
.pack-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 var(--gutter); text-align: center; }
.pack-head-title { font-size: 30px; }
.pack-stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.pack-open { position: relative; width: min(58vw, 228px); max-height: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer; animation: pack-in 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.pack-open:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 6px; border-radius: 6px; }
@keyframes pack-in { from { opacity: 0; transform: translateY(28px) scale(0.94); } }
.pack { position: absolute; inset: 0; filter: drop-shadow(0 18px 36px rgb(0 0 0 / 0.55)); }
.pack-foil { display: block; width: 100%; height: 100%; }
.pack-foil .pack-crimp-top { transform-box: fill-box; transform-origin: 0 100%; transition: transform 0.4s ease-in, opacity 0.4s ease-in; }
.pack-label { position: absolute; inset: 22% 12% 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--text-primary); }
.pack-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.pack-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.05; overflow-wrap: anywhere; }
.pack-count { font-size: 12px; opacity: 0.8; }
.pack-screen.straining .pack-open { animation: pack-strain 0.26s ease-in both; }
@keyframes pack-strain { 0% { transform: translateY(0) scale(1) rotate(0deg); } 35% { transform: translateY(-0.5px) scale(1.012) rotate(0.18deg); } 65% { transform: translateY(-1px) scale(1.022) rotate(-0.25deg); } 100% { transform: translateY(-2px) scale(1.03) rotate(0.12deg); } }
.pack-screen.straining .pack-foil .pack-crimp-top { transform: translateY(-2px) rotate(-2deg); transition: transform 0.26s ease-in, opacity 0.26s ease-in; }
.pack-screen.opening .pack-crimp-top { transform: translateX(-26%) translateY(-40%) rotate(-7deg); opacity: 0; }
.pack-screen.opening .pack-open { pointer-events: none; animation: pack-out 0.5s 0.15s ease-in both; }
@keyframes pack-out { to { opacity: 0; transform: translateY(24%) scale(0.9); } }
.pack-screen.opening .pack-stage { display: grid; place-items: center; }
.pack-screen.opening .pack-stage > * { grid-area: 1 / 1; }
.pack-fan { list-style: none; margin: 0; width: 100%; display: flex; gap: 14px; padding: 8px calc(50% - 76px) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
.pack-fan::-webkit-scrollbar { display: none; }
.pack-card { flex: none; width: 152px; scroll-snap-align: center; }
.pack-screen.special .pack-card { animation: pack-fan 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) calc(var(--i) * 80ms + 160ms) both; }
@keyframes pack-fan { from { opacity: 0; transform: translateY(44px) scale(0.6) rotate(calc((var(--i) - 1) * 7deg)); } }
.pack-card-btn { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.pack-card-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.pack-card-frame { position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; background: var(--placeholder); border: 1px solid var(--border-default); }
.pack-screen.special .pack-card-frame { border-color: rgb(244 238 231 / 0.32); box-shadow: 0 12px 30px rgb(69 22 33 / 0.55); }
.pack-card-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pack-card-frame::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(15 12 14 / 0.85)); }
.pack-card-number { position: absolute; z-index: 1; left: 10px; bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.pack-card-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.12; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pack-hint { margin: 0; }
.pack-hint:empty { display: none; }
.pack-actions { position: relative; z-index: 1; flex: none; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gutter); }
.pack-actions .btn { width: 100%; }
.pack-actions .btn[hidden] { display: none; }
.pack-screen.folding .pack-card { animation: pack-fold 0.6s cubic-bezier(0.5, 0, 0.75, 0) calc(var(--i) * 40ms) both; }
@keyframes pack-fold { to { opacity: 0; transform: translateY(60vh) scale(0.3); } }
.pack-screen.folding .pack-head, .pack-screen.folding .pack-actions, .pack-screen.folding .pack-hint { opacity: 0; transition: opacity 0.3s; }

/* Native bidirectional momentum scrolling, like the unpacked season. */
.confirm-episodes { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; list-style: none; padding: 0 0 10px; margin: 0; max-width: 100%; flex: none; }
.confirm-episode { flex: 0 0 112px; display: flex; flex-direction: column; gap: 6px; }
.confirm-episode img { width: 112px; height: 160px; object-fit: cover; border-radius: 8px; }

/* Story artwork keeps the storefront crop when ownership opens the story menu. */
.storefront-poster, .menu .stage { aspect-ratio: 16 / 10; }
.menu .stage { inset: 0 0 auto; }

/* П.176: подсказка установки и подсказки оплаты на сайте в режиме оболочки приложения. */
.install-steps { margin: 4px 0 18px; padding-left: 22px; color: var(--text-secondary); line-height: 1.5; text-align: left; }
.install-steps li + li { margin-top: 6px; }
.storefront-external, .wallet-external { margin: 12px 0 0; color: var(--text-secondary); font-size: var(--fs-caption); line-height: 1.45; }

.preview-badge { position: fixed; top: 12px; right: 16px; z-index: 100; padding: 6px 12px; border: 1px solid #e8bd76; border-radius: 6px; background: #292315; color: #ffe2a8; font: 600 14px system-ui; pointer-events: none; }

/* Terms consent: native checkbox stays distinct from full-width text inputs. */
.terms-consent { margin: 12px 0; font-size: 14px; }
.terms-consent label { display: flex; align-items: flex-start; gap: 10px; }
.terms-consent input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0; accent-color: var(--accent, #a66b45); }
.terms-consent a { color: inherit; text-decoration: underline; }
.terms-money-summary { font-size: 14px; line-height: 1.5; }