/* SpeciesIcon styling — used with speciesIconHTML() helper.
 *
 * Each rendered .species-icon is a <div> with a CSS mask. The mask shape
 * comes from the SVG file (set as --species-src by the helper); the
 * background-color paints the silhouette. This lets us tint the icon
 * per-category on the homepage while keeping the hero ghost and slide
 * watermark white via variant-level overrides.
 *
 * SVG viewBox aspect: 299.8 / 286 ≈ 1.048 (near-square, wider than tall).
 * Use aspect-ratio so width-only or height-only sizing preserves shape.
 */
.species-icon {
  background-color: var(--species-color, currentColor);
  -webkit-mask-image: var(--species-src);
          mask-image: var(--species-src);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  display: block;
}

/* Leaderboard hero ghost. Wrapper .leader-hero-ghost supplies position
   (absolute), opacity (.1), and transform. Override color back to white
   so the ghost stays neutral against the blue hero background. */
.species-icon--hero-card {
  background-color: #fff;
  width: 240px;
  aspect-ratio: 299.8 / 286;
}

/* Homepage species column watermark. Centered behind text. Color comes
   from the species name's text color (yellow / blue / green) at low
   opacity. Bumped from .08 to .12 because colored fills read fainter
   than the original white. */
.species-icon--watermark {
  position: absolute;
  width: 65%;
  aspect-ratio: 299.8 / 286;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .12;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 480px) {
  .species-icon--watermark { opacity: .08; }
}

/* Inline icons on the static scoreboard view at /presentation.
   Used in place of Material Symbols (trophy / sailing / set_meal) so the
   board reads with the real species mark instead of generic glyphs. */
.species-icon--inline-sm {
  display: inline-block;
  width: 26px;
  aspect-ratio: 299.8 / 286;
  vertical-align: -6px;
  margin-right: 4px;
}
.species-icon--inline-lg {
  display: inline-block;
  width: 56px;
  aspect-ratio: 299.8 / 286;
  background-color: var(--dim, rgba(255,255,255,0.45));
  opacity: .65;
  flex-shrink: 0;
}

/* Presentation deck — full-bleed slide background, behind everything.
   Override to white (the deck design assumes neutral subtle watermarks). */
.species-icon--slide {
  background-color: #fff;
  position: absolute;
  height: 80%;
  aspect-ratio: 299.8 / 286;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .05;
  z-index: 0;
  pointer-events: none;
}