/* Reactions row on the now-playing card (discreet; selected = gold ring). */
.rx { position: relative; display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(13,12,11,.32); border: 1px solid rgba(236,228,214,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rx button { appearance: none; border: 1px solid transparent; background: transparent; width: 38px; height: 34px; border-radius: 999px; cursor: pointer; font-size: 19px; line-height: 1; display: grid; place-items: center; padding: 0;
  filter: grayscale(.35); opacity: .78; transition: transform .15s, opacity .15s, filter .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.rx button:hover { opacity: 1; filter: none; transform: translateY(-1px) scale(1.08); }
.rx button[aria-pressed="true"] { opacity: 1; filter: none; background: rgba(201,160,99,.22); border-color: rgba(201,160,99,.7); }
.rx button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.rx button.pop span { display: inline-block; animation: rx-pop .35s ease; }
@keyframes rx-pop { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.rx .rx-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; pointer-events: none; padding: 5px 9px; border-radius: 8px;
  background: #1d1a15; border: 1px solid rgba(201,160,99,.35); color: #e9dcc6; font: 500 12px/1.2 var(--sans); opacity: 0; transition: opacity .15s; }
.rx.tip .rx-tip { opacity: 1; }
@media (max-width: 719px) { .rx { margin-top: 12px; } .rx button { width: 44px; height: 38px; font-size: 21px; } }
/* Heart on "Amigos ouvindo agora" covers (own page): third button in the cover tools stack, gold accent. */
.cl-tools .fnr-heart { color: #f2c27a; background: rgba(40,26,12,.72); border-color: rgba(227,169,79,.75); box-shadow: 0 0 0 3px rgba(227,169,79,.16), 0 4px 12px -4px rgba(0,0,0,.6); }
.cl-tools .fnr-heart svg { width: 14px; height: 14px; }
.cl-tools .fnr-heart:hover, .cl-tools .fnr-heart[aria-expanded="true"] { background: rgba(70,44,16,.9); color: #ffd79a; }
.cl-tools .fnr-heart.on { --fill: currentColor; background: linear-gradient(140deg, #e3a94f, #c9603f); border-color: #f2c27a; color: #fff; }
.cl-tools .fnr-heart .fnr-emo { font-size: 14px; line-height: 1; }
.cl-tools .fnr-heart.pulse { animation: rx-pop .4s ease; }
.cl-tools:has(.fnr-heart) { opacity: 1; } .cl-tools:has(.fnr-heart) > :not(.fnr-heart) { opacity: .72; }
@media (hover: hover) {
  .cl-tools:has(.fnr-heart) > :not(.fnr-heart) { opacity: 0; transition: opacity .2s; }
  .cl-cover:hover > .cl-tools:has(.fnr-heart) > *, .cl-tools:has(.fnr-heart):focus-within > *, .cl-tools:has(.fnr-heart):has([aria-expanded="true"]) > *,
  .cl-tools:has(.fnr-heart):has(.play[data-state="playing"]) > *, .cl-tools:has(.fnr-heart):has(.play[data-state="loading"]) > * { opacity: 1; }
}
.fnr-pop { min-width: 228px; }
.fnr-to { display: block; margin-top: 2px; font-size: 11px; color: rgba(243,238,230,.45); }
.fnr-list { display: grid; gap: 2px; }
.fnr-opt { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 9px; border-radius: 8px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fnr-opt:hover, .fnr-opt:focus-visible { background: rgba(255,255,255,.07); outline: none; }
.fnr-opt[aria-pressed="true"] { background: rgba(201,160,99,.2); border-color: rgba(201,160,99,.6); }
.fnr-e { font-size: 18px; width: 22px; text-align: center; }
.fnr-msg { margin: 4px 9px 4px; font-size: 12px; color: #e9a07a; }
@media (max-width: 719px) { .fnr-opt { padding: 10px 9px; } }