/* Бот-монтажёр, мини-приложение. Стиль «Аркада» (дизайн/1_аркада.html): толстые кнопки, которые нажимаются,
   наклейки с опытом, лайм и чёрный. Тема ставится скриптом в data-theme: из Telegram или из настроек системы. */
:root{--bg:#ECEEF1;--card:#FFFFFF;--ink:#121317;--mut:#585E68;--line:#D6DAE0;--lip:#CBCFD6;--pri:#C6F03A;--pri-lip:#8FB01D;
  --on:#121317;--xp:#FFD43B;--xp-lip:#E2A900;--off:#E2E5EA;--bad:#FF6A55;--bad-lip:#C2402F;
  --f-head:'Unbounded',system-ui,sans-serif;--f-body:'Rubik',system-ui,-apple-system,sans-serif;
  --safe-t:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --safe-b:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));color-scheme:light}
:root[data-theme=dark]{--bg:#0E0F12;--card:#1C1E23;--ink:#F3F4F6;--mut:#A4AAB2;--line:#2E3138;--lip:#050507;--pri-lip:#6E8B0F;--off:#2A2D33;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{color:var(--ink);font:400 16px/1.4 var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit;touch-action:manipulation}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.ic{flex:none;display:block}
.grow{flex:1}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.scr{flex:1;display:flex;flex-direction:column;padding:calc(10px + var(--safe-t)) 20px 0}
/* Only a new screen slides in, short and small: a button under the finger barely moves. */
.scr.in{animation:scr-in .18s cubic-bezier(.2,.8,.2,1)}
.scr.back{animation:scr-back .18s cubic-bezier(.2,.8,.2,1)}
@keyframes scr-in{from{transform:translateX(6px)}}
@keyframes scr-back{from{transform:translateX(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes bump{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.bump{animation:bump .45s}
.stripes{background-color:var(--pri);background-image:linear-gradient(45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%);background-size:16px 16px;animation:stripe .7s linear infinite}
@keyframes stripe{to{background-position:16px 0}}

/* Верхняя строка: шаги и опыт */
.a-top{display:flex;align-items:center;gap:12px;min-height:42px}
.a-wm{font-size:22px;color:var(--ink)}
.a-back{flex:none;width:40px;height:40px;border-radius:14px;background:var(--card);box-shadow:0 3px 0 var(--lip);display:grid;place-items:center}
.a-steps{flex:1;display:flex;gap:6px}
.a-steps i{flex:1;height:12px;border-radius:7px;background:var(--off)}
.a-steps i.d{background:var(--ink)}
.a-steps i.n{background:color-mix(in srgb,var(--ink) 40%,var(--off))}
.a-xp{flex:none;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 6px;border-radius:17px;background:var(--card);box-shadow:0 3px 0 var(--lip);font:700 13px/1 var(--f-head);font-variant-numeric:tabular-nums}
.a-xp.gain{animation:gain .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes gain{40%{transform:scale(1.18)}}
.coin{flex:none;width:22px;height:22px;border-radius:50%;background:var(--xp);border:2px solid #121317;display:grid;place-items:center;font:800 7px/1 var(--f-head);color:#121317;letter-spacing:-.03em;box-shadow:inset 0 -2px 0 var(--xp-lip)}
.coin.lg{width:30px;height:30px;font-size:9px}
.coin.xl{width:40px;height:40px;font-size:12px;border-width:3px}

/* Текст и кнопки */
.a-h{font:800 26px/1.12 var(--f-head);letter-spacing:-.03em;margin:18px 0 8px;text-wrap:balance}
.a-sub{font-size:15.5px;line-height:1.42;color:var(--mut);margin:0}
/* Нижние кнопки всегда под пальцем: прилипают к низу, если экран длиннее окна. */
.a-dock{margin-top:auto;position:sticky;bottom:0;z-index:4;display:grid;gap:14px;padding:22px 0 calc(10px + var(--safe-b));background:linear-gradient(to bottom,transparent,var(--bg) 20px);pointer-events:none}
/* Только сами кнопки внизу ловят нажатия: прозрачный край панели пропускает их к тому, что под ним. */
.a-dock>*{pointer-events:auto}
.a-note{margin:-4px 0 0;text-align:center;font-size:14px;line-height:1.38;color:var(--mut)}
.a-note b{color:var(--ink);font-weight:600}
.a-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:10px 16px;border-radius:20px;background:var(--pri);color:var(--on);font:700 16px/1.15 var(--f-head);letter-spacing:-.01em;box-shadow:0 6px 0 var(--pri-lip);margin-bottom:6px;transition:transform .07s,box-shadow .07s,opacity .15s;text-align:center}
.a-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--pri-lip)}
.a-btn.alt{background:var(--card);color:var(--ink);box-shadow:0 6px 0 var(--lip),inset 0 0 0 2px var(--line);font:600 16px/1.2 var(--f-body)}
.a-btn.alt:active:not(:disabled){box-shadow:0 2px 0 var(--lip),inset 0 0 0 2px var(--line)}
.a-btn:disabled{background:var(--off);color:var(--mut);box-shadow:0 6px 0 var(--lip)}
.a-btn.alt:disabled{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.a-btn .spin,.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:3px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none;vertical-align:-4px}
.a-link{justify-self:center;padding:8px 12px;margin-top:-6px;font-weight:500;font-size:14.5px;color:var(--mut);text-decoration:underline;text-underline-offset:4px}
.a-card{background:var(--card);border-radius:22px;box-shadow:0 4px 0 var(--lip)}
.stk{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:6px;font:800 12px/1 var(--f-head);padding:8px 11px;border-radius:12px;background:var(--xp);color:#121317;box-shadow:0 4px 0 rgba(0,0,0,.25);white-space:nowrap}
.stk.lime{background:var(--pri)}
.stk.ink{background:var(--ink);color:var(--bg)}
.a-err{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--bad) 14%,var(--card));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bad) 55%,transparent);font-size:14.5px;line-height:1.38}
.a-err .ic{color:var(--bad);margin-top:1px}

/* Первый запуск */
.a-hero{position:relative;height:392px;margin-top:4px;display:grid;place-items:center}
.a-reel{width:206px;aspect-ratio:9/16;border-radius:26px;border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);transform:rotate(-3deg)}
.a-hero .s1{right:calc(50% - 160px);top:40px;transform:rotate(7deg)}
.a-hero .s2{left:calc(50% - 178px);top:172px;transform:rotate(-8deg)}
.a-hero .s3{right:calc(50% - 172px);bottom:56px;transform:rotate(-5deg);padding-left:6px}
.scr-start .a-h{font-size:28px;margin-top:12px}

/* Загрузка */
.a-drop{margin-top:20px;display:grid;justify-items:center;gap:6px;padding:26px 16px 24px;border-radius:24px;border:2.5px dashed var(--line);text-align:center;width:100%;transition:border-color .15s,background-color .15s}
.a-drop.over{border-color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,transparent)}
.a-drop .big{width:66px;height:66px;border-radius:21px;background:var(--pri);color:var(--on);display:grid;place-items:center;box-shadow:0 5px 0 var(--pri-lip);margin-bottom:10px}
.a-drop b{font:700 18px/1.2 var(--f-head)}
.a-drop span{font-size:14px;color:var(--mut)}
.a-file{margin-top:16px;padding:14px;display:grid;gap:12px}
.a-file-row{display:flex;align-items:center;gap:12px;min-width:0}
.a-file-ic{flex:none;width:44px;height:52px;border-radius:12px;background:var(--off);display:grid;place-items:center;color:var(--mut)}
.a-file-ic.ok{background:var(--ink);color:var(--bg)}
.a-file-meta{flex:1;min-width:0;display:grid;gap:3px}
.a-file-meta b{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-file-meta span{font-size:13.5px;color:var(--mut)}
.a-pct{font:800 20px/1 var(--f-head);font-variant-numeric:tabular-nums}
.a-bar{height:16px;border-radius:9px;background:var(--off);overflow:hidden}
.a-bar i{display:block;height:100%;border-radius:9px;box-shadow:inset 0 -4px 0 var(--pri-lip);transition:width .3s}
.a-file-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:var(--mut)}
.a-mini{font-weight:600;font-size:14px;color:var(--ink);padding:6px 2px;text-decoration:underline;text-underline-offset:3px}

/* Несколько видео */
.a-upbody{flex:1;display:flex;flex-direction:column}
.a-clips{margin-top:18px;display:grid;gap:10px}
.a-clip{padding:12px;display:grid;gap:10px}
.a-clip.error{box-shadow:0 4px 0 var(--lip),inset 0 0 0 2px var(--bad)}
.a-clip-row{display:flex;align-items:center;gap:12px;min-width:0}
.a-clip-n{flex:none;width:36px;height:36px;border-radius:12px;background:var(--off);display:grid;place-items:center;font:800 15px/1 var(--f-head)}
.a-clip.done .a-clip-n{background:var(--ink);color:var(--bg)}
.a-clip.error .a-clip-n{background:var(--bad);color:#121317}
.a-clip-ctl{flex:none;display:flex;gap:6px}
.a-ic{width:36px;height:36px;border-radius:12px;background:var(--off);color:var(--ink);display:grid;place-items:center;transition:transform .07s}
.a-ic:active:not(:disabled){transform:translateY(2px)}
.a-ic:disabled{opacity:.3}
.a-bar.sm{height:10px}
.a-bar i.stripes.cmp{background-color:var(--xp);box-shadow:inset 0 -3px 0 var(--xp-lip)}
.a-clip-st{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:20px;font-size:13.5px;line-height:1.3;color:var(--mut);font-variant-numeric:tabular-nums}
.a-clip.done .a-clip-st,.a-clip.error .a-clip-st{color:var(--ink);font-weight:500}
.a-add{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:16px;border:2.5px dashed var(--line);font-weight:600;font-size:15px;transition:border-color .15s}
.a-add:active{border-color:var(--ink)}
.a-total{margin-top:14px;display:grid;gap:7px;font-size:13.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.a-total b{color:var(--ink);font-weight:600}
.a-total .a-bar i{background:var(--ink);box-shadow:none}
.a-total.over .a-bar i{background:var(--bad)}

/* Материалы автора для вставок */
.a-matcta{margin-top:16px;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;transition:transform .07s}
.a-matcta:active{transform:translateY(3px)}
.a-mat-ic{flex:none;width:42px;height:42px;border-radius:13px;background:var(--off);color:var(--ink);display:grid;place-items:center}
.a-mat-txt{flex:1;min-width:0;display:grid;gap:3px}
.a-mat-txt b{font-weight:600;font-size:15.5px;line-height:1.25}
.a-mat-txt span{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--mut)}
.a-matcta .a-mat-txt b{font:800 14.5px/1.2 var(--f-head)}
.a-mats{margin-top:18px;display:grid;gap:12px}
.a-mat{padding:14px;display:grid;gap:12px}
.a-mat-row{display:flex;align-items:center;gap:12px}
.a-mat .a-btn{min-height:52px;margin-bottom:4px}
.a-mat.done{box-shadow:0 4px 0 var(--lip),inset 0 0 0 2.5px var(--ink)}
.a-mat.error{box-shadow:0 4px 0 var(--lip),inset 0 0 0 2px var(--bad)}
.a-mat .a-err{margin-top:0}
.a-mat-done{display:flex;align-items:center;gap:12px;min-width:0}
.a-mat-done .a-mat-txt b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-mat-done .a-mat-txt span{color:var(--ink);font-weight:500}
.a-mat-th{flex:none;width:48px;height:64px;border-radius:10px;overflow:hidden;background:var(--off)}
.a-mat-th img,.a-mat-th video{width:100%;height:100%;object-fit:cover;display:block}

/* Есть сценарий? — два больших варианта */
.a-choices{margin-top:22px;display:grid;gap:14px}
.a-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:96px;padding:16px;border-radius:22px;background:var(--card);box-shadow:0 5px 0 var(--lip);text-align:left;transition:transform .07s}
.a-choice:active{transform:translateY(3px);box-shadow:0 2px 0 var(--lip)}
.a-choice .a-mat-txt b{font:800 16px/1.2 var(--f-head)}
.a-choice-ic{flex:none;width:52px;height:52px;border-radius:16px;background:var(--off);color:var(--ink);display:grid;place-items:center}
.a-tip{margin-top:16px;padding:14px;display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.4}
.a-tip+.a-tip{margin-top:10px}
.a-waitart{position:relative;margin:22px auto 4px;display:grid;place-items:center;width:100%}
.a-waitart .a-reel{width:148px;box-shadow:0 6px 0 var(--ink)}
.a-wa-stk{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) rotate(-4deg)}
.a-wa-stk b{font-variant-numeric:tabular-nums}
.a-wave{position:absolute;left:12%;right:12%;bottom:16%;z-index:2;height:34px;display:flex;align-items:center;justify-content:space-between}
.a-wave i{width:7%;border-radius:9px;background:#fff;height:30%;animation:wave 1s ease-in-out infinite;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.a-wave i:nth-child(2n){animation-delay:-.3s}.a-wave i:nth-child(3n){animation-delay:-.6s}.a-wave i:nth-child(5n){animation-delay:-.15s}
@keyframes wave{50%{height:100%}}
/* Баланс до загрузки видео */
.a-bal{margin:12px 0 0;justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:12px;background:var(--card);box-shadow:0 3px 0 var(--lip);font:700 13px/1 var(--f-head);width:max-content}
.a-keep{min-height:1.35em;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.a-without{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--mut)}
.a-without .ic{margin-top:1px}
/* Раскадровка: сценарий с метками, где будут картинки */
.a-sb{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.a-sb-line{padding:10px 12px;border-radius:16px;background:var(--card);box-shadow:0 3px 0 var(--lip);display:grid;gap:8px}
.a-sb-line:not(.has){background:transparent;box-shadow:none;padding:2px 12px}
.a-sb-line p{margin:0;font-size:15px;line-height:1.4}
.a-sb-line:not(.has) p{color:var(--mut)}
.a-sb-line mark{background:none;color:inherit;font-weight:600;text-decoration:underline 2px;text-decoration-color:var(--ink);text-underline-offset:3px}
.a-sb.loading .a-sb-line p{color:var(--mut)}
.a-sb-chip{justify-self:stretch;display:flex;align-items:center;gap:11px;max-width:100%;padding:6px 6px 6px 6px;border-radius:14px;background:var(--off);font-size:14px;font-weight:500;line-height:1.3}
.a-sb-art{flex:none;width:46px;height:68px;display:block;border-radius:9px;box-shadow:0 2px 0 var(--lip)}
.a-sb-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--card);display:grid;place-items:center}
.a-sb-txt{flex:1;min-width:0;display:grid;gap:3px}
.a-sb-txt small{font-size:12.5px;font-weight:600;color:var(--mut)}
.a-sb-chip.file .a-sb-txt small{color:var(--ink)}
.a-sb-chip.file{background:var(--off)}
.a-sb-chip>span{min-width:0}
.a-sb-x{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--mut);align-self:flex-start}
.a-sb-x:hover{color:var(--ink)}
.a-lbl+.a-sb{margin-top:0}
.a-howto{margin:0;display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:12px;background:var(--off);font-size:13px;line-height:1.4;color:var(--mut)}
.a-howto .ic{color:var(--ink);margin-top:1px}
.a-mat.skipped{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.a-mat.skipped .a-mat-ic{background:var(--off);color:var(--mut)}
.a-mat .a-link{margin-top:-8px}
.a-inline{font:inherit;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Поправить картинки */
.a-fix{margin-top:12px;min-height:50px}
.a-ined{padding:14px;display:grid;gap:10px}
.a-ined.off .a-mat-ic{background:var(--off);color:var(--mut)}
.a-ined .a-mat-txt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-sw{flex:none;position:relative;width:48px;height:30px;border-radius:15px;background:var(--off);box-shadow:inset 0 0 0 2px var(--line);transition:background-color .15s}
.a-sw::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:0 2px 0 var(--lip);transition:transform .15s}
.a-sw[aria-pressed=true]{background:var(--ink);box-shadow:none}
.a-sw[aria-pressed=true]::after{transform:translateX(18px);background:var(--bg);box-shadow:none}
.a-inp{width:100%;min-width:0;border:0;outline:0;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line);padding:11px 13px;color:var(--ink);font:500 16px/1.35 var(--f-body);resize:vertical}
.a-inp:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.a-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px}
.a-num{position:relative;display:block}
.a-num .ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--mut)}
.a-num .a-inp{padding:11px 6px 11px 22px;font-size:15px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.01em}
.a-title2{display:grid;gap:6px}
.a-inp.big{font:700 18px/1.2 'Oswald',var(--f-body);text-transform:uppercase;letter-spacing:.02em}
.a-inp.script{font:400 26px/1.2 'Great Vibes',cursive}
.a-count{display:grid;grid-template-columns:minmax(0,148px) minmax(0,1fr);gap:8px}
.a-inp.big-num{font:800 18px/1.2 var(--f-head);font-variant-numeric:tabular-nums;padding-left:10px;padding-right:8px}
.a-fx{display:grid;gap:8px}
.a-fxsw{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px 8px 12px;border-radius:15px;background:var(--off);font-weight:600;font-size:15px;text-align:left}
.a-fxsw>span:nth-child(2){flex:1}
.a-fx-em{font-size:22px;line-height:1}
.a-fxsw[aria-pressed=false] .a-fx-em{filter:grayscale(1);opacity:.55}
.a-fxsw[aria-pressed=true]{background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.a-fxsw[aria-pressed=true] .a-sw{background:var(--ink);box-shadow:none}
.a-fxsw[aria-pressed=true] .a-sw::after{transform:translateX(18px);background:var(--bg);box-shadow:none}
.a-ins-pv{position:relative;height:118px;border-radius:14px;overflow:hidden;background:#1d2024;isolation:isolate}
.a-ins-pv .scene{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);filter:blur(5px) brightness(.85)}
.a-ins-pv img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain}
.a-ins-pv span{position:absolute;left:8px;top:8px;padding:4px 7px;border-radius:8px;background:rgba(18,19,23,.75);color:#fff;font:600 10.5px/1 var(--f-body)}
.a-seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border-radius:14px;background:var(--off)}
.a-seg2 button{height:38px;border-radius:11px;font-weight:600;font-size:14.5px;color:var(--mut);text-align:center}
.a-seg2 button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 2px 0 var(--lip)}
.a-notif,.a-verdict{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px}
.a-notif{background:color-mix(in srgb,var(--card) 70%,var(--off));box-shadow:0 6px 18px rgba(0,0,0,.12),inset 0 0 0 1.5px var(--line)}
.a-notif-ic,.a-verdict-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff}
.a-notif.instagram .a-notif-ic{background:linear-gradient(45deg,#F9A825,#E1306C 55%,#833AB4)}
.a-notif.telegram .a-notif-ic{background:#2AABEE}
.a-notif-body{flex:1;min-width:0;display:grid;gap:4px}
.a-notif-body b{font-size:13px}
.a-notif-body small{font:800 10px/1 var(--f-head);text-transform:uppercase;letter-spacing:.06em;color:#fff;opacity:.9}
.a-notif .a-inp,.a-verdict .a-inp{padding:8px 10px}
.a-verdict.bad{background:#E5484D}
.a-verdict.good{background:#22B573}
.a-verdict-ic{background:rgba(255,255,255,.25)}
.a-verdict .a-inp{background:rgba(255,255,255,.92);color:#121317;box-shadow:none}
.a-hint2,.a-ins-off{margin:0;font-size:13px;color:var(--mut)}

/* Сценарий */
.a-text{margin-top:18px;padding:14px 16px 12px;display:grid;gap:8px}
.a-text textarea{width:100%;min-height:200px;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font:400 16.5px/1.45 var(--f-body);padding:2px 0}
.a-text textarea::placeholder{color:var(--mut)}
.a-text-foot>span{display:flex;align-items:center;gap:6px}
.a-text-foot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:2px dashed var(--line);font-size:13.5px;color:var(--mut)}
/* Видео без слов */
.a-lbl+.a-text{margin-top:0}
.a-text.short textarea{min-height:110px}
.a-mute{position:relative;margin-top:28px;width:84px;height:84px;border-radius:26px;background:var(--card);box-shadow:0 5px 0 var(--lip),inset 0 0 0 3px var(--line);display:grid;place-items:center;color:var(--ink);transform:rotate(-5deg)}
.a-mute i{position:absolute;left:18px;right:18px;top:50%;height:4px;border-radius:2px;background:var(--bad);transform:rotate(-38deg)}
.a-plan{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.a-plan li{display:flex;align-items:center;gap:12px;padding:12px 14px}
.a-plan .a-mat-txt b{font-weight:600}
.a-music{margin-top:12px}
.a-edits.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.a-paste{display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;padding:4px 0}

/* Вайб */
.a-vibes{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.a-vibe{position:relative;border-radius:23px;padding:4px;background:var(--card);box-shadow:0 5px 0 var(--lip);transition:transform .07s}
.a-vibe:active:not(:disabled){transform:translateY(3px)}
.a-vibe .vf{aspect-ratio:5/6;border-radius:19px;--capk:1.4}
.a-vibe .cap.hype{--capk:1.1;--cy:74%}.a-vibe .cap.expert{--cy:76%}.a-vibe .cap.cinema{--cy:82%}.a-vibe .cap.neon{--cy:70%}
.a-vibe .lb{height:11%}
.a-vibe.wide{grid-column:1/-1}
.a-vibe.wide .vf{aspect-ratio:2/1.02;--capk:1}
.a-vibe.wide .cap.aesthetic{--cy:84%}
.a-vibe.wide .ahook{--ahy:52%;--hk:.5;left:6%;right:auto;justify-items:start;transform:translateY(-50%)}
.a-vibe.wide .ahook i{margin-left:.5em}
.a-new{position:absolute;left:104px;top:13px;z-index:4;padding:5px 8px;font-size:10px;transform:rotate(-4deg)}
/* Вставки в превью «Эстетики»: карточки роликов с просмотрами, как в её роликах */
.a-ins{position:absolute;right:6%;top:30%;z-index:2;display:flex;gap:5%;width:34%}
.a-ins span{position:relative;flex:1;aspect-ratio:3/4;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.5);background:linear-gradient(160deg,#e9d6c8,#b99a86 55%,#6e5a4e)}
.a-ins span.i2{background:linear-gradient(160deg,#f1e4dc,#c7a99a 55%,#7d6658);transform:translateY(8%)}
.a-ins em{position:absolute;left:5%;bottom:6%;display:flex;align-items:center;gap:2px;padding:2px 4px;border-radius:6px;background:rgba(20,20,20,.65);color:#fff;font:500 7.5px/1 'Montserrat',var(--f-body);font-style:normal;white-space:nowrap}
.a-hot{display:flex;align-items:center;gap:6px;color:var(--ink)}
.a-hot .ic{color:#FF6A2B}
.a-vibes.tight{margin-top:0}
.a-lbl+.a-vibes{margin-top:0}
.vf .vf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* Превью трендовых шаблонов: размеры в cqw от ширины карточки */
.tv-plates{position:absolute;left:0;right:0;top:10%;z-index:2;display:grid;justify-items:center;gap:1.5cqw;text-align:center;padding:0 6%}
.tv-plates span{display:inline-block;padding:1.2cqw 3cqw 1.4cqw;border-radius:2.5cqw;font-size:7.4cqw;line-height:1.05}
.tv-plates.white span{background:#fff;color:#111;font-family:'Golos Text',sans-serif;font-weight:700}
.tv-plates.lime span{background:#C8F135;color:#111;font-family:'Unbounded',sans-serif;font-weight:800;font-size:6.2cqw}
.tv-plates.red span{background:#E5484D;color:#fff;font-family:'Unbounded',sans-serif;font-weight:800;font-size:6.2cqw}
.tv-cap{position:absolute;left:4%;right:4%;top:var(--ty,72%);z-index:2;text-align:center;transform:translateY(-50%)}
.tv-cap span{display:inline-block;font-size:6.2cqw;line-height:1.2}
.tv-cap.box span{background:#fff;color:#111;font-family:'Golos Text',sans-serif;font-weight:500;padding:.8cqw 2.4cqw;border-radius:1.6cqw}
.tv-cap.dark span{background:rgba(0,0,0,.55);color:#fff;font-family:'Montserrat',sans-serif;font-weight:500;padding:.8cqw 2.4cqw;border-radius:1.6cqw}
.tv-cap.stroke span{font-family:'Golos Text',sans-serif;font-weight:700;color:#fff;text-shadow:.06em 0 0 #000,-.06em 0 0 #000,0 .06em 0 #000,0 -.06em 0 #000,0 .1em .2em rgba(0,0,0,.55)}
.tv-cap.stroke b,.tv-cap.stroke b{color:#FFE14A}
.tv-cap.shadow span{font-family:'Golos Text',sans-serif;font-weight:700;color:#fff;text-shadow:0 .08em .3em rgba(0,0,0,.75)}
.tv-cap.shadow b{color:#C8F135}
.tv-big{position:absolute;left:0;right:0;top:66%;z-index:2;text-align:center;transform:translateY(-50%);font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;font-size:11cqw;color:#C8F135;
  text-shadow:.07em 0 0 #000,-.07em 0 0 #000,0 .07em 0 #000,0 -.07em 0 #000,.05em .05em 0 #000,-.05em .05em 0 #000,.05em -.05em 0 #000,-.05em -.05em 0 #000,0 .12em .2em rgba(0,0,0,.5)}
.tv-screen{position:absolute;left:0;right:0;top:0;height:50%;z-index:1;background:#F1F2F4;display:grid;align-content:center;gap:3cqw;padding:0 18%}
.tv-screen i{display:block;height:5cqw;border-radius:2cqw;background:#D9DCE2}
.tv-screen i:nth-child(2){width:70%}
.tv-screen b{position:absolute;right:20%;top:62%;width:9cqw;height:9cqw;border-radius:50%;background:rgba(18,19,23,.25);box-shadow:0 0 0 2cqw rgba(18,19,23,.1)}
.tv-under{position:absolute;left:0;right:0;bottom:0;height:50%;overflow:hidden}
.tv-under .scene{position:absolute;inset:0;width:100%;height:100%}
.tv-oswald{position:absolute;left:0;right:0;top:8%;z-index:2;text-align:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:7.6cqw;line-height:1.05;color:#fff;padding:0 10%;
  text-shadow:.04em 0 0 #1A1A1A,-.04em 0 0 #1A1A1A,0 .04em 0 #1A1A1A,0 -.04em 0 #1A1A1A}
.tv-verdict{position:absolute;left:12%;right:12%;top:44%;z-index:2;display:flex;align-items:center;gap:2.4cqw;padding:2cqw 3cqw;border-radius:3cqw;background:#E5484D;color:#fff;box-shadow:0 1cqw 3cqw rgba(0,0,0,.3)}
.tv-verdict i{flex:none;width:7cqw;height:7cqw;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center}
.tv-verdict span{display:grid;font-family:'Unbounded',sans-serif;font-weight:800;font-size:5cqw;line-height:1.1}
.tv-verdict small{font-family:'Golos Text',sans-serif;font-weight:700;font-size:3cqw;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.tv-badge{position:absolute;left:5%;top:5%;z-index:3;padding:1.2cqw 3cqw;border-radius:99px;background:#121317;color:#C8F135;font:800 5cqw/1.1 'Unbounded',sans-serif;text-transform:uppercase;white-space:nowrap}
/* В карточке наверху наклейка с названием: заголовок шаблона ниже неё */
.a-vibe .tv-plates{top:23%}
.a-vibe .tv-badge{top:22%;left:7%}
.a-vibe .tv-badge~.tv-plates{top:34%}
.a-vibe .tv-oswald{top:56%}
.a-vibe .tv-cap.dark{--ty:84%!important}
.a-vibe .tv-check{top:56%}
.tv-prog{position:absolute;left:5%;right:5%;top:4%;z-index:3;height:1.4cqw;border-radius:1cqw;background:rgba(0,0,0,.28)}
.tv-prog i{display:block;width:40%;height:100%;border-radius:1cqw;background:#C8F135}
.tv-check{position:absolute;left:8%;width:62%;top:52%;z-index:2;display:grid;gap:1.2cqw;padding:3cqw;border-radius:3cqw;background:#fff;color:#111;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25);font-family:'Golos Text',sans-serif}
.tv-check b{font-family:'Unbounded',sans-serif;font-weight:800;font-size:4.2cqw;text-transform:uppercase}
.tv-check span{display:flex;align-items:center;gap:1.6cqw;font-size:3.6cqw;font-weight:500}
.tv-check span .ic{flex:none;width:4cqw;height:4cqw;padding:.6cqw;border-radius:50%;background:#E2E5EA;color:transparent}
.tv-check span.done{color:#8E949D;text-decoration:line-through}
.tv-check span.done .ic{background:#22B573;color:#fff}
/* «Какая это часть?» */
.a-parts{margin-top:22px;display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.a-part{display:grid;place-items:center;height:66px;border-radius:18px;background:var(--card);box-shadow:0 5px 0 var(--lip);font:800 26px/1 var(--f-head);transition:transform .07s}
.a-part:active{transform:translateY(3px)}
.a-part[aria-pressed=true]{background:var(--ink);color:var(--bg);box-shadow:0 5px 0 var(--lip)}
.a-totals{display:flex;flex-wrap:wrap;gap:8px}
.a-totals button{min-width:46px;height:44px;padding:0 14px;border-radius:14px;background:var(--card);box-shadow:0 3px 0 var(--lip);font-weight:600;font-size:15px}
.a-totals button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.a-totals button:disabled{opacity:.35}
.a-series-pv{margin-top:20px;padding:16px;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--mut)}
.a-series-pv .tv-badge.big{position:static;flex:none;white-space:nowrap;font-size:15px;padding:8px 14px}
.a-vname.long{font-size:10.5px;line-height:1.15;padding:6px 8px}
.a-vibe .a-tbadges{position:absolute;left:10px;right:44px;bottom:10px;z-index:4;display:flex;flex-wrap:wrap;gap:5px;align-items:center;pointer-events:none}
.a-tbadges .stk{position:static;transform:rotate(-3deg);font-size:10px;padding:5px 8px}
.stk.hot{background:#FF6A2B;color:#fff;gap:4px}
.stk.hot .ic{width:11px;height:11px}
/* Тренд из админки по полю style: заголовок и субтитры шрифтами стиля поверх нарисованного кадра */
.sf-hook{position:absolute;left:5%;right:5%;z-index:2;display:grid;justify-items:center;gap:1.2cqw;text-align:center;line-height:1.04}
.sf-hook.plate span{display:inline-block;padding:1cqw 2.6cqw 1.2cqw;border-radius:2.2cqw}
.sf-hook.acc{gap:0;line-height:.95}
.sf-hook.acc b{text-transform:uppercase;letter-spacing:.01em}
.sf-hook.acc i{margin-top:-.28em;line-height:1}
.sf-cap{position:absolute;left:6%;right:6%;z-index:2;transform:translateY(-50%);text-align:center;line-height:1.18;text-wrap:balance}
.sf-cap .w.on{border-radius:.18em;padding:0 .08em}
.sf-box{padding:.08em .32em .12em;border-radius:.28em;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.5}
.sf-stk{position:absolute;right:6%;top:6%;z-index:3;width:13cqw;height:13cqw;transform:rotate(12deg);filter:drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.35))}
.sf-stk svg{width:100%;height:100%;display:block}
.a-leaving{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:9px;background:rgba(18,19,23,.84);color:#fff;font:600 11px/1 var(--f-body);white-space:nowrap}
.a-vname{max-width:calc(100% - 22px);display:flex;align-items:center;gap:4px}
.a-vname .a-flame,.a-sub .a-flame{display:inline-block;color:#FF6A2B;flex:none}
.a-sub .a-flame{vertical-align:-1px}
.a-vibe.wide .a-vname{max-width:none}
.a-vname{position:absolute;left:12px;top:12px;z-index:4;font:800 12.5px/1 var(--f-head);background:var(--card);color:var(--ink);padding:7px 10px;border-radius:10px}
.a-vchk{position:absolute;right:11px;bottom:11px;z-index:4;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--bg);opacity:0;transform:scale(.6);transition:.15s}
.a-vibe[aria-pressed=true]{background:var(--ink);box-shadow:0 5px 0 var(--lip)}
.a-vibe[aria-pressed=true] .a-vchk{opacity:1;transform:none}
.a-lock{position:absolute;inset:4px;border-radius:19px;z-index:3;background:rgba(10,11,13,.5);backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);display:grid;place-content:center;justify-items:center;gap:8px;color:#fff;font:800 12.5px/1 var(--f-head)}
.a-lock .lk{width:44px;height:44px;border-radius:50%;background:var(--xp);color:#121317;display:grid;place-items:center;box-shadow:0 0 0 2.5px #121317,0 4px 0 2.5px #121317}
.a-hint{margin-top:16px;display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:18px;background:var(--card);box-shadow:0 4px 0 var(--lip);font-size:14px;line-height:1.35}
.a-hint b{font-weight:600}

/* Что сделать */
.a-tiles{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.a-tile{position:relative;display:flex;align-items:center;gap:11px;min-height:60px;padding:8px 10px;border-radius:18px;background:var(--card);box-shadow:0 4px 0 var(--lip);font-weight:500;font-size:14.5px;line-height:1.18;transition:transform .07s;text-align:left}
.a-tile:active:not(:disabled){transform:translateY(3px)}
.a-ti{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--off);color:var(--ink)}
.a-tc{position:absolute;left:36px;top:6px;width:19px;height:19px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;box-shadow:0 0 0 2px var(--card)}
.a-tile[aria-pressed=false],.a-tile:disabled{background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--mut)}
.a-tile[aria-pressed=false] .a-ti,.a-tile:disabled .a-ti{background:var(--off);color:var(--mut)}
.a-tile[aria-pressed=false] .a-tc,.a-tile:disabled .a-tc{display:none}
.a-soon{position:absolute;right:8px;top:-9px;font:800 9.5px/1 var(--f-head);letter-spacing:.02em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:5px 7px;border-radius:8px;transform:rotate(4deg)}
.a-lbl{margin:18px 0 9px;font:700 12px/1 var(--f-head);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.a-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.a-seg button{height:52px;border-radius:16px;background:var(--card);box-shadow:0 4px 0 var(--lip);display:flex;align-items:center;justify-content:center;gap:5px;font-weight:600;font-size:15px;transition:transform .07s}
.a-seg button:active{transform:translateY(3px)}
.a-seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 55%,var(--bg))}

/* Ожидание */
.a-bar.big{margin-top:16px;height:18px}
.a-stages{list-style:none;margin:14px 0 0;padding:14px 16px;display:grid;gap:9px;border-radius:22px;background:var(--card);box-shadow:0 4px 0 var(--lip)}
.a-stages li{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--mut)}
.a-stages li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--off)}
.a-stages li.done i{background:var(--ink);color:var(--bg)}
.a-stages li.now{font-weight:600;color:var(--ink)}
.a-stages li.now i{background:none;border:3px solid var(--off);border-top-color:var(--ink);animation:spin .8s linear infinite}
.a-game{margin-top:14px;padding:14px 14px 12px}
.a-game-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.a-game-h b{font:800 16px/1 var(--f-head)}
.a-xpchip{display:flex;align-items:center;gap:6px;font:800 12px/1 var(--f-head);background:var(--xp);color:#121317;padding:4px 10px 4px 4px;border-radius:13px;white-space:nowrap}
.a-xpchip .coin{width:20px;height:20px}
.a-game q{display:block;margin:10px 0 8px;font-size:15.5px;line-height:1.35;font-weight:500}
.a-takes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.a-takes.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.a-takes{animation:takes-in .9s ease-out}
@keyframes takes-in{0%{opacity:.35}60%{opacity:.6}100%{opacity:1}}
.a-takes.n3 span.t{flex-direction:column;gap:2px;font-size:13px}
.a-take{position:relative;border-radius:18px;background:var(--off);padding:4px;box-shadow:0 4px 0 var(--lip);transition:transform .07s,background-color .2s}
.a-take:active:not(:disabled){transform:translateY(3px)}
.a-take .th{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#1d2024}
.a-take .th img{width:100%;height:100%;object-fit:cover;display:block}
.a-take span.t{display:flex;justify-content:space-between;padding:8px 6px 4px;font-weight:600;font-size:14px}
.a-take span.t em{font-style:normal;color:var(--mut);font-weight:500}
.a-take.mine{box-shadow:0 4px 0 var(--lip),inset 0 0 0 3px var(--ink)}
.a-take.right{background:var(--pri);box-shadow:0 4px 0 var(--pri-lip)}
.a-take.right span.t em{color:var(--on)}
.a-take.right span.t{color:var(--on)}
.a-take.wrong{background:var(--bad);box-shadow:0 4px 0 var(--bad-lip)}
.a-take.wrong span.t,.a-take.wrong span.t em{color:#121317}
.a-res{margin:0 0 12px;padding:9px 12px;border-radius:12px;background:var(--off);font-size:14px;line-height:1.35;color:var(--mut);text-align:center}
.a-res.ok{background:var(--pri);color:var(--on)}
.a-res.miss{background:color-mix(in srgb,var(--bad) 30%,var(--card));color:var(--ink)}
.a-res.ok b{color:var(--on)}
.a-stepn{margin-left:auto;font-weight:500;font-size:13px;color:var(--mut);white-space:nowrap}
.a-res b{color:var(--ink)}
.a-game.teaser{display:flex;gap:12px;align-items:center;padding:14px}
.a-game.teaser .lk{flex:none;width:44px;height:44px;border-radius:14px;background:var(--off);display:grid;place-items:center;color:var(--mut)}
.a-game.teaser p{margin:3px 0 0;font-size:13.5px;line-height:1.35;color:var(--mut)}

/* Готово */
.a-result{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:14px;margin-top:4px}
.a-video{position:relative;aspect-ratio:9/16;border-radius:24px;border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);overflow:hidden;background:#000}
.a-video video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* «Готово»: the reel as big as the screen allows above the one button */
.a-done-h{margin:6px 0 12px}
.a-video.big{width:min(100%,calc((100vh - 250px) * 9 / 16));width:min(100%,calc((100dvh - 250px) * 9 / 16));min-width:200px;margin:0 auto}
.a-chips{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.a-chips span{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:12px;background:var(--card);box-shadow:0 3px 0 var(--lip);font-size:13.5px;font-weight:500}
.scr-done .a-lbl{margin-top:22px}
.scr-done .a-lbl+.a-edits{margin-top:0}
.a-links.end{margin:16px 0 4px}
.a-full{position:absolute;right:8px;top:8px;z-index:2;width:36px;height:36px;border-radius:12px;background:rgba(18,19,23,.6);color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.a-player{position:fixed;inset:0;z-index:70;background:#000;display:grid;place-items:center}
.a-player video{width:100%;height:100%;object-fit:contain;background:#000}
.a-player-x{position:absolute;right:14px;top:calc(14px + var(--safe-t));width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.a-change{margin-top:14px;padding:10px 10px 10px 12px;display:flex;align-items:center;gap:10px}
.a-change-t{flex:1;min-width:0;display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:500;line-height:1.35}
.a-change-t .ic{margin-top:2px;padding:2px;border-radius:50%;background:var(--ink);color:var(--bg);width:17px;height:17px}
.a-change .a-mini{flex:none;display:inline-flex;align-items:center;gap:4px}
.a-links{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 6px;margin-top:-6px}
.a-links .a-link{margin-top:0}
.a-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.a-side .a-h{margin:4px 0 2px;font-size:25px}
.a-score{padding:12px 10px;display:grid;justify-items:center;gap:2px;position:relative}
.a-score svg{display:block}
.a-score b{position:absolute;top:32px;left:0;right:0;display:grid;justify-items:center;gap:2px;text-align:center;font:800 26px/1 var(--f-head)}
.a-score b em{font:600 10.5px/1 var(--f-body);font-style:normal;color:var(--mut)}
.a-score span{font-weight:600;font-size:13.5px}
.a-score small{font-size:12px;line-height:1.3;color:var(--mut);text-align:center}
.a-stats{display:grid;gap:7px}
.a-stats span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;padding:7px 10px;border-radius:12px;background:var(--off)}
.a-edits{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.a-edit{min-height:66px;padding:8px 3px;border-radius:16px;background:var(--card);box-shadow:0 4px 0 var(--lip);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:12.5px;line-height:1.15;text-align:center;transition:transform .07s}
.a-edit:active:not(:disabled){transform:translateY(3px)}
.a-lvl{margin-top:16px;padding:12px 14px;display:grid;gap:10px}
.a-lvl-row{display:flex;align-items:center;gap:12px}
.a-lvl-n{flex:none;width:40px;height:40px;border-radius:13px;background:var(--xp);color:#121317;display:grid;place-items:center;font:800 18px/1 var(--f-head);box-shadow:inset 0 -3px 0 var(--xp-lip);transform:rotate(-6deg)}
.a-lvl-row div{flex:1;min-width:0;display:grid;gap:3px}
.a-lvl-row b{font:800 14px/1.15 var(--f-head)}
.a-lvl-row span{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.a-unl{flex:none;display:grid;justify-items:end;gap:4px}
.a-unl small{font-size:11px;color:var(--mut)}
.a-neon{font:700 15px/1 'Comfortaa',var(--f-body);color:#fff;background:#141217;padding:7px 10px 8px;border-radius:10px;text-shadow:0 0 4px #ff4fd8,0 0 10px #ff36d0}
.a-pub{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:6px 12px;border-radius:15px;background:var(--off);font-weight:600;font-size:14.5px;transition:transform .07s}
.a-pub:active:not(:disabled){transform:translateY(2px)}
.a-pub .a-xpchip{padding:3px 8px 3px 3px}
.a-pub.done{background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--mut)}
.a-lvl .a-bar{height:12px}

/* Пустой баланс и ошибка */
.a-zero{margin-top:22px;display:flex;align-items:center;gap:16px}
.a-zero b{width:92px;height:92px;border-radius:28px;background:var(--card);box-shadow:0 5px 0 var(--lip),inset 0 0 0 3px var(--line);display:grid;place-items:center;font:800 46px/1 var(--f-head);transform:rotate(-5deg)}
.a-zero span{font:700 14px/1.3 var(--f-head);color:var(--mut)}
.a-soonpay{margin-top:22px;padding:16px;display:flex;gap:14px;align-items:center}
.a-soonpay div{display:grid;gap:4px}
.a-soonpay b{font:800 15px/1.2 var(--f-head)}
.a-soonpay span{font-size:14px;line-height:1.38;color:var(--mut)}
.a-oops{margin-top:40px;width:92px;height:92px;border-radius:28px;background:var(--bad);color:#121317;display:grid;place-items:center;font:800 52px/1 var(--f-head);box-shadow:0 6px 0 var(--bad-lip);transform:rotate(-5deg)}
.a-oops.warn{background:var(--xp);box-shadow:0 6px 0 var(--xp-lip)}
.a-warn-t{font-size:17px;line-height:1.42;color:var(--ink)}

/* Опыт: всплывающая монета и конфетти */
#fx{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.xp-pop{position:absolute;left:50%;top:40%;display:flex;align-items:center;gap:10px;padding:12px 20px 12px 12px;border-radius:22px;background:var(--xp);color:#121317;font:800 26px/1 var(--f-head);box-shadow:0 6px 0 var(--xp-lip),0 22px 44px rgba(0,0,0,.28);white-space:nowrap;animation:pop 1.7s cubic-bezier(.2,.9,.3,1.15) forwards}
.xp-pop.lvl{background:var(--pri);box-shadow:0 6px 0 var(--pri-lip),0 22px 44px rgba(0,0,0,.28);font-size:20px;padding:16px 22px}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}28%{transform:translate(-50%,-50%) scale(1)}72%{opacity:1;transform:translate(-50%,-62%) scale(1)}100%{opacity:0;transform:translate(-50%,-150%) scale(.85)}}
.conf{position:absolute;left:50%;top:40%;width:10px;height:14px;border-radius:3px;animation:burst 1s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes burst{from{transform:translate(-50%,-50%)}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));opacity:0}}
/* Сверху и сквозь него можно нажимать: главные кнопки внизу. */
.toast{position:fixed;left:50%;top:calc(6px + var(--safe-t));z-index:60;transform:translateX(-50%);width:max-content;max-width:min(92vw,420px);padding:12px 16px;border-radius:16px;background:var(--ink);color:var(--bg);font-size:14.5px;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.25);animation:toast var(--tt,3.2s) forwards;pointer-events:none}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-10px)}6%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .scr.in,.scr.back{animation:none}
  .stripes,.a-stages li.now i,.a-btn .spin,.spin{animation-duration:3s}
  .xp-pop{animation:fade 1.7s forwards}
  .a-wave i{animation:none;height:60%}
  .conf{display:none}
  .a-xp.gain{animation:none}
}
@keyframes fade{0%{opacity:0;transform:translate(-50%,-50%)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}

/* Видео-кадр и субтитры вайбов */
.vf{position:relative;overflow:hidden;container-type:inline-size;background:#1d2024;isolation:isolate}
.vf .scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.vf .lb{position:absolute;left:0;right:0;height:9%;background:#000;z-index:1}
.vf .lb.t{top:0}.vf .lb.b{bottom:0}
.cap{position:absolute;left:5%;right:5%;top:var(--cy,70%);transform:translateY(-50%);text-align:center;z-index:2;line-height:1.14}
.cap .w{display:inline-block;transition:color .15s,background-color .15s,transform .15s}
.cap.hype{--cy:72%;line-height:1.24;font-family:'Unbounded',sans-serif;font-weight:800;text-transform:uppercase;font-size:calc(74 / 1080 * 100cqw * var(--capk,1));color:#fff;letter-spacing:.005em;
  text-shadow:.06em 0 0 #000,-.06em 0 0 #000,0 .06em 0 #000,0 -.06em 0 #000,.045em .045em 0 #000,-.045em .045em 0 #000,.045em -.045em 0 #000,-.045em -.045em 0 #000,0 .1em .2em rgba(0,0,0,.55)}
.cap.hype .w{padding:.04em .13em .02em;border-radius:.2em}
.cap.hype .w.em{color:#FFE14A;transform:scale(1.12)}
.cap.hype .w.on{background:#FFE14A;color:#111;text-shadow:none}
.cap.expert{--cy:75%;font-family:'Golos Text',sans-serif;font-weight:700;font-size:calc(66 / 1080 * 100cqw * var(--capk,1));color:#fff;text-shadow:0 .06em .28em rgba(0,0,0,.75)}
.cap.expert .w.on{color:#8FB4FF}
.cap.cinema{--cy:85%;font-family:'Playfair Display',serif;font-style:italic;font-weight:700;font-size:calc(64 / 1080 * 100cqw * var(--capk,1));color:#F3EBDD;text-shadow:0 .05em .32em rgba(0,0,0,.8);transition:opacity .6s}
.cap.cinema .w.em{color:#E9C77B;transform:scale(1.06)}
.cap.cinema.hide{opacity:0}
.cap.neon{--cy:66%;font-family:'Comfortaa',sans-serif;font-weight:700;font-size:calc(70 / 1080 * 100cqw * var(--capk,1));color:#fff6ff;text-shadow:0 0 .06em #fff,0 0 .22em #ff4fd8,0 0 .55em #ff36d0,0 0 1em #c41fd6}
.cap.neon .w.on{color:#d9fbff;text-shadow:0 0 .06em #fff,0 0 .22em #43f0ff,0 0 .55em #20d8ff,0 0 1em #0aa7d6}
.cap.aesthetic{--cy:66%;font-family:'Montserrat',sans-serif;font-weight:300;text-transform:lowercase;font-size:calc(60 / 1080 * 100cqw * var(--capk,1));color:#fff;text-shadow:0 .05em .3em rgba(0,0,0,.7),0 .05em .3em rgba(0,0,0,.7);transition:opacity .6s}
.cap.aesthetic.hide{opacity:0}
.ahook{position:absolute;left:0;right:0;top:var(--ahy,12%);z-index:2;display:grid;justify-items:center;line-height:.92;pointer-events:none;color:#fff}
.ahook b{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;font-size:calc(120 / 1080 * 100cqw * var(--hk,1));letter-spacing:.01em;
  text-shadow:.042em 0 0 #1A1A1A,-.042em 0 0 #1A1A1A,0 .042em 0 #1A1A1A,0 -.042em 0 #1A1A1A,.03em .03em 0 #1A1A1A,-.03em .03em 0 #1A1A1A,.03em -.03em 0 #1A1A1A,-.03em -.03em 0 #1A1A1A}
.ahook i{font-family:'Great Vibes',cursive;font-style:normal;font-size:calc(176 / 1080 * 100cqw * var(--hk,1));margin-top:-.36em;
  text-shadow:.02em 0 0 #1A1A1A,-.02em 0 0 #1A1A1A,0 .02em 0 #1A1A1A,0 -.02em 0 #1A1A1A,.014em .014em 0 #1A1A1A,-.014em .014em 0 #1A1A1A,.014em -.014em 0 #1A1A1A,-.014em -.014em 0 #1A1A1A}
.hookcap{position:absolute;top:var(--hy,16%);left:50%;transform:translate(-50%,-50%);z-index:2;font-family:'Russo One',sans-serif;font-size:calc(82 / 1080 * 100cqw * var(--capk,1));color:#111;background:#fff;padding:.14em .42em .1em;border-radius:.2em;white-space:nowrap;text-transform:uppercase;line-height:1.1}