/* GNARLY SIGNAL FILL — opt-in, compositor-only loading treatment.
 * Visual activity, never an estimate of download or extraction percentage.
 * Keeps the verified album artwork visible behind a refractive acid wash.
 */
.gnarly-cover-charge{
 position:absolute;inset:0;z-index:3;overflow:hidden;border-radius:inherit;
 pointer-events:none;opacity:0;visibility:hidden;
 transition:opacity .23s ease,visibility .23s ease;
 isolation:isolate;contain:paint;
}
#player-section[data-audio-charge="loading"] .gnarly-cover-charge,
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge,
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge{
 opacity:1;visibility:visible;
}
.gnarly-cover-charge-wash{
 position:absolute;inset:0;
 background:
  linear-gradient(0deg,color-mix(in srgb,var(--acid,#46ff12) 55%,transparent),
   color-mix(in srgb,var(--acid,#46ff12) 22%,transparent) 53%,transparent 100%),
  repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 5px);
 opacity:.55;mix-blend-mode:screen;
 transform:translateZ(0);
 clip-path:inset(100% 0 0 0);
}
.gnarly-cover-charge-wave{
 position:absolute;left:-12%;width:124%;height:2px;top:104%;
 background:linear-gradient(90deg,transparent,var(--acid,#46ff12) 18%,#f5fff0 49%,var(--acid,#46ff12) 82%,transparent);
 box-shadow:0 0 9px 2px color-mix(in srgb,var(--acid,#46ff12) 62%,transparent),
            0 0 21px 5px color-mix(in srgb,var(--acid,#46ff12) 30%,transparent);
 transform:rotate(-2deg) translateZ(0);opacity:.88;
}
.gnarly-cover-charge-signal{
 position:absolute;top:8%;left:7%;right:7%;
 display:flex;align-items:center;justify-content:center;gap:8px;
 width:max-content;max-width:86%;margin:auto;padding:6px 10px;
 color:#f7fff5;background:#07170cba;border:1px solid color-mix(in srgb,var(--acid,#46ff12) 50%,#ffffff2b);
 border-radius:999px;box-shadow:0 3px 19px #0009,inset 0 1px #ffffff20;
 font:800 clamp(8px,1.6vw,10px)/1.15 -apple-system,BlinkMacSystemFont,sans-serif;
 letter-spacing:.12em;text-shadow:0 1px 3px #000;
 white-space:nowrap;
}
.gnarly-cover-charge-signal::after{content:"SINTONIZANDO";overflow:hidden;text-overflow:ellipsis}
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge-signal::after{content:"AJUSTANDO SINAL"}
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge-signal::after{content:"RECONECTANDO"}
.gnarly-cover-charge-bars{display:flex;align-items:flex-end;gap:2px;height:10px;flex:0 0 auto}
.gnarly-cover-charge-bars i{display:block;width:2px;height:4px;border-radius:1px;background:var(--acid,#46ff12);
 box-shadow:0 0 5px color-mix(in srgb,var(--acid,#46ff12) 80%,transparent)}
#player-section[data-audio-charge="loading"] .gnarly-cover-charge-wash,
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge-wash{
 animation:gnarly-charge-fill 3.4s cubic-bezier(.25,.01,.63,.94) infinite;
}
#player-section[data-audio-charge="loading"] .gnarly-cover-charge-wave,
#player-section[data-audio-charge="recovering"] .gnarly-cover-charge-wave{
 animation:gnarly-charge-sweep 3.4s cubic-bezier(.25,.01,.63,.94) infinite;
}
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge-wash{
 clip-path:inset(66% 0 0 0);opacity:.24;
 animation:gnarly-charge-buffer 1.6s ease-in-out infinite alternate;
}
#player-section[data-audio-charge="buffering"] .gnarly-cover-charge-wave{
 top:66%;opacity:.54;animation:gnarly-charge-buffer-wave 1.6s ease-in-out infinite alternate;
}
#player-section[data-audio-charge] .gnarly-cover-charge-bars i:nth-child(1){animation:gnarly-charge-bar .67s ease-in-out infinite alternate}
#player-section[data-audio-charge] .gnarly-cover-charge-bars i:nth-child(2){animation:gnarly-charge-bar .8s -.24s ease-in-out infinite alternate}
#player-section[data-audio-charge] .gnarly-cover-charge-bars i:nth-child(3){animation:gnarly-charge-bar .72s -.46s ease-in-out infinite alternate}
@keyframes gnarly-charge-fill{
 0%{clip-path:inset(100% 0 0 0);opacity:.2}
 70%{clip-path:inset(8% 0 0 0);opacity:.62}
 85%{clip-path:inset(2% 0 0 0);opacity:.38}
 100%{clip-path:inset(0 0 0 0);opacity:0}
}
@keyframes gnarly-charge-sweep{
 0%{top:104%;opacity:0}
 8%{opacity:.85}
 70%{top:8%;opacity:.95}
 84%{top:2%;opacity:.7}
 100%{top:0;opacity:0}
}
@keyframes gnarly-charge-bar{from{height:3px;opacity:.55}to{height:10px;opacity:1}}
@keyframes gnarly-charge-buffer{from{opacity:.12}to{opacity:.32}}
@keyframes gnarly-charge-buffer-wave{from{opacity:.22}to{opacity:.62}}
/* The iPod glass is a separate window; artwork and labels keep their own layers.
   Never paint over the click wheel or physically customized chassis. */
.gnarly-ipod .ipod-screen .gnarly-cover-charge{z-index:2}
.gnarly-ipod .ipod-screen .gnarly-cover-charge-signal{
 top:6%;padding:4px 7px;font-size:clamp(7px,1.3vw,9px);gap:5px;letter-spacing:.07em;
}
.gnarly-ipod .ipod-screen .gnarly-cover-charge-bars{height:8px}
.gnarly-ipod .ipod-screen .gnarly-cover-charge-bars i{width:1.5px}
@media(prefers-reduced-motion:reduce){
 .gnarly-cover-charge,.gnarly-cover-charge-wash,.gnarly-cover-charge-wave,
 .gnarly-cover-charge-bars i{transition:none!important;animation:none!important}
 #player-section[data-audio-charge] .gnarly-cover-charge-wash{clip-path:inset(62% 0 0 0);opacity:.29}
 #player-section[data-audio-charge] .gnarly-cover-charge-wave{top:62%;opacity:.62}
 .gnarly-cover-charge-bars i{height:6px!important}
}

/* Screen readers get the same real player status in iPod mode. */
.gnarly-charge-sr-only{
 position:absolute!important;width:1px!important;height:1px!important;
 padding:0!important;margin:-1px!important;overflow:hidden!important;
 clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}