/* MUSIC FOLDER — fire-dimmer | исходник: 4866..4945 */

/* ═══ ДИММЕР ЭФФЕКТА ОГНЯ (слева на экране) ═══ */
.fire-ctrl{position:fixed;right:18px;left:auto;top:50%;transform:translateY(-50%);z-index:93;display:flex;flex-direction:row-reverse;align-items:center;gap:10px;pointer-events:none;}
.fire-ctrl-btn{pointer-events:auto;}
.fire-ctrl-btn{
width:48px;height:48px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
display:grid;place-items:center;color:#ff9a3c;position:relative;flex:none;
background:linear-gradient(180deg,rgba(21,23,40,.94),rgba(12,13,24,.96));
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
box-shadow:0 12px 34px -10px rgba(0,0,0,.8),0 0 22px -8px rgba(255,140,60,.5);
transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .3s,color .3s;
}
.fire-ctrl-btn:hover{transform:scale(1.08);color:#ffb866;}
.fire-ctrl-btn:active{transform:scale(.92);}
.fire-ctrl-btn .fire-ico{width:22px;height:22px;transition:filter .3s,opacity .3s;}
.fire-ctrl-btn:not(.off) .fire-ico{filter:drop-shadow(0 0 6px rgba(255,140,60,.75));animation:fireBreath 2.6s ease-in-out infinite;}
.fire-ctrl-btn.off{color:#5a5f73;box-shadow:0 12px 34px -10px rgba(0,0,0,.8);}
.fire-ctrl-btn.off .fire-ico{filter:none;opacity:.55;animation:none;}
@keyframes fireBreath{0%,100%{filter:drop-shadow(0 0 4px rgba(255,140,60,.5));}50%{filter:drop-shadow(0 0 11px rgba(255,165,75,.95));}}
.fire-ctrl-panel{
display:flex;align-items:center;gap:16px;
padding:16px 18px;border-radius:22px;
background:linear-gradient(180deg,rgba(22,24,42,.97),rgba(12,13,24,.98));
border:1px solid rgba(255,140,60,.28);
box-shadow:0 24px 70px -16px rgba(0,0,0,.9),0 0 44px -8px rgba(255,140,60,.22);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
opacity:0;visibility:hidden;transform:translateX(16px) scale(.94);
transform-origin:right center;pointer-events:none;
transition:transform .32s cubic-bezier(.34,1.3,.64,1),opacity .25s,visibility .32s;
}
.fire-ctrl-panel.open{opacity:1;visibility:visible;transform:translateX(0) scale(1);pointer-events:auto;}
.fire-ctrl-side{display:flex;flex-direction:column;align-items:center;gap:8px;}
.fire-ctrl-emoji{font-size:22px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,140,60,.65));}
.fire-ctrl-val{font-family:var(--fm);font-size:12.5px;font-weight:700;color:#ffb866;font-variant-numeric:tabular-nums;}
.fire-ctrl-sliderbox{position:relative;width:44px;height:150px;flex:none;}
#fireCtrlSlider{
position:absolute;top:50%;left:50%;
width:150px;height:8px;border-radius:999px;
transform:translate(-50%,-50%) rotate(-90deg);
-webkit-appearance:none;appearance:none;
background:rgba(255,255,255,.12);outline:none;cursor:pointer;
touch-action:none;
}
.fire-ctrl-panel{touch-action:none}
.fire-ctrl-sliderbox{touch-action:none}
#fireCtrlSlider::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:18px;height:18px;border-radius:50%;border:none;
background:radial-gradient(circle at 30% 28%,#fff,#ffb347 60%,#ff7a2e);
box-shadow:0 0 14px rgba(255,140,60,.95),0 2px 6px rgba(0,0,0,.5);
cursor:pointer;
}
#fireCtrlSlider::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;border:none;
background:radial-gradient(circle at 30% 28%,#fff,#ffb347 60%,#ff7a2e);
box-shadow:0 0 14px rgba(255,140,60,.95),0 2px 6px rgba(0,0,0,.5);
cursor:pointer;
}
.fire-ctrl-power{
width:36px;height:36px;border-radius:50%;border:1px solid var(--line);flex:none;
background:rgba(255,255,255,.05);color:var(--muted);cursor:pointer;
display:grid;place-items:center;
transition:color .25s,border-color .25s,background .25s,box-shadow .3s,transform .15s;
}
.fire-ctrl-power svg{width:16px;height:16px;}
.fire-ctrl-power:hover{color:#fff;border-color:rgba(255,255,255,.3);transform:translateY(-1px);}
.fire-ctrl-power:active{transform:scale(.9);}
.fire-ctrl-power.on{color:#14100a;border-color:transparent;
background:linear-gradient(135deg,#ff8a2b,#ffb347);
box-shadow:0 0 20px -2px rgba(255,140,60,.85);}
@media(max-width:640px){
.fire-ctrl{right:10px;left:auto;top:auto;bottom:calc(140px + env(safe-area-inset-bottom));transform:none;}
.fire-ctrl-btn{width:38px;height:38px;}
.fire-ctrl-btn .fire-ico{width:17px;height:17px;}
.fire-ctrl-panel{padding:13px 14px;gap:12px;border-radius:18px;}
.fire-ctrl-sliderbox{height:110px;}
#fireCtrlSlider{width:110px;}
}
/* подсказка у правого края не вылезает за экран */
#fireCtrlBtn[data-tip]:hover::after{left:auto;right:0;transform:none;}
#fireCtrlBtn[data-tip]:hover::before{left:auto;right:16px;transform:none;}