/* Official game artwork (served from /assets and /media/cards) */

/* Agent portraits */
.agent-tile { position: relative; }
.agent-tile.has-img { background: linear-gradient(160deg, var(--surface-3), var(--surface-2)); }
.agent-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Rank artwork */
img.emblem { object-fit: contain; filter: drop-shadow(0 6px 14px var(--glow, transparent)); }
.table img.emblem, .lrow img.emblem, .usage-row img.emblem { filter: none; }
.emblem-none {
  display: inline-grid; place-items: center; flex: none; border-radius: 28%;
  background: var(--surface-3); color: var(--muted); font-weight: 800; filter: none;
}
.badge.tier:has(img)::before { display: none; }
.badge.tier img { width: 16px; height: 16px; object-fit: contain; margin: -2px 0; }

/* Player cards (avatars) */
.avatar, .pf-card { position: relative; overflow: hidden; }
.avatar img, .pf-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s ease; }
.avatar.has-img img, .pf-card.has-img img { opacity: 1; }
.avatar.has-img, .pf-card.has-img { color: transparent; background: var(--surface-3); }

/* Player hero banner: latest map splash */
.pf-hero .banner.has-art {
  height: 150px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 15%, transparent) 0%, var(--surface) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 60%),
    var(--art) center 40% / cover no-repeat,
    var(--surface-2);
}
.pf-hero .banner.has-art + .body { margin-top: -64px; }

/* Match rows: map strip fading in from the right */
.mrow.has-art { position: relative; isolation: isolate; }
.mrow.has-art::before {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; z-index: -1; pointer-events: none;
  background: var(--art) center / cover no-repeat;
  opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
:root[data-theme="light"] .mrow.has-art::before { opacity: .22; }
.mrow.has-art .line { position: relative; }

/* Map stats rows */
.map-row.has-art {
  padding: 9px 10px 8px; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(90deg, var(--surface) 30%, color-mix(in srgb, var(--surface) 55%, transparent)),
    var(--art) right center / cover no-repeat;
}
.map-row.has-art + .map-row { margin-top: 8px; }

/* Match hero: full splash */
.match-hero.has-art {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 35%, transparent), var(--surface) 92%),
    var(--art) center 35% / cover no-repeat,
    var(--surface);
  min-height: 230px;
}
.match-hero.has-art .scoreline .digits { text-shadow: 0 4px 24px rgba(0, 0, 0, .45); }
:root[data-theme="light"] .match-hero.has-art .scoreline .digits { text-shadow: 0 2px 14px rgba(255, 255, 255, .8); }

/* Agent role */
.role { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.role img { width: 13px; height: 13px; opacity: .8; }
:root[data-theme="light"] .role img { filter: invert(1); }