/* Реакция телефона на бит (reactive.js). Почти всё — на переменных корня --kick --energy --lo --mid --hi, которые пишет beats.js, и на --fx-a / --fx-rgb (множитель и тон трека, их ведёт reactive.js).
   Классы корня: rx-on — эффекты разрешены, rx-live — музыка идёт. Без них (reduced motion, «Эффекты» выкл.) вид прежний. Свет тихий: подсветка, не вспышки. */
:root{--fx-a:0;--fx-rgb:191,215,255}

/* 1. свет экрана: внутренняя подсветка по краю и от нижнего края (откуда играет панель плеера); непрозрачность 0.10 + 0.30·kick + 0.15·energy, умноженная на --fx-a */
.phone::after{content:'';position:absolute;inset:0;z-index:26;border-radius:inherit;pointer-events:none;opacity:0;
 background:radial-gradient(130% 52% at 50% 112%,rgba(var(--fx-rgb),.5),transparent 72%),radial-gradient(90% 38% at 50% -14%,rgba(var(--fx-rgb),.22),transparent 72%);
 box-shadow:inset 0 0 56px 4px rgba(var(--fx-rgb),.55),inset 0 0 2px 1px rgba(var(--fx-rgb),.55)}
html.rx-live .phone::after{opacity:calc(var(--fx-a)*(.10 + .30*var(--kick) + .15*var(--energy)));will-change:opacity}
/* десктоп: ореол вокруг телефона тоном трека (в комнате, под строками); пульс ≤ 0.25 */
.fx-halo{display:none;position:absolute;left:50%;top:50%;width:420px;height:min(880px,92vh);transform:translate(-50%,-50%);border-radius:40px;pointer-events:none;opacity:0;
 box-shadow:0 0 90px 14px rgba(var(--fx-rgb),.9)}
@media (min-width:821px){html.rx-on .fx-halo{display:block}html.rx-live .fx-halo{opacity:calc(var(--fx-a)*(.06 + .19*var(--kick)));will-change:opacity}}

/* 2. обои-видео (блокировка, профиль): микро-зум и лёгкий рост яркости и насыщенности (не более 8 %) */
html.rx-live video.wall{will-change:transform;transform:scale(calc(1 + .012*var(--kick)));filter:brightness(calc(1 + .08*var(--energy))) saturate(calc(1 + .08*var(--energy)))}

/* 3. кружок в чате: дыхание, свечение тоном и две волны (--k, --w1, --w2 ведёт reactive.js, пока кружок играет) */
html.rx-live .circle.playing{transform:scale(calc(1 + .03*var(--k,0)));will-change:transform;
 box-shadow:0 0 calc(8px + 22px*var(--k,0)) calc(1px*var(--k,0)) rgba(var(--fx-rgb),calc(.08 + .32*var(--k,0))),
  0 0 calc(var(--w2,1)*22px) calc(var(--w2,1)*9px) rgba(var(--fx-rgb),calc((1 - var(--w2,1))*.26))}
html.rx-live .circle.playing:not(:focus-visible){outline:1.5px solid rgba(var(--fx-rgb),calc((1 - var(--w1,1))*.55));outline-offset:calc(var(--w1,1)*16px)}
html.rx-live .circle.playing .ring .arc{filter:drop-shadow(0 0 calc(1px + 5px*var(--k,0)) rgba(var(--fx-rgb),.9))}

/* 4. панель плеера и «Сейчас играет»: ползунок светится на удар; обложка пульсирует; вокруг неё кольца-эхо (пул в reactive.js); фон дышит яркостью; ниже обложки — спектр-волна */
html.rx-live .bar .fill,html.rx-live .np-seek .fill{filter:drop-shadow(0 0 calc(2px + 8px*var(--kick)) rgba(var(--fx-rgb),calc(.3 + .6*var(--kick))))}
html.rx-live .bar .seek::-webkit-slider-thumb{box-shadow:0 0 calc(3px + 11px*var(--kick)) rgba(var(--fx-rgb),calc(.35 + .55*var(--kick)))}
html.rx-live .bar .seek::-moz-range-thumb{box-shadow:0 0 calc(3px + 11px*var(--kick)) rgba(var(--fx-rgb),calc(.35 + .55*var(--kick)))}
.np-art{position:relative}
.np-art img{position:relative;z-index:1}
.np-art::before{content:'';position:absolute;z-index:0;left:50%;top:50%;width:var(--aw,0px);height:var(--aw,0px);margin:calc(var(--aw,0px)/-2) 0 0 calc(var(--aw,0px)/-2);border-radius:18px;pointer-events:none;opacity:0;
 box-shadow:0 0 44px 8px rgba(var(--fx-rgb),.9)}
html.rx-live .np-art::before{opacity:calc(var(--fx-a)*(.12 + .5*var(--kick)));transform:scale(calc(1 + .035*var(--kick)));will-change:opacity,transform}
html.rx-live .np-art img{transform:scale(calc(1 + .035*var(--kick)));will-change:transform}
.np-echo{display:none;position:absolute;z-index:0;left:50%;top:50%;width:var(--aw,200px);height:var(--aw,200px);margin:calc(var(--aw,200px)/-2) 0 0 calc(var(--aw,200px)/-2);border-radius:18px;
 border:1.5px solid rgba(var(--fx-rgb),.85);box-shadow:0 0 14px rgba(var(--fx-rgb),.45);pointer-events:none;opacity:0}
html.rx-on .np-echo{display:block}
html.rx-live .np>.np-shade{opacity:calc(1 - .16*var(--energy));will-change:opacity}
.np-wave{display:none;flex:none;width:calc(100% - 56px);height:clamp(28px,6cqh,52px);margin:8px auto 0;pointer-events:none}
html.rx-on .np-wave{display:block;filter:drop-shadow(0 0 7px rgba(var(--fx-rgb),.7))}

/* 5. эквалайзер «Музыки»: три столбика текущего трека — lo, mid, hi (вместо CSS-анимации) */
html.rx-on .mrow.playing .eq i{animation:none}
html.rx-on .mrow.playing .eq i:nth-child(1){transform:scaleY(calc(.2 + .8*min(1,var(--lo)*1.3)))}
html.rx-on .mrow.playing .eq i:nth-child(2){transform:scaleY(calc(.2 + .8*min(1,var(--mid)*1.4)))}
html.rx-on .mrow.playing .eq i:nth-child(3){transform:scaleY(calc(.2 + .8*min(1,var(--hi)*1.3)))}

/* 6. мобильный фон: canvas — первый слой экрана чата/приложения, экран получает свой контекст наложения, canvas −1 (над фоном экрана, под лентой и шапкой) */
#phoneFx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.rx-host{isolation:isolate}

/* 7. глитч (--glitch: 1 на ≤110 мс ставит reactive.js): красная и циановая тень по краям букв крупных строк комнаты и названия в «Сейчас играет» */
.room-lyrics .rl,.np-title,.np-by{text-shadow:calc(var(--glitch,0)*-3px) 0 0 color-mix(in srgb,var(--low) calc(var(--glitch,0)*90%),transparent),calc(var(--glitch,0)*3px) 0 0 color-mix(in srgb,var(--cyan) calc(var(--glitch,0)*90%),transparent)}