/* ═══════════════════════════════════════════════════════════
   CLIP BATTLE — v3 «МУЛЬТЯШКА»
   мультяшный максимализм: бумага, толстые обводки, жёсткие
   тени, стикеры, пузыри реплик, рукописные подписи
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#fff9ec; --paper2:#fff3d6; --card:#fffdf6; --card2:#ffffff;
  --ink:#191521; --ink2:#55506b; --mut:#6b6480; --dim:#9a93ad;
  --ink-d:#191521; --deep2:#191521;
  --lav:#bcb6e8; --lav2:#9d95dd; --pur:#6c63c9;
  --trk:#e4def0; --trk-h:#d5cdea;
  --yel:#ffd43b; --pink:#ff7ab6; --teal:#3fd0b6; --blue:#58a6ff;
  --orange:#ff9f45; --red:#ff5d5d; --green:#69db7c;
  --ac:#8ce04a; --ac2:#6c63c9;
  --s1:#7c6ff0; --s2:#ff7ab6;
  --ac-ink:#191521;
  --tx:#191521; --tx2:#55506b; --tx3:#8d87a3;
  /* тройки r,g,b: из них собираются полупрозрачные засветки, тени и scrim.
     Движок темы (theme.js) пересчитывает их под выбранный цвет, а эти
     значения — запасной вариант, если скрипт не доехал */
  --ink-rgb:25,21,33; --sh-rgb:25,21,33; --paper-rgb:255,249,236; --card-rgb:255,253,246;
  --lav-rgb:188,182,232; --pur-rgb:108,99,201; --ac-rgb:140,224,74; --ac2-rgb:108,99,201;
  --yel-rgb:255,212,59; --pink-rgb:255,122,182; --teal-rgb:63,208,182;
  --R:18px;
  --rw:22px 26px 20px 28px / 26px 20px 28px 22px;
  --rw2:16px 20px 14px 22px / 20px 14px 22px 16px;
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --sh-s:4px 4px 0 var(--ink);
  --sh-l:10px 10px 0 var(--ink);
  --f-ui:'Nunito',system-ui,sans-serif;
  --f-disp:'Rubik','Nunito',system-ui,sans-serif;
  --f-hand:'Neucha','Nunito',cursive;
  --f-game:'Rubik','Nunito',system-ui,sans-serif;
  --f-load:'Rubik','Nunito',system-ui,sans-serif;
  --f-round:'Neucha','Nunito',cursive;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --bounce:cubic-bezier(.28,1.9,.35,1);
  --cardw:min(600px, calc((100vw - 150px) / 2), calc((100vh - 280px) * 1.7778));
  --chatop:.96;
}

/* темы-акценты */
body[data-accent="lime"]  {--ac:#8ce04a;--ac2:#6c63c9;--s1:#7c6ff0;--s2:#ff7ab6}
body[data-accent="purple"]{--ac:#a493ff;--ac2:#ff7ab6;--s1:#8b7cf6;--s2:#3fd0b6}
body[data-accent="pink"]  {--ac:#ff8fc0;--ac2:#58a6ff;--s1:#ff7ab6;--s2:#58a6ff}
body[data-accent="cyan"]  {--ac:#5fd9e0;--ac2:#ff9f45;--s1:#38cfd9;--s2:#ff9f45}
body[data-accent="orange"]{--ac:#ffb066;--ac2:#6c63c9;--s1:#ff9f45;--s2:#7c6ff0}

body[data-chatopen="1"]{--cardw:min(540px, calc((100vw - 450px) / 2), calc((100vh - 280px) * 1.7778))}

*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%}
body{
  font-family:var(--f-ui); background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; overflow:hidden; font-weight:700;
}
::selection{background:var(--yel);color:var(--ink)}
button{font-family:inherit}
/* у форменных элементов вес свой (400), из-за чего «Послание» в шапке и поле
   текста рисовались тоньше меню — наследуют 700, явные правила всё перебивают */
button,input,textarea,select{font-family:inherit;font-weight:inherit}
svg{display:block}
img{display:block}

/* бумажная точка-сетка поверх всего */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(var(--sh-rgb),.07) 1.2px, transparent 1.3px);
  background-size:22px 22px;
}
body[data-gfx="mid"]::after{opacity:.3}
body[data-gfx="low"]::after{display:none}

/* ── кастомный курсор: рисованная перчатка с пальцем ── */
#cur{position:fixed;left:-100px;top:-100px;z-index:9999;pointer-events:none;width:34px;height:37px;margin:-3px 0 0 -8px}
#cur svg{width:100%;height:100%;transform:rotate(var(--tilt,0deg));transform-origin:8px 4px;transition:transform .16s var(--spring);filter:drop-shadow(2.5px 3.5px 0 rgba(var(--sh-rgb),.28));overflow:visible}
#cur.hot svg{transform:rotate(-16deg) scale(1.16)}
#cur.press svg{transform:rotate(var(--tilt,0deg)) scale(.84,.74) translateY(3px)}
#cur .glove{fill:#fffdf6;stroke:var(--ink);stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
#cur .lines{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round}
#cur .cuff{fill:var(--yel);stroke:var(--ink);stroke-width:2.1;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){
  body[data-cursor="on"],body[data-cursor="on"] *,body[data-cursor="on"] *:before,body[data-cursor="on"] *:after{cursor:none !important}
}
body[data-cursor="off"] #cur{display:none}

/* ── экраны ── */
.scr{position:fixed;inset:0;display:none;opacity:0;pointer-events:none;transition:opacity .4s ease;z-index:1}
.scr.on{display:flex;opacity:1;pointer-events:auto;z-index:10}

[data-rv]{opacity:0;transform:translateY(26px) rotate(-.6deg);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:none}

.fl svg,.chip svg,.fp-hint svg,.soc svg,.ft-col svg{width:16px;height:16px;flex-shrink:0}

.icon-btn{
  width:42px;height:42px;border-radius:14px 16px 13px 17px/16px 13px 17px 14px;
  border:var(--bd);background:var(--card);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh-s);transition:transform .18s var(--spring),box-shadow .18s;
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{transform:translate(-2px,-2px) rotate(-4deg);box-shadow:6px 6px 0 var(--ink);background:var(--yel)}
.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.icon-btn .ic-day{display:none}
body[data-theme="night"] .icon-btn .ic-moon{display:none}
body[data-theme="night"] .icon-btn .ic-day{display:block;animation:spinIn .5s var(--spring)}
@keyframes spinIn{from{transform:rotate(-140deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
/* кнопка обновлений: вместо звёздочки три буквы. Звёздочка была «красивая, но
   непонятная», а UPD читается и на 34 пикселях телефона, и в OBS-кадре */
.upd-btn{width:auto;min-width:42px;padding:0 8px;font-family:var(--f-disp);font-size:12px;font-weight:900;letter-spacing:.3px}
.upd-btn b{line-height:1;transform:translateY(1px)}

/* свитч собран на целых пикселях: 48×28 минус бордер 3 даёт окно 42×22,
   кружок 18 → зазор 2px по вертикали и 3px по горизонтали с обеих сторон.
   Дробные отступы на масштабе 1x округлялись вразнобой и кружок кривился,
   а его обводка сливалась с обводкой дорожки в одно пятно. */
.switch{position:relative;display:inline-block;width:48px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:var(--trk);border:3px solid var(--ink);border-radius:999px;transition:background .26s var(--ease),transform .34s var(--bounce)}
.slider:hover{background:var(--trk-h)}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:2px;background:var(--card);border:2.5px solid var(--ink);border-radius:50%;transition:transform .5s var(--bounce),background .26s var(--ease)}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider:hover{background:#5bcd6f}
.switch input:checked + .slider:before{transform:translateX(18px);background:var(--yel)}
/* нажатие: дорожка проседает, кружок растягивается по ходу и затем пружинит */
.slider:active{transform:scale(.93)}
.slider:active:before{transform:translateX(4px) scaleX(1.34)}
.switch input:checked + .slider:active:before{transform:translateX(14px) scaleX(1.34)}

/* ═══════════════════════════════════════
   SETUP
   ═══════════════════════════════════════ */
/* scroll-padding-top: якоря #top/#how/#feat/#go/#faq/#about прокручивались на
   высоту шапки дальше, чем надо, и заголовок секции вставал под панель.
   Высоту подставляет --tb-h из app.js: в шапке она разная на десктопе и
   на телефоне, и держать две цифры в двух местах — только путаться */
#S-setup{flex-direction:column;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:var(--tb-h,112px);
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(var(--ac-rgb),.34), transparent 62%),
    radial-gradient(760px 420px at -6% 30%, rgba(var(--lav-rgb),.46), transparent 60%),
    radial-gradient(700px 420px at 60% 108%, rgba(var(--ac2-rgb),.24), transparent 62%),
    var(--paper);}
#S-setup > *{flex:0 0 auto}

/* топбар */
.topbar{
  position:sticky;top:0;z-index:40;height:104px;flex:0 0 104px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 22px;
  background:var(--paper);border-bottom:var(--bd);
}
.tb-logo{flex:0 0 auto;display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.tb-logo img{width:88px;height:88px;object-fit:contain;transform:rotate(-4deg);transition:transform .3s var(--spring)}
.tb-logo:hover img{transform:rotate(6deg) scale(1.08)}
.tb-logo span{font-family:var(--f-disp);font-size:27px;font-weight:900;letter-spacing:-.5px}
.tb-logo b{color:var(--pur)}
/* панель быстрого доступа — на своём месте в ряду шапки. Шесть подписей в узкое
   окно не влезает, поэтому сжимается и листается свайпом только она: логотип и
   правый блок зафиксированы, и ряд никогда не расползается за край окна */
.tb-nav{flex:0 1 auto;min-width:0;display:flex;gap:6px;margin:0 -4px;padding:8px 4px;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
/* когда панель листается, гаснем у правого края: иначе последняя надпись
   обрывается на середине буквы, и ряд выглядит обрезанным, а не прокручиваемым */
.tb-nav[data-clip="1"]{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),rgba(0,0,0,0) 100%);
}
.tb-nav a{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-hand);font-size:18px;color:var(--ink);text-decoration:none;
  padding:7px 15px;border-radius:999px;border:2.5px solid transparent;transition:.2s var(--spring);
}
.tb-nav a svg{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.tb-nav a:hover{border-color:var(--ink);background:var(--yel);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.tb-right{flex:0 0 auto;display:flex;align-items:center;gap:10px}

.streamer-toggle-box{
  position:relative;display:flex;align-items:center;gap:9px;
  background:var(--card);padding:7px 14px;border:var(--bd);border-radius:999px;
  font-size:13px;font-weight:800;color:var(--ink);cursor:help;box-shadow:var(--sh-s);
}
.streamer-toggle-box .sm-tw-icon{width:17px;height:17px;color:var(--pur)}
.sm-tooltip{
  position:absolute;top:calc(100% + 12px);right:0;width:280px;z-index:60;
  background:var(--card);padding:14px 16px;border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-hand);font-size:16px;line-height:1.45;color:var(--ink2);text-align:left;
  opacity:0;pointer-events:none;transform:translateY(-8px) rotate(1deg);transition:.25s var(--spring);
  box-shadow:var(--sh);
}
.sm-tooltip svg{width:16px;height:16px;float:left;margin:3px 8px 0 0;color:var(--pur)}
.streamer-toggle-box:hover .sm-tooltip{opacity:1;transform:translateY(0) rotate(-1deg)}

/* герой */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:30px;padding:42px 48px 54px;min-height:auto}
.hero-grid{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(var(--sh-rgb),.05) 2px,transparent 2px),linear-gradient(90deg,rgba(var(--sh-rgb),.05) 2px,transparent 2px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 42% 46%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 72% 62% at 42% 46%,#000,transparent 78%);}
.hero-glow{position:absolute;width:640px;height:640px;right:-160px;top:-180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(var(--ac-rgb),.55),rgba(var(--ac-rgb),0) 68%);animation:glowP 7s ease-in-out infinite alternate}
@keyframes glowP{from{transform:scale(.9)}to{transform:scale(1.12)}}
.hero-ghost{
  position:absolute;left:-2%;bottom:-4%;font-family:var(--f-disp);font-weight:900;font-size:clamp(90px,17vw,260px);
  color:transparent;-webkit-text-stroke:2.5px rgba(var(--sh-rgb),.10);letter-spacing:-.03em;pointer-events:none;user-select:none;white-space:nowrap;
}
.hero-in{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;max-width:660px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  padding:8px 16px;border:var(--bd);border-radius:999px;background:var(--yel);
  font-family:var(--f-hand);font-size:17px;color:var(--ink);box-shadow:var(--sh-s);transform:rotate(-1.4deg);
}
.hero-eyebrow svg{width:15px;height:15px;color:var(--pur)}
.hero-h1{font-family:var(--f-disp);font-weight:900;font-size:clamp(46px,8vw,104px);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.ht-line{display:block}
.ht-w{display:inline-block;background:linear-gradient(transparent 58%,var(--ac) 58%,var(--ac) 94%,transparent 94%);padding:0 .06em;transition:transform .25s var(--spring)}
.ht-w:hover{transform:rotate(-2deg) scale(1.03)}
.ht-out{color:var(--pur);background:none}
.ht-em{
  display:inline-block;font-family:var(--f-hand);font-size:clamp(24px,3.2vw,42px);color:var(--pink);
  text-transform:none;transform:rotate(-3deg);margin-left:14px;letter-spacing:0;
}
.hero-sub{font-size:18px;line-height:1.55;color:var(--ink2);font-weight:700;max-width:560px}
.hero-sub b{background:var(--yel);padding:0 6px;border-radius:6px;border:2px solid var(--ink);font-weight:900}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.btn-solid,.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-disp);font-size:16px;font-weight:800;text-decoration:none;color:var(--ink);
  box-shadow:var(--sh);transition:transform .16s var(--spring),box-shadow .16s;position:relative;overflow:hidden;
}
.btn-solid{background:var(--ac)}
.btn-solid::after{content:'';position:absolute;top:-60%;left:-70%;width:44%;height:220%;background:rgba(255,255,255,.5);transform:skewX(-22deg) translateX(-160%);transition:transform .6s}
.btn-solid:hover::after{transform:skewX(-22deg) translateX(360%)}
.btn-ghost{background:var(--card)}
.btn-solid:hover,.btn-ghost:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.btn-solid:active,.btn-ghost:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-solid svg,.btn-ghost svg{width:18px;height:18px}
.hero-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.hs{
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:78px;padding:8px 12px;
  background:var(--card);border:var(--bd);border-radius:var(--rw2);box-shadow:var(--sh-s);
}
.hs:nth-child(1){transform:rotate(-2deg);background:var(--card2)}
.hs:nth-child(2){transform:rotate(1.6deg);background:var(--paper2)}
.hs:nth-child(3){transform:rotate(-1.2deg);background:var(--card2)}
.hs:nth-child(4){transform:rotate(2.2deg);background:var(--lav)}
.hs b{font-family:var(--f-disp);font-size:22px;font-weight:900;line-height:1}
.hs span{font-family:var(--f-hand);font-size:12px;color:var(--ink2)}

/* логотип-стикер: object-fit:contain держим обязательно — при узком окне
   max-height съедает высоту, и без него картинка сплющивается по вертикали */
.hero-logo{position:relative;z-index:2;flex:0 0 auto;align-self:center;margin-left:auto;margin-right:5vw;transform:rotate(3deg)}
.hero-logo img{
  width:min(700px,48vw);height:auto;max-height:min(74vh,780px);object-fit:contain;
  animation:logoBob 5.5s ease-in-out infinite;will-change:transform;
}
@keyframes logoBob{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(1.4deg) translateY(-14px)}}
/* белый свет за лого: отдельный слой ПОД картинкой. Само лого не трогаем —
   ни фильтром, ни тенью; свет дышит вместе с покачиванием */
.hero-logo::before{
  content:'';position:absolute;z-index:-1;left:-14%;right:-14%;top:-12%;bottom:-12%;
  background:radial-gradient(closest-side,rgba(255,255,255,.97) 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,0) 74%);
  animation:logoGlow 5.5s ease-in-out infinite;
}
@keyframes logoGlow{0%,100%{opacity:.86;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
/* в ночи свет приглушаем: на тёмной бумаге белое пятно того же размера
   читалось бы прожектором. Анимация трогает только opacity слоя,
   поэтому сила света — в фоне, а не в opacity */
body[data-theme="night"] .hero-logo::before{
  background:radial-gradient(closest-side,rgba(255,255,255,.46) 0%,rgba(255,255,255,.2) 42%,rgba(255,255,255,0) 72%);
}
body[data-anim="off"] .hero-logo::before{animation:none}
@media (prefers-reduced-motion:reduce){.hero-logo::before{animation:none}}

/* Цветное лого: его не трогаем вообще — ни перекраски, ни обводки, ни тени,
   ни днём, ни ночью. Единственный фильтр, который на него когда-либо вешали,
   был f-logolight для тёмных подложек; с цветным лого он не нужен. */


.hero-stickers{position:absolute;inset:0;pointer-events:none;z-index:3}
.stk{
  position:absolute;font-family:var(--f-hand);font-size:17px;color:var(--ink);
  background:var(--card);border:2.5px solid var(--ink);border-radius:999px;padding:7px 16px;box-shadow:var(--sh-s);
}
.stk.s1{top:10%;right:6%;transform:rotate(6deg);background:var(--pink);animation:stkF 6s ease-in-out infinite}
.stk.s2{top:46%;right:2%;transform:rotate(-5deg);background:var(--teal);animation:stkF 7s .6s ease-in-out infinite}
.stk.s3{bottom:12%;right:12%;transform:rotate(3deg);background:var(--yel);animation:stkF 6.5s 1.1s ease-in-out infinite}
@keyframes stkF{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hero-scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);color:var(--ink2);animation:bob 1.8s ease-in-out infinite;z-index:3}
.hero-scroll svg{width:26px;height:26px}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

/* бегущая строка */
.mqx{overflow:hidden;border-top:var(--bd);border-bottom:var(--bd);background:var(--yel);padding:12px 0}
.mqx-rev{background:var(--lav)}
.mqx-track{display:flex;width:max-content;animation:mqx 26s linear infinite}
.mqx-rev .mqx-track{animation-direction:reverse}
.mqx:hover .mqx-track{animation-play-state:paused}
.mqx-track span{
  display:flex;align-items:center;gap:26px;white-space:nowrap;padding-right:26px;
  font-family:var(--f-disp);font-size:22px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
}
.mqx-track i{font-style:normal;color:var(--pur);font-size:24px}
@keyframes mqx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* секции */
.sec{padding:54px 48px;position:relative;border-top:var(--bd)}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;max-width:720px}
.sec-num{
  align-self:flex-start;font-family:var(--f-disp);font-size:15px;font-weight:900;letter-spacing:2px;
  background:var(--ink);color:var(--paper);padding:6px 14px;border-radius:999px;transform:rotate(-2deg);
}
.sec-head h2{font-family:var(--f-disp);font-size:clamp(30px,4.4vw,50px);font-weight:900;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase}
.sec-head h2 em{font-style:normal;color:var(--pur);background:linear-gradient(transparent 60%,var(--ac) 60%,var(--ac) 94%,transparent 94%)}
.sec-note{font-family:var(--f-hand);font-size:20px;color:var(--ink2)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{
  position:relative;background:var(--card);border:var(--bd);border-radius:var(--rw);padding:18px 16px 18px;
  box-shadow:var(--sh);transition:transform .2s var(--spring),box-shadow .2s;display:flex;flex-direction:column;gap:8px;
}
.step:nth-child(1){transform:rotate(-1deg)}
.step:nth-child(2){transform:rotate(.8deg);background:var(--paper2)}
.step:nth-child(3){transform:rotate(-.6deg)}
.step:hover{transform:translate(-4px,-4px) rotate(0deg);box-shadow:12px 12px 0 var(--ink)}
.step-n{
  position:absolute;top:-16px;right:14px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-size:17px;font-weight:900;background:var(--yel);border:var(--bd);border-radius:50%;
  box-shadow:var(--sh-s);transform:rotate(8deg);
}
.step:nth-child(2) .step-n{background:var(--pink)}
.step:nth-child(3) .step-n{background:var(--teal)}
.step h3{font-family:var(--f-disp);font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.step p{font-size:13.5px;line-height:1.5;color:var(--ink2);font-weight:700}
.step p b{background:var(--yel);padding:0 5px;border-radius:5px;border:2px solid var(--ink)}
.step-tag{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  font-family:var(--f-hand);font-size:15px;color:var(--ink);background:var(--lav);
  border:2.5px solid var(--ink);border-radius:999px;padding:4px 13px;
}
.step-tag svg{width:14px;height:14px}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bt{
  position:relative;background:var(--card);border:var(--bd);border-radius:var(--rw);padding:16px;
  box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px;transition:transform .2s var(--spring),box-shadow .2s;
}
.bt-wide{grid-column:span 2}
.bt:nth-child(odd){transform:rotate(-.7deg)}
.bt:nth-child(even){transform:rotate(.6deg);background:var(--paper2)}
.bt:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--ink)}
.bt::before{
  content:'';position:absolute;top:-12px;left:22px;width:64px;height:22px;transform:rotate(-4deg);
  background:rgba(var(--yel-rgb),.8);border:2px solid var(--ink);border-radius:3px;
}
.bt:nth-child(2)::before{background:rgba(var(--pink-rgb),.7)}
.bt:nth-child(3)::before{background:rgba(var(--teal-rgb),.7)}
.bt:nth-child(5)::before{background:rgba(var(--lav-rgb),.85)}
.bt-ic{width:36px;height:36px;padding:7px;background:var(--ac);border:var(--bd);border-radius:12px 14px 11px 15px/14px 11px 15px 12px;box-shadow:var(--sh-s);color:var(--ink)}
.bt:nth-child(2) .bt-ic{background:var(--pink)}
.bt:nth-child(3) .bt-ic{background:var(--teal)}
.bt:nth-child(4) .bt-ic{background:var(--yel)}
.bt:nth-child(5) .bt-ic{background:var(--lav)}
.bt:nth-child(6) .bt-ic{background:var(--orange)}
.bt h3{font-family:var(--f-disp);font-size:17px;font-weight:900;text-transform:uppercase}
.bt p{font-size:13px;line-height:1.5;color:var(--ink2);font-weight:700}
.bt p b{background:var(--yel);padding:0 5px;border-radius:5px;border:2px solid var(--ink)}

/* настройка запуска */
.sec-go{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.sec-go .sec-head{position:sticky;top:88px;margin-bottom:0}
.form-panel{
  background:var(--card);border:4px solid var(--ink);border-radius:var(--rw);
  box-shadow:var(--sh-l);padding:30px 28px;display:flex;flex-direction:column;gap:4px;
}
.fp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.fp-head h2{font-family:var(--f-disp);font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.fp-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-hand);font-size:15px;color:var(--ink2)}
.fp-live i{width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--ink);animation:liveP 1.4s ease-in-out infinite}
@keyframes liveP{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.err-msg{
  background:#ffe3e3;border:var(--bd);border-radius:var(--rw2);color:#c92a2a;
  padding:12px 16px;font-size:14px;font-weight:800;margin-bottom:14px;display:none;box-shadow:var(--sh-s);
}
.fg{margin-bottom:16px}
.fl{display:flex;align-items:center;gap:8px;font-family:var(--f-hand);font-size:17px;color:var(--ink2);margin-bottom:8px}
.fl svg{color:var(--pur)}
.fi{
  width:100%;padding:14px 16px 14px 50px;font-family:var(--f-ui);font-size:15px;font-weight:800;
  background:var(--paper2);border:var(--bd);border-radius:var(--rw2);color:var(--ink);
  outline:none;transition:.2s;box-shadow:inset 3px 3px 0 rgba(var(--sh-rgb),.08);
}
.fi::placeholder{color:var(--dim)}
.fi:focus{background:var(--card2);box-shadow:var(--sh-s);transform:translate(-2px,-2px)}
.ac-wrap{position:relative}
.ac-ava-abs{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--card2);border:2.5px solid var(--ink);z-index:3}
.ac-list{
  position:absolute;top:calc(100% + 10px);left:0;right:0;background:var(--card);border:var(--bd);
  border-radius:var(--rw2);overflow:hidden;z-index:50;display:none;padding:6px;box-shadow:var(--sh);
}
.ac-list.on{display:block;animation:acIn .34s var(--bounce)}
.ac-list.closing{display:block;animation:acOut .2s var(--ease) forwards}
@keyframes acIn{from{opacity:0;transform:translateY(-14px) scale(.93)}to{opacity:1;transform:none}}
@keyframes acOut{to{opacity:0;transform:translateY(-8px) scale(.96)}}
.ac-tip{display:flex;align-items:center;gap:7px;padding:4px 10px 9px;font-family:var(--f-hand);font-size:14.5px;color:var(--mut)}
.ac-tip svg{width:15px;height:15px;color:var(--pur);flex:0 0 auto;animation:tipNudge 1.8s ease-in-out infinite}
@keyframes tipNudge{0%,100%{transform:translateX(0)}55%{transform:translateX(5px)}}
.ac-item{position:relative;overflow:hidden;border-radius:14px}
.ac-item+.ac-item{margin-top:3px}
.ac-swipe{
  position:absolute;inset:0;z-index:1;display:flex;align-items:center;gap:9px;padding:0 16px;
  background:var(--ac);color:var(--ink);font-family:var(--f-hand);font-size:16px;
}
.ac-swipe svg{width:19px;height:19px;flex:0 0 auto}
.ac-face{
  position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);
  cursor:pointer;touch-action:pan-y;transition:transform .28s var(--spring),background .16s;
}
.ac-face.drag{transition:none}
.ac-item:hover .ac-face{background:var(--yel)}
.ac-item.armed .ac-face{background:var(--green)}
.ac-item.fly .ac-face{transform:translateX(120%);opacity:0;transition:transform .3s ease-in,opacity .3s}
.ac-ava{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);flex:0 0 auto}
.ac-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.ac-login{font-family:var(--f-hand);font-size:13px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-arrow{margin-left:auto;flex:0 0 auto;opacity:.45;display:flex;align-items:center}
.ac-arrow svg{width:15px;height:15px}

.seg{display:flex;background:var(--paper2);padding:5px;border:var(--bd);border-radius:var(--rw2);gap:5px}
.seg input{display:none}
.seg label{
  flex:1;text-align:center;padding:11px 0;font-family:var(--f-disp);font-size:14px;font-weight:800;color:var(--ink2);
  border-radius:12px;cursor:pointer;transition:.18s var(--spring);user-select:none;border:2.5px solid transparent;
}
.seg label:hover{color:var(--ink)}
.seg input:checked + label{color:var(--ink);background:var(--ac);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}
.seg-bg{display:none}

.mode-row{display:flex;gap:10px;margin-bottom:10px;position:relative}
.mode-btn{
  flex:1;padding:13px;background:var(--paper2);border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-disp);font-size:13.5px;font-weight:800;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:.18s var(--spring);
}
.mode-btn svg{width:17px;height:17px;transition:transform .3s var(--spring)}
.mode-btn:hover svg{transform:scale(1.2) rotate(-10deg)}
.mode-btn.on{background:var(--lav);color:var(--ink);box-shadow:var(--sh-s);transform:translate(-2px,-2px) rotate(-1deg)}
.mode-bg{display:none}

.pd{position:relative;width:100%}
.pd-btn{
  width:100%;padding:13px 16px;background:var(--paper2);border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-ui);font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;transition:.18s;
}
.pd-btn svg{width:16px;height:16px;color:var(--ink2);transition:.3s var(--spring)}
.pd-btn:hover{background:var(--card2)}
.pd.open .pd-btn{background:var(--yel);box-shadow:var(--sh-s)}
.pd.open .pd-btn svg{transform:rotate(180deg)}
.pd-list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card2);border:var(--bd);border-radius:var(--rw2);overflow:hidden;z-index:50;max-height:0;opacity:0;transform:translateY(-10px);transition:.3s var(--spring);box-shadow:var(--sh)}
.pd.open .pd-list{max-height:260px;opacity:1;transform:translateY(0);padding:5px}
.pd-opt{padding:11px 14px;font-size:13.5px;font-weight:800;color:var(--ink2);cursor:pointer;transition:.15s;display:flex;align-items:center;gap:10px;border-radius:10px}
.pd-opt svg{width:15px;height:15px;color:var(--ink2)}
.pd-opt:hover{background:var(--paper2);color:var(--ink);padding-left:20px}
.pd-opt.on{color:var(--ink);background:var(--ac);border:2px solid var(--ink)}

.btn-go{
  width:100%;padding:17px;font-family:var(--f-disp);font-size:17px;font-weight:900;letter-spacing:.3px;
  border:var(--bd);border-radius:var(--rw2);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:11px;background:var(--ac);
  box-shadow:var(--sh);transition:transform .16s var(--spring),box-shadow .16s;margin-top:8px;position:relative;overflow:hidden;text-transform:uppercase;
}
.btn-go::after{content:'';position:absolute;top:-60%;left:-70%;width:44%;height:220%;background:rgba(255,255,255,.5);transform:skewX(-22deg) translateX(-160%);transition:transform .6s}
.btn-go:hover::after{transform:skewX(-22deg) translateX(360%)}
.btn-go:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.btn-go:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-go:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--sh-s)}
.btn-go svg{width:19px;height:19px}
.fp-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-hand);font-size:15px;color:var(--ink2)}
.fp-hint svg{width:15px;height:15px;color:var(--pur)}
.fp-hint b{color:var(--ink);background:var(--yel);padding:1px 8px;border-radius:7px;border:2px solid var(--ink)}
/* пока канал не выбран, настройки залиты: режим, период и таймер без него
   всё равно ничего не значат — календарю нужна дата первого клипа этого канала */
.fp-body{
  display:flex;flex-direction:column;gap:4px;margin:0;padding:0;border:0;min-inline-size:0;
  transition:opacity .32s var(--ease),filter .32s var(--ease);
}
.fp-body:disabled{opacity:.4;filter:saturate(.3);pointer-events:none}
.fp-lock{
  display:flex;align-items:center;gap:9px;margin-bottom:15px;padding:12px 14px;
  background:var(--yel);border:var(--bd);border-radius:var(--rw2);box-shadow:var(--sh-s);
  font-family:var(--f-hand);font-size:15.5px;line-height:1.25;color:var(--ink);
  animation:lockIn .42s var(--bounce) backwards;
}
.fp-lock svg{width:18px;height:18px;flex:0 0 auto;color:var(--pur)}
.fp-lock span{flex:1;min-width:0}
.fp-lock[hidden]{display:none}
@keyframes lockIn{from{opacity:0;transform:translateY(-9px) rotate(-1.4deg)}to{opacity:1;transform:none}}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:920px}
.faq-i{background:var(--card);border:var(--bd);border-radius:var(--rw);box-shadow:var(--sh-s);padding:0 22px;transition:box-shadow .2s var(--spring),transform .2s var(--spring),background .2s}
.faq-i:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-1px,-1px)}
.faq-i[open]{background:var(--paper2)}
.faq-i summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  font-family:var(--f-disp);font-weight:900;font-size:19px;line-height:1.25;color:var(--ink);padding:17px 0;
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{
  content:'+';margin-left:auto;flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--f-disp);font-size:23px;font-weight:900;line-height:1;color:var(--ink);
  background:var(--yel);border:2.5px solid var(--ink);border-radius:50%;transition:transform .25s var(--spring),background .2s;
}
.faq-i summary:hover::after{transform:rotate(90deg) scale(1.08)}
.faq-i[open] summary::after{content:'–';background:var(--ac);transform:rotate(-180deg)}
/* ответ — не простыня текста: важная мысль крупно и на своей полосе,
   ключевые слова собраны в стикеры, а внизу ряд цветных плашек-«фишек» */
.faq-a{padding:4px 0 22px;max-width:860px;display:flex;flex-direction:column;gap:13px}
.faq-a p{font-size:16.5px;line-height:1.6;color:var(--ink2);font-weight:700;border-left:4px dashed var(--lav2);padding-left:16px}
.faq-a .faq-lead{font-family:var(--f-disp);font-size:19.5px;line-height:1.42;font-weight:900;color:var(--ink);border-left:4px solid var(--ac);padding-left:16px}
.faq-a b{
  display:inline-block;background:var(--yel);color:var(--ink-d);font-weight:900;
  padding:1px 8px 2px;border:2.5px solid var(--ink);border-radius:9px 12px 9px 13px;
  box-shadow:2.5px 2.5px 0 rgba(var(--sh-rgb),.22);transform:rotate(-.8deg);line-height:1.4;
}
.faq-tags{display:flex;flex-wrap:wrap;gap:9px;border-left:none;padding-left:0}
.faq-tags span{
  font-family:var(--f-hand);font-size:16px;color:var(--ink-d);background:var(--teal);
  border:2.5px solid var(--ink);border-radius:999px;padding:4px 14px;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.4deg);transition:transform .2s var(--spring)
}
.faq-tags span:nth-child(2){background:var(--yel);transform:rotate(1.4deg)}
.faq-tags span:nth-child(3){background:var(--pink);transform:rotate(-.5deg)}
.faq-tags span:hover{transform:rotate(0) scale(1.06)}
/* вывод инфы: панель проступает, а строки внутри выезжают по очереди */
@keyframes faqPanel{from{opacity:0}to{opacity:1}}
@keyframes faqLine{from{opacity:0;transform:translateY(16px) rotate(.5deg)}to{opacity:1;transform:none}}
.faq-i[open] .faq-a{animation:faqPanel .3s var(--ease)}
.faq-i[open] .faq-a>*{animation:faqLine .55s var(--ease) both}
.faq-i[open] .faq-a>:nth-child(2){animation-delay:.1s}
.faq-i[open] .faq-a>:nth-child(3){animation-delay:.2s}
body[data-anim="off"] .faq-i[open] .faq-a,body[data-anim="off"] .faq-i[open] .faq-a>*{animation:none}
@media (prefers-reduced-motion:reduce){.faq-i[open] .faq-a,.faq-i[open] .faq-a>*{animation:none}}

/* футер */
.site-footer{position:relative;z-index:2;border-top:4px solid var(--ink);background:var(--pur);color:#fff;padding:44px 56px 0;font-family:var(--f-ui)}
.ft-giant{
  font-family:var(--f-disp);font-weight:900;font-size:clamp(48px,11.6vw,170px);line-height:.9;letter-spacing:-.03em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:2.5px rgba(255,255,255,.5);user-select:none;margin-bottom:26px;
}
.ft-inner{display:flex;gap:56px;justify-content:space-between;flex-wrap:wrap;padding-bottom:34px}
.ft-logo{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ft-logo img{width:104px;height:104px;object-fit:contain;transform:rotate(-4deg)}
.ft-logo span{font-family:var(--f-disp);font-size:24px;font-weight:900;letter-spacing:-.02em;color:#fff}
.ft-logo b{color:var(--yel)}
.ft-tag{color:rgba(255,255,255,.85);font-size:14px;line-height:1.6;max-width:340px;margin-bottom:18px;font-weight:700}
.ft-tag b{color:var(--yel)}
.ft-heart{
  width:15px;height:15px;display:inline-block;vertical-align:-2px;color:var(--pink);
  filter:drop-shadow(1.5px 2px 0 rgba(0,0,0,.45));animation:heartBeat 1.8s var(--ease) infinite;
}
@keyframes heartBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.3) rotate(-6deg)}28%{transform:scale(1)}42%{transform:scale(1.18) rotate(5deg)}56%{transform:scale(1)}}
.ft-socials{display:flex;flex-wrap:wrap;gap:10px}
.soc{
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  background:#fff;border:3px solid var(--ink);color:var(--ink);
  font-size:13px;font-weight:900;text-decoration:none;box-shadow:4px 4px 0 rgba(0,0,0,.35);transition:.18s var(--spring);
}
.soc svg{width:16px;height:16px}
.soc:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:7px 7px 0 rgba(0,0,0,.35);background:var(--yel)}
.ft-cols{display:flex;gap:56px;flex-wrap:wrap}
.ft-col{display:flex;flex-direction:column;gap:11px;min-width:150px}
.ft-col h4{font-family:var(--f-hand);font-size:17px;color:var(--yel);margin-bottom:2px}
.ft-col a{color:rgba(255,255,255,.85);font-size:14px;font-weight:800;text-decoration:none;transition:.2s;width:fit-content;border-bottom:2px dashed rgba(255,255,255,.4)}
.ft-col a:hover{color:var(--yel);border-bottom-style:solid}
.ft-col svg{color:var(--yel)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:3px dashed rgba(255,255,255,.35);padding:18px 0 24px;font-size:13px;color:rgba(255,255,255,.75);font-weight:800}
.ft-credit{opacity:.85;font-family:var(--f-hand);font-size:15px}

/* ═══════════════════════════════════════
   LOADING
   ═══════════════════════════════════════ */
#S-load{flex-direction:column;align-items:center;justify-content:center;gap:22px;font-family:var(--f-load);
  background:
    radial-gradient(700px 400px at 50% 36%, rgba(var(--lav-rgb),.5), transparent 66%),
    radial-gradient(520px 320px at 84% 84%, rgba(var(--ac-rgb),.34), transparent 68%),
    var(--paper);}
.ld-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-logo{width:264px;height:auto;animation:logoBob 3.4s ease-in-out infinite;transform:rotate(-3deg)}
.ld-label{font-family:var(--f-hand);font-size:22px;color:var(--pur);transform:rotate(-2deg)}
#ld-dots{display:inline-block;width:26px;text-align:left}
.ld-pct{font-family:var(--f-disp);font-size:56px;font-weight:900;letter-spacing:-1px;color:var(--ink)}
.ld-tube{
  position:relative;width:min(420px,72vw);height:44px;background:var(--card);
  border:4px solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:var(--sh);
}
#ld-wave{
  position:absolute;left:0;right:0;bottom:0;top:100%;transition:top .5s var(--ease);
  background:repeating-linear-gradient(-45deg,var(--ac) 0 14px,var(--ac2) 14px 28px);
  border-top:3px solid var(--ink);
}
.ld-txt{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 24px}
.ld-title{font-family:var(--f-ui);font-size:14px;font-weight:800;color:var(--ink2);max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-cnt{font-family:var(--f-disp);font-size:15px;font-weight:900;color:var(--pur);letter-spacing:2px}

/* ═══════════════════════════════════════
   BATTLE
   ═══════════════════════════════════════ */
#S-battle{flex-direction:column;overflow:hidden;font-family:var(--f-game);background:var(--paper)}
.half-bg{position:absolute;top:0;bottom:0;z-index:0;filter:blur(90px);opacity:.22;pointer-events:none;animation:breathe 8s infinite alternate ease-in-out}
.bg-left{left:-10%;width:60vw;background:var(--s1)}
.bg-right{right:-10%;width:60vw;background:var(--s2)}
body[data-gfx="low"] .half-bg{display:none}
@keyframes breathe{0%{opacity:.12;transform:scale(.9)}100%{opacity:.3;transform:scale(1.08)}}
.battle-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.battle-particles .bp{position:absolute;border-radius:50%;border:2px solid var(--ink);animation:rise linear infinite;opacity:.7}
/* цвет пыли берёт из темы, а не из скрипта: при смене цвета её не нужно
   перестраивать — иначе каждое движение мышкой в палитре пересобирает узлы */
.battle-particles .bp:nth-child(4n+1){background:var(--ac)}
.battle-particles .bp:nth-child(4n+2){background:var(--s1)}
.battle-particles .bp:nth-child(4n+3){background:var(--s2)}
.battle-particles .bp:nth-child(4n){background:var(--ac2)}
@keyframes rise{from{transform:translateY(105vh) rotate(0)}to{transform:translateY(-12vh) rotate(360deg)}}

.bh{
  height:60px;flex:0 0 60px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-bottom:var(--bd);background:var(--card);z-index:10;
}
.bh-ch{display:flex;align-items:center;gap:10px;min-width:0}
.bh-ava{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2.5px solid var(--ink);background:var(--card2)}
.bh-name{font-family:var(--f-disp);font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bh-badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:var(--bd);border-radius:999px;
  font-family:var(--f-disp);font-size:12.5px;font-weight:900;letter-spacing:.6px;background:var(--yel);
  box-shadow:var(--sh-s);animation:badgeIn .5s var(--spring);white-space:nowrap;
}
.bh-badge svg{width:14px;height:14px}
.bh-badge.playoff{background:var(--teal)}
.bh-badge.semi{background:var(--orange)}
.bh-badge.final{background:var(--pink)}
@keyframes badgeIn{from{transform:scale(.6) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
.bh-right{display:flex;align-items:center;gap:8px}
.btn-mute{
  width:42px;height:42px;border-radius:14px 16px 13px 17px/16px 13px 17px 14px;border:var(--bd);
  background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s;
}
.btn-mute svg{width:19px;height:19px}
.btn-mute #ic-vol-off{display:none}
.btn-mute.is-muted{background:#ffe3e3}
.btn-mute.is-muted #ic-vol-on{display:none}
.btn-mute.is-muted #ic-vol-off{display:block}
.btn-mute:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hype{position:relative;height:24px;flex:0 0 24px;border-bottom:var(--bd);background:var(--paper2);overflow:hidden;z-index:9}
#hype-fill{height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--pink) 0 12px,var(--yel) 12px 24px);border-right:3px solid var(--ink);transition:width .25s}
.hype-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--f-hand);font-size:14px;color:var(--ink);mix-blend-mode:multiply;letter-spacing:1px}

.arena{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;gap:26px;padding:18px 26px;min-height:0}
.cc{
  position:relative;width:var(--cardw);background:var(--card);border:4px solid var(--ink);border-radius:var(--rw);
  box-shadow:var(--sh-l);overflow:hidden;transition:transform .3s var(--spring),box-shadow .3s,opacity .4s;
}
.cc:nth-child(1){transform:rotate(-.7deg)}
.cc:nth-child(3){transform:rotate(.7deg)}
.cc.W{transform:scale(1.03) rotate(0);box-shadow:12px 12px 0 var(--green);z-index:3}
.cc.L{opacity:.45;transform:scale(.96) rotate(1.5deg);filter:grayscale(.7)}
.cc.GONE{opacity:0;transform:scale(.8);pointer-events:none}
.cc-iframe{position:relative;aspect-ratio:16/9;background:var(--ink-d) center/cover no-repeat;border-bottom:4px solid var(--ink)}
.cc-iframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cc-poster{
  position:absolute;inset:0;background:var(--ink-d) center/cover no-repeat;display:flex;align-items:center;justify-content:center;
  transition:opacity .2s var(--ease);z-index:2;pointer-events:none;
}
.cc-poster::after{content:'';position:absolute;inset:0;
  background:radial-gradient(115% 95% at 50% 46%,rgba(var(--sh-rgb),.1) 0 36%,rgba(var(--sh-rgb),.52) 100%)}
.cc-poster.gone{opacity:0}
.cc-num{
  position:absolute;top:10px;left:10px;z-index:3;font-family:var(--f-disp);font-size:13px;font-weight:900;letter-spacing:1px;
  background:var(--yel);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:5px 13px;box-shadow:3px 3px 0 var(--ink);
}
.cc:nth-child(3) .cc-num{background:var(--pink)}
/* кнопка play — круглая, с подписью: квадрат с треугольником слишком похож
   на родную кнопку плеера, и люди жмут на неё вместо нашей.
   pointer-events:none держит весь постер: клик проваливается в плеер и
   запускает его по-настоящему, одним нажатием */
.cc-play{
  position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:11px;
  animation:playBob 2.4s ease-in-out infinite;
}
.ccb-disc{
  position:relative;width:88px;height:88px;border:4px solid var(--ink);background:var(--ac);
  border-radius:50% 48% 52% 50%/49% 53% 47% 51%;box-shadow:var(--sh);
  display:flex;align-items:center;justify-content:center;
}
.ccb-disc::before{content:'';position:absolute;left:8px;right:10px;top:6px;height:38px;border-radius:50%;
  background:linear-gradient(165deg,rgba(255,255,255,.52),rgba(255,255,255,0))}
.ccb-disc::after{content:'';position:absolute;inset:-4px;border:3.5px solid var(--ink);border-radius:inherit;
  opacity:0;animation:ccbPing 2.4s ease-out infinite}
.ccb-disc svg{position:relative;width:38px;height:38px;margin-left:6px;overflow:visible;filter:drop-shadow(2px 2px 0 rgba(var(--sh-rgb),.35))}
.ccb-cap{
  font-family:var(--f-hand);font-size:15.5px;line-height:1;padding:7px 14px 8px;background:var(--paper);
  color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2.5deg);
}
@keyframes playBob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes ccbPing{0%{opacity:.3;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.44)}}
/* над клипами перчатка прячется, а курсор возвращается родной: внутри чужого
   фрейма Твича перчатка всё равно замирает (туда не долетает ни одного
   pointermove), а стрелка у плеера и так своя */
body[data-cursor="on"] .cc,body[data-cursor="on"] .cc *,
body[data-cursor="on"] #win-clip-wrap,body[data-cursor="on"] #win-clip-wrap *{cursor:auto !important}
body.cur-native #cur{display:none}
.cc-info{display:flex;gap:12px;padding:12px 14px;align-items:center}
.cc-ava{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2.5px solid var(--ink);background:var(--card2);flex-shrink:0}
.cc-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cc-title{font-family:var(--f-disp);font-size:14.5px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-author{font-family:var(--f-hand);font-size:14px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-views{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);font-size:12.5px;font-weight:900;background:var(--paper2);border:2px solid var(--ink);border-radius:999px;padding:3px 10px;flex-shrink:0}
.cc-views svg{width:16px;height:16px;flex-shrink:0}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.vs-ic{
  width:74px;height:74px;display:flex;align-items:center;justify-content:center;
  background:var(--yel);border:4px solid var(--ink);border-radius:50%;box-shadow:var(--sh);
  animation:vsPulse 1.6s ease-in-out infinite;color:var(--ink);
}
.vs-ic svg{width:34px;height:34px}
@keyframes vsPulse{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(6deg) scale(1.08)}}
.vs.blurred{filter:blur(6px);opacity:.4}

.vp-cont{position:relative;z-index:6;padding:0 22px 16px}
.vp{
  background:var(--card);border:4px solid var(--ink);border-radius:var(--rw);box-shadow:var(--sh-l);
  padding:14px 18px;display:flex;flex-direction:column;gap:10px;position:relative;
}
.vp-main{display:flex;align-items:center;gap:14px}
.vp-ava-wrap{position:relative;flex-shrink:0}
.vp-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid var(--ink);background:var(--card2);transition:transform .2s var(--spring)}
.vp-ava.lead{transform:scale(1.15) rotate(-4deg);box-shadow:0 0 0 4px var(--yel)}
.vp-ava-wrap::before{content:attr(data-letter);position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-family:var(--f-disp);font-size:20px;font-weight:900;background:var(--lav);border-radius:50%;border:3px solid var(--ink)}
.vp-bar-wrap{position:relative;flex:1;height:46px;border:var(--bd);border-radius:999px;overflow:hidden;background:var(--paper2)}
.vp-s1,.vp-s2{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 14px;transition:width .35s var(--ease);overflow:hidden}
.vp-s1{left:0;background:repeating-linear-gradient(-45deg,var(--s1) 0 12px,color-mix(in srgb,var(--s1) 76%,#fff) 12px 24px)}
.vp-s2{right:0;justify-content:flex-end;background:repeating-linear-gradient(45deg,var(--s2) 0 12px,color-mix(in srgb,var(--s2) 76%,#fff) 12px 24px)}
.vp-side span{font-family:var(--f-disp);font-size:13px;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
#v-spark{position:absolute;top:-5px;bottom:-5px;width:6px;margin-left:-3px;background:var(--ink);border-radius:4px;z-index:3;transition:left .35s var(--ease)}
.energy-core{display:none}
.vp-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vp-btn{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-disp);font-size:14px;font-weight:900;color:var(--ink);background:var(--card);
  cursor:pointer;box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s;text-transform:uppercase;
}
.vp-btn svg{width:16px;height:16px}
.vp-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.vp-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.vp-btn.primary{background:var(--ac)}
.vp-btn.ghost{background:var(--card)}
.vp-btn.danger{background:var(--red);color:#fff}
.vp-btn.vote-l{background:var(--s1);color:#fff}
.vp-btn.vote-r{background:var(--s2);color:#fff}
.vp-btn b{background:rgba(255,255,255,.75);color:var(--ink);border:2px solid var(--ink);border-radius:7px;padding:0 7px}
.vp-timer-block{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vp-timer-text{font-family:var(--f-hand);font-size:15px;color:var(--ink2)}
.vp-timer-text b{background:var(--yel);border:2px solid var(--ink);border-radius:6px;padding:0 6px}
.vp-countdown{font-family:var(--f-disp);font-size:30px;font-weight:900;min-width:52px;text-align:center;background:var(--paper2);border:var(--bd);border-radius:12px;padding:2px 8px}
.vp-countdown.hot{background:var(--red);color:#fff;animation:hotPulse .5s ease-in-out infinite}
@keyframes hotPulse{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(2deg)}}
.vp-progress-track{height:10px;border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper2)}
.vp-progress-fill{height:100%;background:repeating-linear-gradient(-45deg,var(--ac) 0 10px,var(--ac2) 10px 20px);transition:width 1s linear}

/* ── виджет чата ── */
#chat-widget{
  position:absolute;top:96px;bottom:132px;right:14px;width:308px;z-index:20;
  display:flex;flex-direction:column;background:rgba(var(--card-rgb),var(--chatop));
  border:var(--bd);border-radius:var(--rw);box-shadow:var(--sh);overflow:hidden;
  opacity:0;transform:translateX(30px) rotate(1.5deg);pointer-events:none;transition:.3s var(--spring);
}
#chat-widget.on{opacity:1;transform:translateX(0) rotate(0);pointer-events:auto}
body[data-chatpos="left"] #chat-widget{right:auto;left:14px;transform:translateX(-30px) rotate(-1.5deg)}
body[data-chatpos="left"] #chat-widget.on{transform:translateX(0) rotate(0)}
.cw-head{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:var(--bd);background:var(--lav)}
.cw-dot{width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--ink);animation:liveP 1.4s infinite}
.cw-title{font-family:var(--f-disp);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.6px}
.cw-count{margin-left:auto;font-family:var(--f-disp);font-size:12px;font-weight:900;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:2px 9px}
.cw-x{width:28px;height:28px;border:2.5px solid var(--ink);border-radius:9px;background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.cw-x svg{width:14px;height:14px}
.cw-x:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.cw-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px}
.cw-msg{
  background:var(--card2);border:2.5px solid var(--ink);border-radius:12px 14px 12px 4px;padding:7px 10px;
  font-size:12.5px;line-height:1.45;font-weight:700;color:var(--ink2);animation:cwIn .3s var(--spring);word-break:break-word;
}
body[data-chatpos="left"] .cw-msg{border-radius:12px 14px 4px 12px;animation-name:cwInL}
.cw-msg.vote{background:var(--yel);color:var(--ink);font-weight:900;border-width:3px}
@keyframes cwIn{from{opacity:0;transform:translateX(24px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes cwInL{from{opacity:0;transform:translateX(-24px) rotate(-2deg)}to{opacity:1;transform:none}}
body[data-chatsize="s"] .cw-msg{font-size:11.5px}
body[data-chatsize="l"] .cw-msg{font-size:14px}
.cw-time{font-size:10px;color:var(--dim);margin-right:6px;font-weight:800}
.cw-badge{display:inline-block;font-size:9.5px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;border:2px solid var(--ink);border-radius:6px;padding:0 5px;margin-right:5px;background:var(--teal);color:var(--ink)}
.cw-badge.broad{background:var(--red);color:#fff}
.cw-badge.mod{background:var(--green)}
.cw-badge.vip{background:var(--pink)}
.cw-badge.sub{background:var(--lav)}
.cw-name{font-weight:900;margin-right:5px}
.cw-foot{padding:8px 12px;border-top:2.5px dashed var(--ink);font-family:var(--f-hand);font-size:14px;color:var(--ink2);text-align:center}

/* ── победитель ── */
#win-ov{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:rgba(var(--paper-rgb),.94);backdrop-filter:blur(6px);padding:24px;overflow:auto}
#win-ov.on{display:flex}
#confetti-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.win-logo{position:absolute;top:18px;right:24px;width:min(208px,22vw);height:auto;transform:rotate(6deg);z-index:2;animation:logoBob 4.5s ease-in-out infinite}
.win-kicker{font-family:var(--f-hand);font-size:22px;color:var(--pur);transform:rotate(-2deg);z-index:2}
.win-title{display:flex;align-items:center;gap:16px;font-family:var(--f-disp);font-size:clamp(38px,7vw,86px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;z-index:2;animation:winIn .6s var(--spring)}
.win-title span{background:linear-gradient(transparent 58%,var(--yel) 58%,var(--yel) 94%,transparent 94%);padding:0 .08em}
.win-trophy{width:74px;height:74px;flex-shrink:0;color:var(--ink);background:var(--pink);border:4px solid var(--ink);border-radius:50%;padding:16px;box-shadow:var(--sh);animation:trophyIn .8s var(--spring)}
.win-trophy svg{width:100%;height:100%}
@keyframes trophyIn{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(0)}}
@keyframes winIn{from{opacity:0;transform:translateY(40px) rotate(2deg)}to{opacity:1;transform:none}}
.win-clip-wrap{position:relative;width:min(760px,86vw);aspect-ratio:16/9;border:4px solid var(--ink);border-radius:var(--rw);overflow:hidden;box-shadow:var(--sh-l);background:#000;z-index:2}
.win-clip-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.win-meta-final{display:flex;align-items:center;gap:14px;z-index:2;background:var(--card);border:var(--bd);border-radius:var(--rw2);padding:12px 18px;box-shadow:var(--sh-s);max-width:min(760px,86vw)}
#win-ava{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid var(--ink);background:var(--card2)}
.win-text-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.win-sub{font-family:var(--f-disp);font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw}
.win-author{font-family:var(--f-hand);font-size:16px;color:var(--pur)}
#win-score{font-family:var(--f-hand);font-size:16px;color:var(--ink2);margin-left:auto;text-align:right}
.win-buttons{display:flex;gap:14px;z-index:2;flex-wrap:wrap;justify-content:center}
.btn-share,.btn-re{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-disp);font-size:15px;font-weight:900;cursor:pointer;box-shadow:var(--sh);
  transition:transform .16s var(--spring),box-shadow .16s;text-transform:uppercase;color:var(--ink);
}
.btn-share{background:var(--ac)}
.btn-re{background:var(--card)}
.btn-share:hover,.btn-re:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink)}
.btn-share:active,.btn-re:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-share svg,.btn-re svg{width:18px;height:18px}

/* ── пузыри голосов и +1 ── */
.vote-bubble{
  position:fixed;z-index:60;width:52px;height:52px;border-radius:50% 50% 50% 8px;border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;
  box-shadow:var(--sh-s);animation:bubbleDrop 1.5s var(--ease) forwards;pointer-events:none;
}
.vote-bubble img{width:100%;height:100%;object-fit:cover}
@keyframes bubbleDrop{0%{opacity:0;transform:translateY(30px) scale(.4) rotate(-12deg)}25%{opacity:1;transform:translateY(0) scale(1.1) rotate(6deg)}45%{transform:translateY(-6px) scale(1) rotate(-3deg)}80%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(.8) rotate(8deg)}}
.plus-one{position:fixed;z-index:61;font-family:var(--f-disp);font-size:26px;font-weight:900;color:var(--ink);text-shadow:2px 2px 0 #fff;animation:p1 .9s var(--ease) forwards;pointer-events:none}
@keyframes p1{from{opacity:0;transform:translateY(10px) scale(.6)}30%{opacity:1;transform:translateY(-8px) scale(1.2)}to{opacity:0;transform:translateY(-60px) scale(1)}}

body.shake #S-battle{animation:shakeX .34s linear}
@keyframes shakeX{0%,100%{transform:translate(0)}20%{transform:translate(-7px,3px) rotate(-.4deg)}40%{transform:translate(6px,-4px) rotate(.4deg)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,3px)}}

/* ── круговая закраска при смене темы ── */
#theme-wipe{position:fixed;inset:0;z-index:9000;pointer-events:none;background:var(--paper);clip-path:circle(0px at 50% 0)}

/* ── переход раунда ── */
#round-transition{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:var(--yel);clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .45s var(--ease)}
#round-transition.on{clip-path:inset(0 0 0 0)}
#round-transition.out{clip-path:inset(100% 0 0 0)}
#rt-title{font-family:var(--f-disp);font-size:clamp(48px,10vw,140px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;color:var(--ink);transform:rotate(-2deg)}
#rt-subtitle{font-family:var(--f-hand);font-size:clamp(20px,3vw,34px);color:var(--pur)}

/* ── прокрутка ──
   внутри карточек и виджетов нативная полоса ломает нарисованную рамку,
   поэтому там её прячем совсем (колесо, свайп и стрелки продолжают работать);
   на основном экране оставляем тонкую полосу-капсулу в цвет темы */
.set-card,.update-card,.bk-card,.bk-body,.cw-list,.arena,#win-ov,.cal-card,.note-card{scrollbar-width:none}
.set-card::-webkit-scrollbar,.update-card::-webkit-scrollbar,.bk-card::-webkit-scrollbar,
.bk-body::-webkit-scrollbar,.cw-list::-webkit-scrollbar,.arena::-webkit-scrollbar,#win-ov::-webkit-scrollbar,
.cal-card::-webkit-scrollbar,.note-card::-webkit-scrollbar{width:0;height:0;display:none}
#S-setup{scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
#S-setup::-webkit-scrollbar{width:15px}
#S-setup::-webkit-scrollbar-track{background:transparent}
#S-setup::-webkit-scrollbar-thumb{background:var(--ink);border:4.5px solid transparent;border-radius:999px;background-clip:padding-box}
#S-setup::-webkit-scrollbar-thumb:hover{background:var(--pur);border-width:3.5px}

/* ── модалки ── */
#update-modal,#settings-modal,#bracket-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(var(--sh-rgb),.45);backdrop-filter:blur(3px);padding:20px}
#update-modal.on,#settings-modal.on,#bracket-modal.on{display:flex}
.update-card,.set-card,.bk-card{
  background:var(--card);border:4px solid var(--ink);border-radius:var(--rw);box-shadow:var(--sh-l);
  width:min(680px,94vw);max-height:86vh;overflow-y:auto;padding:26px 28px;animation:winIn .35s var(--spring);
}
.set-head,.bk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.set-head h3,.bk-head h3{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-size:24px;font-weight:900;text-transform:uppercase}
.set-head h3 svg,.bk-head h3 svg{width:24px;height:24px;color:var(--pur)}
.update-card h3{font-family:var(--f-disp);font-size:28px;font-weight:900;text-transform:uppercase;margin-bottom:8px}
.uc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.uc-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-disp);font-size:15px;font-weight:900;background:var(--ac);border:var(--bd);border-radius:999px;padding:5px 15px;box-shadow:var(--sh-s);transform:rotate(-2deg)}
.uc-badge svg{width:15px;height:15px}
.uc-date{font-family:var(--f-hand);font-size:16px;font-weight:700;color:var(--ink2);transform:rotate(-1deg)}
/* ряд версий сверху: свежая слева, дальше архив прошлых обновлений */
.uc-vers{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding-bottom:14px;border-bottom:2px dashed rgba(var(--sh-rgb),.24)}
.uc-vers-lbl{display:flex;align-items:center;gap:7px;font-family:var(--f-disp);font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-right:2px}
.uc-vers-lbl svg{width:15px;height:15px}
.uc-ver{display:inline-flex;align-items:baseline;gap:7px;padding:6px 13px;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;cursor:pointer;transition:transform .18s var(--spring),box-shadow .18s,background .2s}
.uc-ver b{font-family:var(--f-disp);font-size:14px;font-weight:900;color:var(--ink)}
.uc-ver i{font-style:normal;font-size:12px;font-weight:800;color:var(--ink2)}
.uc-ver:hover{transform:translate(-1px,-2px);box-shadow:3px 3px 0 var(--ink)}
.uc-ver.on{background:var(--ac);box-shadow:3px 3px 0 var(--ink)}
.uc-ver.on b,.uc-ver.on i{color:var(--ac-ink)}
.uc-body{display:none}
.uc-body.on{display:block;animation:faqPanel .3s var(--ease)}
body[data-anim="off"] .uc-body.on{animation:none}
@media (prefers-reduced-motion:reduce){.uc-body.on{animation:none}}
/* окно обновления собрано как «частые вопросы»: важная мысль плашкой,
   дальше по группам, которые раскрываются по тычку, а не простыня галочек */
.uc-lead{font-family:var(--f-disp);font-size:19px;line-height:1.42;font-weight:900;color:var(--ink);border-left:4px solid var(--ac);padding-left:16px;margin:0 0 14px}
.uc-lead b,.uc-gl b{
  display:inline-block;background:var(--yel);color:var(--ink-d);font-weight:900;
  padding:1px 8px 2px;border:2.5px solid var(--ink);border-radius:9px 12px 9px 13px;
  box-shadow:2.5px 2.5px 0 rgba(var(--sh-rgb),.22);transform:rotate(-.8deg);line-height:1.4;
}
.uc-tags,.uc-g-in .uc-tags{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0}
.uc-tags span{
  font-family:var(--f-hand);font-size:15.5px;color:var(--ink-d);background:var(--teal);
  border:2.5px solid var(--ink);border-radius:999px;padding:3px 13px;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.4deg);transition:transform .2s var(--spring)
}
.uc-tags span:nth-child(2){background:var(--yel);transform:rotate(1.4deg)}
.uc-tags span:nth-child(3){background:var(--pink);transform:rotate(-.5deg)}
.uc-tags span:nth-child(4){background:var(--ac);transform:rotate(1deg)}
/* дальше ряд может не закончиться на четырёх: даём пятому и шестому свои цвета
   и наклон, иначе два одинаковых бирюзовых плашка-в-плашку выглядят склейкой.
   Берём только фиксированные яркие токены: --lav ночью тёмный, и знак на нём тонул */
.uc-tags span:nth-child(5){background:var(--orange);transform:rotate(-1.1deg)}
.uc-tags span:nth-child(n+6){background:var(--teal);transform:rotate(1.7deg)}
.uc-tags span:hover{transform:rotate(0) scale(1.06)}
.uc-groups{display:flex;flex-direction:column;gap:11px;margin:18px 0 20px}
.uc-g{background:var(--card);border:var(--bd);border-radius:var(--rw);box-shadow:var(--sh-s);transition:box-shadow .2s var(--spring),transform .2s var(--spring),background .2s}
.uc-g:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-1px,-1px)}
.uc-g[open]{background:var(--paper2)}
.uc-g summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  font-family:var(--f-disp);font-weight:900;font-size:16.5px;line-height:1.2;color:var(--ink);
  text-transform:uppercase;padding:13px 15px;
}
.uc-g summary::-webkit-details-marker{display:none}
.uc-g summary svg{width:21px;height:21px;flex-shrink:0;color:var(--pur)}
.uc-n{font-style:normal;font-family:var(--f-disp);font-size:12.5px;font-weight:900;color:var(--ink);background:var(--lav2);
  border:2.5px solid var(--ink);border-radius:999px;padding:1px 8px;margin-left:2px}
.uc-g summary::after{
  content:'+';margin-left:auto;flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--f-disp);font-size:21px;font-weight:900;line-height:1;color:var(--ink);
  background:var(--yel);border:2.5px solid var(--ink);border-radius:50%;transition:transform .25s var(--spring),background .2s;
}
.uc-g summary:hover::after{transform:rotate(90deg) scale(1.08)}
.uc-g[open] summary::after{content:'–';background:var(--ac);transform:rotate(-180deg)}
.uc-g-in{padding:2px 15px 16px;display:flex;flex-direction:column;gap:12px;animation:faqPanel .3s var(--ease)}
.uc-g-in>*{animation:faqLine .5s var(--ease) both}
.uc-g-in>:nth-child(2){animation-delay:.08s}
.uc-g-in>:nth-child(3){animation-delay:.16s}
.uc-gl{font-family:var(--f-disp);font-size:16.5px;line-height:1.42;font-weight:900;color:var(--ink);border-left:4px solid var(--ac);padding-left:14px;margin:0}
.uc-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.uc-list li{list-style:none;display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink2);font-weight:700}
.uc-list li svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--pur)}
.uc-old summary svg{color:var(--ink2)}
.uc-old .uc-list li svg{color:var(--lav)}
body[data-anim="off"] .uc-g-in,body[data-anim="off"] .uc-g-in>*{animation:none}
@media (prefers-reduced-motion:reduce){.uc-g-in,.uc-g-in>*{animation:none}}
.update-btn-close{border:var(--bd);border-radius:var(--rw2);font-family:var(--f-disp);font-weight:900;cursor:pointer;box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s;padding:12px 26px;font-size:15px;background:var(--ac);color:var(--ink);text-transform:uppercase}
.update-btn-close:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.update-dismiss{display:inline-flex;align-items:center;gap:8px;margin-left:14px;font-size:13px;font-weight:800;color:var(--ink2)}
.update-dismiss input{width:18px;height:18px;accent-color:var(--pur)}
.update-dismiss label{cursor:pointer}

/* настройки */
.set-sec{border-top:2.5px dashed rgba(var(--sh-rgb),.25);padding:16px 0;display:flex;flex-direction:column;gap:12px}
.set-sec:first-of-type{border-top:none}
.set-lbl{display:flex;align-items:center;gap:8px;font-family:var(--f-hand);font-size:18px;color:var(--pur)}
.set-lbl svg{width:16px;height:16px}
.set-seg{display:flex;gap:6px;background:var(--paper2);border:var(--bd);border-radius:var(--rw2);padding:5px}
.set-seg button{flex:1;padding:10px 0;border:2.5px solid transparent;border-radius:12px;background:transparent;font-family:var(--f-disp);font-size:13.5px;font-weight:800;color:var(--ink2);cursor:pointer;transition:.18s var(--spring)}
.set-seg button:hover{color:var(--ink)}
.set-seg button.on{background:var(--ac);border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}
.set-note{font-family:var(--f-hand);font-size:15px;color:var(--ink2);line-height:1.45}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;font-weight:800;color:var(--ink2)}
.set-row input[type=range]{flex:1;max-width:240px;accent-color:var(--pur);height:22px}
.set-swatches{display:flex;gap:10px}
.set-swatches button,.set-swatches .sw-custom{width:42px;height:42px;flex:0 0 auto;position:relative;border:var(--bd);border-radius:14px 16px 13px 17px/16px 13px 17px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--card);box-shadow:var(--sh-s);transition:transform .16s var(--spring),background .16s,box-shadow .16s}
.set-swatches i{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);display:block}
.set-swatches button:hover,.set-swatches .sw-custom:hover{transform:translate(-2px,-2px) rotate(-6deg)}
.set-swatches .on{transform:translate(-2px,-2px) scale(1.08);background:var(--yel);box-shadow:5px 5px 0 var(--ink)}
/* свой цвет: иконка — RGB-колесо с резкими границами, как и положено по стилю */
.sw-rgb{position:relative;background:conic-gradient(#ff2d55 0 33.33%,#37d67a 0 66.66%,#2b7fff 0);animation:rgbSpin 9s linear infinite}
.sw-rgb:after{content:'';position:absolute;inset:30%;border-radius:50%;background:var(--my,#3ddc84);box-shadow:0 0 0 1.5px var(--ink)}
@keyframes rgbSpin{to{transform:rotate(360deg)}}
.set-custom{margin-top:12px;padding:11px 13px 12px;background:var(--paper2);border:2.5px dashed var(--lav2);border-radius:var(--rw2)}
.set-custom[hidden]{display:none}
.sc-row{display:flex;align-items:center;gap:10px}
.sc-row+.sc-row{margin-top:10px}
.sc-row[hidden]{display:none}
.sc-cap{flex:0 0 80px;font-family:var(--f-disp);font-size:10px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.sc-pal{display:flex;flex-wrap:wrap;gap:7px}
.sc-pal button{position:relative;width:27px;height:27px;border:2.5px solid var(--ink);border-radius:50%;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:.16s var(--spring)}
.sc-pal button:hover{transform:translate(-2px,-2px) rotate(-9deg) scale(1.12)}
/* «текущий» чип больше не обводим жирным кольцом — оно раздувалось в белое
   пятно; просто приглушаем остальные, а активный остаётся полным цветом */
.sc-pal button:not(.on){opacity:.58}
.sc-pal button:not(.on):hover{opacity:1}
.sc-del{position:absolute;inset:-1px;display:none;align-items:center;justify-content:center;background:rgba(var(--sh-rgb),.74);border-radius:50%}
.sc-del svg{width:11px;height:11px;fill:none;stroke:var(--paper);stroke-width:2.6;stroke-linecap:round}
#ac-fav button:hover .sc-del{display:flex}
.sc-hint{display:flex;align-items:center;gap:9px;margin-top:12px;font-family:var(--f-hand);font-size:14.5px;line-height:1.3;color:var(--mut)}
.sc-val{flex:0 0 auto;font-family:var(--f-disp);font-size:12px;font-weight:900;letter-spacing:.5px;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:8px;padding:3px 7px}
/* ── проба темы: кусочек экрана боя внутри настроек. Черновик красит его,
   а не страницу — страницу переодевает только «Сохранить».
   Пунктир и подпись «пример»: образец не кнопка, и жать на «Запустить
   турнир» внутри него незачем ── */
.set-try{margin-top:13px;padding:11px 12px 12px;background:var(--paper);border:2.5px dashed var(--ink2);border-radius:var(--rw2);pointer-events:none}
.st-cap{display:flex;align-items:flex-start;gap:7px;margin:0 0 9px;font-family:var(--f-hand);font-size:13.5px;line-height:1.3;color:var(--mut)}
.st-cap b{flex:0 0 auto;margin-top:1px;font-family:var(--f-disp);font-size:10px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink2);background:var(--card);border:2px dashed var(--ink2);border-radius:999px;padding:3px 9px}
.st-top{display:flex;align-items:baseline;gap:8px;font-family:var(--f-disp);font-weight:900}
.st-top b{font-size:14px;letter-spacing:.4px;color:var(--ink)}
.st-top span{font-family:var(--f-hand);font-size:13px;font-weight:400;color:var(--pink)}
.st-cards{display:flex;gap:7px;margin:9px 0 8px}
.st-cards i{flex:1;height:34px;border:2.5px solid var(--ink);border-radius:9px 11px 8px 12px;box-shadow:3px 3px 0 var(--ink)}
.st-cards i:first-child{background:var(--s1)}
.st-cards i:last-child{background:var(--s2)}
.st-bar{height:11px;border:2.5px solid var(--ink);border-radius:999px;background:var(--trk);overflow:hidden}
.st-bar i{display:block;height:100%;width:62%;background:var(--ac)}
.st-btn{
  margin-top:9px;text-align:center;font-family:var(--f-disp);font-size:12.5px;font-weight:900;text-transform:uppercase;
  color:var(--ac-ink);background:var(--ac);border:2.5px solid var(--ink);border-radius:var(--rw2);padding:7px 10px;box-shadow:3px 3px 0 var(--ink);
}
/* ── свой цвет: палитра своя, не системная — квадрат насыщенности, тон и R/G/B ── */
.rgb-edit{margin-top:0}
.sc-row:not([hidden])+.rgb-edit{margin-top:13px}
.re-main{display:flex;gap:11px;flex-wrap:wrap;align-items:stretch}
.re-sv{
  position:relative;flex:1 1 240px;min-width:200px;height:150px;border:2.5px solid var(--ink);border-radius:12px;box-shadow:var(--sh-s);
  cursor:crosshair;touch-action:none;
  background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,var(--hue,#3ddc84));
}
.re-knob{
  position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  border:2.5px solid var(--ink);background:var(--knob,#3ddc84);box-shadow:0 0 0 2px rgba(var(--card-rgb),.85);
}
.re-side{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.re-top{display:flex;align-items:center;gap:9px}
.re-prev{width:26px;height:26px;flex:0 0 auto;border-radius:50%;border:2.5px solid var(--ink);background:var(--knob,#3ddc84);box-shadow:var(--sh-s)}
.re-hue{
  position:relative;width:100%;height:20px;border:2.5px solid var(--ink);border-radius:999px;cursor:pointer;touch-action:none;box-shadow:var(--sh-s);
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.re-hue .re-knob{top:50%;margin-top:-9px}
.re-rgb{display:flex;gap:7px}
.re-rgb label{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;background:var(--card);border:2.5px solid var(--ink);border-radius:10px;padding:5px 8px;box-shadow:var(--sh-s)}
.re-rgb span{font-family:var(--f-disp);font-size:11px;font-weight:900;letter-spacing:.6px;color:var(--dim)}
.re-rgb input{width:100%;min-width:0;border:0;background:none;outline:none;font-family:var(--f-disp);font-size:13.5px;font-weight:900;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.re-rgb input::-webkit-outer-spin-button,.re-rgb input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.re-rgb label:focus-within{background:var(--yel)}
.set-keys{display:flex;flex-wrap:wrap;gap:8px}
.set-keys span{font-family:var(--f-hand);font-size:14px;color:var(--ink2);background:var(--paper2);border:2px solid var(--ink);border-radius:999px;padding:4px 12px}
.set-keys b{background:var(--yel);border:2px solid var(--ink);border-radius:6px;padding:0 6px;font-family:var(--f-disp);font-size:12px}
/* ряд с «Сохранить» прибит к низу карточки: настройки длинные, и искать
   кнопку скроллом вниз — то же самое, что её не видеть. Отрицательные
   поля выводят плашку вплотную к внутренней рамке, чтобы под ней не
   проступали куски секций */
.set-foot{position:sticky;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin:18px -28px 0;padding:13px 28px 16px;
  background:var(--paper2);border-top:2.5px dashed var(--lav2)}
/* у карточки настроек нижний внутренний отступ забираем себе — иначе под
   прибитым рядом оставалась полоса, сквозь которую ездили секции */
.set-card{padding-bottom:0}
.set-foot>span{font-family:var(--f-hand);font-size:15px;color:var(--mut)}
.sf-right{display:flex;align-items:center;gap:13px;margin-left:auto}
#set-unsaved{font-family:var(--f-hand);font-size:15px;color:var(--red);animation:unsavedBlink 1.7s ease-in-out infinite}
@keyframes unsavedBlink{0%,100%{opacity:1}50%{opacity:.4}}
.set-save{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;cursor:pointer;
  background:var(--paper2);border:var(--bd);border-radius:var(--rw2);color:var(--dim);
  font-family:var(--f-disp);font-weight:900;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;
  box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s,background .2s,color .2s}
.set-save svg{width:16px;height:16px;flex-shrink:0}
.set-save:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.set-save:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.set-save.dirty{background:var(--ac);color:var(--ink);animation:saveNudge 2.2s ease-in-out infinite}
@keyframes saveNudge{0%,86%,100%{transform:none}90%{transform:translateY(-3px) rotate(-1.6deg)}95%{transform:translateY(0) rotate(1deg)}}
.set-save.ok{background:var(--green);color:var(--ink)}
.set-reset{
  display:inline-flex;align-items:center;gap:9px;padding:11px 18px;cursor:pointer;
  background:var(--paper2);border:var(--bd);border-radius:var(--rw2);color:var(--ink2);
  font-family:var(--f-disp);font-weight:900;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase;
  box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s,background .18s,color .18s;
}
.set-reset svg{width:16px;height:16px;flex-shrink:0;transition:transform .5s var(--spring)}
.set-reset:hover{background:var(--red);color:#fff;transform:translate(-2px,-2px) rotate(-1deg);box-shadow:6px 6px 0 var(--ink)}
.set-reset:hover svg{transform:rotate(-215deg)}
.set-reset:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ── спрос про несохранённые настройки ── */
#ask-modal{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;
  background:rgba(var(--sh-rgb),.5);backdrop-filter:blur(4px);padding:20px}
#ask-modal.on{display:flex}
.ask-card{width:min(400px,94vw);background:var(--card);border:var(--bd);border-radius:var(--rw);
  box-shadow:var(--sh-l);padding:22px 22px 20px;text-align:center;animation:cardIn .45s var(--bounce)}
.ask-ic{width:56px;height:56px;margin:0 auto 13px;display:flex;align-items:center;justify-content:center;
  background:var(--yel);border:var(--bd);border-radius:18px 20px 17px 21px;box-shadow:var(--sh-s);animation:askShake 2.6s ease-in-out infinite}
.ask-ic svg{width:28px;height:28px;color:var(--pur)}
@keyframes askShake{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-9deg)}91%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
.ask-card h3{font-family:var(--f-disp);font-size:18px;font-weight:900;text-transform:uppercase;line-height:1.22}
.ask-card p{margin-top:9px;font-size:13.5px;font-weight:800;color:var(--ink2);line-height:1.45}
.ask-btns{display:flex;gap:10px;margin-top:19px}
.ask-btns button{flex:1;padding:12px 8px;cursor:pointer;border:var(--bd);border-radius:var(--rw2);
  font-family:var(--f-disp);font-weight:900;font-size:12.5px;letter-spacing:.3px;text-transform:uppercase;
  box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s,background .18s}
.ask-btns button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.ask-btns button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.ask-no{background:var(--paper2);color:var(--ink2)}
.ask-no:hover{background:var(--pink);color:var(--ink)}
.ask-yes{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ac);color:var(--ink)}
.ask-yes svg{width:15px;height:15px}

/* сетка турнира: дерево, где каждая пара стоит напротив середины своих детей */
#bracket-modal .bk-card{width:min(860px,96vw)}
.bk-head-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-sub{font-size:12px;font-weight:800;color:var(--ink2)}
.bk-hint{align-self:center;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-family:var(--f-disp);
  font-size:10.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase;color:var(--ink);
  background:var(--yel);border:2px solid var(--ink);border-radius:999px;padding:3px 9px;box-shadow:var(--sh-s)}
.bk-hint svg{width:12px;height:12px}
.bk-hint[hidden]{display:none}
.bk-body{display:flex;gap:34px;overflow-x:auto;padding:16px 2px 14px;align-items:flex-start;
  --slot0:116px;--mh:96px;--g2:17px;--bkl:rgba(var(--ink-rgb),.28)}
.bk-body.dense{--slot0:92px;--mh:74px;gap:28px;--g2:14px}
.bk-empty{font-size:13.5px;font-weight:800;color:var(--ink2);padding:14px 2px}
.bk-col{display:flex;flex-direction:column;gap:11px;flex:1 1 214px;min-width:214px;max-width:274px}
.bk-round{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 14px;align-self:center;transform:rotate(-1.5deg)}
.bk-round i{font-style:normal;font-family:var(--f-ui);font-size:11px;font-weight:900;background:rgba(var(--paper-rgb),.22);border-radius:999px;padding:1px 8px;letter-spacing:0}
.bk-rnd-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(var(--n),1fr);align-items:center;height:calc(var(--n) * var(--slot))}
.bk-match{position:relative;display:flex;flex-direction:column;min-width:0;height:var(--mh);background:var(--paper2);border:var(--bd);border-radius:var(--rw2);box-shadow:var(--sh-s)}
.bk-match.cur{background:var(--yel);animation:curPulse 1.6s ease-in-out infinite}
@keyframes curPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03) rotate(-.6deg)}}
.bk-now-lbl{position:absolute;left:10px;top:-10px;z-index:3;font-family:var(--f-hand);font-size:11.5px;line-height:1;
  padding:3px 8px 4px;background:var(--ink);color:var(--paper);border-radius:999px;white-space:nowrap}
.bk-row{display:flex;flex:1;min-height:0;align-items:center;gap:9px;padding:0 9px;font-size:12.5px;font-weight:800;color:var(--ink2);border-bottom:2px dashed rgba(var(--sh-rgb),.2)}
.bk-row:last-child{border-bottom:none;border-radius:0 0 12px 16px / 0 0 16px 12px}
.bk-row:first-child{border-radius:13px 17px 0 0 / 17px 11px 0 0}
.bk-row.win{background:var(--green);color:var(--ink)}
.bk-row.out{opacity:.55}
.bk-row.out .bk-title{text-decoration:line-through}
.bk-thumb{flex:0 0 auto;width:52px;height:30px;border-radius:8px;object-fit:cover;border:2.5px solid var(--ink);background:var(--paper)}
.bk-thumb.none{background:repeating-linear-gradient(135deg,var(--paper) 0 6px,rgba(var(--sh-rgb),.12) 6px 12px)}
.bk-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.bk-author{display:block;font-size:11px;font-weight:800;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-score{flex:0 0 auto;font-family:var(--f-disp);font-weight:900;font-size:13px;background:var(--card);border:2px solid var(--ink);border-radius:7px;padding:1px 8px}
.bk-foot{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px;padding-top:12px;border-top:2px dashed rgba(var(--sh-rgb),.22);font-size:11.5px;font-weight:800;color:var(--ink2)}
.bk-foot span{display:flex;align-items:center;gap:7px}
.bk-key{width:13px;height:13px;border:2.5px solid var(--ink);border-radius:5px;background:var(--paper2)}
.bk-key.now{background:var(--yel)}
.bk-key.win{background:var(--green)}
.bk-key.out{opacity:.45}
body.streamer-mode .bk-author{display:none!important}
/* связи дерева: ус от пары, вертикальная скобка у родителя и ус в него */
.bk-stub{position:absolute;right:calc(-1 * var(--g2));top:calc((var(--j) + .5) * var(--slot) - 1.5px);width:var(--g2);height:3px;background:var(--bkl)}
.bk-lnk{position:absolute;left:calc(-1 * var(--g2));top:calc((var(--j) + .5) * var(--slot) - var(--slot) / 4);height:calc(var(--slot) / 2);border-left:3px solid var(--bkl)}
.bk-lnk::after{content:'';position:absolute;left:0;top:calc(50% - 1.5px);width:var(--g2);height:3px;background:var(--bkl)}
/* раунды впереди: пустые ячейки пунктиром, чтобы дерево было видно целиком */
.bk-col.future .bk-round{background:var(--paper2);color:var(--ink2);box-shadow:none}
.bk-col.future .bk-round i{background:rgba(var(--ink-rgb),.12)}
.bk-match.todo{background:transparent;border-style:dashed;box-shadow:none;opacity:.72}
.bk-row.blank{align-items:center;gap:8px;padding:0 10px;color:var(--mut);font-size:11.5px;font-weight:800}
.bk-row.blank i{flex:0 0 auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--f-disp);font-size:12px;font-weight:900;color:var(--mut);
  border:2px dashed currentColor;border-radius:7px}
.bk-body.dense .bk-row{font-size:11.5px;gap:7px}
.bk-body.dense .bk-thumb{width:40px;height:23px;border-width:2px}
.bk-body.dense .bk-author{font-size:10px}
.bk-body.dense .bk-score{font-size:12px;padding:1px 6px}
body[data-theme="night"] .bk-col.future .bk-round{background:var(--lav);color:var(--ink2)}
/* на горизонтальном телефоне дерево должно влезать по высоте без вертикальной прокрутки */
@media (max-height:560px){
  .bk-body{--slot0:76px;--mh:60px;gap:24px;--g2:12px;padding-top:12px}
  .bk-col{min-width:178px}
  .bk-match{min-height:0}
  .bk-thumb{width:34px;height:20px;border-width:2px}
  .bk-body .bk-row{font-size:11px;gap:6px}
  .bk-body .bk-author{font-size:9.5px}
  .bk-body .bk-score{font-size:11px;padding:0 5px}
  .bk-now-lbl{display:none}
}

/* ── стрим-режим: прячем авторов и голосующих, чат анонимизируем ── */
body.streamer-mode .cc-author,
body.streamer-mode .cc-ava,
body.streamer-mode .vp-side span,
body.streamer-mode .vp-ava,
body.streamer-mode .vote-bubble,
body.streamer-mode .cw-name{display:none!important}
body.streamer-mode .vp-ava-wrap::before{display:flex}

/* ── графика / анимации ── */
body[data-gfx="low"] .hero-ghost,body[data-gfx="low"] .hero-stickers,body[data-gfx="low"] .battle-particles{display:none}
body[data-gfx="low"] .mqx-track{animation-duration:60s}
body[data-anim="off"] *,body[data-anim="off"] *::before,body[data-anim="off"] *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
body[data-anim="off"] .mqx-track{animation:none!important}
body[data-anim="off"] [data-rv]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  [data-rv]{opacity:1!important;transform:none!important}
}

/* ── адаптив ── */
@media (max-width:1100px){
  /* в этом поясе шапка и так впритык, поэтому UPD остаётся квадратиком 42 —
     как была звёздочка, только с буквами */
  .upd-btn{min-width:42px;padding:0 5px;font-size:11px}
  .steps,.bento{grid-template-columns:repeat(2,1fr)}
  .bt-wide{grid-column:span 2}
  .sec-go{grid-template-columns:1fr}
  .sec-go .sec-head{position:static;margin-bottom:26px}
  .hero{flex-direction:column;align-items:flex-start;gap:26px;padding:44px 32px 60px}
  .hero-logo{margin:10px auto 26px;transform:rotate(-2deg)}
  .hero-logo img{width:min(720px,84vw)}
  .sec{padding:56px 32px}
  .site-footer{padding:36px 32px 0}
  /* в поясе 901–1100 ряд шапки и так впритык: панель быстрого доступа здесь
     пряталась бы до невидимого куска, поэтому на узких окнах её нет */
  .tb-nav{display:none}
}
@media (max-width:900px){
  .steps,.bento{grid-template-columns:1fr}
  .bt-wide{grid-column:span 1}
  .arena{flex-direction:column;gap:16px;overflow-y:auto;padding:14px}
  .cc{width:min(94vw,560px)}
  .vs{display:none}
  #chat-widget{top:90px;bottom:120px;width:260px}
  .streamer-toggle-box span{display:none}
}
@media (max-width:768px){
  .hero{padding:36px 20px 56px}
  .sec{padding:44px 20px}
  .site-footer{padding:30px 20px 0}
  .ft-inner,.ft-cols{gap:30px}
  .vp-footer{flex-direction:column;align-items:stretch}
  .vp-timer-block{justify-content:center}
  .win-meta-final{flex-wrap:wrap}
  #win-score{margin-left:0;text-align:left}
}
@media (max-width:560px){
  .topbar{gap:6px;padding:0 10px}
  .tb-logo{gap:7px}
  .tb-logo img{width:48px;height:48px}
  .tb-logo span{font-size:16px;letter-spacing:-.3px}
  .tb-right{gap:5px}
  .icon-btn{width:34px;height:34px;border-radius:12px 14px 11px 15px}
  .icon-btn svg{width:17px;height:17px}
  .upd-btn{min-width:34px;padding:0 6px;font-size:10px}
  .tb-note{padding:5px 7px;gap:4px}
  .tb-note svg{width:20px;height:20px}
  .tb-note i{min-width:17px;height:17px;font-size:10px;border-width:2px}
  .streamer-toggle-box{padding:4px 7px;gap:5px;box-shadow:none}
  .hero-stats{flex-wrap:wrap;gap:10px}
}
@media (max-width:430px){
  .tb-logo span{display:none}
}
@media (max-height:600px) and (orientation:landscape){
  :root{--cardw:min(46vw, calc((100vh - 220px) * 1.7778))}
  .arena{padding:10px 18px}
}

/* ═══════════════════════════════════════════════════════════
   v3 — фоны-панели, ночная тема, HUD стримера, новые анимации
   ═══════════════════════════════════════════════════════════ */

/* ── секции как комикс-панели: своя текстура у каждой ── */
.sec-dots{background:radial-gradient(rgba(var(--pur-rgb),.15) 2px,transparent 2.7px) 0 0/26px 26px,var(--paper2)}
.sec-stripes{background:repeating-linear-gradient(-45deg,rgba(var(--pink-rgb),.09) 0 16px,transparent 16px 32px),var(--paper)}
.sec-halftone{background:radial-gradient(circle at 88% 4%,rgba(var(--ac-rgb),.42),transparent 44%),radial-gradient(circle at 4% 96%,rgba(var(--ac2-rgb),.3),transparent 40%),var(--paper2)}

/* ── ночная мультяшка: самостоятельная кожа ─────────────────
   Собрана заново, а не инвертирована: своя глубина бумаги, лунные
   засветки вместо тёплых, все дневные «белые» виджеты пересажены
   на тёмное, а «маркер» под буквами стал стикером с заливкой. */
body[data-theme="night"]{
  --paper:#1b1730; --paper2:#241f3f; --card:#322a55; --card2:#3d3468;
  --ink:#f6f0e4; --ink2:#cfc6ea; --mut:#a79ecb; --dim:#847ca6;
  --ink-d:#191521; --deep2:#17122a;
  --lav:#443a70; --lav2:#5d5292; --pur:#b3aaf5;
  --trk:#1b1730; --trk-h:#241f3f;
  --tx:#f6f0e4; --tx2:#cfc6ea; --tx3:#8d84ad;
  --yel:#ffd43b; --pink:#ff8fc4; --teal:#4ee0c4; --blue:#6fb8ff;
  --orange:#ffa95f; --red:#ff6b6b; --green:#7ee787;
  --ink-rgb:246,240,228; --sh-rgb:10,8,20; --paper-rgb:27,23,48; --card-rgb:50,42,85;
  --lav-rgb:68,58,112; --pur-rgb:179,170,245; --ac-rgb:140,224,74; --ac2-rgb:108,99,201;
  --yel-rgb:255,212,59; --pink-rgb:255,143,196; --teal-rgb:78,224,196;
  /* --bd/--sh объявлены в :root, а var(--ink) подставляется уже там — без
     этого ночные рамки и тени оставались бы чёрными и на тёмной бумаге
     просто исчезали. Обводка кремовая, тень — глубина, а не белое пятно */
  --bd:3px solid var(--ink);
  --sh:6px 6px 0 rgba(10,8,20,.85);
  --sh-s:4px 4px 0 rgba(10,8,20,.85);
  --sh-l:10px 10px 0 rgba(10,8,20,.85);
}
body[data-theme="night"]::after{background-image:radial-gradient(rgba(var(--ink-rgb),.085) 1.2px,transparent 1.3px)}
body[data-theme="night"]::selection{color:var(--ink-d)}

/* фон: холодный лунный свет вместо дневных жёлтых засветок */
body[data-theme="night"] #S-setup{background:
  radial-gradient(980px 520px at 84% -10%, rgba(var(--pur-rgb),.20), transparent 62%),
  radial-gradient(760px 420px at -8% 32%, rgba(var(--teal-rgb),.10), transparent 60%),
  radial-gradient(700px 430px at 62% 110%, rgba(var(--pink-rgb),.10), transparent 62%),
  var(--paper)}
body[data-theme="night"] #S-load{background:radial-gradient(700px 400px at 50% 34%, rgba(var(--pur-rgb),.20), transparent 66%),var(--paper)}
body[data-theme="night"] .hero-grid{background-image:linear-gradient(rgba(var(--ink-rgb),.05) 2px,transparent 2px),linear-gradient(90deg,rgba(var(--ink-rgb),.05) 2px,transparent 2px)}
body[data-theme="night"] .hero-glow{background:radial-gradient(circle,rgba(var(--pur-rgb),.30),rgba(var(--pur-rgb),0) 68%)}
body[data-theme="night"] .hero-ghost{-webkit-text-stroke:2.5px rgba(var(--ink-rgb),.11)}
body[data-theme="night"] .sec-dots{background:radial-gradient(rgba(var(--pur-rgb),.13) 2px,transparent 2.7px) 0 0/26px 26px,var(--paper2)}
body[data-theme="night"] .sec-stripes{background:repeating-linear-gradient(-45deg,rgba(var(--pink-rgb),.07) 0 16px,transparent 16px 32px),var(--paper)}
body[data-theme="night"] .sec-halftone{background:radial-gradient(circle at 88% 4%,rgba(var(--yel-rgb),.13),transparent 44%),radial-gradient(circle at 4% 96%,rgba(var(--teal-rgb),.12),transparent 40%),var(--paper2)}
body[data-theme="night"] .hs:nth-child(n){background:var(--card)}
body[data-theme="night"] .hs:nth-child(2){background:var(--paper2)}
body[data-theme="night"] .hs:nth-child(4){background:var(--lav2)}

/* «маркер» под буквой ночью — это полоса внизу глифа: тёмная буква на
   тёмной бумаге над ней исчезает, поэтому заливаем слово целиком */
body[data-theme="night"] .ht-w,
body[data-theme="night"] .sec-head h2 em,
body[data-theme="night"] .faq-a b,
body[data-theme="night"] .uc-lead b,
body[data-theme="night"] .uc-gl b{background:var(--ac);color:var(--ac-ink)}
body[data-theme="night"] .win-title span{background:var(--yel);color:var(--ink-d)}

/* модалки: тёмная карточка с подсветкой «сверху» и видимыми разделителями */
body[data-theme="night"] #update-modal,
body[data-theme="night"] #settings-modal,
body[data-theme="night"] #ask-modal,
body[data-theme="night"] #bracket-modal{background:rgba(var(--sh-rgb),.74)}
body[data-theme="night"] .set-card,
body[data-theme="night"] .update-card,
body[data-theme="night"] .ask-card,
body[data-theme="night"] .bk-card{box-shadow:var(--sh-l),inset 0 4px 0 rgba(var(--ink-rgb),.10)}
body[data-theme="night"] .set-sec,
body[data-theme="night"] .bk-row,
body[data-theme="night"] .bk-foot{border-color:rgba(var(--ink-rgb),.22)}

/* контролы: дневные светло-сиреневые подложки на ночи не читаются.
   Дорожка свитча сидит на --trk/--trk-h, поэтому отдельно её не перекрашиваем */
body[data-theme="night"] .slider:before{background:var(--lav2);border-color:var(--deep2)}
body[data-theme="night"] .switch input:checked + .slider{background:var(--ac)}
body[data-theme="night"] .switch input:checked + .slider:hover{background:var(--ac)}
body[data-theme="night"] .switch input:checked + .slider:before{background:var(--ink);border-color:var(--deep2)}
body[data-theme="night"] .set-swatches button,
body[data-theme="night"] .set-swatches .sw-custom{background:var(--paper2)}
body[data-theme="night"] .sc-val{background:var(--paper2)}
body[data-theme="night"] .re-rgb label{background:var(--paper2)}
body[data-theme="night"] .re-knob{box-shadow:0 0 0 2px rgba(var(--sh-rgb),.85)}
body[data-theme="night"] .mode-btn.on{background:var(--pur)}

/* курсор-перчатка: обводка привязана к --ink, а ночью он кремовый —
   перчатка превращалась в белое пятно. Штрих держим тёмным всегда */
body[data-theme="night"] #cur .glove,
body[data-theme="night"] #cur .lines,
body[data-theme="night"] #cur .cuff{stroke:var(--deep2)}
body[data-theme="night"] #cur svg{filter:drop-shadow(2.5px 3.5px 0 rgba(var(--sh-rgb),.55))}

/* FAQ ночью: стикеры слов светятся кислотой, а тени плашек уходят в глубину */
body[data-theme="night"] .faq-a b,
body[data-theme="night"] .faq-tags span{box-shadow:3px 3px 0 rgba(var(--sh-rgb),.55)}

/* поля, дропдауны и заглушки аватарок были белыми — пересаживаем на тёмное */
body[data-theme="night"] .fi{box-shadow:inset 3px 3px 0 rgba(var(--sh-rgb),.4)}
body[data-theme="night"] .fi:focus{background:var(--lav)}
body[data-theme="night"] .pd-btn:hover{background:var(--lav)}
body[data-theme="night"] .ac-list,
body[data-theme="night"] .pd-list{background:var(--card)}
body[data-theme="night"] .err-msg,
body[data-theme="night"] .btn-mute.is-muted{background:#4a2334;color:#ffb3b3}
body[data-theme="night"] .bh-ava,
body[data-theme="night"] .cc-ava,
body[data-theme="night"] .vp-ava,
body[data-theme="night"] #win-ava,
body[data-theme="night"] .ac-ava-abs{background:var(--lav)}

/* футер: днём он фиолетовый, а ночью --pur светлеет — белый текст на
   светлой лаванде исчезал, поэтому ночью это глубокий космос */
body[data-theme="night"] .site-footer{background:var(--paper2);color:var(--ink)}
body[data-theme="night"] .ft-giant{-webkit-text-stroke:2.5px rgba(var(--ink-rgb),.3)}
body[data-theme="night"] .ft-tag{color:rgba(var(--ink-rgb),.8)}
body[data-theme="night"] .ft-bottom{color:rgba(var(--ink-rgb),.72)}
body[data-theme="night"] .ft-col a{color:rgba(var(--ink-rgb),.85);border-bottom-color:rgba(var(--ink-rgb),.35)}
body[data-theme="night"] .ft-col a:hover{color:var(--yel)}
body[data-theme="night"] .soc,
body[data-theme="night"] .soc:hover{box-shadow:4px 4px 0 rgba(var(--sh-rgb),.5)}

/* чат: ночью пузыри тёмные, как ночной Twitch, а не белые карточки */
body[data-theme="night"] #chat-widget{background:rgba(var(--card-rgb),var(--chatop))}
body[data-theme="night"] .cw-msg{background:var(--card2);color:var(--ink2)}
body[data-theme="night"] .cw-msg.vote{background:var(--yel);color:var(--ink-d)}
body[data-theme="night"] .cw-time{color:var(--dim)}
body[data-theme="night"] .cw-badge.sub{background:var(--pur)}
body[data-theme="night"] .cw-x{background:var(--paper2)}

body[data-theme="night"] #win-ov{background:rgba(var(--sh-rgb),.95)}
body[data-theme="night"] .plus-one{color:var(--ink);text-shadow:2px 2px 0 rgba(var(--sh-rgb),.7)}
/* подпись хайп-метра: multiply на тёмной полосе съедает текст целиком */
body[data-theme="night"] .hype-lbl{mix-blend-mode:normal;color:var(--ink);text-shadow:1.5px 1.5px 0 rgba(var(--sh-rgb),.85)}

/* текст на ярких заливках остаётся тёмным и ночью */
body[data-theme="night"] .mqx .mqx-track span,
body[data-theme="night"] .tb-nav a:hover,
body[data-theme="night"] .hero-eyebrow,
body[data-theme="night"] .ht-w,
body[data-theme="night"] .hero-sub b,
body[data-theme="night"] .stk,
body[data-theme="night"] .step-n,
body[data-theme="night"] .step p b,
body[data-theme="night"] .bt-ic,
body[data-theme="night"] .bt p b,
body[data-theme="night"] .seg input:checked + label,
body[data-theme="night"] .mode-btn.on,
body[data-theme="night"] .pd-opt.on,
body[data-theme="night"] .pd.open .pd-btn,
body[data-theme="night"] .ac-item:hover,
body[data-theme="night"] .btn-go,
body[data-theme="night"] .fp-hint b,
body[data-theme="night"] .fp-lock,
body[data-theme="night"] .cc-num,
body[data-theme="night"] .vs-ic,
body[data-theme="night"] .vp-btn b,
body[data-theme="night"] .vp-timer-text b,
body[data-theme="night"] .bh-badge,
body[data-theme="night"] .cw-msg.vote,
body[data-theme="night"] .cw-badge,
body[data-theme="night"] .win-trophy,
body[data-theme="night"] .btn-share,
body[data-theme="night"] .update-btn-close,
body[data-theme="night"] .set-seg button.on,
body[data-theme="night"] .set-keys b,
body[data-theme="night"] .faq-i summary::after,
body[data-theme="night"] .uc-g summary::after,
body[data-theme="night"] #rt-title,
body[data-theme="night"] #rt-subtitle,
body[data-theme="night"] .vote-bubble,
body[data-theme="night"] .soc,
body[data-theme="night"] .uc-badge,
body[data-theme="night"] .bk-row.win,
body[data-theme="night"] .bk-match.cur .bk-title,
body[data-theme="night"] .bk-match.cur .bk-now-lbl,
body[data-theme="night"] .bk-match.cur .bk-score{color:var(--ink-d)}
/* то же, но на плашках акцентного цвета: там тёмный знак работает, пока цвет
   светлый. Выбрали чёрный в RGB — кремовый, иначе надписи тонут в плашке */
body[data-theme="night"] .ht-w,
body[data-theme="night"] .bt-ic,
body[data-theme="night"] .seg input:checked + label,
body[data-theme="night"] .pd-opt.on,
body[data-theme="night"] .btn-go,
body[data-theme="night"] .btn-share,
body[data-theme="night"] .update-btn-close,
body[data-theme="night"] .set-seg button.on,
body[data-theme="night"] .uc-badge{color:var(--ac-ink)}
body[data-theme="night"] .fp-lock svg{color:var(--ink-d)}
/* BATTLE несёт два класса (ht-w ht-out), а реверс-строка — два (mqx mqx-rev):
   обе правки после общего списка, иначе их перебивает тёмный цвет */
body[data-theme="night"] .ht-out{background:none;color:var(--pur)}
body[data-theme="night"] .mqx-rev .mqx-track span{color:var(--ink)}

/* ── HUD режима стримера ── */
#sm-hud{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:none;align-items:stretch;gap:12px;z-index:40;pointer-events:none;
}
body.clean-frame #sm-hud{display:flex}
.smh-side{
  display:flex;flex-direction:column;align-items:center;padding:8px 24px 10px;min-width:132px;
  border:4px solid var(--ink);border-radius:var(--rw2);box-shadow:var(--sh);
}
.smh-1{background:var(--s1);transform:rotate(-2deg)}
.smh-2{background:var(--s2);transform:rotate(2deg)}
.smh-side b{font-family:var(--f-disp);font-size:54px;font-weight:900;line-height:1;color:#fff;text-shadow:3px 3px 0 var(--ink)}
.smh-side span{font-family:var(--f-hand);font-size:15px;color:#fff;text-shadow:1.5px 1.5px 0 rgba(var(--sh-rgb),.55);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.smh-mid{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:8px 20px;
  background:var(--yel);border:4px solid var(--ink);border-radius:var(--rw2);box-shadow:var(--sh);
}
.smh-mid span{font-family:var(--f-disp);font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--ink-d)}
.smh-mid b{font-family:var(--f-disp);font-size:38px;font-weight:900;line-height:1;color:var(--ink-d)}
.smh-mid i{font-style:normal;font-family:var(--f-hand);font-size:14px;color:var(--ink-d);min-height:17px}

/* ── чистый кадр (H): только клипы и HUD-табло ── */
body.clean-frame .bh,
body.clean-frame .vp,
body.clean-frame #chat-widget,
body.clean-frame .hype,
body.clean-frame .battle-particles,
body.clean-frame .vote-bubble{display:none!important}
body.clean-frame .arena{padding:6px 10px 142px}
body.clean-frame .vp-cont{padding-bottom:0}

/* ── кнопка сетки: со подписью и раундом, чтобы её замечали ── */
.bh-chip{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 11px;cursor:pointer;
  border:var(--bd);border-radius:14px 16px 13px 17px/16px 13px 17px 14px;background:var(--card);color:var(--ink);
  box-shadow:var(--sh-s);transition:transform .18s var(--spring),box-shadow .18s,background .18s}
.bh-chip svg{width:19px;height:19px}
.bhc-lbl{font-family:var(--f-disp);font-size:12.5px;font-weight:900;letter-spacing:.4px;text-transform:uppercase}
.bhc-rnd{font-family:var(--f-disp);font-size:11px;font-weight:900;letter-spacing:.2px;background:var(--ac);
  border:2px solid var(--ink);border-radius:8px;padding:1px 6px;min-width:30px;text-align:center}
.bh-chip:hover{transform:translate(-2px,-2px) rotate(-3deg);box-shadow:6px 6px 0 var(--ink);background:var(--yel)}
.bh-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.bh-chip:active,.bh-chip:hover{animation:none}
.bh-right .icon-btn.on{background:var(--ac)}
.bh-right .icon-btn.on svg{animation:maskPop .42s var(--bounce)}
@keyframes maskPop{0%{transform:scale(.6)}60%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ── всплывающая панель в чистом кадре: видна только когда шевельнёшь мышью ── */
#sm-peek{position:absolute;left:50%;top:16px;z-index:60;display:flex;align-items:center;gap:10px;
  padding:8px 9px 8px 14px;background:var(--paper);border:var(--bd);border-radius:var(--rw);box-shadow:var(--sh);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-20px) scale(.94);
  transition:opacity .22s ease,transform .3s var(--spring)}
body:not(.clean-frame) #sm-peek{display:none}
body.clean-frame.sm-peek #sm-peek{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.smp-tag{display:flex;align-items:center;gap:7px;font-family:var(--f-disp);font-size:12px;font-weight:900;
  letter-spacing:.3px;text-transform:uppercase;color:var(--ink2)}
.smp-tag svg{width:17px;height:17px}
.smp-btn,.smp-out{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:var(--bd);border-radius:var(--rw2);padding:8px 13px;
  font-family:var(--f-disp);font-size:12px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;color:var(--ink);
  box-shadow:var(--sh-s);transition:transform .16s var(--spring),box-shadow .16s}
.smp-btn{background:var(--ac)}
.smp-out{background:var(--paper2)}
.smp-btn svg,.smp-out svg{width:14px;height:14px}
.smp-btn:hover,.smp-out:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.smp-btn:active,.smp-out:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media (max-width:640px){
  .smp-tag{display:none}
  #sm-peek{gap:7px;padding:7px}
  .smp-btn,.smp-out{padding:7px 10px;font-size:11px}
}
@media (max-height:520px){
  #sm-peek{top:7px;gap:6px;padding:5px}
  .smp-btn,.smp-out{padding:5px 9px;font-size:11px}
}

/* ── новые мультяшные анимации ── */
@keyframes boing{0%{transform:scale(1)}35%{transform:scale(1.07,.88) rotate(-1.5deg)}70%{transform:scale(.94,1.06)}100%{transform:scale(1)}}
.btn-solid:active,.btn-ghost:active,.btn-go:active,.vp-btn:active,.icon-btn:active,.btn-share:active,.btn-re:active{animation:boing .38s var(--spring)}
@keyframes wig{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.8deg) translate(-3px,-3px)}70%{transform:rotate(1.2deg) translate(-1px,-1px)}}
.bt:hover,.step:hover{animation:wig .5s var(--ease)}
@keyframes wordPop{0%{opacity:0;transform:translateY(44px) rotate(5deg) scale(.7)}60%{opacity:1;transform:translateY(-7px) rotate(-1.4deg) scale(1.05)}100%{opacity:1;transform:none}}
.hero-h1 .ht-w,.hero-h1 .ht-out,.hero-h1 .ht-em{display:inline-block;animation:wordPop .8s var(--spring) backwards}
.hero-h1 .ht-out{animation-delay:.12s}
.hero-h1 .ht-em{animation-delay:.24s}
@keyframes hudIn{from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.8)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
body.clean-frame #sm-hud{animation:hudIn .5s var(--spring)}

/* ═══════════════════════════════════════════════════════════
   СВОИ ДАТЫ · СТАТУС КАНАЛА · ПОСЛАНИЯ ПОСЕТИТЕЛЕЙ
   ═══════════════════════════════════════════════════════════ */

/* ── панель периода: список стал уже, рядом кнопка календаря ── */
#period-row{display:flex;gap:10px;align-items:stretch}
#period-row .pd{width:auto;flex:1 1 auto;min-width:0}
.pd-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-btn{
  position:relative;flex:0 0 auto;width:48px;background:var(--paper2);border:var(--bd);border-radius:var(--rw2);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-s);transition:transform .18s var(--spring),box-shadow .18s,background .2s;
}
.cal-btn svg{width:19px;height:19px}
.cal-btn:hover{transform:translate(-2px,-2px) rotate(-5deg);background:var(--yel);box-shadow:6px 6px 0 var(--ink)}
.cal-btn.on{background:var(--ac)}
.cal-btn.on:after{
  content:'';position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;
  background:var(--pink);border:2.5px solid var(--ink);animation:popIn .45s var(--bounce);
}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}

/* ── статус канала: простое тонкое кольцо вокруг аватарки ── */
.ava-ring{
  position:absolute;left:9px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;
  pointer-events:none;z-index:4;opacity:0;transition:opacity .3s var(--ease);
}
.ac-wrap.live .ava-ring{opacity:1;border:2.5px solid var(--green)}
.ac-wrap.off .ava-ring{opacity:1;border:2px dashed var(--lav2)}
.ac-wrap.off .ac-ava-abs{filter:grayscale(.55);opacity:.85}
.ch-live{display:inline-flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--f-hand);font-size:15px;color:var(--ink2)}
.ch-live i{width:10px;height:10px;border-radius:50%;background:var(--dim);border:2px solid var(--ink);flex:0 0 auto}
.ch-live b{font-weight:700;color:var(--ink)}
.ch-live span{opacity:.8}
.ch-live.live i{background:var(--red);animation:liveP 1.4s ease-in-out infinite}
.ch-live.live b{color:var(--ink)}
.ch-live.off i{background:var(--lav2)}

/* ── модалки календаря и посланий ── */
#cal-modal,#note-modal{
  position:fixed;inset:0;z-index:82;display:none;align-items:center;justify-content:center;
  background:rgba(var(--sh-rgb),.45);backdrop-filter:blur(3px);padding:20px;
}
#cal-modal.on,#note-modal.on{display:flex}
.cal-card,.note-card{
  width:min(430px,94vw);max-height:92vh;overflow-y:auto;background:var(--card);border:var(--bd);
  border-radius:var(--rw);box-shadow:var(--sh-l);padding:18px 18px 16px;animation:cardIn .45s var(--bounce);
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.9) rotate(-1.6deg)}to{opacity:1;transform:none}}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.cal-head h3{display:flex;align-items:center;gap:9px;font-family:var(--f-disp);font-size:19px;font-weight:900}
.cal-head h3 svg{width:21px;height:21px;color:var(--pur)}

.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px}
.cal-title{flex:1;text-align:center;font-family:var(--f-disp);font-size:17px;font-weight:900;color:var(--ink)}
.cal-arrow{
  width:38px;height:38px;flex:0 0 auto;border:var(--bd);border-radius:12px;background:var(--paper2);color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-s);transition:.16s var(--spring);
}
.cal-arrow svg{width:16px;height:16px}
#cal-prev svg{transform:rotate(180deg)}
.cal-arrow:hover{background:var(--yel);transform:translate(-2px,-2px)}
#cal-next:hover{transform:translate(2px,-2px)}
.cal-arrow:disabled{opacity:.3;pointer-events:none;box-shadow:none}
.cal-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.cal-dows span{text-align:center;font-size:10.5px;font-weight:900;letter-spacing:.6px;color:var(--dim);text-transform:uppercase}
.cal-dows span.we{color:var(--pur)}
/* умный календарь: полоска о том, с какого числа у канала вообще есть клипы */
.cal-floor{
  display:flex;align-items:center;gap:8px;margin:0 0 9px;padding:9px 11px;
  background:var(--paper2);border:2.5px dashed var(--lav2);border-radius:12px;
  font-family:var(--f-hand);font-size:14.5px;line-height:1.3;color:var(--ink2);
}
.cal-floor svg{width:16px;height:16px;flex:0 0 auto;color:var(--pur)}
.cal-floor b{color:var(--ink)}
.cal-floor[hidden]{display:none}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-d{
  position:relative;height:38px;border:2.5px solid transparent;border-radius:11px;background:transparent;
  font-family:var(--f-ui);font-size:13.5px;font-weight:800;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;user-select:none;
  transition:background .16s,color .16s,transform .22s var(--spring),box-shadow .16s,border-color .16s;
  animation:dayIn .34s var(--ease) backwards;animation-delay:calc(var(--i,0) * 9ms);
}
@keyframes dayIn{from{opacity:0;transform:translateY(9px) scale(.82)}to{opacity:1;transform:none}}
.cal-num{position:relative;z-index:1}
.cal-d:hover:not(.out):not(.void){background:var(--paper2);color:var(--ink);transform:translateY(-2px) rotate(-3deg)}
.cal-d.void{visibility:hidden;pointer-events:none}
.cal-d.out{opacity:.28;cursor:default}
.cal-d.we{color:var(--pur)}
.cal-d.today:after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--dim)}
/* дни внутри выбранного периода: маленький полосатый кружок со стеклянным бликом */
.cal-d.mid{color:var(--ink)}
.cal-d.mid:hover:not(.out):not(.void){background:transparent}
.cal-d.mid .cal-num{font-size:11.5px}
.cal-d.mid:before{
  content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;border:2px solid var(--ink);background-color:var(--lav2);opacity:.7;overflow:hidden;
  transform:rotate(-20deg);
  background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.92) 50%,transparent 62%),repeating-linear-gradient(90deg,var(--ac) 0 5px,transparent 5px 10px);
  background-size:24px 100%,10px 100%;background-repeat:no-repeat,repeat;
  animation:midShine 1.7s linear infinite;animation-delay:calc(var(--i,0) * -70ms);
}
@keyframes midShine{
  from{background-position:-14px 0,0 0}
  to{background-position:26px 0,10px 0}
}
.cal-d.edge{background:var(--ac);border-color:var(--ink);color:var(--ink);box-shadow:var(--sh-s);transform:scale(1.06);z-index:2}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:13px;border-top:2.5px dashed var(--lav)}
.cal-range{flex:1;min-width:0;font-size:12.5px;font-weight:800;color:var(--ink2);line-height:1.35}
.cal-range b{color:var(--ink)}
.cal-btns{display:flex;gap:8px;flex:0 0 auto}
.cal-reset{
  padding:11px 13px;font-family:var(--f-ui);font-size:12.5px;font-weight:800;background:transparent;
  border:2.5px solid var(--dim);color:var(--mut);border-radius:12px;cursor:pointer;transition:.16s;
}
.cal-reset:hover{border-color:var(--ink);color:var(--ink)}
.cal-apply{
  padding:11px 18px;font-family:var(--f-disp);font-size:13px;font-weight:900;background:var(--ac);color:var(--ink);
  border:var(--bd);border-radius:12px;cursor:pointer;box-shadow:var(--sh-s);transition:.18s var(--spring);
}
.cal-apply:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.cal-apply:disabled{opacity:.42;cursor:default;box-shadow:none}
.cal-note{margin-top:11px;font-family:var(--f-hand);font-size:14.5px;line-height:1.35;color:var(--mut)}

/* ── окно послания ── */
.note-lead{font-size:13.5px;font-weight:800;color:var(--ink2);line-height:1.4;margin:8px 0 2px}
.note-fld{display:block;margin-top:14px}
.note-fld>span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:11.5px;font-weight:900;letter-spacing:.6px;color:var(--mut);text-transform:uppercase}
.note-fld>span b{font-family:var(--f-ui);font-size:11.5px;letter-spacing:0;color:var(--dim);text-transform:none}
.note-fld>span b.warn{color:var(--red)}
.note-fld>em{display:block;margin-top:6px;font-family:var(--f-ui);font-size:11.5px;font-style:normal;font-weight:700;color:var(--dim);line-height:1.35}
.note-fld .fi{padding-left:16px}
.note-text{resize:none;min-height:60px;line-height:1.45;font-family:var(--f-hand);font-size:20px;font-weight:700}
.note-preview{margin-top:16px;padding:12px 12px 14px;border:2.5px dashed var(--lav);border-radius:var(--rw2);background:var(--paper2)}
.note-preview .ns-slot{position:static;animation:none}
.note-preview .ns{pointer-events:none;animation:none;max-width:100%}
.note-preview-lbl{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.note-preview-lbl svg{width:13px;height:13px}
.note-err{display:none;margin-top:12px;padding:10px 12px;font-size:12.5px;font-weight:800;color:var(--ink);background:var(--pink);border:2.5px solid var(--ink);border-radius:12px}
.note-err.on{display:block;animation:shakeX .4s var(--ease)}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-1deg)}75%{transform:translateX(6px) rotate(1deg)}}
.note-send{
  width:100%;margin-top:14px;padding:15px;display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-disp);font-size:15.5px;font-weight:900;color:var(--ink);background:var(--ac);
  border:var(--bd);border-radius:var(--rw2);cursor:pointer;box-shadow:var(--sh-s);transition:.18s var(--spring);
}
.note-send svg{width:19px;height:19px}
.note-send:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);background:var(--yel)}
.note-send:disabled{opacity:.5;cursor:default}
.note-send.ok{background:var(--green)}
.note-hint{margin-top:11px;font-size:11.5px;font-weight:700;line-height:1.45;color:var(--dim)}

/* ── гейт посланий: две полоски — игры до конца и разные стримеры ── */
.note-gate{margin:14px 0 2px;padding:13px 14px 14px;background:var(--paper2);border:2.5px dashed var(--lav2);border-radius:var(--rw2)}
.note-gate[hidden]{display:none}
.ng-top{display:flex;align-items:center;gap:8px;font-family:var(--f-disp);font-size:14px;font-weight:900;color:var(--ink)}
.ng-top svg{width:18px;height:18px;color:var(--pur)}
.ng-top span{margin-left:auto;font-family:var(--f-ui);font-size:12.5px;background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:2px 10px}
.ng-track{height:14px;margin-top:11px;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:inset 2px 2px 0 rgba(var(--ink-rgb),.08)}
.ng-fill{height:100%;width:0;border-radius:999px;transition:width .55s var(--ease);
  background:repeating-linear-gradient(-45deg,var(--ac) 0 10px,rgba(255,255,255,.55) 10px 20px)}
.ng-rule{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:11.5px;font-weight:700;line-height:1.45;color:var(--mut)}
.ng-rule svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px;color:var(--yel)}
.ng-rule b{color:var(--ink)}
.ng-sub{margin-top:9px;font-size:11.5px;font-weight:700;line-height:1.4;color:var(--mut)}
.note-body.locked{opacity:.4;filter:saturate(.45);pointer-events:none}
.note-body.locked .fi{background:var(--lav)}

/* ── полоса прогресса прямо в меню голосования ── */
.note-quest{display:none;align-items:center;gap:12px;margin-top:12px;padding:9px 14px;background:var(--paper2);
  border:2.5px solid var(--ink);border-radius:999px;box-shadow:var(--sh-s)}
.note-quest.on{display:flex;animation:questIn .5s var(--bounce)}
@keyframes questIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.nq-ic{width:19px;height:19px;flex:0 0 auto;color:var(--pur)}
.nq-mid{flex:1;min-width:0}
.nq-top{display:flex;align-items:baseline;gap:9px}
.nq-top b{font-family:var(--f-disp);font-size:12.5px;font-weight:900;letter-spacing:.3px;text-transform:uppercase;color:var(--ink)}
.nq-top span{font-family:var(--f-hand);font-size:14px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nq-track{height:10px;margin-top:5px;background:var(--card);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.nq-fill{height:100%;width:0;border-radius:999px;transition:width .55s var(--ease);
  background:repeating-linear-gradient(-45deg,var(--ac) 0 9px,rgba(255,255,255,.5) 9px 18px)}
.nq-cnt{flex:0 0 auto;font-family:var(--f-disp);font-size:14px;font-weight:900;color:var(--ink);background:var(--ac);
  border:2.5px solid var(--ink);border-radius:999px;padding:3px 11px;box-shadow:2px 2px 0 var(--ink)}
.note-quest.done .nq-ic{color:var(--green)}
.note-quest.done .nq-cnt{background:var(--green)}
body.clean-frame .note-quest{display:none}

/* ── кнопка послания в топбаре ── */
.tb-note{
  display:flex;align-items:center;gap:8px;padding:7px 15px;font-family:var(--f-hand);font-size:18px;line-height:1.2;
  color:var(--ink);background:transparent;border:2.5px solid transparent;border-radius:999px;cursor:pointer;transition:.2s var(--spring);
}
.tb-note svg{width:24px;height:24px;color:var(--pur)}
.tb-note:hover{border-color:var(--ink);background:var(--yel);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}
.tb-note:hover svg{color:var(--ink)}
.tb-note i{min-width:20px;height:20px;padding:0 5px;display:none;align-items:center;justify-content:center;font-family:var(--f-ui);font-style:normal;font-size:11px;font-weight:900;color:var(--ink);background:var(--pink);border:2px solid var(--ink);border-radius:999px}
.tb-note i.on{display:flex;animation:popIn .4s var(--bounce)}

/* ── стикеры посланий: каждый прилеплен в своём месте главного экрана ── */
.note-stickers{position:absolute;inset:0;z-index:6;pointer-events:none}
.hero.has-notes .hero-scroll{display:none}
.ns-slot{
  position:absolute;left:var(--x,12px);top:var(--y,12px);pointer-events:none;
  animation:nsFloat 5.2s ease-in-out infinite;animation-delay:var(--fd,0s);
}
@keyframes nsFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(1.1deg)}}
.ns{
  position:relative;rotate:var(--rot,0deg);
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;
  font-family:var(--f-hand);font-size:17px;color:var(--ink-d);background:var(--yel);
  border:2.5px solid var(--ink);border-radius:999px;box-shadow:var(--sh-s);pointer-events:auto;cursor:default;
  animation:nsIn .62s var(--bounce) backwards;animation-delay:var(--d,0s);
  transition:transform .25s var(--spring),box-shadow .25s;
}
@keyframes nsIn{from{opacity:0;transform:translateY(20px) scale(.55) rotate(-12deg)}to{opacity:1;transform:none}}
.ns:hover{transform:scale(1.08);box-shadow:6px 6px 0 var(--ink);z-index:9}
.ns.c-yel{background:var(--yel)}.ns.c-pink{background:var(--pink)}.ns.c-teal{background:var(--teal)}
.ns.c-green{background:var(--green)}.ns.c-lav{background:var(--lav)}.ns.c-orange{background:var(--orange)}
.ns-ava{width:27px;height:27px;border-radius:50%;border:2.5px solid var(--ink);object-fit:cover;background:var(--card2);flex:0 0 auto}
.ns-nick{font-family:var(--f-hand);font-size:16px;opacity:.62;flex:0 0 auto;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-nick:after{content:':'}
.ns-text{white-space:nowrap}
/* запрещённое слово: просто размыто, наводишься — проявляется.
   Полосатая «замазка» читалась как мусор, поэтому без неё */
.ns-mask{position:relative;display:inline-block;margin:0 1px;padding:0 5px;border-radius:8px;background:rgba(var(--ink-rgb),.09);cursor:pointer}
.ns-mask .mw{display:inline-block;filter:blur(4.5px);opacity:.72;transition:filter .42s var(--ease),opacity .42s var(--ease)}
.ns-mask:hover .mw,.ns-mask.open .mw{filter:blur(0);opacity:1}

/* ═══════════════════════════════════════════════════════════
   ЖИВЫЕ ИКОНКИ: всё чуть дышит и отзывается на наведение
   ═══════════════════════════════════════════════════════════ */
button>svg:not(.ic-moon):not(.ic-day),a>svg{transition:transform .3s var(--spring)}
button:hover>svg:not(.ic-moon):not(.ic-day),a:hover>svg{animation:icJog .48s var(--ease)}
@keyframes icJog{
  0%{transform:none}
  26%{transform:translateY(-4px) rotate(-13deg) scale(1.16)}
  56%{transform:translateY(1px) rotate(8deg) scale(.94)}
  80%{transform:translateY(-1px) rotate(-3deg)}
  100%{transform:none}
}
/* стрелка «назад» развёрнута на 180 — обычный jog её выпрямлял, поэтому
   для неё свой зеркальный набор кадров, уже внутри перевёрнутого угла */
#cal-prev:hover>svg{animation:icJogBack .48s var(--ease)}
@keyframes icJogBack{
  0%{transform:rotate(180deg)}
  26%{transform:translateY(-4px) rotate(193deg) scale(1.16)}
  56%{transform:translateY(1px) rotate(172deg) scale(.94)}
  80%{transform:translateY(-1px) rotate(183deg)}
  100%{transform:rotate(180deg)}
}
@keyframes icPop{0%{transform:scale(1)}38%{transform:scale(1.32) rotate(-14deg)}70%{transform:scale(.94) rotate(6deg)}100%{transform:scale(1)}}
@keyframes icBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.bt-ic{animation:icBob 5.4s ease-in-out infinite}
.step:hover .step-tag svg,.bt:hover .bt-ic{animation:icJog .5s var(--ease)}
.fl svg{width:17px;height:17px}
.fg:focus-within .fl svg{animation:icPop .52s var(--bounce)}
.hero-eyebrow svg{animation:boltFlick 4.2s steps(1,end) infinite}
@keyframes boltFlick{0%,84%,100%{opacity:1;transform:none}86%{opacity:.3;transform:scale(.86) rotate(-8deg)}90%{opacity:1;transform:none}94%{opacity:.5;transform:none}}
.tb-note svg{animation:megaSway 5.2s ease-in-out infinite}
@keyframes megaSway{0%,68%,100%{transform:rotate(0)}76%{transform:rotate(-16deg)}84%{transform:rotate(11deg)}92%{transform:rotate(-5deg)}}
#btn-settings:hover svg,#btn-settings2:hover svg,#btn-changelog:hover svg{animation:gearSpin .9s var(--ease)}
@keyframes gearSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.cal-btn:hover svg{animation:calFlip .55s var(--ease)}
@keyframes calFlip{0%{transform:none}45%{transform:scaleY(.2) rotate(-6deg)}100%{transform:none}}
.pd-btn:hover svg{animation:icJog .45s var(--ease)}
.mode-btn:hover svg{transform:rotate(-12deg) scale(1.14)}
.ns-slot{transition:left .5s var(--ease),top .5s var(--ease)}

/* ── ночь: те же детали, своя бумага ── */
body[data-theme="night"] #cal-modal,
body[data-theme="night"] #note-modal{background:rgba(var(--sh-rgb),.74)}
body[data-theme="night"] .cal-card,
body[data-theme="night"] .note-card{box-shadow:10px 10px 0 rgba(var(--sh-rgb),.85)}
body[data-theme="night"] .cal-d{color:var(--ink2)}
body[data-theme="night"] .cal-d:hover:not(.out):not(.void){background:var(--lav);color:var(--ink)}
body[data-theme="night"] .cal-d.mid .cal-num{color:var(--ink)}
body[data-theme="night"] .cal-d.edge{color:var(--ink-d)}
body[data-theme="night"] .cal-btn:hover,body[data-theme="night"] .cal-arrow:hover{color:var(--ink-d)}
body[data-theme="night"] .tb-note:hover{color:var(--ink-d)}
body[data-theme="night"] .note-send:hover:not(:disabled){color:var(--ink-d)}
body[data-theme="night"] .ch-live.live b{color:var(--ink)}

/* ── узкое окно: календарь сжимается, кнопка послания остаётся иконкой ── */
@media (max-width:900px){
  .ns{font-size:12.5px}
  .ns-nick{max-width:86px}
  .cal-card,.note-card{padding:14px}
  .cal-d{height:34px;font-size:12.5px}
  .tb-note .tbn-lbl{display:none}
  .tb-note{padding:7px 10px}
  .note-quest{border-radius:20px;flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  .cal-card,.note-card,.cal-d,.cal-d.mid:before,.ns,.ns-slot,.cal-btn.on:after,.tb-note i.on,
  .bt-ic,.hero-eyebrow svg,.tb-note svg,.sw-rgb,.ac-tip svg,.note-quest.on,.ac-list.on{animation:none}
  .ch-live.live i{animation:none}
  .ns-mask .mw{transition-duration:.01s}
  button:hover>svg,a:hover>svg{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   3.1 — телефон: экран поворота, арена в ландшафте, узкие экраны
   ═══════════════════════════════════════════════════════════ */

/* ── «поверни телефон» ──────────────────────────────────────
   Чёрный экран поверх всего: под ним матч уже собрался, но два клипа
   в вертикальном телефоне встают друг на друга и становятся спичечными.
   Уходит сам, как только телефон повернули. */
#rotate-gate{
  position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;
  padding:26px 22px;background:#0b0910;color:#fffdf6;text-align:center;font-family:var(--f-game);
}
#rotate-gate.on{display:flex}
.rg-in{display:flex;flex-direction:column;align-items:center;gap:15px;max-width:430px;animation:winIn .5s var(--ease)}
.rg-ic{position:relative;width:min(212px,54vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.rg-ring{position:absolute;inset:0;width:100%;height:100%;color:var(--ac);opacity:.8;animation:rgSpin 4.4s linear infinite}
.rg-phone{position:relative;width:25%;color:#fffdf6;animation:rgTurn 4.4s var(--spring) infinite;
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.5))}
@keyframes rgSpin{to{transform:rotate(360deg)}}
@keyframes rgTurn{0%,12%{transform:rotate(0)}46%,74%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rg-title{font-family:var(--f-disp);font-size:clamp(28px,8.4vw,44px);font-weight:900;line-height:1.04;
  text-transform:uppercase;letter-spacing:-.02em}
.rg-title span{background:linear-gradient(transparent 56%,var(--yel) 56%,var(--yel) 94%,transparent 94%);
  color:#191521;padding:0 .1em}
.rg-sub{font-size:clamp(14px,4vw,16.5px);line-height:1.55;font-weight:700;color:rgba(255,253,246,.78);
  border-left:3px dashed rgba(255,253,246,.3);padding-left:14px;text-align:left}
.rg-chip{font-family:var(--f-hand);font-size:16px;color:#191521;background:var(--ac);
  border:2.5px solid #fffdf6;border-radius:999px;padding:7px 16px;box-shadow:4px 4px 0 rgba(0,0,0,.45);
  transform:rotate(-1.6deg)}
body[data-anim="off"] .rg-ring,body[data-anim="off"] .rg-phone{animation:none}
body[data-anim="off"] .rg-phone{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){
  .rg-ring,.rg-phone{animation:none}
  .rg-phone{transform:rotate(-90deg)}
}

/* ── палец вместо мыши ────────────────────────────────────
   Перчатку не показываем: она встала бы ровно под палец и закрыла кнопку.
   Наведение на телефоне залипает после касания, поэтому подъёмы карточек
   и кнопок там отключены — нажатие по-прежнему отзывается «вдавливанием». */
@media (pointer:coarse){
  #cur{display:none}
  .step:hover,.bt:hover,.faq-i:hover{transform:none;box-shadow:var(--sh-s)}
  .pd-opt:hover{background:transparent;color:var(--ink2);padding-left:14px}
  .pd-opt.on:hover{background:var(--ac);color:var(--ink)}
  .cal-d:hover:not(.out):not(.void){background:transparent;color:inherit;transform:none}
  .ac-item:hover .ac-face{background:var(--card)}
  .ac-item.armed .ac-face{background:var(--green)}
  .seg label:hover{color:var(--ink2)}
  .set-swatches button:hover,.set-swatches .sw-custom:hover,.sc-pal button:hover{transform:none}
  .vp-btn:hover:not(:active),.btn-solid:hover:not(:active),.btn-ghost:hover:not(:active),
  .btn-go:hover:not(:active),.icon-btn:hover:not(:active),.btn-mute:hover:not(:active),
  .soc:hover:not(:active),.cal-arrow:hover:not(:active),.note-send:hover:not(:active),
  .tb-nav a:hover:not(:active){transform:none;box-shadow:var(--sh-s)}
  .btn-solid:hover::after,.btn-go:hover::after{transform:skewX(-22deg) translateX(-160%)}
  .streamer-toggle-box:hover .sm-tooltip{opacity:0;transform:translateY(-8px) rotate(1deg)}
  /* свайп строки подсказки и перетаскивание в палитре не должны уезжать в прокрутку */
  .ac-item{touch-action:pan-y}
  #ac-sv,#ac-hue{touch-action:none}
}
body{-webkit-tap-highlight-color:transparent}

/* ── телефон, узкий экран ───────────────────────────────── */
@media (max-width:640px){
  .topbar{height:66px;flex:0 0 66px;padding:0 11px;gap:8px}
  .tb-logo img{width:44px;height:44px}
  .hero{padding:30px 18px 46px;gap:20px}
  .hero-logo{margin:4px auto 14px}
  .hero-logo img{width:min(520px,80vw)}
  .hero-sub{font-size:16px}
  .hero-cta{gap:10px}
  .btn-solid,.btn-ghost{flex:1 1 auto;justify-content:center;padding:14px 16px;font-size:14.5px}
  .hero-stats{gap:8px}
  .hs{flex:1 1 42%;min-width:0;padding:7px 8px}
  .stk{font-size:13px;padding:5px 12px}
  .sec{padding:40px 18px}
  .sec-head h2{font-size:clamp(27px,8.6vw,38px)}
  .sec-note{font-size:17px}
  .step h3,.bt h3{font-size:16.5px}
  .form-panel{padding:18px 15px 20px}
  .fp-head h2{font-size:21px}
  .fp-live{font-size:10.5px}
  .fp-lock{font-size:13px;padding:11px 12px}
  /* 16px — порог, ниже которого iOS приближает страницу при фокусе на поле */
  .fi{font-size:16px;padding:13px 14px 13px 48px}
  .note-text{font-size:19px}
  .seg label{padding:13px 0;font-size:14.5px}
  .mode-btn{padding:14px 10px;font-size:13px}
  .pd-btn,.pd-opt{font-size:14px}
  .pd-opt{padding:13px 14px}
  .btn-go{width:100%;justify-content:center;padding:16px}
  .site-footer{padding:26px 18px 0}
  .ft-logo img{width:78px;height:78px}
  .ft-col{min-width:0;flex:1 1 44%}

  /* модалки: во всю ширину, но с воздухом по краям */
  #update-modal,#settings-modal,#bracket-modal,#cal-modal,#note-modal,#ask-modal{padding:9px}
  .update-card,.set-card,.bk-card{width:100%;max-height:92dvh;padding:20px 16px 22px}
  #bracket-modal .bk-card{width:100%}
  .cal-card,.note-card{width:100%;max-height:92dvh;padding:15px 14px 17px}
  .update-card h3{font-size:23px}
  /* заголовки групп — одной строкой, иначе на телефоне «ИГРА НА / ТЕЛЕФОНЕ» */
  .uc-g summary{font-size:14.5px;gap:9px;padding:12px 12px}
  .uc-g summary svg{width:19px;height:19px}
  .uc-g summary::after{flex:0 0 26px;width:26px;height:26px;font-size:18px}
  .uc-n{font-size:11.5px;padding:1px 7px}
  .uc-g-in{padding:2px 12px 14px}
  .set-head h3,.bk-head h3{font-size:20px}
  .set-row{flex-wrap:wrap;gap:9px}
  .set-row input[type=range]{max-width:none;flex:1 1 100%}
  .cal-d{height:40px}
  .cal-foot{flex-wrap:wrap}
  .cal-btns{flex:1 1 100%}
  .cal-reset,.cal-apply{flex:1;justify-content:center}

  /* арена в вертикальном телефоне: карточки стопкой и крупные кнопки под ними */
  .bh{height:52px;flex:0 0 52px;padding:0 10px;gap:8px}
  .bh-ava{width:30px;height:30px}
  .bh-name{font-size:14px;max-width:32vw}
  .bh-badge{padding:5px 10px;font-size:11px}
  .bh-right{gap:5px}
  .bh-right .icon-btn,.bh-right .btn-mute{width:34px;height:34px}
  /* в узком шапке и так тесно: раунд показываем бейджем, у кнопки сетки оставляем слово */
  .bh-chip{height:34px;padding:0 8px;gap:6px}
  .bh-chip svg{width:17px;height:17px}
  .bhc-lbl{font-size:11.5px}
  .bhc-rnd{display:none}
  .arena{padding:10px 12px;gap:12px}
  .cc{width:min(96vw,560px)}
  .vp-cont{padding:0 10px 10px}
  .vp{padding:11px 12px}
  .vp-footer{gap:8px}
  .vp-btn{flex:1 1 auto;justify-content:center;padding:13px 14px;font-size:13px}
  .vp-timer-block{width:100%;justify-content:center;gap:8px}
  .vp-timer-block .vp-btn{flex:1 1 34%}
  .vp-timer-text{flex:1 1 100%;text-align:center;order:5}
  #chat-widget{top:60px;bottom:auto;height:min(48dvh,300px);width:min(268px,74vw);right:8px}
  body[data-chatpos="left"] #chat-widget{left:8px}

  /* победитель: лого не наезжает на заголовок, карточка в одну колонку */
  #win-ov{gap:11px;padding:16px 14px}
  .win-logo{width:min(112px,26vw);top:10px;right:12px}
  .win-kicker{font-size:18px}
  .win-title{gap:10px;font-size:clamp(27px,8.6vw,40px)}
  .win-trophy{width:50px;height:50px;padding:11px}
  .win-clip-wrap{width:min(760px,95vw)}
  .win-meta-final{flex-direction:column;align-items:flex-start;gap:9px;padding:11px 13px;width:min(760px,95vw)}
  .win-sub{max-width:100%;white-space:normal;font-size:14.5px}
  #win-score{margin-left:0;text-align:left}
  .win-buttons{width:100%;gap:9px}
  .btn-share,.btn-re{flex:1 1 auto;justify-content:center;padding:13px 14px;font-size:13.5px}
}

/* ── телефон в ландшафте: та же арена, что на компьютере, только плотнее ── */
@media (orientation:landscape) and (max-height:560px){
  .bh{height:44px;flex:0 0 44px;padding:0 10px;gap:8px}
  .bh-ava{width:27px;height:27px;border-width:2px}
  .bh-name{font-size:13px;max-width:14vw}
  .bh-badge{padding:4px 9px;font-size:10.5px;letter-spacing:.2px;gap:5px}
  .bh-badge svg{width:12px;height:12px}
  .bh-right{gap:4px}
  .bh-right .icon-btn,.bh-right .btn-mute{width:31px;height:31px;border-radius:11px 13px 10px 14px}
  .bh-right .icon-btn svg,.bh-right .btn-mute svg{width:15px;height:15px}
  .bh-chip{height:31px;padding:0 7px;gap:5px;border-radius:11px 13px 10px 14px}
  .bh-chip svg{width:15px;height:15px}
  .bhc-lbl{font-size:10.5px;letter-spacing:.2px}
  .bhc-rnd{display:none}
  .hype{height:16px;flex:0 0 16px}
  .hype-lbl{font-size:11px;letter-spacing:.4px}
  /* сколько места остаётся клипам: экран минус шапка, хайп, панель
     голосования и подпись под клипом. Переменная живёт на экране боя,
     чтобы ширину клипов знала и панель — она встаёт ровно под ними. */
  #S-battle{
    --cardw:min(46vw, calc((100vh - 210px) * 1.7778));
    --cardw:min(46vw, calc((100dvh - 210px) * 1.7778));
  }
  .arena{flex-direction:row;gap:9px;padding:5px 9px;overflow:hidden}
  .cc{border-width:3px;width:var(--cardw)}
  .cc-iframe{border-bottom-width:3px}
  .cc-info{padding:3px 7px;gap:7px}
  .cc-ava{width:22px;height:22px;border-width:2px}
  .cc-title{font-size:11.5px}
  .cc-author{font-size:11.5px}
  .cc-views{display:none}
  .cc-num{top:5px;left:5px;font-size:10.5px;padding:3px 8px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
  .cc-play{gap:7px}
  .ccb-disc{width:58px;height:58px;border-width:3px}
  .ccb-disc svg{width:25px;height:25px;margin-left:4px}
  .ccb-cap{font-size:12.5px;padding:4px 10px 5px}
  .vs{display:block}
  .vs-ic{width:52px;height:52px;border-width:3px}
  .vs-ic svg{width:24px;height:24px}
  .vp-cont{padding:0 9px 5px;width:100%;max-width:calc(var(--cardw) * 2 + 27px);margin-inline:auto}
  .vp{padding:5px 8px;gap:4px;border-width:3px}
  .vp-main{gap:7px}
  .vp-ava{width:26px;height:26px;border-width:2px}
  .vp-bar-wrap{height:24px;border-width:2px}
  .vp-side span{font-size:10px;max-width:96px}
  /* в столбик кнопки не перестраиваем: столбик съедает треть экрана
     и выдавливает клипы, а в ряд они и так помещаются */
  .vp-footer{flex-direction:row;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap}
  /* пальцем по кнопке должно попадаться вслепую, поэтому в ландшафте
     они не «красивые мелкие», а в полный рост пальца */
  .vp-btn{flex:0 1 auto;padding:8px 12px;font-size:11.5px;gap:5px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
  .vp-btn svg{width:13px;height:13px}
  .vp-btn b{padding:0 4px;border-width:1.5px}
  .vp-timer-block{gap:6px;flex-wrap:nowrap}
  .vp-timer-text{display:none}
  .vp-countdown{font-size:17px;min-width:34px;padding:1px 5px;border-width:2px}
  .vp-progress-track{height:6px;border-width:2px}
  /* полоска посланий всплывает над панелью и не двигает клипы */
  .note-quest.on{position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
    width:min(430px,92vw);margin:0;padding:5px 10px;z-index:8}
  #chat-widget{top:48px;bottom:auto;height:min(52dvh,230px);width:min(44vw,290px);right:7px}
  body[data-chatpos="left"] #chat-widget{left:7px}
  .cw-foot{display:none}
  #sm-hud{gap:8px}
  .smh-side b{font-size:30px}
  .smh-side span{font-size:11px;max-width:90px}
  .smh-mid b{font-size:22px}
  .smh-mid span{font-size:10px}
  .smh-mid i{font-size:11px;min-height:13px}
  #win-ov{gap:8px;padding:10px}
  .win-logo{width:min(92px,14vw);top:8px;right:10px}
  .win-kicker{font-size:15px}
  .win-title{gap:9px;font-size:clamp(22px,4.6vw,34px)}
  .win-trophy{width:38px;height:38px;padding:8px}
  .win-clip-wrap{width:min(560px,52vw)}
  .win-meta-final{padding:7px 11px;gap:9px}
  #win-ava{width:34px;height:34px}
  .win-sub{font-size:13px;max-width:26vw}
  .win-author{font-size:13px}
  #win-score{font-size:13px}
  .win-buttons{gap:9px}
  .btn-share,.btn-re{padding:9px 15px;font-size:12px}
}

/* Узкий телефон в ландшафте (667×375 и меньше): кнопка play и подписи
   мельче, иначе они наезжают на края клипа */
@media (orientation:landscape) and (max-width:700px){
  .cc-title,.cc-author{font-size:10.5px}
  .ccb-disc{width:50px;height:50px}
  .ccb-disc svg{width:22px;height:22px}
}

/* 400px и уже: в шапке боя не протолкнуться — у кнопки сетки оставляем только значок */
@media (max-width:400px){
  .bhc-lbl{display:none}
  .bh-chip{padding:0 7px}
}

/* ── чем писать по плашке акцентного цвета ──
   цвет считает движок темы (--ac-ink): на светлом акценте знак тёмный,
   на тёмном — кремовый. Работает и в дне, и в ночи, для пресетов и RGB.
   body[data-theme] в начале каждой строки — чтобы правило перекрывало
   ночной список выше, а не проигрывало ему в весе. */
body[data-theme] .btn-solid,
body[data-theme] .btn-go,
body[data-theme] .bt-ic,
body[data-theme] .ac-swipe,
body[data-theme] .seg input:checked+label,
body[data-theme] .pd-opt.on,
body[data-theme] .vp-btn.primary,
body[data-theme] .btn-share,
body[data-theme] .smp-btn,
body[data-theme] .cal-btn.on,
body[data-theme] .cal-d.edge,
body[data-theme] .cal-apply,
body[data-theme] .bhc-rnd,
body[data-theme] .bh-right .icon-btn.on,
body[data-theme] .note-send,
body[data-theme] .rg-chip,
body[data-theme] .set-save.dirty,
body[data-theme] .set-seg button.on,
body[data-theme] .ask-yes,
body[data-theme] .update-btn-close,
body[data-theme] .uc-badge,
body[data-theme] .uc-ver.on b,
body[data-theme] .uc-ver.on i,
body[data-theme] .uc-tags span:nth-child(4),
body[data-theme] .nq-cnt,
body[data-theme] .faq-i[open] summary::after,
body[data-theme] .uc-g[open] summary::after{color:var(--ac-ink)}
/* счётчик посланий на зелёной плашке — уже не по акценту, там свои чернила */
body[data-theme] .note-quest.done .nq-cnt{color:var(--ink-d)}