/* ==========================================================================
 * AnimeRadar Feature-Pass 2026-10-14 (V2.4.333)
 *
 * 1. Bewertungsquelle sichtbar machen: GELBER Stern = externes AniList-Rating,
 *    ROTER Stern = internes AnimeRadar-Rating (Golden Master: Profil ->
 *    Bewertungen -> Durchschnittsbewertung, var(--ar-accent-bright)).
 *    Jede Bewertungsanzeige traegt data-rating-source="anilist|animeradar".
 *    Umgefaerbt werden nur Sterne, deren Farbe nicht zur Quelle passte; die
 *    bereits gelben AniList-Sterne behalten ihren bisherigen Ton.
 * 2. Startseite -> "Gerade heiss" (Telefon und App): dieselbe Kartenflaeche
 *    wie "Naechste Releases" aus einer gemeinsamen Variable.
 * 3. Episodenbewertung in der Folgenliste der Detailseite.
 * ========================================================================== */

:root {
  /* Keine neuen Farbtoene: beide Quellen zeigen auf vorhandene Tokens. */
  --ar-rating-anilist: var(--ar-rating-star-color, #ffc928);
  --ar-rating-animeradar: var(--ar-accent-bright, #ff404e);
}

/* ------------------------------------------------------------------------ */
/* 1. Sternfarbe nach Bewertungsquelle                                       */
/* ------------------------------------------------------------------------ */

/* Detail -> Reiter "Bewertungen": AniList-Wert, bisher roter Stern. */
html body #view-detail .detail-gm-review-score[data-rating-source="anilist"] .detail-gm-icon.detail-rating-star-anilist {
  color: var(--ar-rating-anilist) !important;
}

/* Detail -> Verwandte Serien: AniList-Wert, bisher grauer Textstern. */
html body #view-detail .detail-relation-score .detail-relation-star {
  color: var(--ar-rating-anilist);
  font-style: normal;
}

/* Detail -> AnimeRadar-Bewertung (Community-Durchschnitt), bisher gold. */
html body #view-detail [data-rating-source="animeradar"] .detail-ar-star.is-full,
html body #view-detail [data-rating-source="animeradar"] .detail-ar-star.is-half::before {
  color: var(--ar-rating-animeradar) !important;
}

/* Detail -> "Deine Bewertung" (eigene Bewertung), Fuellung bisher gold. */
html body [data-rating-source="animeradar"].star-rating .star-layer-fill {
  color: var(--ar-rating-animeradar) !important;
}

/* Toplisten -> "Bewertet" (AnimeRadar-Durchschnitt), bisher gold. */
html body #view-toplists .tl-metric-value[data-rating-source="animeradar"] .tl-star {
  fill: var(--ar-rating-animeradar) !important;
}

/* Bibliothek: eigene Bewertung in Raster, Liste und Filterleiste. */
html body #view-lists .lib-card-rating[data-rating-source="animeradar"] i,
html body #view-lists #libraryGrid.library-list .seasons-card-rating[data-rating-source="animeradar"] i,
html body #view-lists .lib-rating-row [data-rating-source="animeradar"] i {
  color: var(--ar-rating-animeradar) !important;
}

/* Dialog "Zur Liste hinzufuegen" in der Bibliothek: eigene Bewertung. */
#addToListDialog.lists-2026 .ld-score[data-rating-source="animeradar"] svg {
  fill: var(--ar-rating-animeradar) !important;
}

/* ------------------------------------------------------------------------ */
/* 2. Startseite -> "Gerade heiss" wie "Naechste Releases" (Telefon/App)    */
/* ------------------------------------------------------------------------ */

@media (max-width: 959px) {
  html body #view-home {
    /* Bisheriger Wert der Releases-Karte aus material-mobile-fixes-v2-4-255.css. */
    --home-mobile-card-surface: #101619;
  }

  html body #view-home #homeCountdowns .release-item,
  html body #view-home #trendingRail .poster-card {
    background: var(--home-mobile-card-surface) !important;
  }
}

/* Gleiches Rot auch fuer den Schein der eigenen Sterne (vorher goldener
   Schein aus styles-v2-4-141.css), damit Fuellung und Schein zusammenpassen. */
html body [data-rating-source="animeradar"].star-rating .star-layer-fill {
  text-shadow: 0 0 16px rgba(var(--ar-accent-bright-rgb, 255, 64, 78), .28) !important;
}

/* ------------------------------------------------------------------------ */
/* 3. Episodenbewertung in der Folgenliste                                   */
/* ------------------------------------------------------------------------ */

/* Eine zusaetzliche, inhaltsbreite Spalte vor dem Gesehen-Schalter. Alle
   uebrigen Spalten behalten ihre Breite aus material-profile-detail-v2-4-247.css. */
html body #view-detail .detail-eplist .detail-eprow {
  grid-template-columns: 26px 96px minmax(0, 1fr) auto auto 30px;
}

html body #view-detail .detail-eprow-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  min-width: 30px;
  height: 28px;
  margin: 0;
  padding: 0 9px 0 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-detail .detail-eprow-rate:not(.is-rated) {
  width: 30px;
  padding: 0;
}

html body #view-detail .detail-eprow-rate-star {
  display: inline-flex;
  color: var(--ar-rating-animeradar);
}

html body #view-detail .detail-eprow-rate-star svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

html body #view-detail .detail-eprow-rate.is-rated .detail-eprow-rate-star svg {
  fill: currentColor;
}

html body #view-detail .detail-eprow-rate-value:empty {
  display: none;
}

html body #view-detail .detail-eprow-rate:not(:disabled):hover {
  border-color: rgba(var(--ar-accent-bright-rgb, 255, 64, 78), .55);
  background: rgba(var(--ar-accent-bright-rgb, 255, 64, 78), .08);
}

html body #view-detail .detail-eprow-rate:focus-visible {
  outline: 2px solid var(--ar-accent-bright);
  outline-offset: 2px;
}

html body #view-detail .detail-eprow-rate:disabled {
  opacity: .35;
  cursor: default;
}

/* Mobil: der Knopf sitzt rechts in der Titelzeile; Laufzeit, Datum und
   Anbieter behalten darunter die volle Breite (schmaler wuerden sie in eine
   weitere Zeile umbrechen). Sichtbar ist der Knopf nur 22 px hoch, damit die
   Titelzeile kaum waechst; die Trefferflaeche reicht per ::after auf etwa
   32 x 32 px. */
@media (max-width: 760px) {
  html body #view-detail .detail-eplist .detail-eprow {
    grid-template-columns: 22px 72px minmax(0, 1fr) auto 30px;
    grid-template-areas:
      "nr thumb titel rate status"
      "nr thumb meta  meta status";
  }

  html body #view-detail .detail-eprow-rate {
    position: relative;
    grid-area: rate;
    align-self: start;
    min-width: 22px;
    height: 22px;
    padding: 0 7px 0 5px;
    font-size: 11.5px;
  }

  html body #view-detail .detail-eprow-rate:not(.is-rated) {
    width: 22px;
    padding: 0;
  }

  html body #view-detail .detail-eprow-rate::after {
    content: "";
    position: absolute;
    inset: -5px -5px;
  }

  html body #view-detail .detail-eprow-rate-star svg {
    width: 12px;
    height: 12px;
  }
}

/* Dialog "Folge N bewerten": vorhandene Dialogfamilie (ar-confirm-dialog,
   ld-modal, ld-confirm). Die Sterneingabe uebernimmt die Geometrie der
   Detail-Bewertung aus material-detail-rating-banners-v2-4-268.css. */
html body .ar-episode-rating-dialog .ar-episode-rating-anime {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

html body .ar-episode-rating-dialog .ar-episode-rating-stars {
  display: flex;
  justify-content: flex-start;
}

html body .ar-episode-rating-dialog .rating-ten {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 4px 0;
  font-size: 23px;
  line-height: 36px;
  letter-spacing: 0;
  background: none;
  transform: none !important;
}

html body .ar-episode-rating-dialog .rating-ten .star-hit-grid {
  grid-template-columns: repeat(20, minmax(0, 1fr));
}

html body .ar-episode-rating-dialog .rating-ten .star-hit:first-child {
  grid-column: span 2;
}

html body .ar-episode-rating-dialog .rating-ten .star-hit {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html body .ar-episode-rating-dialog .rating-ten .star-hit:focus-visible {
  outline: 2px solid var(--ar-rating-animeradar);
  outline-offset: 2px;
}

html body .ar-episode-rating-dialog .ar-episode-rating-value {
  margin: 8px 0 0;
  font-weight: 700;
}

/* Nur ein Knopf ("Bewertung entfernen"), und nur wenn eine Bewertung besteht.
   Die Dialogfamilie setzt die Knoepfe mit display:flex !important in zwei
   Spalten (material-list-modals-v2-4-237.css) - daher hier ausdruecklich. */
dialog.ld-modal.ld-confirm.ar-episode-rating-dialog .ar-confirm-actions {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 22px !important;
}

dialog.ld-modal.ld-confirm.ar-episode-rating-dialog .ar-confirm-actions[hidden] {
  display: none !important;
}