#rl-player-bar{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:99999;
min-height:54px;
background:linear-gradient(135deg,rgba(8,71,120,.97),rgba(201,20,46,.97) 72%,rgba(8,71,120,.97));
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 14px;
border-radius:0;
border-top:1px solid rgba(255,255,255,.12);
box-shadow:0 -8px 24px rgba(0,0,0,.22);
font-family:Arial,sans-serif;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
body{padding-bottom:72px !important}
footer,#colophon,.site-footer{position:relative;z-index:1}
.rl-left,.rl-center,.rl-right{display:flex;align-items:center}
.rl-left{gap:12px;min-width:320px}
.rl-center{flex:1;justify-content:center}
.rl-right{min-width:120px;justify-content:flex-end}
#rl-toggle.yt-play-btn{
width:52px;
height:36px;
border:none;
background:rgba(255,255,255,.14);
cursor:pointer;
border-radius:12px;
position:relative;
transition:transform .2s ease, background-color .25s ease, box-shadow .25s ease;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 16px rgba(0,0,0,.18);
overflow:hidden;
}
#rl-toggle.yt-play-btn:hover{
background:rgba(255,255,255,.2);
transform:translateY(-1px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 24px rgba(0,0,0,.22);
}
#rl-toggle.yt-play-btn:active{transform:scale(.97)}
#rl-toggle.yt-play-btn:focus-visible{
outline:2px solid rgba(255,255,255,.85);
outline-offset:2px;
}
#rl-toggle.yt-play-btn::before,
#rl-toggle.yt-play-btn::after{
content:"";
position:absolute;
top:50%;
left:50%;
transition:all .28s ease;
}
#rl-toggle.yt-play-btn::before{
transform:translate(-34%,-50%);
width:0;
height:0;
border-left:14px solid #fff;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
}
#rl-toggle.yt-play-btn::after{opacity:0}
#rl-toggle.yt-play-btn.is-playing::before{
width:5px;
height:18px;
border:none;
background:#fff;
border-radius:2px;
transform:translate(-9px,-50%);
}
#rl-toggle.yt-play-btn.is-playing::after{
width:5px;
height:18px;
background:#fff;
border-radius:2px;
transform:translate(4px,-50%);
opacity:1;
}
.rl-pulse:not(.is-playing){animation:rlButtonBreath 2.4s ease-in-out infinite}
@keyframes rlButtonBreath{
0%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 16px rgba(0,0,0,.18),0 0 0 0 rgba(255,255,255,.16)}
50%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.22),0 0 0 8px rgba(255,255,255,0)}
}
#rl-logo{
display:block;
width:52px;
min-width:52px;
height:52px;
object-fit:contain;
background:#fff;
border-radius:12px;
padding:4px;
box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.rl-meta{display:flex;flex-direction:column;justify-content:center;gap:3px;line-height:1.15}
.rl-title{font-size:15px;font-weight:700;letter-spacing:.2px;color:#fff}
.rl-subtitle{font-size:12px;opacity:.9;letter-spacing:0;color:#e8e8e8;text-transform:none}
.rl-song{display:none}
.rl-eq{
display:flex;
gap:4px;
height:18px;
align-items:flex-end;
opacity:.38;
transition:opacity .2s ease;
}
.rl-eq.is-playing{opacity:.95}
.rl-eq span{
width:3px;
height:6px;
background:rgba(255,255,255,.92);
display:block;
border-radius:999px;
animation:rlEq 1s infinite ease-in-out;
}
.rl-eq span:nth-child(2){animation-delay:.2s}
.rl-eq span:nth-child(3){animation-delay:.4s}
.rl-eq span:nth-child(4){animation-delay:.6s}
@keyframes rlEq{0%{height:5px}50%{height:18px}100%{height:5px}}
.rl-ajax-loading{opacity:.7;transition:opacity .2s}
@media(max-width:768px){
body{padding-bottom:72px !important}
#rl-player-bar{
min-height:54px;
padding:8px 12px;
gap:10px;
}
.rl-left,
.rl-center,
.rl-right{
width:auto;
min-width:0;
}
.rl-left{flex:1;gap:10px}
.rl-center{display:none}
.rl-right{justify-content:flex-end}
#rl-logo{
width:42px;
min-width:42px;
height:42px;
padding:3px;
}
#rl-toggle.yt-play-btn{width:46px;height:34px}
.rl-meta{min-width:0}
.rl-title{
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rl-subtitle{
font-size:11px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rl-song{display:none}
.rl-volume-wrap{
padding:0;
background:transparent;
box-shadow:none;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
#rl-volume{display:none}
.rl-volume-btn{
width:34px;
height:34px;
background:rgba(255,255,255,0.16);
}
}
.rl-player-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.rl-player-title {
font-weight: 600;
font-size: 14px;
color: #fff;
line-height: 1.2;
}
.rl-player-subtitle {
font-size: 12px;
color: #ccc;
line-height: 1.2;
}
.rl-volume-wrap{
display:flex;
align-items:center;
gap:10px;
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,0.10);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 8px 20px rgba(0,0,0,0.16);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.rl-volume-btn{
width:30px;
height:30px;
border:none;
border-radius:50%;
background:rgba(255,255,255,0.14);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:transform .18s ease, background-color .22s ease, box-shadow .22s ease;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
padding:0;
}
.rl-volume-btn:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.20);
}
.rl-volume-btn:active{transform:scale(.96)}
.rl-volume-btn:focus-visible{
outline:2px solid rgba(255,255,255,.88);
outline-offset:2px;
}
.rl-volume-icon{
font-size:15px;
line-height:1;
transform:translateY(-.5px);
}
#rl-volume {
width:110px;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
background:transparent;
--rl-vol-percent: 80%;
}
#rl-volume::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background: linear-gradient(
to right,
#ffffff 0%,
#ffffff var(--rl-vol-percent),
rgba(255,255,255,0.22) var(--rl-vol-percent),
rgba(255,255,255,0.22) 100%
);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
#rl-volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
margin-top: -5px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.10);
border: none;
}
#rl-volume::-moz-range-track {
height: 6px;
background: rgba(255,255,255,0.22);
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.18);
}
#rl-volume::-moz-range-progress {
height: 6px;
background: #ffffff;
border-radius: 999px;
}
#rl-volume::-moz-range-thumb {
width: 16px;
height: 16px;
background: #fff;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.10);
}