Make comp analyzer question mark easier to see in light mode

app/components/Image.module.css

@@ -44,7 +44,8 @@
    inlines mask images it finds on real ones, and a dropped mask paints the
    whole layer over the icon */
 .inkArt,
-.inkHighlight {
+.inkHighlight,
+.outlinedArt {
 	position: absolute;
 	inset: 0;
 	mask-size: var(--_art-size);
@@ -65,3 +66,10 @@
 	background-color: #fff;
 	mask-image: var(--ink-highlight);
 }
+
+.outlinedArt {
+	background-image: var(--ink-silhouette);
+	background-size: var(--_art-size);
+	background-repeat: no-repeat;
+	background-position: center;
+}

app/components/Image.tsx

@@ -274,6 +274,42 @@ function InkTintedImage({
 	);
 }
 
+/** Image with the same subtle outline sub and special weapon icons have, so light art stays visible on light backgrounds. */
+export function OutlinedImage({
+	path,
+	alt,
+	title,
+	className,
+	containerClassName,
+	containerStyle,
+	width,
+	height,
+	size,
+	style,
+	testId,
+}: Omit<ImageProps, "onClick" | "loading">) {
+	return (
+		<div title={title} className={containerClassName} style={containerStyle}>
+			<span
+				role="img"
+				aria-label={alt}
+				data-testid={testId}
+				className={clsx(styles.inkTinted, className)}
+				style={
+					{
+						...style,
+						width: size ?? width,
+						height: size ?? height,
+						"--ink-silhouette": `url("${path}.avif")`,
+					} as React.CSSProperties
+				}
+			>
+				<span className={styles.outlinedArt} />
+			</span>
+		</div>
+	);
+}
+
 type TierImageProps = {
 	tier: { name: TierName; isPlus: boolean };
 } & Omit<ImageProps, "path" | "alt" | "title" | "size" | "height">;

app/features/comp-analyzer/components/SelectedWeapons.tsx

@@ -20,7 +20,7 @@ import { nanoid } from "nanoid";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
-	Image,
+	OutlinedImage,
 	SpecialWeaponImage,
 	SubWeaponImage,
 	WeaponImage,
@@ -103,7 +103,7 @@ export function SelectedWeapons({
 			{Array.from({ length: emptySlotCount }, (_, i) => (
 				<div key={`empty-${i}`} className={styles.selectedWeaponRow}>
 					<div className={styles.weaponImageContainerEmpty}>
-						<Image path={abilityImageUrl("UNKNOWN")} alt="" size={48} />
+						<OutlinedImage path={abilityImageUrl("UNKNOWN")} alt="" size={48} />
 					</div>
 					<div className={styles.weaponNamePillEmpty}>
 						<span className={styles.weaponNameEmpty}>

changelog/2026-09-23-comp-analyzer-empty-slot-outline.md

@@ -0,0 +1,5 @@
+---
+navItem: comp-analyzer
+type: bug
+---
+Comp analyzer empty weapon slots are easier to see in light mode