/* ══════════════════════════════════════════════════════════════════════════
   skin-art.css — Darstellung der Splash-Art-Charaktere (ChillArena-Roster).
   Gegenstück zur SkinArt-Naht (static/js/skin-art.js + templates/_skin_art.html):
   die geben ein <img class="skin-sprite"> aus, HIER bekommt es seine Größe.

   Grundregel: Das Bild ersetzt ein Emoji-Glyph in Containern, die per font-size
   skalieren (Reveal 132px, Grid/Reel 52px, Detail 104px, Multi 40px, Feed 22px).
   `height:1.5em; width:auto` folgt dieser Größe automatisch und hält das
   Hochformat (3:4) der Karten. Feste Boxen (Crew-Slot, Profil-Showcase) und die
   Spotlights (Reveal, Detail) bekommen weiter unten eigene Größen.
   Wird auf jeder Skin-Oberfläche geladen: Cases, Inventar, Profil, Crew.
   ══════════════════════════════════════════════════════════════════════════ */

/* aspect-ratio: reserviert den Platz, solange das Bild lädt — UND bestimmt bei
   `width:auto` die Breite. Karten mit eigenem Format (Frostborn, 2:3) geben ihr
   Verhältnis über --ar mit; ohne Angabe bleibt es beim 3:4 der Splash-Arts. */
.skin-sprite{
  display:inline-block;height:1.5em;width:auto;max-width:100%;object-fit:contain;
  aspect-ratio:var(--ar,3/4);
  vertical-align:middle;border-radius:6px;
  -webkit-user-drag:none;user-select:none;
}
/* Case-Artwork (Karten-Kachel im Case-Grid) — quadratisch, freigestellt. */
.case-sprite{display:block;height:1.35em;width:auto;object-fit:contain;aspect-ratio:1/1;
  -webkit-user-drag:none;user-select:none}

/* ── Funkelnder Rand (Frostborn-Karten) ──────────────────────────────────────
   Die Frost-Charaktere sind gemalte KARTEN mit verziertem Rahmen in der Farbe
   ihrer Rarität. Der Rahmen bleibt im Bild — hier legt sich ein laufender
   Verlauf um die Karte und lässt ihn leuchten, statt ihn zu ersetzen.

   Zwei Hintergrund-Ebenen auf demselben <img>: eine durchsichtige in der
   padding-box (sonst deckt der Verlauf hinter dem Bild), der Verlauf selbst in
   der border-box. Der 1-px-Rand ist transparent und lässt ihn durch — ohne
   Zusatz-Element, das in den zehn Oberflächen die Größenregeln bräche.
   --fc setzt die Naht je Skin auf die Rarität-Farbe. */
.skin-sprite.sparkle{
  border:1px solid transparent;border-radius:8px;
  background:
    linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) padding-box,
    linear-gradient(115deg,
      var(--fc,#8fe6ff) 0%, rgba(255,255,255,.95) 18%, var(--fc,#8fe6ff) 34%,
      rgba(255,255,255,.35) 52%, var(--fc,#8fe6ff) 70%, rgba(255,255,255,.9) 86%,
      var(--fc,#8fe6ff) 100%) border-box;
  background-size:100% 100%, 300% 100%;
  animation:skin-sparkle 5.5s linear infinite;
  box-shadow:0 0 18px -4px var(--fc,#8fe6ff);
}
@keyframes skin-sparkle{
  from{background-position:0 0, 0% 50%}
  to{background-position:0 0, 300% 50%}
}

/* ── Animierte Charaktere (Sprite-Sheet) ─────────────────────────────────────
   Ein waagerechtes Sheet mit `--frames` Posen. background-size zieht es auf die
   `--frames`-fache Elementbreite, die Animation schiebt background-position in
   ebenso vielen Stufen von 0 % auf 100 %.
   `jump-none` ist hier der Punkt: nur diese Variante trifft BEIDE Enden (0 %
   und 100 %) und zeigt damit alle N Posen — das voreingestellte `jump-end`
   würde die letzte verschlucken.
   Der Rahmen ist etwas höher als die Figur (die Schwung-Sichel greift darüber
   hinaus), deshalb 1.85em statt der 1.5em der Standbilder: so liest sich die
   Figur in derselben Größe wie ein Splash-Art daneben. */
.skin-anim{
  display:inline-block;height:1.85em;width:auto;max-width:100%;
  aspect-ratio:var(--ar,272/244);vertical-align:middle;
  background-repeat:no-repeat;background-position:0 0;
  background-size:calc(var(--frames,8) * 100%) 100%;
  animation:skin-anim-run var(--dur,.9s) steps(var(--frames,8),jump-none) infinite;
  -webkit-user-drag:none;user-select:none;
}
@keyframes skin-anim-run{from{background-position-x:0%}to{background-position-x:100%}}

/* ── Feste Boxen: Bild füllt den Rahmen ──────────────────────────────────── */
/* Die Kachel gibt ihre Innenhöhe als --art-h mit, und BEIDE Darstellungsarten
   (Standbild wie Sprite-Sheet) richten sich danach; die Breite folgt aus dem
   Seitenverhältnis. `height:100%` stand hier vorher und sah richtig aus, war es
   aber nicht: in der Grid-Kachel löst der Browser die Prozentangabe nicht auf,
   das aspect-ratio gewann — und die Figur ragte gut 25 px über die Kachel
   hinaus, mitten in den Namen darunter. Eine feste Länge kann das nicht
   passieren, und `overflow:hidden` an der Kachel fängt selbst das ab.
   Warum nicht die Breite vorgeben: die Charaktere sind Hochformat (3:4, das
   Sprite-Sheet 300:448). Über die Breite gezogen wären sie unterschiedlich hoch
   und die Karten nebeneinander wieder ungleich. */
.cslot-art .skin-sprite,.cslot-art .skin-anim{
  height:var(--art-h,100%);width:auto;max-width:100%;object-fit:contain;border-radius:14px}
.prof-hero .feat .skin-sprite{height:118px;border-radius:18px}
.prof-hero .feat .skin-anim{height:145px}

/* ── Spotlights: bewusst groß, das Artwork ist hier der Star ─────────────── */
/* clamp statt min(): garantiert eine Mindesthöhe, auch wenn eine Umgebung
   vh-Einheiten nicht auflöst (eingebettete WebViews, versteckte Fenster). */
.c-reveal .rEmoji .skin-sprite{height:clamp(180px,46vh,340px);border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.75)}
.skinModal .mE .skin-sprite{height:210px;border-radius:16px}
/* Faktor ~1.22 auf die Standbild-Höhen: der Anim-Rahmen lässt oben und seitlich
   Luft für die Schwung-Sichel, die Figur darin bleibt so gleich groß. */
.c-reveal .rEmoji .skin-anim{height:clamp(220px,56vh,415px)}
.skinModal .mE .skin-anim{height:256px}

/* ── Kleinstflächen: Ränder weglassen, sonst wirkt es unruhig ────────────── */
.feedRow .fe .skin-sprite,.mrCard .me .skin-sprite{border-radius:4px}

/* Mythic-Karten dürfen atmen — dieselbe Klasse wie zuvor bei den Emojis.
   Der Sprite-Sheet-Loop hält dann auf der ersten Pose (Idle) an: 0 % ist genau
   Frame 1, es bleibt also ein sauberes Standbild stehen. */
@media (prefers-reduced-motion:reduce){
  .mythic-art{animation:none!important}
  .skin-anim{animation:none!important}
  /* Der Rand bleibt — er ist Teil des Artworks —, aber er läuft nicht mehr. */
  .skin-sprite.sparkle{animation:none!important}
}