/* v3 Now Playing + Skip (Sound Options, main-menu Options). Transform/opacity animation only. */
.np-host{margin:4px 0 10px}
.np-widget{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(226,189,104,.42);border-radius:10px;
  background:linear-gradient(180deg,rgba(28,20,14,.78),rgba(10,8,7,.86));box-shadow:inset 0 1px 0 rgba(255,230,170,.12),0 6px 18px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:left;min-width:0}
.np-eq{display:inline-flex;align-items:flex-end;gap:3px;width:22px;height:18px}
.np-eq i{flex:1;height:100%;border-radius:1px;background:linear-gradient(180deg,#fbe3a0,#c99a3c);transform-origin:50% 100%;transform:scaleY(.25);box-shadow:0 0 6px rgba(240,200,110,.45)}
.np-widget[data-state="playing"] .np-eq i{animation:np-eq 1.1s ease-in-out infinite}
.np-widget[data-state="playing"] .np-eq i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.np-widget[data-state="playing"] .np-eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
.np-widget[data-state="playing"] .np-eq i:nth-child(4){animation-duration:.95s;animation-delay:-.15s}
@keyframes np-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.np-text{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.np-kicker{font:600 9px Cinzel,serif;letter-spacing:.18em;text-transform:uppercase;color:#aa9a78}
.np-title{font:700 15px Cinzel,serif;color:#f6dc98;text-shadow:0 0 10px rgba(240,190,90,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.np-note{font:600 9px Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:#8d806a}
.np-note:empty{display:none}
.np-widget.np-swap .np-title{animation:np-swap .55s ease-out}
@keyframes np-swap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.np-widget[data-state="muted"] .np-title,.np-widget[data-state="idle"] .np-title{color:#8f8676;text-shadow:none;opacity:.7}
.np-widget[data-state="muted"] .np-eq,.np-widget[data-state="idle"] .np-eq,.np-widget[data-state="paused"] .np-eq{opacity:.45}
.np-skip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid rgba(226,189,104,.55);border-radius:8px;cursor:pointer;
  background:linear-gradient(180deg,#5a2a14,#2c140b);color:#f6dc98;font:700 11px Cinzel,serif;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .15s,opacity .2s;min-height:36px}
.np-skip svg{width:14px;height:14px}
.np-skip:hover{transform:translateY(-1px)}
.np-skip:active{transform:scale(.96)}
.np-skip.np-cooling,.np-skip:disabled{opacity:.45;cursor:default;transform:none}
@media (max-width:480px){.np-widget{gap:9px;padding:8px 10px}.np-title{font-size:13px}.np-skip{padding:7px 9px}.np-skip span{display:none}}
@media (prefers-reduced-motion:reduce){.np-widget .np-eq i{animation:none!important;transform:scaleY(.6)}.np-widget.np-swap .np-title{animation:none}}
/* Royal Siege options row */
.np-host--menu{padding:12px 0 4px;border-top:1px solid rgba(226,189,104,.16)}