/* ==========================================================================
   AnimeRadar V2.4.270 - Bewertung in der Uebersicht, Anbieternamen lesbar

   Inhalt:
     1. Anime-Detail - die Bewertungskarte des Rezensionen-Reiters auf Mobil
     2. Entdecken - lange Anbieternamen werden nicht mehr abgeschnitten
   ========================================================================== */

/* ==========================================================================
   1. Anime-Detail: Bewertungskarte im Rezensionen-Reiter
   ==========================================================================
   Der Bewertungseditor ist genau ein Knoten und wandert zwischen den Reitern
   (placeDetailRatingEditor in app-v2-4-153.js).

   V2.4.303: Bis V2.4.302 blieb er auf Telefonbreiten immer in der Uebersicht,
   und diese Datei blendete die Bewertungsspalte des Rezensionen-Reiters dort
   zusaetzlich aus. Beides zusammen liess auf Telefon und in der App im Reiter
   "Rezensionen" keine Moeglichkeit mehr, zu bewerten. Der Knoten wandert jetzt
   auf jeder Breite mit dem aktiven Reiter, deshalb ist die Spalte dort nicht
   mehr leer - und die Ausblendung ist entfallen. Auf dem Desktop aendert sich
   nichts. */

/* Die Karte in der Uebersicht traegt denselben Aufbau wie die bisherige im
   Rezensionen-Reiter - der Editor wird hineingehaengt, nicht neu gebaut. */
html body #view-detail .detail-rating-card-overview .detail-rating-slot {
  display: block;
  min-height: 0;
}

/* ==========================================================================
   2. Entdecken: lange Anbieternamen
   ==========================================================================
   Gemessen bei 320: "Animation Digital Network" braucht 152 px, verfuegbar
   sind 116. Die Ursache steht in styles-v2-4-141.css:

     .search-streaming-match strong {
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     }

   Die Plakette ist auf die Kartenbreite begrenzt (max-width: 100%); Logo
   (22 px), Abstand (8 px) und Innenabstand (20 px) gehen davon ab. Was
   uebrig bleibt, reicht bei langen Namen nicht, und der Rest wird
   abgeschnitten.

   Statt die Schrift ueberall zu verkleinern bricht der Name jetzt um. Die
   Plakette bleibt eine Plakette - sie wird nur zweizeilig, wenn es der Name
   verlangt. Das Logo bleibt oben buendig, damit die zweite Zeile nicht
   danebenhaengt.

   Nur Mobil und Tablet: auf dem Desktop sind die Karten breit genug, dort
   wurde nie etwas abgeschnitten. */
@media (max-width: 959px) {
  html body .search-streaming-match {
    align-items: flex-start;
    /* Eine zweizeilige Pille mit 999px wirkt wie ein Oval; ein ruhiger
       Radius passt besser zur uebrigen Kartensprache. */
    border-radius: 14px;
  }

  html body .search-streaming-match img,
  html body .search-streaming-match > span {
    /* Bleibt auf der Hoehe der ersten Zeile. */
    margin-top: 1px;
  }

  html body .search-streaming-match strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    /* Lange Namen ohne Leerzeichen brechen sonst aus der Plakette heraus. */
    overflow-wrap: anywhere;
    line-height: 1.25;
  }
}

/* Auf sehr schmalen Geraeten wird zusaetzlich die Schrift eine Stufe
   kleiner - so bleiben die meisten Namen einzeilig und nur die laengsten
   brauchen die zweite Zeile. */
@media (max-width: 360px) {
  html body .search-streaming-match {
    font-size: 11.5px;
    padding: 5px 9px;
    gap: 6px;
  }
}