/* CANTAIMY v7.6.0 — Track Ratings
   Dedicated additive layer only. Existing desktop/mobile layout untouched. */

.track-card-stats{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:3px;
  min-width:0;
}

.track-card-stats .track-listen-count{
  margin-top:0 !important;
}

.track-rating-summary{
  color:#f0c95b;
  font-size:9.5px;
  line-height:1.2;
  white-space:nowrap;
}

.player-track-meta{
  min-width:0;
  flex:1 1 auto;
  width:0;
  overflow:hidden;
}

.player-rating{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px;
  min-width:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.player-rating-stars{
  display:inline-flex;
  align-items:center;
  gap:1px;
  flex:0 0 auto;
  min-width:max-content;
}

.rating-star{
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  border:0;
  background:transparent;
  color:#7d849b;
  font-size:16px;
  line-height:18px;
  cursor:pointer;
  transition:transform .12s ease,color .12s ease,opacity .12s ease;
}

.rating-star:not(:disabled):hover{
  transform:scale(1.15);
  color:#ffd868;
}

.rating-star.selected{
  color:#ffd868;
}

.rating-star.locked,
.rating-star:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.v6-player .player-left .player-rating-status{
  display:block !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  color:#7f89a4;
  font-size:8px !important;
  line-height:1.2 !important;
  position:relative;
}

.v6-player .player-left .player-rating-marquee-track{
  display:flex !important;
  width:max-content !important;
  max-width:none !important;
  align-items:center;
  white-space:nowrap !important;
  will-change:transform;
  animation:ratingStatusMarquee 8s linear infinite;
}

.v6-player .player-left .player-rating-marquee-item{
  display:block !important;
  flex:0 0 auto !important;
  width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  padding-right:48px;
}

@keyframes ratingStatusMarquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* Desktop: rating remains inside the existing player metadata column. */
@media (min-width:821px){
  .v6-player .player-left{
    min-width:0;
    overflow:hidden;
  }

  .v6-player .player-left .player-rating-marquee-track{
    animation-duration:6s;
  }

  .v6-player .player-left .player-track-meta{
    min-width:0;
    flex:1 1 auto;
    width:0;
  }

  .player-rating{
    width:100%;
    max-width:100%;
    align-items:flex-start;
    overflow:hidden;
  }

  .v6-player .player-left .player-rating-status{
    flex:0 0 104px !important;
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
  }

}

/* Mobile: compact star row; preserve current 78px player height. */
@media (max-width:820px){
  .track-card-stats{
    gap:5px;
  }

  .track-rating-summary{
    font-size:8.5px;
  }

  /* Mobile player uses CSS Grid. The desktop flex trick width:0
     must not collapse the metadata column on phones. */
  .v6-player .player-left .player-track-meta{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .v6-player .player-left #playerTitle{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  .v6-player .player-left .player-artist-time-row{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
  }

  .player-rating{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    gap:3px;
    margin-top:1px;
    overflow:visible !important;
  }

  .player-rating-stars{
    display:inline-flex !important;
    gap:0;
    flex:0 0 auto !important;
  }

  .rating-star{
    display:inline-grid !important;
    place-items:center !important;
    width:14px;
    height:14px;
    min-width:14px;
    font-size:13px;
    line-height:14px;
  }

  .v6-player .player-left .player-rating-status{
    display:none !important;
  }
}

/* Very small phones: stars remain usable without widening player. */
@media (max-width:420px){
  .rating-star{
    width:13px;
    height:13px;
    min-width:13px;
    font-size:12px;
    line-height:13px;
  }
}


/* v7.6.1 — one-click rating interaction */
.rating-star{
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}

.rating-star:disabled{
  pointer-events:none;
}


/* v7.6.11 — player current / total duration */
.player-artist-time-row{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  min-width:0;
  overflow:hidden;
}

.v6-player .player-left .player-artist-time-row #playerArtist{
  flex:1 1 auto;
  min-width:0;
  margin-top:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.v6-player .player-left .player-time{
  display:block !important;
  flex:0 0 auto;
  margin-top:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  color:#aab1c9 !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

@media(max-width:820px){
  .player-artist-time-row{
    gap:5px;
  }

  .v6-player .player-left .player-time{
    font-size:7.5px !important;
  }
}