sliding modals, view transitions, accessibility, etc, etc

src/components/EnergyIcon.astro

@@ -21,13 +21,16 @@ const energyMap = {
   "Fire": fire,
   "Water": water,
   "Steel": steel,
+  "Metal": steel,
   "Colorless": colorless,
   "Fighting": fighting,
   "Psychic": psychic,
   "Electric": electric,
+  "Lightning": electric,
 };
 
 const svg = energyMap[energy as keyof typeof energyMap] ?? "";
+if (!svg && energy) console.warn(`No energy icon found for: ${energy}`);
 ---
 
-<div class="energy-icon shadow-filter" set:html={svg}></div>
+<div class="energy-icon shadow-filter" role="img" aria-label={energy} set:html={svg}></div>