/* Yazme Stories · «Сцена» — стили нового просмотрщика (лента) и полосы в шапке.
   Все правила укоренены в .ysc-, чтобы ничего не утекло на страницы сайта и
   не столкнулось со старым stories.css (.yzs-). Токены — из прототипа
   (терракота #d97757, золото #e2b13c, графит, стекло); шрифты сайта. */

/* ───────────── токены и сброс ───────────── */
.ysc, .ysc-cmp, .ysc-tray, .ysc-stack, .ysc-mebtn, .ysc-fb-scrim, .ysc-toast-body{
  --ysc-bg:#070605; --ysc-ground:#0F0E0D; --ysc-surf:#1A1713; --ysc-surf2:#22211F; --ysc-surf3:#282523;
  --ysc-text:#faf9f5; --ysc-dim:#b9b4a7; --ysc-muted:#8d8878; --ysc-ink:#14110F;
  --ysc-acc:#d97757; --ysc-acc-hi:#e2885f; --ysc-acc-deep:#b3552e; --ysc-acc-soft:rgba(217,119,87,.16);
  --ysc-gold:#e2b13c; --ysc-gold-hi:#f7dd9b; --ysc-gold-deep:#a9761c; --ysc-gold-soft:rgba(226,177,60,.16);
  --ysc-hair:rgba(250,249,245,.08); --ysc-hair2:rgba(250,249,245,.17);
  --ysc-glass:rgba(20,17,15,.42); --ysc-glass-b:rgba(250,249,245,.18);
  --ysc-ring-acc:conic-gradient(from 215deg,#d97757,#efb08c,#b05730,#d97757);
  --ysc-ring-gold:conic-gradient(from 215deg,#e2b13c,#f7dd9b,#a9761c,#e2b13c);
  --ysc-font:var(--yz-font-ui,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  --ysc-disp:var(--yz-font-display,'Unbounded',Inter,sans-serif);
  --ysc-ease:cubic-bezier(.22,1,.36,1);
  --ysc-safe-t:env(safe-area-inset-top,0px); --ysc-safe-b:env(safe-area-inset-bottom,0px);
  --ysc-foot-b:14px;
  --ysc-kb:0px;   /* высота клавиатуры (visualViewport) — ставит scene.js */
}
.ysc, .ysc *, .ysc-cmp, .ysc-cmp *, .ysc-tray, .ysc-tray *, .ysc-stack, .ysc-stack *, .ysc-mebtn, .ysc-mebtn *{
  box-sizing:border-box;
}
/* :where() — нулевая специфичность, чтобы сброс не перебивал стили кнопок ниже */
:where(.ysc, .ysc-cmp, .ysc-tray) button, :where(.ysc-stack, .ysc-mebtn){
  margin:0; padding:0; font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  letter-spacing:normal; text-transform:none; box-shadow:none; min-width:0; min-height:0;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.ysc button:focus-visible, .ysc a:focus-visible, .ysc input:focus-visible, .ysc textarea:focus-visible,
.ysc-cmp button:focus-visible, .ysc-cmp textarea:focus-visible, .ysc-cmp input:focus-visible,
.ysc-tray button:focus-visible, .ysc-stack:focus-visible, .ysc-mebtn:focus-visible{
  outline:2px solid var(--ysc-acc-hi); outline-offset:2px;
}
.ysc svg, .ysc-cmp svg{display:block}
.ysc img{display:block;max-width:100%}
.ysc [hidden], .ysc-cmp [hidden], .ysc-tray[hidden], .ysc-toast-body[hidden]{display:none !important}

/* элементы сайта, которые модуль прячет; и на время просмотра — плавающие меню */
.ysc-hidden-by{display:none !important}
html.ysc-viewing .ysc-hide-now{display:none !important}
.ysc-on.ysc-rel{position:relative}

/* ═══════════════ ПОЛОСА ПОД ШАПКОЙ ═══════════════
   Перенос из stories.js/css (renderTray/alignTray): полоса стоит ПОД
   шапкой первой строкой контента и равняется по колонке сайта
   (--ysc-col / --ysc-inset ставит alignTray). Хит-зоны ≥ 36 px. */
.ysc-tray{--ysc-cell:78px;--ysc-ring-d:64px;
  display:block;width:100%;max-width:var(--ysc-col,none);margin-inline:auto;
  position:relative;z-index:1;background:transparent;border:0}
.ysc-tray.ysc-none{display:none}
.ysc-tray-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding-top:8px;padding-bottom:10px;
  padding-left:calc(env(safe-area-inset-left,0px) + var(--ysc-inset,8px) - (var(--ysc-cell) - var(--ysc-ring-d)) / 2);
  padding-right:calc(env(safe-area-inset-right,0px) + var(--ysc-inset,8px) - (var(--ysc-cell) - var(--ysc-ring-d)) / 2);
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ysc-tray-in::-webkit-scrollbar{display:none}
.ysc-st-cell{flex:none;width:var(--ysc-cell);min-height:36px;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0;cursor:pointer;scroll-snap-align:start;border-radius:12px;font-family:var(--ysc-font)}
.ysc-ring{position:relative;width:var(--ysc-ring-d);height:var(--ysc-ring-d);flex:none;border-radius:50%;
  background:var(--ysc-ring-acc);isolation:isolate}
.ysc-ring.ysc-gold{background:var(--ysc-ring-gold)}
.ysc-ring.ysc-seen, .ysc-ring.ysc-empty{background:rgba(250,249,245,.16)}
/* Буква-заглушка: светлая на графите (контраст ≈ 12:1), а не тёмная на тёмном. */
.ysc-im{position:absolute;inset:3.5px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  font-size:21px;color:var(--ysc-text);border:2px solid var(--yz-bg,#0F0E0D);background-size:cover;
  background-position:center;background-color:#3a3733;overflow:hidden;z-index:1;
  font-family:var(--ysc-font)}
.ysc-im.ysc-y{background-color:#1A1713;color:var(--ysc-gold);font-family:var(--ysc-disp);font-size:15px}
.ysc-im.ysc-p{background-color:#2a2320}
.ysc-ring.ysc-seen .ysc-im{inset:2px}
/* плюс на своём кружке — как в Instagram; хит-зона 36 px через ::after */
.ysc-add{position:absolute;right:0;bottom:0;width:23px;height:23px;border-radius:50%;
  background:var(--ysc-acc);box-shadow:0 0 0 2.5px var(--yz-bg,#0F0E0D),0 2px 8px -2px rgba(0,0,0,.6);
  cursor:pointer;z-index:5}
.ysc-add::before, .ysc-add::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:1px;
  transform:translate(-50%,-50%);pointer-events:none}
.ysc-add::before{width:11px;height:2.5px}
.ysc-add::after{width:2.5px;height:11px}
.ysc-add i{position:absolute;inset:-7px;border-radius:50%}   /* расширенная зона нажатия */
.ysc-st-cell > span:last-child{font-size:12px;line-height:16px;color:var(--yz-muted,#8d8878);
  max-width:var(--ysc-cell);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysc-st-cell:has(.ysc-ring.ysc-seen) > span:last-child{opacity:.62}
/* живое свечение у непросмотренных — один эффект на всю полосу */
.ysc-ring:not(.ysc-seen):not(.ysc-empty)::after{content:'';position:absolute;inset:-5px;border-radius:50%;z-index:-1;
  pointer-events:none;background:radial-gradient(closest-side,rgba(217,119,87,.34),transparent 72%);
  animation:yscHalo 3.6s ease-in-out infinite}
.ysc-ring.ysc-gold:not(.ysc-seen):not(.ysc-empty)::after{background:radial-gradient(closest-side,rgba(226,177,60,.32),transparent 72%)}
@keyframes yscHalo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.14);opacity:.34}}
@media (max-width:380px){ .ysc-tray{--ysc-cell:68px;--ysc-ring-d:56px} }

/* ═══════════════ ШАПКА: КРУЖОК «ТВОЯ» И СТОПКА ═══════════════
   Оба видны только когда полоса уехала за верх экрана (watchTray). */
.ysc-mebtn{position:relative;flex:none;width:0;height:36px;overflow:hidden;opacity:0;transform:scale(.82);
  pointer-events:none;margin:0;
  transition:opacity .22s var(--ysc-ease),transform .3s cubic-bezier(.34,1.56,.64,1),width .26s var(--ysc-ease)}
.ysc-mebtn.ysc-show{opacity:1;transform:none;pointer-events:auto;width:36px;overflow:visible;margin:0 2px 0 0}
.ysc-mebtn i{display:block;width:36px;height:36px;border-radius:999px;
  background:#3a3733 center/cover no-repeat;
  color:var(--ysc-text);font:700 14px/36px var(--ysc-font);font-style:normal;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.28)}
.ysc-mebtn.has::after{content:'';position:absolute;inset:-3px;border-radius:999px;border:2px solid var(--ysc-acc);pointer-events:none}
.ysc-meplus{position:absolute;right:-4px;bottom:-4px;z-index:2;width:18px;height:18px;border-radius:999px;
  display:grid;place-items:center;background:var(--ysc-acc);color:#fff;font:700 13px/1 var(--ysc-font);
  border:2px solid var(--yz-bg,#0F0E0D);cursor:pointer}
.ysc-meplus::after{content:'';position:absolute;inset:-9px;border-radius:50%}   /* хит-зона 36 px */
.ysc-mebtn:active i{transform:scale(.94)}
.ysc-stack{display:flex;align-items:center;flex:none;border-radius:999px;line-height:1;
  opacity:0;transform:scale(.82);pointer-events:none;width:0;overflow:hidden;padding:0;margin:0;height:36px;
  transition:opacity .22s var(--ysc-ease),transform .3s cubic-bezier(.34,1.56,.64,1),width .26s var(--ysc-ease)}
.ysc-stack.ysc-show{opacity:1;transform:none;pointer-events:auto;width:auto;padding:4px 2px;margin-right:4px}
.ysc-stack:hover{background:rgba(250,249,245,.05)}
.ysc-stack i{width:28px;height:28px;border-radius:50%;margin-left:-8px;flex:none;
  border:2px solid var(--yz-bg,#0F0E0D);display:grid;place-items:center;font-size:11px;
  font-weight:700;color:var(--ysc-text);font-style:normal;background:#3a3733 center/cover no-repeat;
  font-family:var(--ysc-font)}
.ysc-stack i:first-child{margin-left:0}
.ysc-stack i.ysc-gold{background-color:#1A1713;color:var(--ysc-gold);font-family:var(--ysc-disp);box-shadow:0 0 0 1.6px var(--ysc-gold)}
.ysc-stack i.ysc-live{box-shadow:0 0 0 1.6px var(--ysc-acc)}
.ysc-stack i.ysc-more{background-color:var(--ysc-surf3);color:var(--ysc-dim);font-size:10px}
.ysc-stack.ysc-fresh i:first-child{box-shadow:0 0 0 1.6px var(--ysc-acc),0 0 14px -2px rgba(217,119,87,.55)}
.ysc-stack.ysc-fresh i.ysc-gold:first-child{box-shadow:0 0 0 1.6px var(--ysc-gold),0 0 14px -2px rgba(226,177,60,.5)}

/* ═══════════════ ЛЕНТА «СЦЕНА» — ОКНО ═══════════════ */
div.ysc, div.ysc-cmp{z-index:2147483000}
.ysc-fb-scrim{position:fixed;inset:0;background:rgba(5,4,4,.7);z-index:2147482999}
.ysc-fb-scrim[hidden]{display:none}
.ysc{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;
  overflow:hidden;background:var(--ysc-bg);color:var(--ysc-text);font-family:var(--ysc-font);
  -webkit-font-smoothing:antialiased;isolation:isolate;color-scheme:dark;
  opacity:0;transition:opacity .22s ease,transform .3s var(--ysc-ease)}
.ysc.ysc-show{opacity:1}
.ysc.ysc-drag{transition:none}
.ysc:focus, .ysc:focus-visible{outline:none}
.ysc::backdrop{background:#070605}
dialog.ysc:not([open]), dialog.ysc-cmp:not([open]){display:none !important}
.ysc.ysc-show{animation:yscOpen .3s cubic-bezier(.23,1,.32,1)}
@keyframes yscOpen{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}

/* лента: вертикальный snap, один экран = один автор */
/* overscroll-behavior:none — без резинового отскока списка на iOS: иначе
   при смахивании вниз лента пружинила И окно ехало по transform */
.ysc-feed{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;
  overscroll-behavior:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ysc-feed::-webkit-scrollbar{display:none}
.ysc-st{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#120C09}
.ysc-fr{position:absolute;inset:0;opacity:0;transition:opacity .28s ease;pointer-events:none}
.ysc-fr.on{opacity:1;pointer-events:auto}
/* невидимый кадр не ловит нажатия — иначе CTA/стикер соседней главы
   перехватывал тап сквозь прозрачный слой */
.ysc-fr:not(.on) *{pointer-events:none !important}
.ysc-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#120C09}
/* ЧИТАЕМОСТЬ. Две подложки, а не одна: верхняя держит шапку и полосу глав,
   нижняя — текст. Прежний градиент был прозрачен ровно там, где и стоит
   текст (46–70 % высоты), и на светлом кадре белые буквы пропадали. */
.ysc-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(7,6,5,.62) 0%,rgba(7,6,5,.10) 22%,rgba(7,6,5,.06) 38%,rgba(7,6,5,.58) 68%,rgba(7,6,5,.96) 100%)}
.ysc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#120C09}
/* Локальная подложка ровно под текстовым блоком: мягкая, вытянутая, с
   запасом за границы .ysc-body (у неё справа 66 px под рейл). Кадр обрезан
   по .ysc-st, так что отрицательные поля наружу не вылезают. */
.ysc-body::before{content:"";position:absolute;left:-40px;right:-80px;bottom:-40px;top:var(--sct,28%);
  background:linear-gradient(to bottom,rgba(7,6,5,0) 0,rgba(7,6,5,.58) 84px,rgba(7,6,5,.74) 240px,rgba(7,6,5,.92) 100%);
  pointer-events:none;z-index:0}
.ysc-body > *{position:relative;z-index:1}
/* --ah — резерв под колонку эфира (ставит scene.js/fitAir по месту, что
   остаётся под текстом и стикером; по умолчанию — 200 / 150 на низких) */
.ysc-body{position:absolute;left:18px;right:66px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:calc(var(--th,90px) + 8px) 0 calc(var(--fh,70px) + var(--ah,200px));pointer-events:none}
.ysc-body.low{justify-content:flex-end}
.ysc-body > *{flex:none}
/* длинный текст над стикером не выталкивает стикер на лицо — режется сам */
.ysc-body.has-stk .ysc-txt{flex:0 1 auto;min-height:0;overflow:hidden}
.ysc-body.center{right:18px;text-align:center;align-items:center}
.ysc-kk{font:600 10px/14px var(--ysc-font);letter-spacing:.18em;text-transform:uppercase;color:var(--ysc-gold)}
.ysc-ttl{font:600 26px/1.18 var(--ysc-disp);letter-spacing:-.02em;text-wrap:balance;
  text-shadow:0 1px 3px rgba(0,0,0,.5),0 2px 24px rgba(0,0,0,.55);
  margin:0;color:var(--ysc-text);overflow-wrap:anywhere}
.ysc-ttl.big{font-size:32px}
.ysc-txt{font:400 16px/1.55 var(--ysc-font);color:rgba(250,249,245,.95);white-space:pre-wrap;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.7);margin:0;overflow-wrap:anywhere}
.ysc-txt.note{font-size:20px;font-weight:500;color:var(--ysc-text);line-height:1.45}
.ysc-cta{pointer-events:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;
  border-radius:999px;background:linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e);color:var(--ysc-ink);
  font:700 14px/1 var(--ysc-font);box-shadow:0 12px 30px rgba(217,119,87,.36);margin-top:6px;text-decoration:none}
.ysc-cta.gold{background:linear-gradient(135deg,#f7dd9b,#e2b13c 45%,#a9761c);box-shadow:0 12px 30px rgba(226,177,60,.36)}
.ysc-body.center .ysc-cta{align-self:center}
@media (max-width:380px){ .ysc-ttl{font-size:22px} .ysc-ttl.big{font-size:27px} }

/* ───── верх: кольцо-прогресс, имя, бейдж, Бёрчи, крестик ───── */
.ysc-top{position:absolute;left:0;right:0;top:0;z-index:6;padding:calc(var(--ysc-safe-t) + 22px) 12px 0;
  pointer-events:none;transition:opacity .22s ease}
.ysc-top > *{pointer-events:auto}
.ysc-who{display:flex;align-items:center;gap:12px;min-height:40px}
.ysc-pr{position:relative;width:54px;height:54px;flex:none}
.ysc-pr svg{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg)}
.ysc-pr svg circle{fill:none;stroke-width:2.5}
.ysc-pr svg .tr{stroke:rgba(250,249,245,.22)}
.ysc-pr svg .pg{stroke:var(--ysc-text);stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:157}
.ysc-ava{position:relative;width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:700 15px/1 var(--ysc-font);color:var(--ysc-text);background:#3a3733 center/cover no-repeat;overflow:hidden}
.ysc-ava.y{background-color:var(--ysc-surf);color:var(--ysc-gold);font:700 15px/1 var(--ysc-disp)}
.ysc-ava.acc{background-color:var(--ysc-acc);color:var(--ysc-ink)}
.ysc-ava.sm{width:30px;height:30px;font-size:12px}
.ysc-ava.xs{width:24px;height:24px;font-size:10px}
.ysc-ava.lg{width:56px;height:56px;font-size:20px}
.ysc-pr .ysc-ava{position:absolute;inset:6px;width:42px;height:42px;font-size:16px}
.ysc-nm{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1}
.ysc-nm b{font:600 14px/18px var(--ysc-font);white-space:nowrap;display:flex;align-items:center;gap:6px;
  color:var(--ysc-text);min-width:0}
.ysc-nm b .nt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysc-nm b .ysc-bdg{flex:none}
/* ссылка-имя персонажа: хит-зона 36 px без сдвига строки (отрицательные поля) */
.ysc-nm b a{color:inherit;text-decoration:none;min-height:36px;margin:-9px 0;padding:9px 0;display:inline-flex;align-items:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ysc-nm s{text-decoration:none;font:400 11px/14px var(--ysc-font);color:rgba(250,249,245,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ysc-nm .ser{font:600 11px/14px var(--ysc-font);color:var(--ysc-gold);letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ysc-bdg{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:999px;font:700 10px/1 var(--ysc-font);
  letter-spacing:.02em;flex:none;color:var(--ysc-ink)}
.ysc-bdg.gold{background:var(--ysc-gold)}
.ysc-bdg.acc{background:var(--ysc-acc)}
.ysc-bdg.ghost{background:rgba(250,249,245,.14);color:var(--ysc-text);border:1px solid rgba(250,249,245,.2)}
.ysc-hx{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.ysc-coin{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:999px;background:var(--ysc-glass);
  border:1px solid var(--ysc-glass-b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font:700 13px/1 var(--ysc-font);color:var(--ysc-gold);font-variant-numeric:tabular-nums;text-decoration:none}
/* монета — один значок на шапку, баланс в шторке и цены подарков (.s — 12 px) */
.ysc-ci{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#f7dd9b,#e2b13c 55%,#a9761c);display:inline-block;
  box-shadow:inset 0 0 0 3px rgba(20,17,15,.35);flex:none;vertical-align:-3px}
.ysc-ci.s{width:12px;height:12px;box-shadow:inset 0 0 0 2px rgba(20,17,15,.35);vertical-align:-1px}
.ysc-coin em{font-style:normal}
.ysc-rbtn{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ysc-glass);
  border:1px solid var(--ysc-glass-b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ysc-text)}
.ysc-rbtn svg{width:18px;height:18px}
/* УЗКИЙ ЭКРАН. В шапке теперь четыре элемента (Бёрчи, пауза, «ещё», крестик):
   на 390 px они съедали имя автора до «Мара». Ужимаем управление, а не имя. */
@media (max-width:440px){
  .ysc-who{gap:9px}
  .ysc-hx{gap:6px}
  .ysc-rbtn{width:32px;height:32px}
  .ysc-rbtn svg{width:16px;height:16px}
  .ysc-coin{height:32px;padding:0 10px 0 7px;gap:5px;font-size:12px}
  .ysc-bdg{height:17px;padding:0 6px;font-size:9px}
}

/* ───── полоса глав сверху ─────
   Была вертикальная лесенка у левого края в 3 px шириной: её не замечали,
   и «сколько ещё листать» из неё не читалось. Теперь — привычные сегменты
   во всю ширину, как в Telegram и Instagram. */
.ysc-seg{position:absolute;left:0;right:0;top:0;z-index:7;display:flex;gap:4px;align-items:center;
  padding:calc(var(--ysc-safe-t) + 9px) 12px 0;pointer-events:none;transition:opacity .22s ease}
.ysc-seg i{flex:1 1 0;min-width:4px;height:3px;border-radius:2px;background:rgba(250,249,245,.32);
  overflow:hidden;position:relative;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.ysc-seg i b{position:absolute;inset:0;background:#faf9f5;transform-origin:left;transform:scaleX(0);
  border-radius:2px}
.ysc-seg i.done b{transform:scaleX(1)}
/* одна глава — полоса не нужна, но место под неё держим: шапка не прыгает */
.ysc-st:not(.multi) .ysc-seg{opacity:0}

/* ───── стрелки глав (только мышь) ───── */
.ysc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:40px;height:40px;border-radius:50%;
  display:none;place-items:center;background:var(--ysc-glass);border:1px solid var(--ysc-glass-b);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ysc-text);opacity:0;transition:opacity .18s ease}
.ysc-nav svg{width:20px;height:20px}
.ysc-nav.prev{left:10px}
.ysc-nav.next{right:10px}
.ysc-nav.next svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .ysc-st.multi .ysc-nav{display:grid}
  .ysc-st.multi:hover .ysc-nav{opacity:1}
}
.ysc-nav[disabled]{opacity:0 !important;pointer-events:none}

/* ───── пауза ───── */
.ysc-st.paused .ysc-seg i.on b{animation:none}
.ysc-pause.on{background:var(--ysc-text);color:var(--ysc-ink);border-color:transparent}
/* подсказка «зажмите» — один раз на человека */
.ysc-hint{position:absolute;left:50%;bottom:22%;transform:translate(-50%,8px);z-index:12;pointer-events:none;
  padding:9px 16px;border-radius:999px;background:rgba(12,10,9,.78);border:1px solid var(--ysc-glass-b);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ysc-text);
  font:600 13px/1 var(--ysc-font);white-space:nowrap;opacity:0;transition:opacity .26s ease,transform .26s ease}
.ysc-hint.on{opacity:1;transform:translate(-50%,0)}
.ysc-hint[hidden]{display:none}

/* ───── рейл справа ───── */
.ysc-rail{position:absolute;right:8px;bottom:calc(var(--ysc-safe-b) + var(--ysc-foot-b) + 8px);z-index:6;display:flex;
  flex-direction:column;align-items:center;gap:16px;transition:opacity .22s ease}
.ysc-rb{width:52px;min-height:48px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ysc-text);position:relative}
.ysc-rb .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transition:transform .18s var(--ysc-ease)}
.ysc-rb .ic svg{width:28px;height:28px}
.ysc-rb .ic.em{font-size:27px;line-height:1}
.ysc-rb small{font:700 12px/14px var(--ysc-font);text-shadow:0 1px 8px rgba(0,0,0,.7);font-variant-numeric:tabular-nums;min-height:14px}
.ysc-rb:active .ic{transform:scale(.9)}
.ysc-rb.on .ic{color:var(--ysc-acc-hi)}
.ysc-rb.gift .ic{color:var(--ysc-gold)}
.ysc-rb.pop .ic{animation:yscPop .5s var(--ysc-ease)}
.ysc-rb[disabled]{opacity:.45;cursor:default}
@keyframes yscPop{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.ysc-flame{position:absolute;left:50%;top:10px;font-size:22px;pointer-events:none;animation:yscFly 1.1s ease-out forwards;will-change:transform,opacity}
@keyframes yscFly{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),-140px) scale(1.15) rotate(var(--rot));opacity:0}}

/* ───── низ: эфир и поле ───── */
.ysc-foot{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 72px calc(var(--ysc-safe-b) + var(--ysc-foot-b)) 16px;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;transition:opacity .22s ease}
.ysc-foot > *{pointer-events:auto}
.ysc-stat{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:var(--ysc-glass);
  border:1px solid var(--ysc-glass-b);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:600 12px/1 var(--ysc-font);
  align-self:flex-start;color:var(--ysc-text);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ysc-air{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px 0 16px;border-radius:999px;background:rgba(250,249,245,.1);
  border:1px solid rgba(250,249,245,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:rgba(250,249,245,.7);
  font:400 14px/1 var(--ysc-font);cursor:text;text-align:left;width:100%}
.ysc-air span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysc-air i{width:32px;height:32px;border-radius:50%;background:var(--ysc-acc);display:grid;place-items:center;color:var(--ysc-ink);
  font-size:16px;font-style:normal;flex:none;transition:background .18s ease}
.ysc-air i svg{width:16px;height:16px}
.ysc-air:active i{background:var(--ysc-acc-hi)}
.ysc-air.guest{color:rgba(250,249,245,.5)}
.ysc-air.guest i{background:rgba(250,249,245,.18);color:var(--ysc-text)}
.ysc-airc{position:absolute;left:14px;right:78px;bottom:calc(var(--fh,70px) + 8px);z-index:5;display:flex;flex-direction:column;
  justify-content:flex-end;gap:8px;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);
  mask-image:linear-gradient(to bottom,transparent,#000 22%);max-height:calc(var(--ah,200px) - 12px);overflow:hidden}
.ysc-lb{display:flex;gap:8px;align-items:flex-start;pointer-events:auto;animation:yscLbIn .4s var(--ysc-ease);max-width:100%;
  transition:opacity .4s}
.ysc-lb .lt{padding:8px 12px;border-radius:16px 16px 16px 4px;background:rgba(20,17,15,.62);border:1px solid rgba(250,249,245,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:400 13px/1.4 var(--ysc-font);color:rgba(250,249,245,.95);
  min-width:0;overflow-wrap:anywhere}
.ysc-lb .lt b{display:block;font:600 11px/14px var(--ysc-font);color:var(--ysc-gold);margin-bottom:1px}
.ysc-lb .lt b.me{color:var(--ysc-acc-hi)}
.ysc-lb.gift .lt{background:linear-gradient(135deg,rgba(226,177,60,.28),rgba(226,177,60,.12));border-color:rgba(226,177,60,.5);color:var(--ysc-gold-hi)}
.ysc-lb.gift .lt b{color:var(--ysc-gold-hi)}
.ysc-lb.vote .lt{border-color:rgba(217,119,87,.45)}
.ysc-lb.fade{opacity:.45}
@keyframes yscLbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ───── стикеры на кадре ─────
   Порядок в теле кадра сверху вниз: текст → стикер → эфир → поле. Стикер
   в нижней части кадра (лицо портрета — выше — свободно), компактный:
   не шире 74 % колонки, слева, 10 px от текста (gap тела). */
.ysc-stk{position:relative;z-index:4;width:74%;max-width:74%;align-self:flex-start;pointer-events:auto;margin:0}
.ysc-stk .sc{padding:12px;border-radius:18px;background:rgba(20,17,15,.62);border:1px solid rgba(250,249,245,.16);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.ysc-stk .sq{font:600 14px/1.3 var(--ysc-disp);letter-spacing:-.01em;margin-bottom:8px;text-wrap:balance;overflow-wrap:anywhere}
.ysc-stk .so{display:flex;flex-direction:column;gap:5px}
.ysc-stk .so button{position:relative;min-height:38px;border-radius:11px;background:rgba(250,249,245,.1);border:1px solid rgba(250,249,245,.16);
  font:600 13px/1.2 var(--ysc-font);color:var(--ysc-text);text-align:left;padding:7px 10px;overflow:hidden;display:flex;align-items:center;
  justify-content:space-between;gap:6px;isolation:isolate}
.ysc-stk .so button > span:first-child{min-width:0;overflow-wrap:anywhere;flex:1}
/* мини-аватары персонажей, выбравших вариант (после голоса) */
.ysc-stk .so button .pv{display:inline-flex;flex:none;pointer-events:none}
.ysc-stk .so button .pv:empty{display:none}
.ysc-stk .so button .pv .ysc-ava{width:16px;height:16px;font-size:7px;border:1.5px solid rgba(20,17,15,.8);margin-left:-5px}
.ysc-stk .so button .pv .ysc-ava:first-child{margin-left:0}
.ysc-stk .so button i{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(217,119,87,.45);transform-origin:left;
  transform:scaleX(0);transition:transform .8s var(--ysc-ease);z-index:-1}
.ysc-stk .so button.win i{background:rgba(217,119,87,.7)}
.ysc-stk .so button em{font-style:normal;font:700 13px/1 var(--ysc-font);opacity:0;transition:opacity .4s;font-variant-numeric:tabular-nums;flex:none}
.ysc-stk.voted .so button em{opacity:1}
.ysc-stk .so button.me::after{content:"✓";margin-left:6px;font-weight:800;flex:none}
.ysc-stk .sn{font:400 11px/14px var(--ysc-font);color:rgba(250,249,245,.62);margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ysc-stk .pn{display:inline-flex}
.ysc-stk .pn .ysc-ava{width:18px;height:18px;font-size:8px;border:1.5px solid var(--ysc-bg);margin-left:-5px}
.ysc-stk .pn .ysc-ava:first-child{margin-left:0}
.ysc-stk.q .sc{padding:12px 12px 10px}
.ysc-stk.q .qi{display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 12px;border-radius:12px;background:rgba(250,249,245,.12);
  color:rgba(250,249,245,.7);font:400 13px/1.2 var(--ysc-font);cursor:text;width:100%}
.ysc-stk.q .qi span{flex:1;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysc-stk.q .qi i{width:30px;height:30px;border-radius:8px;background:var(--ysc-acc);display:grid;place-items:center;color:var(--ysc-ink);flex:none}
.ysc-stk.q .qi i svg{width:16px;height:16px}
/* свой стикер «спроси меня»: вопрос виден, поле неактивно */
.ysc-stk.q.own .qi{cursor:default;opacity:.75;color:rgba(250,249,245,.6)}
.ysc-stk.q.own .qi i{background:rgba(250,249,245,.18);color:var(--ysc-text)}
/* маленькие экраны: стикер, эфир и отступы компактнее */
@media (max-height:700px){
  .ysc-body{padding-bottom:calc(var(--fh,70px) + var(--ah,150px));gap:8px}
  .ysc-airc{max-height:calc(var(--ah,150px) - 12px)}
  .ysc-stk{margin-top:2px}   /* те же 10 px от текста при gap 8 */
  .ysc-stk .sc{padding:10px}
  .ysc-stk .sq{font-size:13px;margin-bottom:6px}
  .ysc-stk .so button{min-height:34px;padding:5px 9px;font-size:12px}
  .ysc-stk.q .qi{height:38px}
  .ysc-txt{font-size:14px;line-height:1.4}
  .ysc-txt.note{font-size:17px}
}

/* ───── удержание: чистый кадр ───── */
.ysc-st.hold .ysc-top, .ysc-st.hold .ysc-rail, .ysc-st.hold .ysc-foot, .ysc-st.hold .ysc-seg,
.ysc-st.hold .ysc-airc, .ysc-st.hold .ysc-stk{opacity:0;transition:opacity .22s ease}
.ysc-st.hold .ysc-bg::after{opacity:.5}
.ysc-st .ysc-airc, .ysc-st .ysc-stk{transition:opacity .22s ease}

/* ───── всплеск подарка ───── */
.ysc-burst{position:absolute;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none}
.ysc-burst b{font-size:120px;line-height:1;animation:yscBurst 1.5s var(--ysc-ease) forwards;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
@keyframes yscBurst{0%{transform:scale(.2);opacity:0}25%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(.9) translateY(-40px);opacity:0}}
.ysc-burst i{position:absolute;left:50%;top:50%;font-size:26px;font-style:normal;animation:yscSpark 1.3s ease-out forwards}
@keyframes yscSpark{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}20%{opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1);opacity:0}}

/* ───── набор подарков по удержанию 🔥 ───── */
.ysc-pick{position:absolute;right:64px;z-index:8;display:flex;flex-wrap:wrap;width:232px;justify-content:center;gap:6px;padding:10px;
  border-radius:20px;background:rgba(20,17,15,.9);border:1px solid rgba(250,249,245,.16);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);transform-origin:right center;animation:yscPickIn .22s var(--ysc-ease)}
.ysc-pick button{width:64px;height:60px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:24px;line-height:1;background:rgba(250,249,245,.06);transition:transform .15s var(--ysc-ease)}
.ysc-pick button:active{transform:scale(1.15)}
.ysc-pick button small{font:700 10px/1 var(--ysc-font);color:var(--ysc-gold)}
.ysc-pick button small.free{color:var(--ysc-dim)}
@keyframes yscPickIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ═══════════════ ШТОРКИ ═══════════════ */
/* pre — узел уже видим (панель за краем): поле можно сфокусировать в
   обработчике тапа; on ставится следующим кадром — панель выезжает.
   Прижимается к visualViewport при клавиатуре (--ysc-kb). */
.ysc-sheet{position:absolute;inset:0;z-index:40;visibility:hidden}
.ysc-sheet.on, .ysc-sheet.pre{visibility:visible}
.ysc-scrim{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .28s ease}
.ysc-sheet.on .ysc-scrim{opacity:1}
.ysc-panel{position:absolute;left:0;right:0;bottom:var(--ysc-kb,0px);max-height:min(86%,calc(100% - var(--ysc-kb,0px) - 24px));
  display:flex;flex-direction:column;background:var(--ysc-surf);
  border-radius:24px 24px 0 0;box-shadow:0 -26px 60px -22px rgba(0,0,0,.9);transform:translateY(102%);transition:transform .34s var(--ysc-ease);
  padding-bottom:calc(var(--ysc-safe-b) + 14px);color:var(--ysc-text);font-family:var(--ysc-font)}
.ysc-sheet.on .ysc-panel{transform:none}
.ysc-panel .hd{flex:none;padding:8px 18px 10px;display:flex;align-items:center;gap:10px;touch-action:none;cursor:grab}
.ysc-panel .hd::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:4px;border-radius:2px;background:rgba(250,249,245,.22);transform:translateX(-50%)}
.ysc-panel .hd h3{font:500 15px/1.2 var(--ysc-disp);margin:12px 0 0;flex:1;min-width:0;color:var(--ysc-text)}
.ysc-panel .hd h3 small{font:400 12px/1 var(--ysc-font);color:var(--ysc-muted);margin-left:6px}
.ysc-panel .hd .ysc-x{margin-top:12px}
.ysc-panel .bd{flex:1;min-height:0;overflow:auto;padding:0 18px;scrollbar-width:none;overscroll-behavior:contain}
.ysc-panel .bd::-webkit-scrollbar{display:none}
.ysc-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ysc-surf3);color:var(--ysc-dim);flex:none}
.ysc-x svg{width:16px;height:16px}
.ysc-pw{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:6px 0 10px}
.ysc-pw h4{font:600 16px/1.25 var(--ysc-disp);margin:8px 0 0;letter-spacing:-.01em}
.ysc-pw p{font:400 13px/1.5 var(--ysc-font);color:var(--ysc-dim);margin:0;max-width:34ch}
.ysc-pw .ysc-ava.lg{margin-top:4px}
/* комментарии */
.ysc-cm{display:flex;gap:10px;padding:10px 0;align-items:flex-start}
.ysc-cm .cb{min-width:0;flex:1}
.ysc-cm .cn{font:600 13px/16px var(--ysc-font);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ysc-cm .cn s{text-decoration:none;font:400 11px/16px var(--ysc-font);color:var(--ysc-muted)}
.ysc-cm .cn .ysc-bdg{height:16px;font-size:9px}
.ysc-cm .ct{font:400 14px/1.45 var(--ysc-font);color:rgba(250,249,245,.9);margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.ysc-cm.gift .ct, .ysc-cm.vote .ct{display:inline-block;margin-top:6px;padding:8px 12px;border-radius:14px;background:var(--ysc-gold-soft);
  border:1px solid rgba(226,177,60,.35);color:var(--ysc-gold-hi)}
.ysc-cm.vote .ct{background:var(--ysc-acc-soft);border-color:rgba(217,119,87,.4);color:var(--ysc-text)}
.ysc-cm .ca{display:flex;gap:4px;align-items:center;flex:none;margin-top:-2px}
.ysc-cm .ca button{min-width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:0 8px;color:var(--ysc-muted);font:600 12px/1 var(--ysc-font)}
.ysc-cm .ca button svg{width:16px;height:16px}
.ysc-cm .ca button.on{color:var(--ysc-acc-hi)}
.ysc-cm .ca button.del:hover{color:#e5484d}
.ysc-cm.link{cursor:pointer}
.ysc-cin{display:flex;gap:8px;align-items:center;padding:12px 18px 0;flex:none;border-top:1px solid var(--ysc-hair)}
.ysc-cin.noline{border-top:0}
.ysc-cin input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid var(--ysc-hair2);background:var(--ysc-surf2);color:var(--ysc-text);
  padding:0 16px;font:400 14px/1 var(--ysc-font);margin:0;outline-offset:2px}
.ysc-cin input::placeholder{color:var(--ysc-muted)}
.ysc-cin input:disabled{opacity:.7}
.ysc-cin button{width:44px;height:44px;border-radius:50%;background:var(--ysc-acc);color:var(--ysc-ink);display:grid;place-items:center;flex:none}
.ysc-cin button:disabled{opacity:.5;cursor:default}
.ysc-cin button svg{width:18px;height:18px}
.ysc-qr{display:flex;gap:8px;padding:10px 18px 2px;overflow:auto;scrollbar-width:none;flex:none}
.ysc-qr::-webkit-scrollbar{display:none}
.ysc-qr button{flex:none;height:36px;padding:0 12px;border-radius:999px;background:var(--ysc-surf2);border:1px solid var(--ysc-hair);
  font:500 13px/1 var(--ysc-font);color:var(--ysc-dim)}
.ysc-more-btn{display:block;width:100%;height:40px;border-radius:12px;background:var(--ysc-surf2);color:var(--ysc-dim);font:600 13px/1 var(--ysc-font);margin:6px 0}
/* строки-опции */
.ysc-opt{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ysc-hair);text-align:left;width:100%;min-height:56px;color:var(--ysc-text)}
.ysc-opt:last-child{border-bottom:0}
.ysc-opt .oi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--ysc-surf2);color:var(--ysc-text);flex:none;font-size:20px;font-style:normal}
.ysc-opt .oi.g{background:var(--ysc-gold-soft);color:var(--ysc-gold)}
.ysc-opt .oi.a{background:var(--ysc-acc-soft);color:var(--ysc-acc-hi)}
.ysc-opt .ot{flex:1;min-width:0}
.ysc-opt .ot b{display:block;font:600 14px/18px var(--ysc-font)}
.ysc-opt .ot span{display:block;font:400 12px/16px var(--ysc-font);color:var(--ysc-muted);margin-top:2px}
.ysc-opt .ov{font:600 13px/1 var(--ysc-font);color:var(--ysc-dim);flex:none;font-variant-numeric:tabular-nums}
.ysc-opt.on .ov, .ysc-opt.on .ot b{color:var(--ysc-acc-hi)}
.ysc-opt:disabled{opacity:.55;cursor:default}
.ysc-opt.danger .ot b{color:#e5484d}
.ysc-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:999px;font:700 15px/1 var(--ysc-font);width:100%;
  transition:transform .15s var(--ysc-ease);text-decoration:none}
.ysc-btn:active{transform:scale(.98)}
.ysc-btn:disabled{opacity:.55;cursor:default}
.ysc-btn.acc{background:linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e);color:var(--ysc-ink);box-shadow:0 12px 30px rgba(217,119,87,.3)}
.ysc-btn.gold{background:linear-gradient(135deg,#f7dd9b,#e2b13c 45%,#a9761c);color:var(--ysc-ink);box-shadow:0 12px 30px rgba(226,177,60,.3)}
.ysc-btn.ghost{background:var(--ysc-surf2);border:1px solid var(--ysc-hair2);color:var(--ysc-text)}
.ysc-btn.danger{background:#c2553a;color:#fff}
.ysc-btn.sm{height:40px;font-size:13px;width:auto;padding:0 16px}
.ysc-stack-v{display:flex;flex-direction:column;gap:10px;padding:8px 0 4px}
.ysc-sfoot{padding:12px 18px 0;flex:none}
.ysc-note{font:400 12px/1.5 var(--ysc-font);color:var(--ysc-muted);text-align:center;padding:10px 0 0;margin:0}
.ysc-chips{display:flex;gap:8px;flex-wrap:wrap}
.ysc-chip{height:36px;padding:0 14px;border-radius:999px;background:var(--ysc-surf2);border:1px solid var(--ysc-hair);font:600 13px/1 var(--ysc-font);
  color:var(--ysc-dim);display:inline-flex;align-items:center;gap:6px}
.ysc-chip.on{background:var(--ysc-acc-soft);border-color:var(--ysc-acc);color:var(--ysc-acc-hi)}
.ysc-lbl{font:600 11px/14px var(--ysc-font);letter-spacing:.12em;text-transform:uppercase;color:var(--ysc-muted);margin:14px 0 8px}
/* каталог подарков в шторке */
/* «Твой баланс · ◉ 500 Бёрчей — Пополнить» */
.ysc-gbal{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:var(--ysc-surf2);margin-top:4px}
.ysc-gbal .bl{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;font:400 15px/1.2 var(--ysc-font)}
.ysc-gbal .bl s{text-decoration:none;color:var(--ysc-muted)}
.ysc-gbal b{font:700 15px/1 var(--ysc-font);color:var(--ysc-gold);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ysc-gbal a{color:var(--ysc-acc-hi);font:600 13px/1 var(--ysc-font);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;flex:none}
.ysc-gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ysc-gifts button{padding:14px 8px 12px;border-radius:16px;background:var(--ysc-surf2);border:1.5px solid var(--ysc-hair);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:84px}
.ysc-gifts button:disabled{opacity:.45;cursor:default}
.ysc-gifts button.na{opacity:.55}
.ysc-gifts button b{font-size:30px;line-height:1}
.ysc-gifts button span{font:700 12px/1 var(--ysc-font);color:var(--ysc-gold);display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums}
.ysc-gifts button span.free{color:var(--ysc-dim)}
.ysc-gtop{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.ysc-gtop i{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;background:var(--ysc-gold-soft);
  border:1px solid rgba(226,177,60,.35);font:600 12px/1 var(--ysc-font);color:var(--ysc-gold-hi);font-style:normal}
/* список зрителей */
.ysc-vrow{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--ysc-hair);min-height:52px}
.ysc-vrow:last-child{border-bottom:0}
.ysc-vrow.link{cursor:pointer}
.ysc-vtx{flex:1;min-width:0}
.ysc-vtx b{display:block;font:600 14px/18px var(--ysc-font)}
.ysc-vtx small{display:block;font:400 12px/16px var(--ysc-font);color:var(--ysc-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ysc-vem{font-size:17px;flex:none}

/* ───── тост внутри окна ───── */
.ysc-toast{position:absolute;left:50%;bottom:calc(var(--ysc-safe-b) + 96px + var(--ysc-kb,0px));transform:translate(-50%,12px);z-index:60;max-width:calc(100% - 32px);
  padding:12px 16px;border-radius:14px;background:rgba(26,23,19,.96);border:1px solid rgba(250,249,245,.14);box-shadow:0 20px 50px rgba(0,0,0,.6);
  font:500 13px/1.35 var(--ysc-font);color:var(--ysc-text);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s var(--ysc-ease);
  display:flex;align-items:center;gap:10px}
.ysc-toast.on{opacity:1;transform:translate(-50%,0)}
.ysc-toast.warn{border-color:rgba(226,177,60,.5)}
/* тот же тост, когда окно закрыто (например, «История недоступна») */
.ysc-toast-body{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);transform:translate(-50%,14px);z-index:2147483200;
  max-width:min(520px,calc(100vw - 32px));padding:12px 16px;border-radius:14px;background:rgba(26,23,19,.96);color:var(--ysc-text);
  border:1px solid rgba(250,249,245,.14);box-shadow:0 18px 44px -18px rgba(0,0,0,.9);font:500 13px/1.35 var(--ysc-font);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .26s var(--ysc-ease)}
.ysc-toast-body.on{opacity:1;transform:translate(-50%,0)}

/* ───── конец ленты ───── */
.ysc-end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;padding:40px 32px;text-align:center;
  background:radial-gradient(60% 40% at 50% 35%,rgba(217,119,87,.25),transparent 70%),var(--ysc-ground)}
.ysc-end h2{font:600 24px/1.2 var(--ysc-disp);letter-spacing:-.02em;margin:0}
.ysc-end p{color:var(--ysc-dim);font-size:14px;line-height:1.5;max-width:30ch;margin:0}
.ysc-end .ysc-btn{width:auto;padding:0 26px}

/* ═══════════════ НА БОЛЬШОМ ЭКРАНЕ — КАРТОЧКА ═══════════════ */
@media (min-width:900px){
  .ysc{position:fixed;inset:0;margin:auto;width:430px;height:min(900px,92vh);border-radius:30px;
    box-shadow:0 50px 140px rgba(0,0,0,.75),0 0 0 1px rgba(250,249,245,.1);--ysc-safe-t:0px;--ysc-safe-b:0px}
  .ysc::backdrop{background:radial-gradient(70% 60% at 50% 40%,rgba(217,119,87,.12),transparent 70%),rgba(7,6,5,.86)}
  .ysc-fb-scrim{background:rgba(7,6,5,.86)}
  /* композер — своим блоком в конце файла (иначе его перебивает
     полноэкранное правило .ysc-cmp ниже) */
}

/* ═══════════════ КОМПОЗЕР ═══════════════
   Как в stories.js: кадр во весь экран, текст на нём, круглые кнопки,
   таблетки внизу — плюс блок «Стикер». */
.ysc-cmp{position:fixed;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:0;border:0;overflow:hidden;
  background:var(--ysc-bg);color:var(--ysc-text);font-family:var(--ysc-font);display:flex;flex-direction:column;opacity:0;
  transition:opacity .2s ease;isolation:isolate;color-scheme:dark}
.ysc-cmp.ysc-show{opacity:1}
.ysc-cmp::backdrop{background:#070605}
.ysc-cmp:focus{outline:none}
.ysc-cstage{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#1A1713;display:flex;align-items:center;
  justify-content:center;padding:calc(var(--ysc-safe-t) + 70px) 24px 260px}
.ysc-cstage::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,6,5,.35),transparent 30%,transparent 55%,rgba(7,6,5,.75));pointer-events:none}
.ysc-cstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ysc-ctx{position:relative;z-index:1;width:100%;max-height:44vh;background:none;border:0;resize:none;color:var(--ysc-text);text-align:center;
  font:500 20px/1.35 var(--ysc-font);text-shadow:0 2px 12px rgba(0,0,0,.6);outline:none;padding:0;margin:0;overflow:auto;white-space:pre-wrap}
.ysc-ctx::placeholder{color:rgba(250,249,245,.6)}
.ysc-chud{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(var(--ysc-safe-t) + 12px) 12px 0}
.ysc-chud .tools{display:flex;gap:8px}
.ysc-cbot{position:absolute;left:0;right:0;bottom:var(--ysc-kb,0px);z-index:3;padding:0 16px calc(var(--ysc-safe-b) + 14px);display:flex;flex-direction:column;gap:10px}
.ysc-sw{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.ysc-sw::-webkit-scrollbar{display:none}
.ysc-sw button{width:46px;height:46px;flex:none;border-radius:50%;background-size:cover;background-position:center;border:2px solid transparent;
  box-shadow:0 0 0 1px var(--ysc-hair2)}
.ysc-sw button[aria-pressed="true"]{border-color:var(--ysc-text)}
.ysc-cchips{display:flex;gap:8px;flex-wrap:wrap}
.ysc-cchip{height:36px;padding:0 14px;border-radius:999px;background:var(--ysc-glass);border:1px solid var(--ysc-glass-b);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:600 13px/1 var(--ysc-font);color:var(--ysc-text);
  display:inline-flex;align-items:center;gap:6px;max-width:100%}
.ysc-cchip.on{background:var(--ysc-acc-soft);border-color:var(--ysc-acc);color:var(--ysc-acc-hi)}
.ysc-cchip.gold{border-color:rgba(226,177,60,.5);color:var(--ysc-gold)}
.ysc-chint{font:400 12px/1.45 var(--ysc-font);color:rgba(250,249,245,.7);margin:0;text-shadow:0 1px 8px rgba(0,0,0,.7);min-height:17px}
.ysc-cgo{height:50px;border-radius:999px;background:linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e);color:var(--ysc-ink);
  font:700 15px/1 var(--ysc-font);box-shadow:0 12px 30px rgba(217,119,87,.3);width:100%}
.ysc-cgo:disabled{opacity:.6;cursor:default}
/* редактор стикера */
.ysc-cstk{border-radius:18px;background:rgba(20,17,15,.72);border:1px solid rgba(250,249,245,.14);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);padding:12px;display:flex;flex-direction:column;gap:8px}
.ysc-cstk .tabs{display:flex;gap:6px}
.ysc-cstk .tabs button{flex:1;height:36px;border-radius:10px;background:rgba(250,249,245,.06);font:600 13px/1 var(--ysc-font);color:var(--ysc-dim)}
.ysc-cstk .tabs button.on{background:var(--ysc-acc-soft);color:var(--ysc-acc-hi);box-shadow:inset 0 0 0 1px var(--ysc-acc)}
.ysc-cstk input{height:40px;border-radius:10px;border:1px solid var(--ysc-hair2);background:var(--ysc-surf2);color:var(--ysc-text);padding:0 12px;
  font:400 14px/1 var(--ysc-font);width:100%;margin:0;transition:box-shadow .15s ease,border-color .15s ease}
.ysc-cstk input::placeholder{color:var(--ysc-muted)}
/* фокус полей композера — без грубой рамки: текст на кадре — ничего,
   поле опроса/вопроса — мягкое кольцо; клавиатурный фокус кнопок остаётся */
.ysc-cmp textarea.ysc-ctx:focus, .ysc-cmp textarea.ysc-ctx:focus-visible{outline:none;box-shadow:none}
.ysc-cmp .ysc-cstk input:focus, .ysc-cmp .ysc-cstk input:focus-visible{outline:none;border-color:rgba(217,119,87,.45);
  box-shadow:0 0 0 2px rgba(217,119,87,.35)}
.ysc-cstk .row{display:flex;gap:6px;align-items:center}
.ysc-cstk .row button{width:36px;height:36px;border-radius:10px;background:rgba(250,249,245,.08);color:var(--ysc-dim);font-size:18px;line-height:1;flex:none}
.ysc-cstk .addo{height:36px;padding:0 14px;align-self:flex-start;border-radius:10px;background:rgba(250,249,245,.06);font:600 13px/1 var(--ysc-font);color:var(--ysc-dim)}
.ysc-cstk .sub{font:400 11px/14px var(--ysc-font);color:var(--ysc-muted)}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  .ysc-flame, .ysc-rb.pop .ic, .ysc-lb, .ysc-burst b, .ysc-burst i, .ysc-pick, .ysc-ring::after, .ysc.ysc-show{animation:none !important}
  .ysc-fr, .ysc-panel, .ysc-scrim, .ysc-toast, .ysc-toast-body, .ysc, .ysc-cmp, .ysc-mebtn, .ysc-stack, .ysc-seg i b, .ysc-lb,
  .ysc-stk .so button i, .ysc-stk .so button em{transition:none !important}
  .ysc-feed{scroll-behavior:auto}
}

/* ═══════════════ БОЛЬШОЙ ЭКРАН · КОМПОЗЕР КАРТОЧКОЙ ═══════════════
   Этот блок стоит ПОСЛЕ правил композера намеренно: раньше @media
   объявлялся выше, и полноэкранное правило .ysc-cmp (та же
   специфичность, но ниже по файлу) его перебивало — на компьютере
   публикация открывалась во весь монитор. */
@media (min-width:900px){
  .ysc-cmp{position:fixed;inset:0;margin:auto;width:430px;height:min(900px,92vh);max-width:430px;max-height:92vh;
    border-radius:30px;overflow:hidden;box-shadow:0 50px 140px rgba(0,0,0,.75),0 0 0 1px rgba(250,249,245,.1);
    --ysc-safe-t:0px;--ysc-safe-b:0px}
  .ysc-cmp::backdrop{background:radial-gradient(70% 60% at 50% 40%,rgba(217,119,87,.12),transparent 70%),rgba(7,6,5,.86)}
  /* кадр и текст считаются от карточки, а не от окна браузера */
  .ysc-cstage{padding:70px 22px 250px}
  .ysc-ctx{max-height:34%;font-size:19px}
  .ysc-cstk{max-height:none}
  .ysc-cbot{padding:0 14px 14px}
}

/* ═══════════════ СЛОИ КАДРА — РЕДАКТОР ИСТОРИЙ (27.09.2026) ═══════════════
   Общие для ленты и редактора (editor.js): что автор собрал, то зритель и
   видит. Координаты — доли кадра (--x/--y), размер — в --u (1 % ширины
   кадра, ставит scene.js). Шрифты — из ассетов сайта, woff2 с кириллицей. */
@font-face{font-family:'YZS Playfair';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/PlayfairDisplay-Bold.woff2) format('woff2')}
@font-face{font-family:'YZS Russo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/RussoOne-Regular.woff2) format('woff2')}
@font-face{font-family:'YZS Onest';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Onest-ExtraBold.woff2) format('woff2')}
@font-face{font-family:'YZS Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Manrope-Medium.woff2) format('woff2')}

.yl-stage{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;--u:3.9px;
  font-family:var(--ysc-font,Inter,sans-serif);-webkit-font-smoothing:antialiased;color:#fff}
.yl{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--k,1));transform-origin:50% 50%;
  pointer-events:none;will-change:transform}
/* надпись */
.yl-t{width:max-content;max-width:calc(var(--u) * var(--w,84));font-size:calc(var(--u) * var(--z,7));line-height:1.24;
  color:var(--c);white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;text-align:center}
.yl-t.a-l{text-align:left} .yl-t.a-r{text-align:right}
.yl-in{white-space:pre-wrap}
.yl-t i{font-style:normal}
.yl-t.f-classic{font-family:Inter,var(--ysc-font),sans-serif;font-weight:700;letter-spacing:-.01em}
.yl-t.f-modern{font-family:'Unbounded',var(--ysc-disp),sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.14}
.yl-t.f-serif{font-family:'YZS Playfair','Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;line-height:1.16}
.yl-t.f-neon{font-family:'YZS Onest',Inter,sans-serif;font-weight:800;letter-spacing:.005em}
.yl-t.f-type{font-family:ui-monospace,'SF Mono','Roboto Mono','Courier New',monospace;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.yl-t.f-poster{font-family:'YZS Russo',Inter,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
.yl-t.f-soft{font-family:'YZS Manrope',Inter,sans-serif;font-weight:500;line-height:1.32}
.yl-t.f-wide{font-family:'Unbounded',var(--ysc-disp),sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em;line-height:1.3}
/* подложки: 0 — без (лёгкая тень), 1 — плашка по строкам, 2 — полупрозрачный блок, 3 — обводка */
.yl-t.m0{text-shadow:0 .03em .1em rgba(0,0,0,.42),0 0 .5em rgba(0,0,0,.18)}
.yl-t.m1 .yl-in{background:var(--c);color:var(--tc);-webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding:.1em .34em;border-radius:.26em;line-height:1.52}
.yl-t.m1{line-height:1.52}
.yl-t.m2{background:rgba(12,10,9,.52);padding:.42em .62em;border-radius:.5em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.yl-t.m3{-webkit-text-stroke:.16em var(--tc);paint-order:stroke fill}
.yl-t.m3.f-neon, .yl-t.m0.f-neon{color:#fff;-webkit-text-stroke:0;
  text-shadow:0 0 .06em #fff,0 0 .2em var(--c),0 0 .45em var(--c),0 0 .9em var(--c)}
/* эмодзи */
.yl-e{font-size:calc(var(--u) * var(--z,16));line-height:1;filter:drop-shadow(0 .04em .1em rgba(0,0,0,.35));
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
/* метки: #, @, место, время, ссылка */
.yl-g{display:inline-flex;align-items:center;gap:calc(var(--u) * 1.2);height:calc(var(--u) * 10);padding:0 calc(var(--u) * 3.2);
  border-radius:calc(var(--u) * 2.4);font:800 calc(var(--u) * 4.6)/1 var(--ysc-disp,'Unbounded',sans-serif);
  letter-spacing:-.01em;white-space:nowrap;text-decoration:none;text-transform:uppercase;
  background:#fff;color:#14110f;box-shadow:0 calc(var(--u)*.8) calc(var(--u)*3) rgba(0,0,0,.25)}
.yl-g span{max-width:calc(var(--u) * 70);overflow:hidden;text-overflow:ellipsis}
.yl-g .yl-gi{font:inherit;font-weight:800}
.yl-g .yl-gs{width:1.1em;height:1.1em;flex:none}
.yl-g.st0 .yl-gi, .yl-g.st0 .yl-gs, .yl-g.st0 span{background:linear-gradient(120deg,#e2885f,#d97757 40%,#b3552e 70%,#e2b13c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.yl-g.st0 .yl-gs{color:#d97757;-webkit-background-clip:border-box;background:none}
.yl-g.st1{background:rgba(20,17,15,.55);color:#fff;border:1px solid rgba(250,249,245,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.yl-g.st2{background:linear-gradient(135deg,#e2885f,#d97757 45%,#b3552e);color:#14110f}
.yl-g.st3{background:transparent;color:#fff;box-shadow:none;border:calc(var(--u)*.6) solid #fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.yl-g.g-time{font-variant-numeric:tabular-nums;font-size:calc(var(--u) * 6);height:calc(var(--u) * 12)}
a.yl-g{pointer-events:auto;cursor:pointer}
.yl-g.g-link span{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.14em;text-transform:none}
/* рисунок */
.yl-d{left:0;top:0;width:100%;height:100%;transform:none;overflow:visible}
.yl-d path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.yl-d path.mk{opacity:.55;stroke-linecap:square}
.yl-d path.nb{opacity:.22} .yl-d path.nm{opacity:.55}
/* интерактивный стикер в своём слое */
.yl-s{width:calc(var(--u) * 76);pointer-events:auto}
.yl-s .ysc-stk{width:100%;max-width:100%;align-self:auto}
.ysc-st.hold .yl-s .ysc-stk{opacity:1}
/* кадр из редактора — подложка светлее: надписи сами держат контраст */
.ysc-fr.lay .ysc-bg::after{background:linear-gradient(to bottom,rgba(7,6,5,.5) 0%,rgba(7,6,5,0) 16%,rgba(7,6,5,0) 78%,rgba(7,6,5,.55) 100%)}
.ysc-bg.grad{background-size:auto}
.ysc-fr.lay .ysc-body{z-index:3}

/* анимации надписей — играют, когда кадр на экране */
.ysc-fr.on .yl-t.an-type i, .yl-stage.play .yl-t.an-type i{opacity:0;animation:ylType .01s linear forwards;animation-delay:calc(var(--i) * 45ms + 250ms)}
@keyframes ylType{to{opacity:1}}
.ysc-fr.on .yl-t.an-pop, .yl-stage.play .yl-t.an-pop{animation:ylPop .6s cubic-bezier(.34,1.56,.64,1) both .15s}
@keyframes ylPop{from{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(calc(var(--k,1) * .4))}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--k,1))}}
.ysc-fr.on .yl-t.an-glow, .yl-stage.play .yl-t.an-glow{animation:ylGlow 1.8s ease-in-out infinite alternate}
@keyframes ylGlow{from{filter:brightness(1) drop-shadow(0 0 0 transparent)}to{filter:brightness(1.18) drop-shadow(0 0 .25em var(--c))}}
.ysc-fr.on .yl-t.an-wave i, .yl-stage.play .yl-t.an-wave i{display:inline-block;animation:ylWave 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * 60ms)}
@keyframes ylWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-.14em)}}

/* ───── новые стикеры: викторина, шкала, отсчёт ───── */
.ysc-stk .qz{font:700 10px/1 var(--ysc-font);letter-spacing:.16em;text-transform:uppercase;color:var(--ysc-gold);margin-bottom:6px}
.ysc-stk.quiz .so button{justify-content:flex-start;gap:8px}
.ysc-stk.quiz .so button > span:not(.pv){flex:1;min-width:0;overflow-wrap:anywhere;text-align:left;position:relative;z-index:1}
.ysc-stk.quiz .ql{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font:800 11px/1 var(--ysc-font);
  background:rgba(250,249,245,.16);color:var(--ysc-text);position:relative;z-index:1}
.ysc-stk.quiz .so button.ok{border-color:#5fd08a;background:rgba(95,208,138,.2)}
.ysc-stk.quiz .so button.ok i{background:rgba(95,208,138,.42)}
.ysc-stk.quiz .so button.ok .ql{background:#5fd08a;color:#0c2415}
.ysc-stk.quiz .so button.bad{border-color:#ff6b6b;background:rgba(255,107,107,.18)}
.ysc-stk.quiz .so button.bad i{background:rgba(255,107,107,.35)}
.ysc-stk.quiz .so button.bad .ql{background:#ff6b6b;color:#2a0b0b}
.ysc-stk.quiz .so button.me::after{content:none}
.ysc-stk.quiz .so button.ok::after{content:"✓";margin-left:6px;font-weight:800;flex:none;position:relative;z-index:1}
.ysc-stk.quiz .so button.bad::after{content:"✗";margin-left:6px;font-weight:800;flex:none;position:relative;z-index:1}
.ysc-stk.shake{animation:yscShake .42s ease}
@keyframes yscShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ysc-stk.sl .sc{padding:14px 14px 12px}
.ysc-stk.sl .sq{text-align:center;margin-bottom:14px}
.ysc-stk .slt{position:relative;height:30px;margin:4px 12px 2px;cursor:pointer;touch-action:none;outline:none}
.ysc-stk .slt::before{content:"";position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:99px;background:rgba(250,249,245,.2)}
.ysc-stk .slt .fill{position:absolute;left:0;top:50%;height:8px;margin-top:-4px;border-radius:99px;width:0;
  background:linear-gradient(90deg,#e2b13c,#d97757 60%,#ff5c7a)}
.ysc-stk .slt .avg{position:absolute;top:50%;width:4px;height:20px;margin:-10px 0 0 -2px;border-radius:3px;background:#fff;
  box-shadow:0 0 0 2px rgba(20,17,15,.6)}
.ysc-stk .slt .th{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:30px;line-height:1;font-weight:400;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));transition:left .25s var(--ysc-ease),font-size .15s ease;pointer-events:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ysc-stk .slt.drag .th{transition:none}
.ysc-stk .slt:focus-visible{outline:2px solid var(--ysc-acc-hi);outline-offset:6px;border-radius:12px}
.ysc-stk.sl .sn{justify-content:center;text-align:center}
.ysc-stk.cd .sq{text-align:center}
.ysc-stk .cdd{display:flex;justify-content:center;gap:6px}
.ysc-stk .cdc{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:46px;padding:8px 4px 6px;border-radius:12px;
  background:linear-gradient(160deg,rgba(226,177,60,.28),rgba(217,119,87,.22));border:1px solid rgba(250,249,245,.14)}
.ysc-stk .cdc b{font:800 22px/1 var(--ysc-disp);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ysc-stk .cdc small{font:600 9px/1 var(--ysc-font);letter-spacing:.12em;text-transform:uppercase;color:rgba(250,249,245,.7)}
.ysc-stk.cd.done .cdc{background:linear-gradient(160deg,rgba(95,208,138,.3),rgba(95,208,138,.12))}
.ysc-stk.cd .sn{justify-content:center}
@media (prefers-reduced-motion:reduce){
  .ysc-fr.on .yl-t, .ysc-fr.on .yl-t i, .yl-stage.play .yl-t, .yl-stage.play .yl-t i, .ysc-stk.shake{animation:none !important;opacity:1 !important}
}