/*! xCast Players 2.0 — tokens de tema + componentes compartilhados */

[data-xc-player]{
  --xc-accent:#1db954;
  --xc-bg:#0f1115; --xc-surface:#171a21; --xc-elev:#1f232c;
  --xc-text:#ffffff; --xc-muted:rgba(255,255,255,.62); --xc-line:rgba(255,255,255,.12);
  --xc-radius:16px; --xc-shadow:0 12px 40px rgba(0,0,0,.30);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--xc-text); box-sizing:border-box; -webkit-font-smoothing:antialiased;
}
[data-xc-player] *{ box-sizing:border-box; }
[data-xc-player].xc-light{
  --xc-bg:#ffffff; --xc-surface:#f4f5f7; --xc-elev:#eceef1;
  --xc-text:#0f1115; --xc-muted:rgba(0,0,0,.55); --xc-line:rgba(0,0,0,.10);
  --xc-shadow:0 12px 40px rgba(0,0,0,.12);
}

/* ---- controles ---- */
.xc-btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:0; background:transparent; color:inherit; border-radius:999px; transition:.18s ease;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.xc-btn:hover{ background:var(--xc-line); }
.xc-btn:active{ transform:scale(.94); }
.xc-play{
  width:52px; height:52px; background:var(--xc-accent); color:#fff; flex:0 0 auto;
  box-shadow:0 6px 18px color-mix(in srgb, var(--xc-accent) 45%, transparent);
}
.xc-play:hover{ filter:brightness(1.08); background:var(--xc-accent); }
.xc-play svg{ width:22px; height:22px; }
.xc-play .xc-ic-pause{ display:none; }
[data-xc-player].xc-playing .xc-play .xc-ic-play{ display:none; }
[data-xc-player].xc-playing .xc-play .xc-ic-pause{ display:block; }

/* range de volume */
[data-xc-player] input[type=range]{
  -webkit-appearance:none; appearance:none; height:4px; border-radius:4px;
  background:var(--xc-line); outline:none; cursor:pointer;
}
[data-xc-player] input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:var(--xc-accent); border:0;
}
[data-xc-player] input[type=range]::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:var(--xc-accent); }

/* ---- capa ---- */
.xc-cover{ background:var(--xc-elev); object-fit:cover; display:block; }

/* ---- onda "no ar" ---- */
.xc-wave{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.xc-wave i{ width:3px; height:4px; background:var(--xc-accent); border-radius:2px; opacity:.55; }
[data-xc-player].xc-playing .xc-wave i{ animation:xc-eq .9s ease-in-out infinite; opacity:1; }
.xc-wave i:nth-child(2){ animation-delay:.12s; } .xc-wave i:nth-child(3){ animation-delay:.24s; }
.xc-wave i:nth-child(4){ animation-delay:.36s; } .xc-wave i:nth-child(5){ animation-delay:.48s; }
@keyframes xc-eq{ 0%,100%{ height:4px; } 50%{ height:14px; } }

/* ---- botoes de interacao (curtir / reacoes) ---- */
.xc-react{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; cursor:pointer;
  border:1px solid var(--xc-line); background:var(--xc-surface); color:var(--xc-text);
  border-radius:999px; font-size:14px; line-height:1; transition:.16s ease;
}
.xc-react:hover{ border-color:var(--xc-accent); }
.xc-react .xc-emoji{ font-size:16px; }
.xc-react .xc-n{ font-variant-numeric:tabular-nums; color:var(--xc-muted); font-size:13px; min-width:8px; }
.xc-react.xc-active{ border-color:var(--xc-accent); background:color-mix(in srgb, var(--xc-accent) 16%, var(--xc-surface)); }
.xc-react.xc-active .xc-n{ color:var(--xc-text); }
.xc-like.xc-active{ color:#22c55e; border-color:#22c55e; background:color-mix(in srgb,#22c55e 15%,var(--xc-surface)); }
.xc-dislike.xc-active{ color:#ef4444; border-color:#ef4444; background:color-mix(in srgb,#ef4444 15%,var(--xc-surface)); }
.xc-pop{ animation:xc-pop .3s ease; }
@keyframes xc-pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.28);} 100%{ transform:scale(1);} }

/* ---- redes sociais ---- */
.xc-social{ display:inline-flex; gap:8px; flex-wrap:wrap; }
.xc-social a{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--xc-surface); border:1px solid var(--xc-line); color:var(--xc-text); transition:.16s; }
.xc-social a:hover{ background:var(--xc-accent); color:#fff; border-color:var(--xc-accent); }
.xc-social svg{ width:17px; height:17px; }