@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@700;900&display=swap');

#np-widget { max-width: 960px; margin: 0 auto; padding: 10px; }

.np-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px; border-radius: 50px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px; letter-spacing: 2px; margin-bottom: 12px;
}
.np-badge.np-live {
  background: linear-gradient(135deg,#8b0000,#e8001c);
  color: white; animation: npLivePulse 2s ease-in-out infinite;
}
.np-badge.np-promo { background:#222; color:#ccc; border:1px solid #444; }
.np-live-dot {
  width:10px;height:10px;border-radius:50%;background:white;
  animation: npBlink 1s step-end infinite;
}
@keyframes npBlink    { 0%,100%{opacity:1}50%{opacity:0} }
@keyframes npLivePulse {
  0%,100%{ box-shadow:0 0 20px rgba(232,0,28,.5); }
  50%    { box-shadow:0 0 45px rgba(232,0,28,.9); }
}

.np-player-wrap {
  position:relative; padding-bottom:56.25%; height:0;
  overflow:hidden; border-radius:12px;
  border:3px solid #333; transition:border-color .4s,box-shadow .4s;
}
.np-player-wrap.np-live { border-color:#e8001c; box-shadow:0 0 30px rgba(232,0,28,.4); }
.np-player-wrap iframe { position:absolute;top:0;left:0;width:100%;height:100%;border:0; }

.np-btns { display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px; }
.np-btn {
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;border-radius:8px;text-decoration:none;
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:700;
  cursor:pointer;border:none;white-space:nowrap;
  transition:transform .15s,filter .15s;color:white!important;
}
.np-btn:hover{transform:translateY(-2px);filter:brightness(1.2);}
.np-btn-like    {background:#cc0000;}
.np-btn-sub     {background:#ff0000;}
.np-btn-streams {background:#333;border:1px solid #555!important;}
.np-btn-chat    {background:#1a472a;}
.np-btn-share   {background:#444;border:1px solid #666!important;}

#np-toast {
  position:fixed;bottom:20px;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:#222;color:white;padding:10px 22px;
  border-radius:50px;font-size:14px;font-weight:700;
  border:1px solid #555;transition:transform .3s;
  pointer-events:none;z-index:9999;white-space:nowrap;
}
#np-toast.np-show{transform:translateX(-50%) translateY(0);}