refactor

static/{index.js → js/card-html.js}

@@ -1,7 +1,3 @@
-import { toPng } from 'https://cdn.skypack.dev/html-to-image';
-
-/* HTML generation */
-
 const TYPES = {
   Grass: '🍃',
   Fire: '🔥',
@@ -75,7 +71,7 @@ const attackRowsHTML = (attacks) => {
     .join('');
 };
 
-const cardHTML = (details) => {
+export const cardHTML = (details) => {
   const { hp, energy_type, species, length, weight, attacks, weakness, resistance, retreat, description, rarity } =
     details;
 
@@ -130,276 +126,3 @@ const cardHTML = (details) => {
   </div>
   </div>`;
 };
-
-/* Utility */
-
-const getBasePath = () => {
-  return document.location.origin + document.location.pathname;
-};
-
-const generateDetails = async () => {
-  const details = await fetch(`${getBasePath()}/details`);
-  return await details.json();
-};
-
-const createTask = async (prompt) => {
-  const taskResponse = await fetch(`${getBasePath()}task/create?prompt=${prompt}`);
-  const task = await taskResponse.json();
-
-  return task;
-};
-
-const queueTask = async (task_id) => {
-  const queueResponse = await fetch(`${getBasePath()}task/queue?task_id=${task_id}`);
-  return queueResponse.json();
-};
-
-const pollTask = async (task) => {
-  const taskResponse = await fetch(`${getBasePath()}task/poll?task_id=${task.task_id}`);
-
-  return await taskResponse.json();
-};
-
-const longPollTask = async (task, interval = 10_000, max) => {
-  const etaDisplay = document.querySelector('.eta');
-
-  task = await pollTask(task);
-
-  if (task.status === 'completed' || (max && task.poll_count > max)) {
-    return task;
-  }
-
-  etaDisplay.textContent = Math.round(task.eta);
-
-  await new Promise((resolve) => setTimeout(resolve, interval));
-
-  return await longPollTask(task, interval, max);
-};
-
-/* DOM */
-
-const generateButton = document.querySelector('button.generate');
-
-const durationTimer = () => {
-  const elapsedDisplay = document.querySelector('.elapsed');
-  let duration = 0.0;
-
-  return () => {
-    const startTime = performance.now();
-
-    const incrementSeconds = setInterval(() => {
-      duration += 0.1;
-      elapsedDisplay.textContent = duration.toFixed(1);
-    }, 100);
-
-    const updateDuration = (task) => {
-      if (task?.status == 'completed') {
-        duration = task.completed_at - task.created_at;
-        return;
-      }
-
-      duration = Number(((performance.now() - startTime) / 1_000).toFixed(1));
-    };
-
-    window.addEventListener('focus', updateDuration);
-
-    return {
-      cleanup: (completedTask) => {
-        updateDuration(completedTask);
-        clearInterval(incrementSeconds);
-        window.removeEventListener('focus', updateDuration);
-        elapsedDisplay.textContent = duration.toFixed(1);
-      },
-    };
-  };
-};
-
-const rotateCard = () => {
-  const RANGE = 0.1;
-  const INTERVAL = 13; // ~75 per second
-  let previousTime = 0;
-
-  // Throttle closure
-  return (card, containerMouseEvent) => {
-    const currentTime = performance.now();
-
-    if (currentTime - previousTime > INTERVAL) {
-      previousTime = currentTime;
-
-      const rect = card.getBoundingClientRect();
-
-      const rotateX = (containerMouseEvent.clientY - rect.y - rect.height / 2) * RANGE;
-      const rotateY = -(containerMouseEvent.clientX - rect.x - rect.width / 2) * RANGE;
-
-      card.style.setProperty('--card-rx', rotateX + 'deg');
-      card.style.setProperty('--card-ry', rotateY + 'deg');
-    }
-  };
-};
-
-const initialiseCardRotation = (scene) => {
-  const card = document.querySelector('.pokecard');
-
-  const mousemoveHandler = rotateCard().bind(null, card);
-
-  scene.addEventListener('mousemove', mousemoveHandler, true);
-
-  return mousemoveHandler;
-};
-
-const setOutput = (mode, state) => {
-  const output = document.querySelector('.output');
-
-  output.dataset.mode = mode;
-  output.dataset.state = state;
-};
-
-const screenshotCard = async () => {
-  const card = document.querySelector('.pokecard');
-
-  const imageUrl = await toPng(card, {
-    width: 400,
-    height: 558,
-    backgroundColor: 'transparent',
-    style: {
-      transform: 'none',
-    },
-  });
-
-  return imageUrl;
-};
-
-/* Initialise */
-
-let generating = false;
-
-const nameForm = document.querySelector('form.trainer-name');
-const nameInput = document.querySelector('input[name="name"');
-const booster = document.querySelector('.booster');
-const newGenerationButton = document.querySelector('button.generate-new');
-const saveButton = document.querySelector('button.save');
-
-let mousemoveHandlerForPreviousCard;
-
-let trainerName;
-let useTrainerName = true;
-let pokeName;
-
-nameInput.addEventListener('input', (e) => {
-  trainerName = [...e.target.value].filter((char) => char.match(/[\wÀ-ÿ '".,&+#!?:/\\()_-]/g)?.length).join('');
-
-  nameInput.value = trainerName;
-
-  updateCardName();
-});
-
-const updateCardName = () => {
-  const cardName = document.querySelector('.pokecard .name');
-
-  if (!cardName) {
-    return;
-  }
-
-  let trainerString = '';
-
-  if (trainerName && useTrainerName) {
-    trainerName = [...trainerName].filter((char) => char.match(/[\wÀ-ÿ '".,&+#!?:/\\()_-]/g)?.length).join('');
-    trainerString = `${trainerName}${trainerName.match(/[sSzZ]$/g)?.length ? "' " : "'s "}`;
-  }
-
-  cardName.innerText = `${trainerString}${pokeName}`;
-
-  let nameWidth;
-  let cardWidth = document.querySelector('.pokecard').getBoundingClientRect().width;
-
-  let scale = 1.01;
-
-  do {
-    scale -= 0.01;
-    cardName.style.transform = `scaleX(${scale})`;
-    nameWidth = cardName.getBoundingClientRect().width;
-  } while (nameWidth / cardWidth > 0.62);
-};
-
-const generate = async () => {
-  if (generating) {
-    return;
-  }
-
-  try {
-    const scene = document.querySelector('.scene');
-    const cardSlot = scene.querySelector('.card-slot');
-    const durationDisplay = document.querySelector('.duration');
-
-    scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
-    cardSlot.innerHTML = '';
-
-    generating = true;
-
-    setOutput('booster', 'generating');
-
-    const details = await generateDetails();
-    pokeName = details.name;
-    const task = await createTask(details.energy_type);
-
-    document.querySelector('.actions').style.opacity = '1';
-    durationDisplay.classList.add('displayed');
-    const timer = durationTimer(durationDisplay);
-    const timerCleanup = timer().cleanup;
-
-    const longPromises = [queueTask(task.task_id), longPollTask(task)];
-    const completedTask = await Promise.any(longPromises);
-
-    setOutput('booster', 'completed');
-
-    generating = false;
-    timerCleanup(completedTask);
-
-    cardSlot.innerHTML = cardHTML(details);
-    updateCardName();
-    const picture = document.querySelector('img.picture');
-    picture.src = completedTask.value;
-
-    mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
-
-    setOutput('card', 'completed');
-  } catch (err) {
-    generating = false;
-    console.error(err);
-  }
-};
-
-const nameToggle = document.querySelector('button.toggle-name');
-
-nameToggle.addEventListener('click', () => {
-  useTrainerName = !useTrainerName;
-
-  updateCardName();
-
-  if (!useTrainerName) {
-    nameToggle.classList.add('off');
-  } else {
-    nameToggle.classList.remove('off');
-  }
-});
-
-nameForm.addEventListener('submit', (e) => {
-  e.preventDefault();
-  generate();
-});
-
-booster.addEventListener('click', generate);
-newGenerationButton.addEventListener('click', generate);
-saveButton.addEventListener('click', async () => {
-  let trainerString = '';
-
-  if (trainerName && useTrainerName) {
-    trainerName = [...trainerName].filter((char) => char.match(/[\wÀ-ÿ '".,&+#!?:/\\()_-]/g)?.length).join('');
-    trainerString = `${trainerName}${trainerName.match(/[sSzZ]$/g)?.length ? "' " : "'s "}`;
-  }
-
-  const a = document.createElement('a');
-  a.href = await screenshotCard();
-  a.download = `${trainerString}${pokeName} - This Pokémon Does Not Exist.png`;
-  a.click();
-});

static/js/dom-manipulation.js

@@ -0,0 +1,123 @@
+import { toPng } from 'https://cdn.skypack.dev/html-to-image';
+
+const durationTimer = () => {
+  const elapsedDisplay = document.querySelector('.elapsed');
+  let duration = 0.0;
+
+  return () => {
+    const startTime = performance.now();
+
+    const incrementSeconds = setInterval(() => {
+      duration += 0.1;
+      elapsedDisplay.textContent = duration.toFixed(1);
+    }, 100);
+
+    const updateDuration = (task) => {
+      if (task?.status == 'completed') {
+        duration = task.completed_at - task.created_at;
+        return;
+      }
+
+      duration = Number(((performance.now() - startTime) / 1_000).toFixed(1));
+    };
+
+    window.addEventListener('focus', updateDuration);
+
+    return {
+      cleanup: (completedTask) => {
+        updateDuration(completedTask);
+        clearInterval(incrementSeconds);
+        window.removeEventListener('focus', updateDuration);
+        elapsedDisplay.textContent = duration.toFixed(1);
+      },
+    };
+  };
+};
+
+const updateCardName = (trainerName, pokeName, useTrainerName) => {
+  const cardName = document.querySelector('.pokecard .name');
+
+  if (!cardName) {
+    return;
+  }
+
+  let trainerString = '';
+
+  if (trainerName && useTrainerName) {
+    trainerName = [...trainerName].filter((char) => char.match(/[\wÀ-ÿ '".,&+#!?:/\\()_-]/g)?.length).join('');
+    trainerString = `${trainerName}${trainerName.match(/[sSzZ]$/g)?.length ? "' " : "'s "}`;
+  }
+
+  const fullName = `${trainerString}${pokeName}`;
+  cardName.innerText = fullName;
+
+  let nameWidth;
+  let cardWidth = document.querySelector('.pokecard').getBoundingClientRect().width;
+
+  let scale = 1.01;
+
+  do {
+    scale -= 0.01;
+    cardName.style.transform = `scaleX(${scale})`;
+    nameWidth = cardName.getBoundingClientRect().width;
+  } while (nameWidth / cardWidth > 0.62);
+
+  return fullName;
+};
+
+const rotateCard = () => {
+  const RANGE = 0.1;
+  const INTERVAL = 13; // ~75 per second
+  let previousTime = 0;
+
+  // Throttle closure
+  return (card, containerMouseEvent) => {
+    const currentTime = performance.now();
+
+    if (currentTime - previousTime > INTERVAL) {
+      previousTime = currentTime;
+
+      const rect = card.getBoundingClientRect();
+
+      const rotateX = (containerMouseEvent.clientY - rect.y - rect.height / 2) * RANGE;
+      const rotateY = -(containerMouseEvent.clientX - rect.x - rect.width / 2) * RANGE;
+
+      card.style.setProperty('--card-rx', rotateX + 'deg');
+      card.style.setProperty('--card-ry', rotateY + 'deg');
+    }
+  };
+};
+
+const initialiseCardRotation = (scene) => {
+  const card = document.querySelector('.pokecard');
+
+  const mousemoveHandler = rotateCard().bind(null, card);
+
+  scene.addEventListener('mousemove', mousemoveHandler, true);
+
+  return mousemoveHandler;
+};
+
+const setOutput = (mode, state) => {
+  const output = document.querySelector('.output');
+
+  output.dataset.mode = mode;
+  output.dataset.state = state;
+};
+
+const screenshotCard = async () => {
+  const card = document.querySelector('.pokecard');
+
+  const imageUrl = await toPng(card, {
+    width: 400,
+    height: 558,
+    backgroundColor: 'transparent',
+    style: {
+      transform: 'none',
+    },
+  });
+
+  return imageUrl;
+};
+
+export { durationTimer, updateCardName, initialiseCardRotation, setOutput, screenshotCard };

static/js/index.js

@@ -0,0 +1,103 @@
+import { generateDetails, createTask, queueTask, longPollTask } from './network.js';
+import { cardHTML } from './card-html.js';
+import {
+  durationTimer,
+  updateCardName,
+  initialiseCardRotation,
+  setOutput,
+  screenshotCard,
+} from './dom-manipulation.js';
+
+const nameInput = document.querySelector('input[name="name"');
+const nameToggle = document.querySelector('button.toggle-name');
+
+let pokeName;
+let trainerName;
+let useTrainerName = true;
+let generating = false;
+let mousemoveHandlerForPreviousCard;
+
+const generate = async () => {
+  if (generating) {
+    return;
+  }
+
+  try {
+    const scene = document.querySelector('.scene');
+    const cardSlot = scene.querySelector('.card-slot');
+    const durationDisplay = document.querySelector('.duration');
+
+    scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
+    cardSlot.innerHTML = '';
+    generating = true;
+
+    setOutput('booster', 'generating');
+
+    await new Promise((resolve) => setTimeout(resolve, 9999));
+
+    const details = await generateDetails();
+    pokeName = details.name;
+    const task = await createTask(details.energy_type);
+
+    document.querySelector('.actions').style.opacity = '1';
+    durationDisplay.classList.add('displayed');
+    const timer = durationTimer(durationDisplay);
+    const timerCleanup = timer().cleanup;
+
+    const longPromises = [queueTask(task.task_id), longPollTask(task)];
+    const completedTask = await Promise.any(longPromises);
+
+    setOutput('booster', 'completed');
+
+    generating = false;
+    timerCleanup(completedTask);
+
+    cardSlot.innerHTML = cardHTML(details);
+    updateCardName(trainerName, pokeName, useTrainerName);
+    const picture = document.querySelector('img.picture');
+    picture.src = completedTask.value;
+
+    mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
+
+    setOutput('card', 'completed');
+  } catch (err) {
+    generating = false;
+    console.error(err);
+  }
+};
+
+nameInput.addEventListener('input', (e) => {
+  trainerName = [...e.target.value].filter((char) => char.match(/[\wÀ-ÿ '".,&+#!?:/\\()_-]/g)?.length).join('');
+
+  nameInput.value = trainerName;
+
+  updateCardName(trainerName, pokeName, useTrainerName);
+});
+
+document.querySelector('form.trainer-name').addEventListener('submit', (e) => {
+  e.preventDefault();
+  generate();
+});
+
+nameToggle.addEventListener('click', () => {
+  useTrainerName = !useTrainerName;
+
+  updateCardName(trainerName, pokeName, useTrainerName);
+
+  if (!useTrainerName) {
+    nameToggle.classList.add('off');
+  } else {
+    nameToggle.classList.remove('off');
+  }
+});
+
+document.querySelector('.booster').addEventListener('click', generate);
+
+document.querySelector('button.generate-new').addEventListener('click', generate);
+
+document.querySelector('button.save').addEventListener('click', async () => {
+  const a = document.createElement('a');
+  a.href = await screenshotCard();
+  a.download = `${updateCardName(trainerName, pokeName, useTrainerName)} - This Pokémon Does Not Exist.png`;
+  a.click();
+});

static/js/network.js

@@ -0,0 +1,44 @@
+const getBasePath = () => {
+  return document.location.origin + document.location.pathname;
+};
+
+const generateDetails = async () => {
+  const details = await fetch(`${getBasePath()}/details`);
+  return await details.json();
+};
+
+const createTask = async (prompt) => {
+  const taskResponse = await fetch(`${getBasePath()}task/create?prompt=${prompt}`);
+  const task = await taskResponse.json();
+
+  return task;
+};
+
+const queueTask = async (task_id) => {
+  const queueResponse = await fetch(`${getBasePath()}task/queue?task_id=${task_id}`);
+  return queueResponse.json();
+};
+
+const pollTask = async (task) => {
+  const taskResponse = await fetch(`${getBasePath()}task/poll?task_id=${task.task_id}`);
+
+  return await taskResponse.json();
+};
+
+const longPollTask = async (task, interval = 10_000, max) => {
+  const etaDisplay = document.querySelector('.eta');
+
+  task = await pollTask(task);
+
+  if (task.status === 'completed' || (max && task.poll_count > max)) {
+    return task;
+  }
+
+  etaDisplay.textContent = Math.round(task.eta);
+
+  await new Promise((resolve) => setTimeout(resolve, interval));
+
+  return await longPollTask(task, interval, max);
+};
+
+export { generateDetails, createTask, queueTask, longPollTask };

static/style.css

@@ -1,10 +1,5 @@
 :root {
-  --card-h: 47;
-  --card-s: 95%;
-  --card-l: 58%;
-  --card-color: hsl(var(--card-h) var(--card-s) var(--card-l));
   --card-width: 25rem;
-  --card-aspect: 63 / 88;
   --theme-primary: hsl(158 100% 33%);
   --theme-secondary: hsl(165 67% 48%);
   --theme-ternary: hsl(112 46% 75%);
@@ -57,6 +52,28 @@ main {
   margin: 0 auto;
 }
 
+@media (max-width: 500px) {
+  main {
+    padding: 3rem 0;
+  }
+
+  .output .actions {
+    display: flex;
+    width: 90vw;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 1280px) {
+  .info h1 {
+    font-size: 3rem;
+  }
+
+  .output .pokecard {
+    --card-scale: 0.8;
+  }
+}
+
 section {
   display: grid;
   place-items: center;
@@ -64,6 +81,8 @@ section {
   box-sizing: border-box;
 }
 
+/* Info (left) section */
+
 .info {
   max-width: 35rem;
   height: min-content;
@@ -108,18 +127,6 @@ section {
   transition: font-size 0.5s ease;
 }
 
-@media (max-width: 1280px) {
-  .info h1 {
-    font-size: 3rem;
-  }
-}
-
-@media (max-width: 1280px) {
-  .card-slot > .pokecard {
-    --card-scale: 0.8;
-  }
-}
-
 .info label {
   width: 100%;
   text-align: center;
@@ -142,16 +149,16 @@ section {
   outline-color: white;
 }
 
+.info input::placeholder {
+  text-align: center;
+}
+
 input:focus {
   border-color: transparent;
   outline-style: solid;
   outline-color: var(--theme-primary);
 }
 
-.info input::placeholder {
-  text-align: center;
-}
-
 .info p {
   width: 80%;
   margin: 3rem auto 0;
@@ -164,7 +171,7 @@ input:focus {
   color: var(--theme-subtext);
 }
 
-/* Output Section */
+/* Output (right) section */
 
 .output {
   display: flex;
@@ -179,25 +186,14 @@ input:focus {
   justify-content: center;
   align-items: center;
   gap: 1rem;
-
   width: 100%;
   margin: 1rem auto 1.5rem;
-
-  
 }
 
 .output .buttons {
   display: contents;
 }
 
-button {
-  transform-origin: bottom;
-  transform: translateY(-25%);
-  transition: transform 0.5s, opacity 0.5s;
-  pointer-events: none;
-  opacity: 0;
-}
-
 button {
   padding: 0.5rem 1rem;
   border: none;
@@ -205,40 +201,32 @@ button {
   background-image: linear-gradient(-90deg, var(--theme-ternary), var(--theme-secondary));
   font-weight: bold;
   color: white;
+  transform-origin: bottom;
+  transform: translateY(-25%);
   transition: transform 0.5s ease, box-shadow 0.1s, outline-offset 0.25s ease-out, filter 0.25s ease-out, opacity 0.25s;
+  transition: transform 0.5s, opacity 0.5s;
   whitespace: nowrap;
   box-shadow: 0 0.2rem 0.375rem hsl(158 100% 33% / 60%);
   filter: saturate(1);
   cursor: pointer;
   user-select: none;
+  pointer-events: none;
+  opacity: 0;
 }
 
-button.toggle-name.off {
-  filter: saturate(0.15);
-}
-
-button:active {
-  transform: translateY(0.1rem);
-  box-shadow: none;
-}
- 
-
 [data-mode='card'][data-state='completed'] button {
   transform: translateY(0);
   pointer-events: auto;
   opacity: 1;
 }
 
-@media (max-width: 500px) {
-  main {
-    padding: 3rem 0;
-  }
+button:active {
+  transform: translateY(0.1rem);
+  box-shadow: none;
+}
 
-  .output .actions {
-    display: flex;
-    width: 90vw;
-    flex-wrap: wrap;
-  }
+button.toggle-name.off {
+  filter: saturate(0.15);
 }
 
 .duration {
@@ -261,756 +249,761 @@ button:active {
   opacity: 1;
 }
 
-
 .scene {
   --scale: 0.9;
   height: 40rem;
   box-sizing: border-box;
   margin: 2rem;
   perspective: 100rem;
-  transform: scale(var(--scale));
-  transition: transform 0.5s ease-out;/
   transform-origin: center 40%;
+  transform: scale(var(--scale));
+  transition: transform 0.5s ease-out;
 }
 
-.grass {
-  --h: 90;
-  --s: 60%;
-  --l: 40%;
-}
-.grass.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(55deg) drop-shadow(0 0 0.1rem green);
+/* Booster Pack */
+
+.booster {
+  --booster-rx: 0deg;
+  --booster-ry: 0deg;
+  --booster-rz: -5deg;
+  --booster-scale: 0.7;
+  --width: var(--card-width);
+  --height: calc(var(--card-width) / 66 * 88);
+  --depth: 0.5rem;
+  --bg: hsl(227, 54%, 21%);
+  display: none;
+  position: relative;
+  width: var(--width);
+  height: var(--height);
+  transform-style: preserve-3d;
+  transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
+    scale(var(--booster-scale));
+  transition: transform 0.5s ease-in-out;
+  cursor: pointer;
 }
 
-.fire {
-  --h: 0;
-  --s: 75%;
-  --l: 45%;
+.booster > div {
+  display: grid;
+  place-items: center;
+  position: absolute;
+  font-size: 5rem;
+  transform-origin: center;
+  user-select: none;
 }
-.fire.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(335deg) drop-shadow(0 0 0.1rem red);
+
+.face:is(.front, .back, .left, .right) {
+  height: var(--height);
+  background-color: var(--bg);
 }
 
-.water {
-  --h: 210;
-  --s: 100%;
-  --l: 58%;
+.face:is(.front, .back, .top, .bottom) {
+  width: var(--width);
 }
-.water.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(180deg) drop-shadow(0 0 0.1rem cyan);
+.left,
+.right {
+  width: var(--depth);
 }
 
-.lightning {
-  --h: 50;
-  --s: 100%;
-  --l: 58%;
-}
-.lightning.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(5deg) drop-shadow(0 0 0.1rem gold);
+.face:is(.top, .bottom) {
+  height: var(--depth);
 }
 
-.fighting {
-  --h: 25;
-  --s: 72%;
-  --l: 36%;
+.foil {
+  width: var(--width);
+  background-image: linear-gradient(
+    90deg,
+    hsl(0 0% 80%) 0%,
+    hsl(0 0% 84%) 10%,
+    hsl(0 0% 88%) 20%,
+    hsl(0 0% 92%) 30%,
+    hsl(0 0% 96%) 40%,
+    hsl(0 0% 100%) 50%,
+    hsl(0 0% 96%) 60%,
+    hsl(0 0% 92%) 70%,
+    hsl(0 0% 88%) 80%,
+    hsl(0 0% 84%) 90%,
+    hsl(0 0% 80%) 100%
+  );
 }
-.fighting.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(320deg) drop-shadow(0 0 0.1rem brown);
+.foil.top.flat {
+  height: 20px;
+  transform-origin: bottom;
+  transform: translate3d(0, -30px, 0px) rotateX(0deg);
 }
-
-.psychic {
-  --h: 299;
-  --s: 43%;
-  --l: 44%;
+.foil.top.flat::after,
+.foil.bottom.flat::after {
+  content: '';
+  position: absolute;
+  width: var(--width);
+  height: 20px;
+  background: radial-gradient(#ffffff 0%, transparent 50%);
+  background-size: 1% 100%;
 }
-.psychic.energy {
-  filter: grayscale(1) sepia(1) saturate(10) hue-rotate(240deg) drop-shadow(0 0 0.1rem purple);
+.foil.top.front {
+  height: 11px;
+  transform-origin: bottom;
+  transform: translate3d(0, -11.4px, 3.8px) rotateX(20.5deg);
 }
-
-.colorless {
-  --h: 21;
-  --s: 27%;
-  --l: 85%;
+.foil.top.back {
+  height: 11px;
+  transform-origin: bottom;
+  transform: translate3d(0, -11.4px, -4px) rotateX(339deg);
 }
-.colorless.energy {
-  border-radius: 50%;
-  background-color: hsl(0 0% 100% / 15%);
-  font-size: 0.9em;
-  filter: contrast(100) grayscale(1) drop-shadow(0 0 0.1rem white);
+.face.front {
+  transform: rotateY(0deg) translate3d(0, 0, calc(var(--depth) / 2));
 }
-
-.darkness {
-  --h: 100;
-  --s: 3%;
-  --l: 17%;
+.face.left {
+  transform: rotateY(90deg) translate3d(0, 0, calc(var(--width) - calc(var(--depth) / 2)));
 }
-.darkness.energy {
-  filter: drop-shadow(0 0 0.1rem black);
+.face.back {
+  transform: rotateY(180deg) translate3d(0, 0, calc(var(--depth) / 2)) rotateZ(180deg);
 }
-.darkness :not(.species) {
-  color: whitesmoke;
+.face.right {
+  transform: rotateY(-90deg) translate3d(0, 0, calc(var(--depth) / 2));
 }
-
-.metal {
-  --h: 240;
-  --s: 20%;
-  --l: 77%;
+.face.top {
+  transform: rotateX(90deg) translate3d(0, 0, calc(var(--depth) / 2));
 }
-.metal.energy {
-  filter: drop-shadow(0 0 0.1rem silver);
+.face.bottom {
+  transform: rotateX(-90deg) translate3d(0, 0, calc(var(--height) - calc(var(--depth) / 2)));
 }
-
-.dragon {
-  --h: 30;
-  --s: 6%;
-  --l: 44%;
+.foil.bottom.flat {
+  height: 20px;
+  transform-origin: top;
+  transform: translate3d(0, calc(var(--height) + 10px), 0px) rotateX(0deg);
 }
-.dragon.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(15deg) drop-shadow(0 0 0.1rem gold);
+.foil.bottom.front {
+  height: 11px;
+  transform-origin: top;
+  transform: translate3d(0, var(--height), 3.8px) rotateX(-19.5deg);
+}
+.foil.bottom.back {
+  height: 11px;
+  transform-origin: top;
+  transform: translate3d(0, var(--height), -3.8px) rotateX(19.5deg);
 }
 
-.fairy {
-  --h: 334;
-  --s: 74%;
-  --l: 55%;
+.foil.back.flat {
+  width: 30px;
+  height: var(--height);
+  background-image: linear-gradient(
+    90deg,
+    hsl(0 0% 0%) 0%,
+    hsl(0 0% 10%) 20%,
+    hsl(0 0% 40%) 30%,
+    hsl(0 0% 60%) 40%,
+    hsl(0 0% 86%) 50%,
+    hsl(0 0% 90%) 60%,
+    hsl(0 0% 85%) 80%,
+    hsl(0 0% 90%) 90%,
+    hsl(0 0% 70%) 100%
+  );
+  transform-origin: bottom;
+  transform: translate3d(calc(var(--width) / 2 - 25px), 0px, calc(var(--depth) * -0.50001)) rotateX(0deg);
 }
-.fairy.energy {
-  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(300deg) drop-shadow(0 0 0.1rem pink);
+.foil.back.flap {
+  width: 30px;
+  height: var(--height);
+  background-image: linear-gradient(
+    90deg,
+    hsl(0 0% 70%) 0%,
+    hsl(0 0% 74%) 10%,
+    hsl(0 0% 78%) 20%,
+    hsl(0 0% 82%) 30%,
+    hsl(0 0% 86%) 40%,
+    hsl(0 0% 90%) 50%,
+    hsl(0 0% 86%) 60%,
+    hsl(0 0% 82%) 70%,
+    hsl(0 0% 78%) 80%,
+    hsl(0 0% 74%) 90%,
+    hsl(0 0% 70%) 100%
+  );
+  transform-origin: center;
+  transform: translate3d(calc(var(--width) / 2 - 25.5px), 0, -8px) rotateY(15deg);
 }
 
-.card-slot {
-  perspective: 100rem;
-  transition: transform 0.5s ease-out;
+.foil.back.flap::after {
+  content: '';
+  position: absolute;
+  width: 30px;
+  height: var(--height);
+  background: radial-gradient(#ffffff 0%, transparent 50%);
+  background-size: 100% 0.75%;
 }
 
-.pokecard,
-.pokecard * {
-  box-sizing: border-box;
+.gradient-bg {
+  background-image: linear-gradient(
+    225deg,
+    hsl(270deg 100% 7%) 0%,
+    hsl(246deg 77% 15%) 14%,
+    hsl(223deg 59% 24%) 29%,
+    hsl(199deg 44% 35%) 43%,
+    hsl(175deg 32% 48%) 57%,
+    hsl(151deg 36% 62%) 71%,
+    hsl(128deg 45% 78%) 86%,
+    hsl(104deg 100% 95%) 100%
+  );
 }
 
-.pokecard {
-  --color: hsl(var(--h) var(--s) var(--l));
-  --lighter: hsl(var(--h) var(--s) calc(var(--l) + 10%));
-  --lightest: hsl(var(--h) var(--s) calc(var(--l) + 30%));
-  --card-rx: 0deg;
-  --card-ry: 0deg;
-  --card-rz: 0deg;
-  --card-scale: 1;
+.face.front {
   display: flex;
   flex-direction: column;
-  width: 25rem;
-  height: 35rem;
-  padding: 0.5rem 1rem 0.1rem;
-  border: 1rem solid;
-  border-radius: 0.75rem;
-  border-color: var(--card-color);
+  justify-content: space-evenly;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  padding: 1rem;
+}
+
+.face.front,
+.face.back {
+  background-size: var(--width);
+  background-image: url("data:image/svg+xml;utf8,<svg id='patternId' width='100%' height='100%' style='opacity: 0.1' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(3) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 0)'/><path d='M4.43 0c.17.58.34 1.12.52 1.58.29.76.59 1.51.9 2.25 1.59 3.68 4.3 5.96 8.1 7.2 2.69.88 6.77 1.47 10.1 1.58.14 0-.38-1.66-.93-3.38-.77-2.4-.74-4.74-1.27-7.16-.16-.7-.4-1.4-.7-2.07h-3.37c.19.24.37.49.54.74 1.25 1.83 1.73 4.07 2.07 6.2.17 1.08.33 2.67 1 3.45-.61-.28-3.5-1.2-3.97-1.4-2.94-1.2-5.53-1.08-7.84-3.6C8.21 3.9 7.56 1.96 6.87 0zm22.6 0a30.74 30.74 0 001.89 3.75c.09-1.1.54-2.51.94-3.75zm8.85 0c-3.4 5.03-5.04 11.1-.88 16.5 1.77 2.16 3.52 4.33 5.14 6.6 1.45 2.02 2.6 4.46 4.36 6.23.04.05 2.12-3.78 2.27-4.14.69-1.58 1.25-3.22 1.98-4.79 1.57-3.4 3.8-6.5 5.32-9.89v-.02c1.32-2.95 1.3-6.26 1.2-9.43 0-.25 0-.6-.03-1.06h-2.3a22.37 22.37 0 01.7 4.7 9.7 9.7 0 01-.57 3.33 15.35 15.35 0 01-1.74 3.47c-2.83 4.33-5.16 8.5-7.83 12.67-.33-.71-.58-1.42-.87-2.13l-.07-.15c-.1-.25-.2-.5-.32-.74l-.08-.17a10.11 10.11 0 00-.96-1.5l-.06-.08a12.18 12.18 0 00-.68-.79l-.39-.41a19.1 19.1 0 01-1.13-1.28 9.06 9.06 0 01-.67-.98 18.88 18.88 0 01-1.65-3.29c-.35-.96-.62-1.95-.76-2.96-.11-.8-.15-1.62-.1-2.45.18-2.9 1.5-5.18 3.22-7.24zm26.83 0a23.38 23.38 0 01-.85 3.63c-.46 1.47-1.2 2.97-1.2 4.54 1.79-2.23 4.86-2.88 7.38-3.93 2.63-1.1 5.25-2.37 7.42-4.24zM16.08 18.25c-.28 0-.55 0-.83.02-1.61-.05-3.17.34-4.75.73-1.11.28.44 1.06 2.67 4.17 2.31 3.24 3.84 8.76 8.33 9.66 3.01.6 6.15-.06 9.15-.45.47-.06 6.11-1.02 6.23-.6-.06-.23-.4-.58-1-1.08a22.05 22.05 0 01-4.18-4.47 17.1 17.1 0 00-4.7-4.81 19.07 19.07 0 00-10.92-3.17zm67.25 8.58a45.04 45.04 0 01-6.41 8c-2.57 2.46-5.57 4.03-8.59 5.84-3.22 1.93-4.9 6.23-4.16 9.83 1 5.33 2.16 10.17 2.38 15.35.04.9.45 3.98 1.37 4.98.56-.96 1.91-3.21 2.55-4.1a86.54 86.54 0 018.08-9.4c1.94-2.01 4.3-3.98 5.73-6.41a7.71 7.71 0 001.12-3.62c.27-6.8.6-13.97-2.07-20.47zm-1.16 7.5c-.25 4.67-.59 9.63-1.83 14.22a18.17 18.17 0 01-2.05 5.12c-2.46 3.83-6.12 6.5-9.29 9.83.25-1.92-.33-3.67-.48-5.58-.2-2.76-1.26-5.32-1.55-8.03-.1-.86-.04-1.73.3-2.57 1.16-2.92 4.3-5.4 6.7-7.32 1.52-1.23 7.03-3.83 8.2-5.67zM36.6 39.5c-4.17-.04-7.9 1.7-12.1 2.34-3.65.82-8.63.16-11.9 2.12-1.91 1.14-2.89 3.37-4.2 5.1-1.86 3.1-6 5.72-8.4 8.83v6.22c4.92-2.43 10.42-2.03 15.9-2.13 4.62-.08 10.32-.37 13.46-4.3 1.48-1.86 1.27-4.84 2.03-7.03.88-2.54 2.26-4.87 3.55-7.22.21-.4 1.4-3.25 2.06-3.92l-.4-.01zm-3.68 3.34c-2.77 3.2-5.32 7.08-8.25 12.17a9.54 9.54 0 01-4.7 4.3c-2.12.83-4.84.35-7.06.34a37.4 37.4 0 00-6.3.41c-1.33.22-3.2.37-5.2 1.53.13-.54 1.06-2.06 1.31-2.57 1.26-2.55 3.92-4.68 5.72-6.6 1.98-2.11 4.23-3.97 6.96-5.01 2.27-.87 4.66-1.37 7.04-1.88 2.33-.5 8.9-2.6 10.48-2.69zM100 57.88c-1.56 2.02-2.39 4.25-1.33 6.95.44-.27.88-.51 1.33-.73zM32.75 62.5c-1.75 2-4.07 5.92-5.85 8.13-2.37 2.95-5.05 6.05-5.27 9.84-.17 2.92.85 5.76 1.72 8.5 1.18 3.7 2.15 7.47 3.67 11.03h2.84c.16-.51.32-1 .43-1.4 1.23-4.34 3.72-8.16 6.38-11.77 2.56-3.47 2-8.6.5-12.42-.56-1.4-1.37-2.57-2.18-3.83-.93-1.44-1.26-3.1-1.8-4.7-.21-.66-.44-2.13-.44-3.38zM9.75 81C7.33 82.58 3.1 82.39.22 82.64l-.22.02v6.5c.5.08 1 .15 1.5.17 3.82.18 7.19-5.15 8.25-8.33zm38.58.17a34.68 34.68 0 01-7.05 12.75c-1.15 1.25-2.5 2.4-3.58 3.67-.64.77-1.25 1.58-1.82 2.41h3.1c1.5-1.8 3.32-3.42 4.93-5.12 1.78-1.88 2.79-4.1 3.74-6.38.13-.33.6-1.83.93-2.92 1.4 2.9 2.3 6.78 3.12 9.87.4 1.52.87 3.02 1.25 4.55h2.29c-.12-2.43-.87-8.03-6.9-18.83zm51.67 1.5c-2.4.22-4.95.7-6.92 2.18-.83.62-3.08 3.82-3.41 5.32 1.43-.92 3.08-1.9 4.81-1.94 1.88-.04 3.68.6 5.52.93zm-15.83 1.16a95.53 95.53 0 01-7.97 3.32c-4.2 1.53-9.96 2.46-12.32 6.78-.8 1.46-.94 3.3-1.05 4.94-.03.38-.07.76-.12 1.13h12.75l.39-.35c1.74-1.6 2.91-3.86 4.04-5.92a37.51 37.51 0 004.28-9.9zm-80.7 8.28c-.9 0-1.74.14-2.47.56 1.45 2.27 2.41 4.8 3.36 7.33h2.5a16.57 16.57 0 00-2.03-4.33c1.34 0 2.5 0 3.77-.13.25-.03.5-.04.75-.05 3.43-.06 6.36 1.85 8.43 4.51h3.37a14.48 14.48 0 00-1.76-2.91c-2.43-3.13-5.9-4.06-9.69-4.4-1.97.1-4.24-.58-6.23-.58z'  stroke-width='1' stroke='none' fill='hsla(174, 100%, 29%, 1)'/><path d='M38.98 0c-1.72 2.06-3.04 4.34-3.22 7.24-.2 3.3 1.02 6.52 2.85 9.22.86 1.27 2.07 2.21 2.93 3.47.96 1.4 1.3 2.82 1.96 4.24 2.67-4.17 5-8.34 7.83-12.67 1.43-2.19 2.43-4.64 2.3-7.3a22.37 22.37 0 00-.68-4.2zm19.68 0a27.2 27.2 0 01-.12 4.26c-.4 2.95-.95 5.94-.37 8.9 3-.83 4.66-3.66 7.37-4.78C70.23 6.44 74.71 3.82 78.1 0h-2.64c-2.17 1.87-4.8 3.14-7.42 4.24-2.52 1.05-5.59 1.7-7.37 3.93 0-1.57.73-3.07 1.19-4.54.37-1.2.67-2.4.85-3.63zM97.4 6.96c-.03 0-.05.01-.07.04C93.17 15.33 84 23.17 86.9 33.34c1.12 3.97 4.3 6.5 6.73 9.65 2.08 2.7 3.07 5.46 4.42 8.5l1.96-2.86v-4.48c-.48.8-.98 1.56-1.5 2.24-.44-3.45-3.5-7.39-6.17-10.72-1.86-2.23-2.13-5.54-2.15-8.33-.03-6.4 4.9-10.22 7.65-15.5 1 1.1.7 3.71 1.12 5 .38 1.2.71 2.39 1.05 3.58v-9.45l-.12-.42c-.1-.34-2.06-3.54-2.48-3.59zm-97.4 4v9.46c.37 1.3.77 2.61 1.28 3.89 1.12 2.73 3.07 5.38 3.24 8.41.05.94-.1 1.92-.52 2.95a67.51 67.51 0 01-4 8.48v4.48c2.65-3.97 4.22-7 5.88-11.48.62-1.67 1.35-3.51 1.37-5.35.03-2.32-1.44-4.3-2.29-6.25-1.04-2.4-2.47-4.61-3.42-7.05C.58 16.05.68 13.46 0 10.97zm65.04 3.85l-.04.02c-1.35 1.36-3.08 2.3-4.58 3.47-2.34 1.84-3.93 4.46-6.06 6.51-1.37 1.32-2.7 2.75-2.34 4.8.88 4.88 2.09 9.82 5.31 13.72a16.93 16.93 0 011.57-4.14c1.43-2.49 4-3.85 5.97-5.83 2.48-2.48 3.29-5.9 2.8-9.36-.65-3.23-2.16-9.2-2.63-9.19zM91 59.33a36.8 36.8 0 01-3.61 1.65c-1.49.6-3 1.1-4.45 1.8-3.36 1.59-6.83 3.78-8.2 7.36-.7 1.8-1.12 3.58-2.05 5.32-.94 1.76-2.02 3.47-2.69 5.37 1.83-1 5.84-2.2 7.54-2.74 1.7-.54 3.5-.83 5.06-1.76a10.69 10.69 0 004.15-4.89c1.21-2.75.9-5.94 2.24-8.65.68-1.12 1.51-2.29 2.01-3.46zm-68 5.34a40.93 40.93 0 01-7.83 1.66c-3.61.4-7.25.17-10.86.65-1.47.12-2.92.5-4.31 1.1v1.95a16.41 16.41 0 019.19-2.3c2.7.11 5.14.77 7.81.44-.67.66-1.18 1.4-1.49 1.75-1.47 1.7-3 3.43-5.01 4.52a18.8 18.8 0 01-8.72 2.1c-.2.01-.9-.03-1.78-.08v1.6c.83 0 1.66-.02 2.48-.07 3.02-.15 5.92-.56 8.64-1.98a27.4 27.4 0 006.95-5.28 45.84 45.84 0 003.24-3.78c.21-.27 1.1-1.53 1.69-2.28zm77 3.4c-4.42 1.87-8.17 5.82-9.5 10.26 0 0 2.86-.12 3.24-.15 2.02-.14 4.15-.1 6.26-.12v-1.6l-1.57-.08a20.72 20.72 0 00-4.08.13l-.22.05c.37-.98.94-1.78 1.2-2.15a15.34 15.34 0 014.67-4.38zM87.17 80c-1.09.42-4.75 1.51-5.28 1.7-3.44 1.3-6.79 2.81-10.24 4.06-2.6.94-5.22 1.46-7.65 2.85-3.6 2.04-5.33 5.33-5.36 9.41 0 .66 0 1.32.02 1.98h4.05c.05-.37.1-.75.12-1.13.1-1.64.25-3.48 1.05-4.94 2.36-4.32 8.12-5.25 12.32-6.78 2.7-.98 5.36-2.1 7.97-3.32-1 3.5-2.34 6.84-4.28 9.9-1.13 2.06-2.3 4.31-4.04 5.92l-.39.35h2.64c3.1-3.5 5.56-7.71 7.1-12.13A45.45 45.45 0 0087.16 80zm-38.59 5.58c-.33 1.09-.8 2.6-.93 2.92-.95 2.28-1.96 4.5-3.74 6.38-1.61 1.7-3.42 3.32-4.93 5.12h13.97c-.38-1.53-.84-3.03-1.25-4.55-.82-3.1-1.73-6.97-3.12-9.87z'  stroke-width='1' stroke='none' fill='hsla(0, 0%, 22%, 1)'/><path d='M80.57 0c-.35.33-.7.66-1.03 1-3.65 3.67-6.35 8.32-6.71 13.57-.16 2.3.06 4.61.3 6.9.24 2.2.98 6.53 1.54 9.7 2.79-2.7 4.55-6.26 7.41-8.86 1.52-1.38 3.2-2.55 4.62-4.04a24.4 24.4 0 003.64-5.12c.77-1.4 1.62-2.83 2.12-4.36l.09-.28c.47-1.61.53-3.3.85-4.94.25-1.24.74-2.42 1.25-3.57h-3.31c-.37.74-.66 1.52-.84 2.32-.34 1.5-.32 3.08-.52 4.6a16.5 16.5 0 01-1.07 4.13 16.93 16.93 0 01-4.28 5.91c-1.57 1.48-3.33 2.74-4.8 4.32-1.46 1.59-2.51 3.49-4 5.05 0-2.63-.43-5.23-.26-7.86.17-2.65.38-5.3.8-7.93.35-2.1.95-4.22 2.4-5.85C80.3 3 82.39 1.8 84.37.68l1.2-.68zm17.26 11.84c-2.74 5.28-7.68 9.1-7.65 15.5.02 2.8.3 6.1 2.15 8.33C95 39 98.06 42.94 98.5 46.39c.52-.68 1.02-1.44 1.5-2.24V20.42c-.34-1.2-.67-2.39-1.05-3.57-.43-1.3-.12-3.9-1.12-5.01zm-89.68 2.4c-1.48-.02-2.94.17-4.32.76 1.88 2.89 4.27 5.44 5.43 8.74 1.07 3.04 1.37 6.31 2.8 9.23 1.54 3.16 4.84 5.14 8.22 5.8 3.66.7 6.91-1.03 10.32-2.05 3.37-1 6.4-2.89 9.82-3.64.86-.19-1.66-3.3-2.9-4.49-.38-.37-.7-.66-.82-.82-1.4-1.7-2.5-3.62-3.44-5.6-1.16-2.47-2.55-4.82-5.31-5.65-4.04-1.22-8.26-1.2-12.43-1.5-2.37-.18-4.9-.76-7.37-.78zm7.93 4.01c4.09-.01 7.75 1.04 10.93 3.17a17.1 17.1 0 014.7 4.81c1.15 1.7 2.6 3.15 4.17 4.47.6.5.94.85 1 1.08-.12-.42-5.76.54-6.23.6-3 .4-6.14 1.06-9.15.45-4.5-.9-6.02-6.42-8.33-9.66-2.23-3.11-3.78-3.9-2.67-4.17a17.51 17.51 0 015.58-.75zM0 20.42v23.73a67.51 67.51 0 004-8.48c.42-1.03.57-2 .52-2.95-.17-3.03-2.12-5.68-3.24-8.41A37.8 37.8 0 010 20.42zm82.17 13.91c-1.17 1.84-6.68 4.44-8.2 5.67-2.4 1.92-5.54 4.4-6.7 7.32-.34.84-.4 1.7-.3 2.57.29 2.71 1.34 5.27 1.55 8.03.15 1.91.73 3.66.48 5.58 3.17-3.33 6.83-6 9.3-9.83.99-1.55 1.56-3.35 2.04-5.12 1.24-4.6 1.58-9.55 1.83-14.22zM44 39.83c-4 5-5.33 13.34-5.67 20-.24 4.96 1.97 10.36 6.54 12.83 1.95 1.05 4.16 1.49 6.19 2.35 1.9.8 3.68 1.8 5.47 2.8 5.22 2.94 6.28 4.63 6.47 4.19 1.33-3.08 1.02-6.82.92-10.02-.05-1.52-.08-3.04-.09-4.56.33-4.86-.2-10.61-4.67-13.53-2.05-1.57-4.7-1.71-6.98-2.75C47.5 49 47 43.5 44 39.84zm-11.08 3c-1.59.09-8.15 2.19-10.48 2.7-2.38.5-4.77 1-7.04 1.87-2.73 1.04-4.98 2.9-6.96 5-1.8 1.93-4.46 4.06-5.72 6.61-.25.5-1.18 2.03-1.3 2.57 2-1.16 3.86-1.31 5.18-1.53a37.4 37.4 0 016.31-.41c2.22.01 4.94.5 7.07-.34a9.54 9.54 0 004.69-4.3c2.94-5.1 5.48-8.96 8.25-12.17zm10.39 2.59c1.52 4.08 4.97 8.29 7.26 9.87 2.13 1.47 4.69 2.17 6.65 3.94 1.75 1.58 2.22 3.48 2.61 5.73.26 1.44 1.19 9.1 1.11 11.32-.55-.84-4.6-2.7-5.12-3.01-3.13-1.8-7.19-2.57-9.88-5.03-3.55-3.25-3.92-8.85-3.75-13.35.08-2.17.71-6.94 1.12-9.47zm53.02 45.75c-.83 1-1.66 1.83-2.66 2.16-1.81.6-3.57 1.32-5.35 2.01A22.3 22.3 0 0083 97.98c-.84.62-1.65 1.3-2.42 2.02h5c2.27-1.29 5.6-3.14 8.37-3.89-.25.39-1.44 1.84-1.69 2.24a18.8 18.8 0 00-.91 1.65h3.3l.17-.36c.91-2.03 2.43-4.4 2.21-6.7a3.21 3.21 0 00-.69-1.77z'  stroke-width='1' stroke='none' fill='hsla(199, 59%, 53%, 1)'/><path d='M6.87 0c.69 1.95 1.34 3.9 2.71 5.4 2.31 2.5 4.9 2.4 7.84 3.6.46.19 3.36 1.11 3.97 1.39-.67-.78-.83-2.37-1-3.45-.34-2.13-.82-4.37-2.07-6.2-.17-.25-.35-.5-.54-.74zm17.09 0C25.5 2.97 27.27 5.84 29 8.67c.25-.92.84-2.54 1.07-3.08.76-1.84 1.33-3.73 1.98-5.59h-2.2c-.4 1.24-.84 2.66-.93 3.75A30.74 30.74 0 0127.02 0zm61.6 0l-1.2.68c-1.98 1.1-4.06 2.3-5.58 4.01-1.46 1.63-2.06 3.74-2.4 5.85a83.57 83.57 0 00-.81 7.93c-.17 2.63.26 5.23.26 7.86 1.49-1.56 2.54-3.46 4-5.05 1.47-1.58 3.23-2.84 4.8-4.32 1.8-1.7 3.33-3.6 4.28-5.91.54-1.33.89-2.7 1.07-4.13.2-1.52.18-3.1.52-4.6.18-.8.47-1.58.84-2.32zm-19.4 10.17c-.41.75-2.77 2.88-3.1 3.19a27.62 27.62 0 01-3.93 3.01c-5.3 3.3-11.46 7.8-9.96 14.96 1.5 6.67 3 14.34 9.66 17.5.2-.94.47-1.85.81-2.72a18.7 18.7 0 013.68-5.84c1.56-1.66 3.54-2.83 5.2-4.38 2.46-2.32 1.92-5.43 1.62-8.48-.5-5.02-1.74-9.9-3.02-14.75-.29-.85-.6-1.68-.95-2.5zm-1.12 4.64c.47 0 1.98 5.96 2.63 9.19.49 3.46-.32 6.88-2.8 9.36-1.97 1.98-4.54 3.34-5.97 5.83-.3.53-1.4 2.9-1.57 4.14-3.22-3.9-4.43-8.84-5.3-13.71-.38-2.06.96-3.5 2.33-4.8 2.13-2.06 3.72-4.68 6.06-6.52 1.5-1.18 3.23-2.11 4.58-3.47a.06.06 0 01.04-.02zm-21.73 30.6c-.4 2.54-1.04 7.31-1.12 9.48-.17 4.5.2 10.1 3.75 13.35 2.7 2.46 6.75 3.22 9.88 5.03.52.3 4.57 2.17 5.12 3 .08-2.2-.85-9.87-1.1-11.31-.4-2.25-.87-4.15-2.62-5.73-1.96-1.77-4.52-2.47-6.65-3.94-2.3-1.58-5.74-5.79-7.26-9.87zm-8.48 9.26c-1 2.27-2.31 4.31-3.8 6.21-2.14 2.73-4.73 5.82-7.46 7.97-2.33 2.34-4.7 4.1-5.3 7.54-.75 4.3.7 9.01 1.63 13.1.85 3.7 2.32 7.18 4.06 10.51h3.06c-1.52-3.56-2.49-7.33-3.67-11.04-.87-2.73-1.9-5.57-1.72-8.49.22-3.8 2.9-6.9 5.27-9.84 1.78-2.2 4.1-6.13 5.85-8.13 0 1.25.23 2.72.45 3.38.53 1.6.86 3.26 1.79 4.7.8 1.26 1.62 2.44 2.17 3.83 1.51 3.81 2.07 8.95-.5 12.42-2.65 3.6-5.14 7.43-6.37 11.77-.11.4-.27.89-.43 1.4h2.2c.8-2.31 1.73-4.56 3.32-6.56 2.92-3.7 8.14-7.56 7.12-12.94-1.07-5.6-4.96-10.04-6.68-15.4-.74-2.3-.9-4.75-.97-7.15a68.51 68.51 0 01-.02-3.28zm61.67.5c-2.67 1.58-6.63 2.6-8.93 3.04-3.7.72-8.12 2.56-11.32 5.24a14.57 14.57 0 00-2.65 2.85c-2.63 3.79-3.12 8.75-5.16 12.86-1.02 2.05-2.19 4-3.6 5.84 5.59-1.86 10.9-4.63 16.59-6.2 2.07-.57 4.59-.72 6.22-2.28 1.9-1.81 1.8-4.99 2.44-7.36.87-3.2 2.3-6.2 3.83-9.12.85-1.63 1.74-3.24 2.58-4.87zM91 59.33c-.5 1.17-1.33 2.34-2 3.46-1.34 2.7-1.04 5.9-2.25 8.65a10.69 10.69 0 01-4.15 4.9c-1.55.92-3.35 1.2-5.06 1.75-1.7.54-5.7 1.74-7.54 2.74.67-1.9 1.75-3.6 2.7-5.37.92-1.74 1.35-3.51 2.04-5.32 1.37-3.58 4.84-5.77 8.2-7.37 1.45-.69 2.96-1.19 4.45-1.79A36.8 36.8 0 0091 59.33zM8.68 67.72c-3.1-.04-6.1.76-8.68 2.31v6.43c.88.05 1.57.1 1.78.09a18.8 18.8 0 008.72-2.11c2-1.09 3.54-2.81 5.01-4.52.3-.35.82-1.09 1.49-1.75-2.67.33-5.11-.33-7.81-.44l-.51-.01zM100 70.03a15.34 15.34 0 00-4.67 4.38c-.26.37-.83 1.17-1.2 2.15 1.11-.33 3.96-.2 5.87-.1zm-85.06 7.25a42.2 42.2 0 00-4.37 1.17C8.7 79.2 6.81 80 4.81 80.44c-1.59.34-3.2.5-4.81.68v1.54l.22-.02c2.88-.25 7.11-.06 9.53-1.64-1.06 3.18-4.43 8.5-8.25 8.33-.5-.02-1-.09-1.5-.17v.99c1.44-.04 2.9-.07 4.33-.15 1.82-.1 3.38-1.42 4.17-3 .8-1.61 1.64-3.24 2.54-4.8 1.04-1.77 2.38-3.2 3.9-4.92zM100 81.12c-2.07.23-4.14.47-6.15 1.12-5.18 1.6-5.85 7.6-8.18 11.76 3.83-3.5 9.16-4 13.96-3.84l.37-.01v-1c-1.84-.32-3.64-.96-5.52-.92-1.73.04-3.38 1.02-4.81 1.94.33-1.5 2.58-4.7 3.4-5.32 1.98-1.47 4.53-1.96 6.93-2.19zM9.35 95.5a35.79 35.79 0 01-4.52.18c.95 1.3 1.5 2.81 2.04 4.33h10.91c-2.07-2.66-5-4.57-8.43-4.5zm84.6.62c-2.77.75-6.11 2.6-8.39 3.89h5.78c.27-.57.58-1.12.91-1.65.25-.4 1.44-1.85 1.7-2.24z'  stroke-width='1' stroke='none' fill='hsla(199, 100%, 62%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
+  background-position: center;
+}
+
+.face.right,
+.face.left {
   background-image: linear-gradient(
-    45deg,
-    var(--lighter) 0%,
-    var(--lightest) 15%,
-    var(--lightest) 30%,
-    var(--color) 50%,
-    var(--lightest) 90%,
-    var(--lighter) 100%
+    0deg,
+    hsl(151deg 36% 62%) 0%,
+    hsl(175deg 32% 48%) 14%,
+    hsl(199deg 44% 35%) 29%,
+    hsl(223deg 59% 24%) 57%,
+    hsl(246deg 77% 15%) 86%,
+    hsl(270deg 100% 7%) 100%
   );
-  transform-style: preserve-3d;
-  transform-origin: center;
-  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(var(--card-scale));
-  transition: transform 0.5s ease-out;
 }
 
-.pokecard[data-displayed='true'] {
-  display: flex;
+img.title {
+  width: 100%;
+  filter: drop-shadow(0 0.25rem 0.1rem hsl(220 100% 10% / 0.75));
 }
-.pokecard[data-displayed='false'] {
-  display: none;
+img.hf-logo {
+  width: 90%;
 }
 
-.pokecard .lower-half {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+.triangle {
+  width: calc(var(--depth) * 10);
+  aspect-ratio: 1 / 1.35;
 }
 
-.pokecard :where(header, p) {
-  font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif';
+.triangle.top {
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
 }
-.pokecard :is(.evolves) {
-  font-family: 'Century Gothic', 'sans-serif';
+.triangle.bottom {
+  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
 }
-.pokecard :where(header, p) {
-  font-family: 'Gill Sans', 'Gill Sans Mt';
+
+.triangle.top.right {
+  transform: rotateY(90deg) translate3d(0.1px, -59.1px, -39.5px) scale(0.1);
+  
+}
+.triangle.top.left {
+  transform: rotateY(90deg) translate3d(0.1px, -59.1px, calc(var(--width) - 41.5px)) scale(0.1);
+}
+.triangle.bottom.left {
+  transform: rotateY(90deg) translate3d(0.1px, calc(var(--height) - 49px), calc(var(--width) - 41.5px)) scale(0.1);
+}
+.triangle.bottom.right {
+  transform: rotateY(90deg) translate3d(0px, calc(var(--height) - 49px), -39.5px) scale(0.1);
 }
 
-.evolves {
-  margin: 0;
-  font-size: 0.6rem;
-  font-weight: bold;
+/* Animation */
+
+@keyframes spin-x {
+  from {
+    transform: scale(var(--scale)) rotate(0turn);
+  }
+  to {
+    transform: scale(var(--scale)) rotate(1turn);
+  }
 }
 
-header {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  min-height: 1.4rem;
+@keyframes spin-y {
+  0% {
+    transform: rotateX(var(--booster-rx)) rotateY(0deg) rotateZ(0deg) scale(var(--booster-scale));
+  }
+  100% {
+    transform: rotateX(var(--booster-rx)) rotateY(360deg) rotateZ(0deg) scale(var(--booster-scale));
+  }
 }
 
-header > * {
-  display: inline-block;
+@keyframes bounce {
+  0% {
+    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
+      scale(var(--booster-scale)) translateY(0%);
+  }
+  30% {
+    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
+      scale(var(--booster-scale)) translateY(-2%);
+  }
+  50% {
+    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
+      scale(var(--booster-scale)) translateY(1%);
+  }
+  70% {
+    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
+      scale(var(--booster-scale)) translateY(-1%);
+  }
+  100% {
+    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
+      scale(var(--booster-scale)) translateY(0%);
+  }
 }
 
-.name {
-  display: inline-block;
-  justify-self: left;
-  position: absolute;
-  left: 1rem;
-  margin: 0;
-  font-size: 1.25rem;
-  transform-origin: left;
-  white-space: nowrap;
+@keyframes shrink {
+  from {
+    transform: rotateZ(-45deg) scale(var(--booster-scale));
+    opacity: 1;
+  }
+  to {
+    transform: rotateZ(-270deg) scale(0);
+    opacity: 0;
+  }
 }
 
-header > div {
-  position: absolute;
-  right: 1rem;
+[data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed']) .booster {
+  display: block;
 }
 
-.hp {
-  font-size: 1.25rem;
-  color: hsl(0 100% 50%);
+[data-state='ready'] .booster {
+  animation: 5s bounce infinite ease-out;
 }
 
-header .energy {
-  display: inline-block;
-  transform: translateY(-0.15rem);
+[data-state='generating'] .scene {
+  animation: 15s spin-x infinite linear;
+}
+[data-state='generating'] .booster {
+  transform-origin: center;
+  animation: 3s spin-y infinite linear;
+  cursor: default;
 }
 
-.frame:is(.picture, .species, .description) {
-  --lighter: hsl(var(--card-h) var(--card-s) calc(var(--card-l) + 15%));
-  --lightest: hsl(var(--card-h) var(--card-s) calc(var(--card-l) + 30%));
-  --darker: hsl(var(--card-h) var(--card-s) calc(var(--card-l) - 15%));
-  border-color: var(--darker) var(--card-color) var(--lighter);
+[data-mode='booster'][data-state='completed'] .booster {
+  animation: 0.5s shrink ease-out forwards;
 }
 
-.picture,
-.inline-block {
-  display: inline-block;
+[data-mode='booster'][data-state='completed'] .card-slot {
+  transform: scale(0);
 }
 
-.picture {
-  width: 100%;
-  height: 240px;
-  border: 0.375rem solid;
-  background-color: white;
-  object-fit: contain;
-  box-shadow: 0.25rem 0.25rem 0.5rem black;
-  user-select: none;
+[data-mode='card'][data-state='completed'] .booster {
+  --booster-scale: 0;
 }
 
-.species {
-  width: 90%;
-  padding: 0.1rem;
-  margin: 0.25rem auto;
-  border-style: solid;
-  border-width: 0 0.2rem;
-  border-image: linear-gradient(var(--lightest), var(--darker)) 1 100%;
-  background-image: linear-gradient(90deg, var(--card-color), var(--lightest) 45% 55%, var(--card-color));
-  text-align: center;
-  font-size: 0.75rem;
-  font-weight: bold;
-  font-style: italic;
+[data-mode='card'][data-state='completed'] .card-slot {
+  transform: scale(1);
 }
 
-.species::selection {
-  background-color: white;
-}
 
-.attacks-row,
-.footer {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  width: 100%;
-}
+/* Pokémon Card */
 
-.footer > span:first-child {
-  text-align: left;
+.card-slot {
+  perspective: 100rem;
+  transition: transform 0.5s ease-out;
 }
 
-.footer > span:last-child {
-  text-align: right;
+.grass {
+  --h: 90;
+  --s: 60%;
+  --l: 40%;
 }
-
-.attacks {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
+.grass.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(55deg) drop-shadow(0 0 0.1rem green);
 }
 
-.attacks-row {
-  grid-template-columns: 3rem 1fr 3rem;
-  align-items: center;
-  width: 105%;
-  height: 100%;
-  max-height: 5rem;
-  padding: 0.25rem 0;
-  margin-left: -2.5%;
-  border-bottom: 0.5px solid hsl(0, 0%, 10%);
-  font-size: 0.95em;
+.fire {
+  --h: 0;
+  --s: 75%;
+  --l: 45%;
+}
+.fire.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(335deg) drop-shadow(0 0 0.1rem red);
 }
 
-.attacks-row.no-cost {
-  grid-template-columns: 1fr 3rem;
+.water {
+  --h: 210;
+  --s: 100%;
+  --l: 58%;
 }
-.attacks-row.no-damage {
-  grid-template-columns: 3rem 1fr;
-  text-align: left;
+.water.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(180deg) drop-shadow(0 0 0.1rem cyan);
 }
-.attacks-row.no-cost.no-damage {
-  grid-template-columns: 1fr;
+
+.lightning {
+  --h: 50;
+  --s: 100%;
+  --l: 58%;
+}
+.lightning.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(5deg) drop-shadow(0 0 0.1rem gold);
 }
 
-.attack-text {
-  margin-left: 0.25rem;
-  margin-right: 0.1rem;
+.fighting {
+  --h: 25;
+  --s: 72%;
+  --l: 36%;
+}
+.fighting.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(320deg) drop-shadow(0 0 0.1rem brown);
 }
 
-.attack-text > span:only-child {
-  display: block;
-  margin-left: -1rem;
-  text-align: center;
+.psychic {
+  --h: 299;
+  --s: 43%;
+  --l: 44%;
+}
+.psychic.energy {
+  filter: grayscale(1) sepia(1) saturate(10) hue-rotate(240deg) drop-shadow(0 0 0.1rem purple);
 }
 
-.no-cost .attack-text > span:only-child, .no-cost.no-damage .attack-text > span:only-child {
-  width: var(--card-width);
-  margin-left: -2.5rem;
+.colorless {
+  --h: 21;
+  --s: 27%;
+  --l: 85%;
 }
-.no-damage .attack-text  > span:only-child {
-  width: var(--card-width);
-  margin-left: -5.5rem;
+.colorless.energy {
+  border-radius: 50%;
+  background-color: hsl(0 0% 100% / 15%);
+  font-size: 0.9em;
+  filter: contrast(100) grayscale(1) drop-shadow(0 0 0.1rem white);
 }
 
-.attack-cost {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-  text-align: justify;
+.darkness {
+  --h: 100;
+  --s: 3%;
+  --l: 17%;
+}
+.darkness.energy {
+  filter: drop-shadow(0 0 0.1rem black);
+}
+.darkness :not(.species) {
+  color: whitesmoke;
 }
 
-.energy {
-  width: 1.2em;
-  aspect-ratio: 1 / 1;
-  text-align: center;
-  cursor: default;
-  user-select: none;
+.metal {
+  --h: 240;
+  --s: 20%;
+  --l: 77%;
+}
+.metal.energy {
+  filter: drop-shadow(0 0 0.1rem silver);
 }
 
-.energy:only-child {
-  justify-self: flex-start;
-  margin: auto;
+.dragon {
+  --h: 30;
+  --s: 6%;
+  --l: 44%;
+}
+.dragon.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(15deg) drop-shadow(0 0 0.1rem gold);
 }
 
-.attack-name {
-  font-weight: bold;
+.fairy {
+  --h: 334;
+  --s: 74%;
+  --l: 55%;
+}
+.fairy.energy {
+  filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(300deg) drop-shadow(0 0 0.1rem pink);
 }
 
-.attack-damage {
-  min-width: 2.25rem;
-  text-align: center;
-  font-size: 1.375rem;
+.pokecard,
+.pokecard * {
+  box-sizing: border-box;
 }
 
-hr {
-  border: 0.5px solid black;
-  background-color: black;
+.pokecard {
+  --frame-h: 47;
+  --frame-s: 95%;
+  --frame-l: 58%;
+  --frame-color: hsl(47 95% 58%);
+  --color: hsl(var(--h) var(--s) var(--l));
+  --lighter: hsl(var(--h) var(--s) calc(var(--l) + 10%));
+  --lightest: hsl(var(--h) var(--s) calc(var(--l) + 30%));
+  --card-rx: 0deg;
+  --card-ry: 0deg;
+  --card-rz: 0deg;
+  --card-scale: 1;
+  display: flex;
+  flex-direction: column;
+  width: 25rem;
+  height: 35rem;
+  padding: 0.5rem 1rem 0.1rem;
+  border: 1rem solid;
+  border-radius: 0.75rem;
+  border-color: var(--frame-color);
+  background-image: linear-gradient(
+    45deg,
+    var(--lighter) 0%,
+    var(--lightest) 15%,
+    var(--lightest) 30%,
+    var(--color) 50%,
+    var(--lightest) 90%,
+    var(--lighter) 100%
+  );
+  transform-style: preserve-3d;
+  transform-origin: center;
+  transform: rotateX(var(--card-rx)) rotateY(var(--card-ry)) scale(var(--card-scale));
+  transition: transform 0.5s ease-out;
 }
 
-.multipliers {
+.pokecard[data-displayed='true'] {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 2rem;
-  margin-top: 0;
-  text-align: center;
-  font-size: 0.75rem;
-  font-weight: bold;
+}
+.pokecard[data-displayed='false'] {
+  display: none;
 }
 
-.multipliers > div {
+.pokecard .lower-half {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  margin: 0;
+  height: 100%;
 }
 
-.resistance {
-  position: relative;
+.pokecard :where(header, p) {
+  font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif';
 }
-
-.resistance-total {
-  position: absolute;
-  top: 1rem;
-  left: 2.5rem;
+.pokecard :is(.evolves) {
+  font-family: 'Century Gothic', 'sans-serif';
 }
-
-.description {
-  padding: 0.1rem 0.5rem;
-  margin: 0.25rem 0 0;
-  border: 0.1rem solid;
-  font-size: 0.65rem;
-  font-weight: bold;
-  font-style: italic;
+.pokecard :where(header, p) {
+  font-family: 'Gill Sans', 'Gill Sans Mt';
 }
 
-.footer {
-  align-self: end;
-  position: relative;
-  margin: 0.15rem 0;
-  text-align: center;
+.evolves {
+  margin: 0;
   font-size: 0.6rem;
   font-weight: bold;
 }
 
-.pokecard a {
-  text-decoration: none;
-  color: inherit;
+header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  min-height: 1.4rem;
 }
 
-/* Booster Pack */
-
-.booster {
-  --booster-rx: 0deg;
-  --booster-ry: 0deg;
-  --booster-rz: -5deg;
-  --booster-scale: 0.7;
-  --width: var(--card-width);
-  --height: calc(var(--card-width) / 66 * 88);
-  --depth: 0.5rem;
-  --bg: hsl(227, 54%, 21%);
-  display: none;
-  position: relative;
-  width: var(--width);
-  height: var(--height);
-  transform-style: preserve-3d;
-  transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
-    scale(var(--booster-scale));
-  transition: transform 0.5s ease-in-out;
-  cursor: pointer;
+header > * {
+  display: inline-block;
 }
 
-.booster > div {
-  display: grid;
-  place-items: center;
+.name {
+  display: inline-block;
+  justify-self: left;
   position: absolute;
-  font-size: 5rem;
-  transform-origin: center;
-  user-select: none;
+  left: 1rem;
+  margin: 0;
+  font-size: 1.25rem;
+  transform-origin: left;
+  white-space: nowrap;
 }
 
-.face:is(.front, .back, .left, .right) {
-  height: var(--height);
-  background-color: var(--bg);
+header > div {
+  position: absolute;
+  right: 1rem;
 }
 
-.face:is(.front, .back, .top, .bottom) {
-  width: var(--width);
-}
-.left,
-.right {
-  width: var(--depth);
+.hp {
+  font-size: 1.25rem;
+  color: hsl(0 100% 50%);
 }
 
-.face:is(.top, .bottom) {
-  height: var(--depth);
+header .energy {
+  display: inline-block;
+  transform: translateY(-0.15rem);
 }
 
-.foil {
-  width: var(--width);
-  background-image: linear-gradient(
-    90deg,
-    hsl(0 0% 80%) 0%,
-    hsl(0 0% 84%) 10%,
-    hsl(0 0% 88%) 20%,
-    hsl(0 0% 92%) 30%,
-    hsl(0 0% 96%) 40%,
-    hsl(0 0% 100%) 50%,
-    hsl(0 0% 96%) 60%,
-    hsl(0 0% 92%) 70%,
-    hsl(0 0% 88%) 80%,
-    hsl(0 0% 84%) 90%,
-    hsl(0 0% 80%) 100%
-  );
-}
-.foil.top.flat {
-  height: 20px;
-  transform-origin: bottom;
-  transform: translate3d(0, -30px, 0px) rotateX(0deg);
-}
-.foil.top.flat::after,
-.foil.bottom.flat::after {
-  content: '';
-  position: absolute;
-  width: var(--width);
-  height: 20px;
-  background: radial-gradient(#ffffff 0%, transparent 50%);
-  background-size: 1% 100%;
-}
-.foil.top.front {
-  height: 11px;
-  transform-origin: bottom;
-  transform: translate3d(0, -11.4px, 3.8px) rotateX(20.5deg);
-}
-.foil.top.back {
-  height: 11px;
-  transform-origin: bottom;
-  transform: translate3d(0, -11.4px, -4px) rotateX(339deg);
-}
-.face.front {
-  transform: rotateY(0deg) translate3d(0, 0, calc(var(--depth) / 2));
-}
-.face.left {
-  transform: rotateY(90deg) translate3d(0, 0, calc(var(--width) - calc(var(--depth) / 2)));
-}
-.face.back {
-  transform: rotateY(180deg) translate3d(0, 0, calc(var(--depth) / 2)) rotateZ(180deg);
-}
-.face.right {
-  transform: rotateY(-90deg) translate3d(0, 0, calc(var(--depth) / 2));
-}
-.face.top {
-  transform: rotateX(90deg) translate3d(0, 0, calc(var(--depth) / 2));
-}
-.face.bottom {
-  transform: rotateX(-90deg) translate3d(0, 0, calc(var(--height) - calc(var(--depth) / 2)));
+.frame:is(.picture, .species, .description) {
+  --lighter: hsl(var(--frame-h) var(--frame-s) calc(var(--frame-l) + 15%));
+  --lightest: hsl(var(--frame-h) var(--frame-s) calc(var(--frame-l) + 30%));
+  --darker: hsl(var(--frame-h) var(--frame-s) calc(var(--frame-l) - 15%));
+  border-color: var(--darker) var(--frame-color) var(--lighter);
 }
-.foil.bottom.flat {
-  height: 20px;
-  transform-origin: top;
-  transform: translate3d(0, calc(var(--height) + 10px), 0px) rotateX(0deg);
+
+.picture,
+.inline-block {
+  display: inline-block;
 }
-.foil.bottom.front {
-  height: 11px;
-  transform-origin: top;
-  transform: translate3d(0, var(--height), 3.8px) rotateX(-19.5deg);
+
+.picture {
+  width: 100%;
+  height: 240px;
+  border: 0.375rem solid;
+  background-color: white;
+  object-fit: contain;
+  box-shadow: 0.25rem 0.25rem 0.5rem black;
+  user-select: none;
 }
-.foil.bottom.back {
-  height: 11px;
-  transform-origin: top;
-  transform: translate3d(0, var(--height), -3.8px) rotateX(19.5deg);
+
+.species {
+  width: 90%;
+  padding: 0.1rem;
+  margin: 0.25rem auto;
+  border-style: solid;
+  border-width: 0 0.2rem;
+  border-image: linear-gradient(var(--lightest), var(--darker)) 1 100%;
+  background-image: linear-gradient(90deg, var(--frame-color), var(--lightest) 45% 55%, var(--frame-color));
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: bold;
+  font-style: italic;
 }
 
-.foil.back.flat {
-  width: 30px;
-  height: var(--height);
-  background-image: linear-gradient(
-    90deg,
-    hsl(0 0% 0%) 0%,
-    hsl(0 0% 10%) 20%,
-    hsl(0 0% 40%) 30%,
-    hsl(0 0% 60%) 40%,
-    hsl(0 0% 86%) 50%,
-    hsl(0 0% 90%) 60%,
-    hsl(0 0% 85%) 80%,
-    hsl(0 0% 90%) 90%,
-    hsl(0 0% 70%) 100%
-  );
-  transform-style: preserve-3d;
-  transform-origin: bottom;
-  transform: translate3d(calc(var(--width) / 2 - 25px), 0px, calc(var(--depth) * -0.50001)) rotateX(0deg);
+.species::selection {
+  background-color: white;
 }
-.foil.back.flap {
-  width: 30px;
-  height: var(--height);
-  background-image: linear-gradient(
-    90deg,
-    hsl(0 0% 70%) 0%,
-    hsl(0 0% 74%) 10%,
-    hsl(0 0% 78%) 20%,
-    hsl(0 0% 82%) 30%,
-    hsl(0 0% 86%) 40%,
-    hsl(0 0% 90%) 50%,
-    hsl(0 0% 86%) 60%,
-    hsl(0 0% 82%) 70%,
-    hsl(0 0% 78%) 80%,
-    hsl(0 0% 74%) 90%,
-    hsl(0 0% 70%) 100%
-  );
-  transform-style: preserve-3d;
-  transform-origin: center;
-  transform: translate3d(calc(var(--width) / 2 - 25.5px), 0, -8px) rotateY(15deg);
+
+.attacks-row,
+.footer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
 }
 
-.foil.back.flap::after {
-  content: '';
-  position: absolute;
-  width: 30px;
-  height: var(--height);
-  background: radial-gradient(#ffffff 0%, transparent 50%);
-  background-size: 100% 0.75%;
+.footer > span:first-child {
+  text-align: left;
 }
 
-.gradient-bg {
-  background-image: linear-gradient(
-    225deg,
-    hsl(270deg 100% 7%) 0%,
-    hsl(246deg 77% 15%) 14%,
-    hsl(223deg 59% 24%) 29%,
-    hsl(199deg 44% 35%) 43%,
-    hsl(175deg 32% 48%) 57%,
-    hsl(151deg 36% 62%) 71%,
-    hsl(128deg 45% 78%) 86%,
-    hsl(104deg 100% 95%) 100%
-  );
+.footer > span:last-child {
+  text-align: right;
 }
 
-.face.front {
+.attacks {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  padding: 1rem;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
 }
 
-.face.front,
-.face.back {
-  background-size: var(--width);
-  background-image: url("data:image/svg+xml;utf8,<svg id='patternId' width='100%' height='100%' style='opacity: 0.1' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='100' height='100' patternTransform='scale(3) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 0%, 0)'/><path d='M4.43 0c.17.58.34 1.12.52 1.58.29.76.59 1.51.9 2.25 1.59 3.68 4.3 5.96 8.1 7.2 2.69.88 6.77 1.47 10.1 1.58.14 0-.38-1.66-.93-3.38-.77-2.4-.74-4.74-1.27-7.16-.16-.7-.4-1.4-.7-2.07h-3.37c.19.24.37.49.54.74 1.25 1.83 1.73 4.07 2.07 6.2.17 1.08.33 2.67 1 3.45-.61-.28-3.5-1.2-3.97-1.4-2.94-1.2-5.53-1.08-7.84-3.6C8.21 3.9 7.56 1.96 6.87 0zm22.6 0a30.74 30.74 0 001.89 3.75c.09-1.1.54-2.51.94-3.75zm8.85 0c-3.4 5.03-5.04 11.1-.88 16.5 1.77 2.16 3.52 4.33 5.14 6.6 1.45 2.02 2.6 4.46 4.36 6.23.04.05 2.12-3.78 2.27-4.14.69-1.58 1.25-3.22 1.98-4.79 1.57-3.4 3.8-6.5 5.32-9.89v-.02c1.32-2.95 1.3-6.26 1.2-9.43 0-.25 0-.6-.03-1.06h-2.3a22.37 22.37 0 01.7 4.7 9.7 9.7 0 01-.57 3.33 15.35 15.35 0 01-1.74 3.47c-2.83 4.33-5.16 8.5-7.83 12.67-.33-.71-.58-1.42-.87-2.13l-.07-.15c-.1-.25-.2-.5-.32-.74l-.08-.17a10.11 10.11 0 00-.96-1.5l-.06-.08a12.18 12.18 0 00-.68-.79l-.39-.41a19.1 19.1 0 01-1.13-1.28 9.06 9.06 0 01-.67-.98 18.88 18.88 0 01-1.65-3.29c-.35-.96-.62-1.95-.76-2.96-.11-.8-.15-1.62-.1-2.45.18-2.9 1.5-5.18 3.22-7.24zm26.83 0a23.38 23.38 0 01-.85 3.63c-.46 1.47-1.2 2.97-1.2 4.54 1.79-2.23 4.86-2.88 7.38-3.93 2.63-1.1 5.25-2.37 7.42-4.24zM16.08 18.25c-.28 0-.55 0-.83.02-1.61-.05-3.17.34-4.75.73-1.11.28.44 1.06 2.67 4.17 2.31 3.24 3.84 8.76 8.33 9.66 3.01.6 6.15-.06 9.15-.45.47-.06 6.11-1.02 6.23-.6-.06-.23-.4-.58-1-1.08a22.05 22.05 0 01-4.18-4.47 17.1 17.1 0 00-4.7-4.81 19.07 19.07 0 00-10.92-3.17zm67.25 8.58a45.04 45.04 0 01-6.41 8c-2.57 2.46-5.57 4.03-8.59 5.84-3.22 1.93-4.9 6.23-4.16 9.83 1 5.33 2.16 10.17 2.38 15.35.04.9.45 3.98 1.37 4.98.56-.96 1.91-3.21 2.55-4.1a86.54 86.54 0 018.08-9.4c1.94-2.01 4.3-3.98 5.73-6.41a7.71 7.71 0 001.12-3.62c.27-6.8.6-13.97-2.07-20.47zm-1.16 7.5c-.25 4.67-.59 9.63-1.83 14.22a18.17 18.17 0 01-2.05 5.12c-2.46 3.83-6.12 6.5-9.29 9.83.25-1.92-.33-3.67-.48-5.58-.2-2.76-1.26-5.32-1.55-8.03-.1-.86-.04-1.73.3-2.57 1.16-2.92 4.3-5.4 6.7-7.32 1.52-1.23 7.03-3.83 8.2-5.67zM36.6 39.5c-4.17-.04-7.9 1.7-12.1 2.34-3.65.82-8.63.16-11.9 2.12-1.91 1.14-2.89 3.37-4.2 5.1-1.86 3.1-6 5.72-8.4 8.83v6.22c4.92-2.43 10.42-2.03 15.9-2.13 4.62-.08 10.32-.37 13.46-4.3 1.48-1.86 1.27-4.84 2.03-7.03.88-2.54 2.26-4.87 3.55-7.22.21-.4 1.4-3.25 2.06-3.92l-.4-.01zm-3.68 3.34c-2.77 3.2-5.32 7.08-8.25 12.17a9.54 9.54 0 01-4.7 4.3c-2.12.83-4.84.35-7.06.34a37.4 37.4 0 00-6.3.41c-1.33.22-3.2.37-5.2 1.53.13-.54 1.06-2.06 1.31-2.57 1.26-2.55 3.92-4.68 5.72-6.6 1.98-2.11 4.23-3.97 6.96-5.01 2.27-.87 4.66-1.37 7.04-1.88 2.33-.5 8.9-2.6 10.48-2.69zM100 57.88c-1.56 2.02-2.39 4.25-1.33 6.95.44-.27.88-.51 1.33-.73zM32.75 62.5c-1.75 2-4.07 5.92-5.85 8.13-2.37 2.95-5.05 6.05-5.27 9.84-.17 2.92.85 5.76 1.72 8.5 1.18 3.7 2.15 7.47 3.67 11.03h2.84c.16-.51.32-1 .43-1.4 1.23-4.34 3.72-8.16 6.38-11.77 2.56-3.47 2-8.6.5-12.42-.56-1.4-1.37-2.57-2.18-3.83-.93-1.44-1.26-3.1-1.8-4.7-.21-.66-.44-2.13-.44-3.38zM9.75 81C7.33 82.58 3.1 82.39.22 82.64l-.22.02v6.5c.5.08 1 .15 1.5.17 3.82.18 7.19-5.15 8.25-8.33zm38.58.17a34.68 34.68 0 01-7.05 12.75c-1.15 1.25-2.5 2.4-3.58 3.67-.64.77-1.25 1.58-1.82 2.41h3.1c1.5-1.8 3.32-3.42 4.93-5.12 1.78-1.88 2.79-4.1 3.74-6.38.13-.33.6-1.83.93-2.92 1.4 2.9 2.3 6.78 3.12 9.87.4 1.52.87 3.02 1.25 4.55h2.29c-.12-2.43-.87-8.03-6.9-18.83zm51.67 1.5c-2.4.22-4.95.7-6.92 2.18-.83.62-3.08 3.82-3.41 5.32 1.43-.92 3.08-1.9 4.81-1.94 1.88-.04 3.68.6 5.52.93zm-15.83 1.16a95.53 95.53 0 01-7.97 3.32c-4.2 1.53-9.96 2.46-12.32 6.78-.8 1.46-.94 3.3-1.05 4.94-.03.38-.07.76-.12 1.13h12.75l.39-.35c1.74-1.6 2.91-3.86 4.04-5.92a37.51 37.51 0 004.28-9.9zm-80.7 8.28c-.9 0-1.74.14-2.47.56 1.45 2.27 2.41 4.8 3.36 7.33h2.5a16.57 16.57 0 00-2.03-4.33c1.34 0 2.5 0 3.77-.13.25-.03.5-.04.75-.05 3.43-.06 6.36 1.85 8.43 4.51h3.37a14.48 14.48 0 00-1.76-2.91c-2.43-3.13-5.9-4.06-9.69-4.4-1.97.1-4.24-.58-6.23-.58z'  stroke-width='1' stroke='none' fill='hsla(174, 100%, 29%, 1)'/><path d='M38.98 0c-1.72 2.06-3.04 4.34-3.22 7.24-.2 3.3 1.02 6.52 2.85 9.22.86 1.27 2.07 2.21 2.93 3.47.96 1.4 1.3 2.82 1.96 4.24 2.67-4.17 5-8.34 7.83-12.67 1.43-2.19 2.43-4.64 2.3-7.3a22.37 22.37 0 00-.68-4.2zm19.68 0a27.2 27.2 0 01-.12 4.26c-.4 2.95-.95 5.94-.37 8.9 3-.83 4.66-3.66 7.37-4.78C70.23 6.44 74.71 3.82 78.1 0h-2.64c-2.17 1.87-4.8 3.14-7.42 4.24-2.52 1.05-5.59 1.7-7.37 3.93 0-1.57.73-3.07 1.19-4.54.37-1.2.67-2.4.85-3.63zM97.4 6.96c-.03 0-.05.01-.07.04C93.17 15.33 84 23.17 86.9 33.34c1.12 3.97 4.3 6.5 6.73 9.65 2.08 2.7 3.07 5.46 4.42 8.5l1.96-2.86v-4.48c-.48.8-.98 1.56-1.5 2.24-.44-3.45-3.5-7.39-6.17-10.72-1.86-2.23-2.13-5.54-2.15-8.33-.03-6.4 4.9-10.22 7.65-15.5 1 1.1.7 3.71 1.12 5 .38 1.2.71 2.39 1.05 3.58v-9.45l-.12-.42c-.1-.34-2.06-3.54-2.48-3.59zm-97.4 4v9.46c.37 1.3.77 2.61 1.28 3.89 1.12 2.73 3.07 5.38 3.24 8.41.05.94-.1 1.92-.52 2.95a67.51 67.51 0 01-4 8.48v4.48c2.65-3.97 4.22-7 5.88-11.48.62-1.67 1.35-3.51 1.37-5.35.03-2.32-1.44-4.3-2.29-6.25-1.04-2.4-2.47-4.61-3.42-7.05C.58 16.05.68 13.46 0 10.97zm65.04 3.85l-.04.02c-1.35 1.36-3.08 2.3-4.58 3.47-2.34 1.84-3.93 4.46-6.06 6.51-1.37 1.32-2.7 2.75-2.34 4.8.88 4.88 2.09 9.82 5.31 13.72a16.93 16.93 0 011.57-4.14c1.43-2.49 4-3.85 5.97-5.83 2.48-2.48 3.29-5.9 2.8-9.36-.65-3.23-2.16-9.2-2.63-9.19zM91 59.33a36.8 36.8 0 01-3.61 1.65c-1.49.6-3 1.1-4.45 1.8-3.36 1.59-6.83 3.78-8.2 7.36-.7 1.8-1.12 3.58-2.05 5.32-.94 1.76-2.02 3.47-2.69 5.37 1.83-1 5.84-2.2 7.54-2.74 1.7-.54 3.5-.83 5.06-1.76a10.69 10.69 0 004.15-4.89c1.21-2.75.9-5.94 2.24-8.65.68-1.12 1.51-2.29 2.01-3.46zm-68 5.34a40.93 40.93 0 01-7.83 1.66c-3.61.4-7.25.17-10.86.65-1.47.12-2.92.5-4.31 1.1v1.95a16.41 16.41 0 019.19-2.3c2.7.11 5.14.77 7.81.44-.67.66-1.18 1.4-1.49 1.75-1.47 1.7-3 3.43-5.01 4.52a18.8 18.8 0 01-8.72 2.1c-.2.01-.9-.03-1.78-.08v1.6c.83 0 1.66-.02 2.48-.07 3.02-.15 5.92-.56 8.64-1.98a27.4 27.4 0 006.95-5.28 45.84 45.84 0 003.24-3.78c.21-.27 1.1-1.53 1.69-2.28zm77 3.4c-4.42 1.87-8.17 5.82-9.5 10.26 0 0 2.86-.12 3.24-.15 2.02-.14 4.15-.1 6.26-.12v-1.6l-1.57-.08a20.72 20.72 0 00-4.08.13l-.22.05c.37-.98.94-1.78 1.2-2.15a15.34 15.34 0 014.67-4.38zM87.17 80c-1.09.42-4.75 1.51-5.28 1.7-3.44 1.3-6.79 2.81-10.24 4.06-2.6.94-5.22 1.46-7.65 2.85-3.6 2.04-5.33 5.33-5.36 9.41 0 .66 0 1.32.02 1.98h4.05c.05-.37.1-.75.12-1.13.1-1.64.25-3.48 1.05-4.94 2.36-4.32 8.12-5.25 12.32-6.78 2.7-.98 5.36-2.1 7.97-3.32-1 3.5-2.34 6.84-4.28 9.9-1.13 2.06-2.3 4.31-4.04 5.92l-.39.35h2.64c3.1-3.5 5.56-7.71 7.1-12.13A45.45 45.45 0 0087.16 80zm-38.59 5.58c-.33 1.09-.8 2.6-.93 2.92-.95 2.28-1.96 4.5-3.74 6.38-1.61 1.7-3.42 3.32-4.93 5.12h13.97c-.38-1.53-.84-3.03-1.25-4.55-.82-3.1-1.73-6.97-3.12-9.87z'  stroke-width='1' stroke='none' fill='hsla(0, 0%, 22%, 1)'/><path d='M80.57 0c-.35.33-.7.66-1.03 1-3.65 3.67-6.35 8.32-6.71 13.57-.16 2.3.06 4.61.3 6.9.24 2.2.98 6.53 1.54 9.7 2.79-2.7 4.55-6.26 7.41-8.86 1.52-1.38 3.2-2.55 4.62-4.04a24.4 24.4 0 003.64-5.12c.77-1.4 1.62-2.83 2.12-4.36l.09-.28c.47-1.61.53-3.3.85-4.94.25-1.24.74-2.42 1.25-3.57h-3.31c-.37.74-.66 1.52-.84 2.32-.34 1.5-.32 3.08-.52 4.6a16.5 16.5 0 01-1.07 4.13 16.93 16.93 0 01-4.28 5.91c-1.57 1.48-3.33 2.74-4.8 4.32-1.46 1.59-2.51 3.49-4 5.05 0-2.63-.43-5.23-.26-7.86.17-2.65.38-5.3.8-7.93.35-2.1.95-4.22 2.4-5.85C80.3 3 82.39 1.8 84.37.68l1.2-.68zm17.26 11.84c-2.74 5.28-7.68 9.1-7.65 15.5.02 2.8.3 6.1 2.15 8.33C95 39 98.06 42.94 98.5 46.39c.52-.68 1.02-1.44 1.5-2.24V20.42c-.34-1.2-.67-2.39-1.05-3.57-.43-1.3-.12-3.9-1.12-5.01zm-89.68 2.4c-1.48-.02-2.94.17-4.32.76 1.88 2.89 4.27 5.44 5.43 8.74 1.07 3.04 1.37 6.31 2.8 9.23 1.54 3.16 4.84 5.14 8.22 5.8 3.66.7 6.91-1.03 10.32-2.05 3.37-1 6.4-2.89 9.82-3.64.86-.19-1.66-3.3-2.9-4.49-.38-.37-.7-.66-.82-.82-1.4-1.7-2.5-3.62-3.44-5.6-1.16-2.47-2.55-4.82-5.31-5.65-4.04-1.22-8.26-1.2-12.43-1.5-2.37-.18-4.9-.76-7.37-.78zm7.93 4.01c4.09-.01 7.75 1.04 10.93 3.17a17.1 17.1 0 014.7 4.81c1.15 1.7 2.6 3.15 4.17 4.47.6.5.94.85 1 1.08-.12-.42-5.76.54-6.23.6-3 .4-6.14 1.06-9.15.45-4.5-.9-6.02-6.42-8.33-9.66-2.23-3.11-3.78-3.9-2.67-4.17a17.51 17.51 0 015.58-.75zM0 20.42v23.73a67.51 67.51 0 004-8.48c.42-1.03.57-2 .52-2.95-.17-3.03-2.12-5.68-3.24-8.41A37.8 37.8 0 010 20.42zm82.17 13.91c-1.17 1.84-6.68 4.44-8.2 5.67-2.4 1.92-5.54 4.4-6.7 7.32-.34.84-.4 1.7-.3 2.57.29 2.71 1.34 5.27 1.55 8.03.15 1.91.73 3.66.48 5.58 3.17-3.33 6.83-6 9.3-9.83.99-1.55 1.56-3.35 2.04-5.12 1.24-4.6 1.58-9.55 1.83-14.22zM44 39.83c-4 5-5.33 13.34-5.67 20-.24 4.96 1.97 10.36 6.54 12.83 1.95 1.05 4.16 1.49 6.19 2.35 1.9.8 3.68 1.8 5.47 2.8 5.22 2.94 6.28 4.63 6.47 4.19 1.33-3.08 1.02-6.82.92-10.02-.05-1.52-.08-3.04-.09-4.56.33-4.86-.2-10.61-4.67-13.53-2.05-1.57-4.7-1.71-6.98-2.75C47.5 49 47 43.5 44 39.84zm-11.08 3c-1.59.09-8.15 2.19-10.48 2.7-2.38.5-4.77 1-7.04 1.87-2.73 1.04-4.98 2.9-6.96 5-1.8 1.93-4.46 4.06-5.72 6.61-.25.5-1.18 2.03-1.3 2.57 2-1.16 3.86-1.31 5.18-1.53a37.4 37.4 0 016.31-.41c2.22.01 4.94.5 7.07-.34a9.54 9.54 0 004.69-4.3c2.94-5.1 5.48-8.96 8.25-12.17zm10.39 2.59c1.52 4.08 4.97 8.29 7.26 9.87 2.13 1.47 4.69 2.17 6.65 3.94 1.75 1.58 2.22 3.48 2.61 5.73.26 1.44 1.19 9.1 1.11 11.32-.55-.84-4.6-2.7-5.12-3.01-3.13-1.8-7.19-2.57-9.88-5.03-3.55-3.25-3.92-8.85-3.75-13.35.08-2.17.71-6.94 1.12-9.47zm53.02 45.75c-.83 1-1.66 1.83-2.66 2.16-1.81.6-3.57 1.32-5.35 2.01A22.3 22.3 0 0083 97.98c-.84.62-1.65 1.3-2.42 2.02h5c2.27-1.29 5.6-3.14 8.37-3.89-.25.39-1.44 1.84-1.69 2.24a18.8 18.8 0 00-.91 1.65h3.3l.17-.36c.91-2.03 2.43-4.4 2.21-6.7a3.21 3.21 0 00-.69-1.77z'  stroke-width='1' stroke='none' fill='hsla(199, 59%, 53%, 1)'/><path d='M6.87 0c.69 1.95 1.34 3.9 2.71 5.4 2.31 2.5 4.9 2.4 7.84 3.6.46.19 3.36 1.11 3.97 1.39-.67-.78-.83-2.37-1-3.45-.34-2.13-.82-4.37-2.07-6.2-.17-.25-.35-.5-.54-.74zm17.09 0C25.5 2.97 27.27 5.84 29 8.67c.25-.92.84-2.54 1.07-3.08.76-1.84 1.33-3.73 1.98-5.59h-2.2c-.4 1.24-.84 2.66-.93 3.75A30.74 30.74 0 0127.02 0zm61.6 0l-1.2.68c-1.98 1.1-4.06 2.3-5.58 4.01-1.46 1.63-2.06 3.74-2.4 5.85a83.57 83.57 0 00-.81 7.93c-.17 2.63.26 5.23.26 7.86 1.49-1.56 2.54-3.46 4-5.05 1.47-1.58 3.23-2.84 4.8-4.32 1.8-1.7 3.33-3.6 4.28-5.91.54-1.33.89-2.7 1.07-4.13.2-1.52.18-3.1.52-4.6.18-.8.47-1.58.84-2.32zm-19.4 10.17c-.41.75-2.77 2.88-3.1 3.19a27.62 27.62 0 01-3.93 3.01c-5.3 3.3-11.46 7.8-9.96 14.96 1.5 6.67 3 14.34 9.66 17.5.2-.94.47-1.85.81-2.72a18.7 18.7 0 013.68-5.84c1.56-1.66 3.54-2.83 5.2-4.38 2.46-2.32 1.92-5.43 1.62-8.48-.5-5.02-1.74-9.9-3.02-14.75-.29-.85-.6-1.68-.95-2.5zm-1.12 4.64c.47 0 1.98 5.96 2.63 9.19.49 3.46-.32 6.88-2.8 9.36-1.97 1.98-4.54 3.34-5.97 5.83-.3.53-1.4 2.9-1.57 4.14-3.22-3.9-4.43-8.84-5.3-13.71-.38-2.06.96-3.5 2.33-4.8 2.13-2.06 3.72-4.68 6.06-6.52 1.5-1.18 3.23-2.11 4.58-3.47a.06.06 0 01.04-.02zm-21.73 30.6c-.4 2.54-1.04 7.31-1.12 9.48-.17 4.5.2 10.1 3.75 13.35 2.7 2.46 6.75 3.22 9.88 5.03.52.3 4.57 2.17 5.12 3 .08-2.2-.85-9.87-1.1-11.31-.4-2.25-.87-4.15-2.62-5.73-1.96-1.77-4.52-2.47-6.65-3.94-2.3-1.58-5.74-5.79-7.26-9.87zm-8.48 9.26c-1 2.27-2.31 4.31-3.8 6.21-2.14 2.73-4.73 5.82-7.46 7.97-2.33 2.34-4.7 4.1-5.3 7.54-.75 4.3.7 9.01 1.63 13.1.85 3.7 2.32 7.18 4.06 10.51h3.06c-1.52-3.56-2.49-7.33-3.67-11.04-.87-2.73-1.9-5.57-1.72-8.49.22-3.8 2.9-6.9 5.27-9.84 1.78-2.2 4.1-6.13 5.85-8.13 0 1.25.23 2.72.45 3.38.53 1.6.86 3.26 1.79 4.7.8 1.26 1.62 2.44 2.17 3.83 1.51 3.81 2.07 8.95-.5 12.42-2.65 3.6-5.14 7.43-6.37 11.77-.11.4-.27.89-.43 1.4h2.2c.8-2.31 1.73-4.56 3.32-6.56 2.92-3.7 8.14-7.56 7.12-12.94-1.07-5.6-4.96-10.04-6.68-15.4-.74-2.3-.9-4.75-.97-7.15a68.51 68.51 0 01-.02-3.28zm61.67.5c-2.67 1.58-6.63 2.6-8.93 3.04-3.7.72-8.12 2.56-11.32 5.24a14.57 14.57 0 00-2.65 2.85c-2.63 3.79-3.12 8.75-5.16 12.86-1.02 2.05-2.19 4-3.6 5.84 5.59-1.86 10.9-4.63 16.59-6.2 2.07-.57 4.59-.72 6.22-2.28 1.9-1.81 1.8-4.99 2.44-7.36.87-3.2 2.3-6.2 3.83-9.12.85-1.63 1.74-3.24 2.58-4.87zM91 59.33c-.5 1.17-1.33 2.34-2 3.46-1.34 2.7-1.04 5.9-2.25 8.65a10.69 10.69 0 01-4.15 4.9c-1.55.92-3.35 1.2-5.06 1.75-1.7.54-5.7 1.74-7.54 2.74.67-1.9 1.75-3.6 2.7-5.37.92-1.74 1.35-3.51 2.04-5.32 1.37-3.58 4.84-5.77 8.2-7.37 1.45-.69 2.96-1.19 4.45-1.79A36.8 36.8 0 0091 59.33zM8.68 67.72c-3.1-.04-6.1.76-8.68 2.31v6.43c.88.05 1.57.1 1.78.09a18.8 18.8 0 008.72-2.11c2-1.09 3.54-2.81 5.01-4.52.3-.35.82-1.09 1.49-1.75-2.67.33-5.11-.33-7.81-.44l-.51-.01zM100 70.03a15.34 15.34 0 00-4.67 4.38c-.26.37-.83 1.17-1.2 2.15 1.11-.33 3.96-.2 5.87-.1zm-85.06 7.25a42.2 42.2 0 00-4.37 1.17C8.7 79.2 6.81 80 4.81 80.44c-1.59.34-3.2.5-4.81.68v1.54l.22-.02c2.88-.25 7.11-.06 9.53-1.64-1.06 3.18-4.43 8.5-8.25 8.33-.5-.02-1-.09-1.5-.17v.99c1.44-.04 2.9-.07 4.33-.15 1.82-.1 3.38-1.42 4.17-3 .8-1.61 1.64-3.24 2.54-4.8 1.04-1.77 2.38-3.2 3.9-4.92zM100 81.12c-2.07.23-4.14.47-6.15 1.12-5.18 1.6-5.85 7.6-8.18 11.76 3.83-3.5 9.16-4 13.96-3.84l.37-.01v-1c-1.84-.32-3.64-.96-5.52-.92-1.73.04-3.38 1.02-4.81 1.94.33-1.5 2.58-4.7 3.4-5.32 1.98-1.47 4.53-1.96 6.93-2.19zM9.35 95.5a35.79 35.79 0 01-4.52.18c.95 1.3 1.5 2.81 2.04 4.33h10.91c-2.07-2.66-5-4.57-8.43-4.5zm84.6.62c-2.77.75-6.11 2.6-8.39 3.89h5.78c.27-.57.58-1.12.91-1.65.25-.4 1.44-1.85 1.7-2.24z'  stroke-width='1' stroke='none' fill='hsla(199, 100%, 62%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
-  background-position: center;
+.attacks-row {
+  grid-template-columns: 3rem 1fr 3rem;
+  align-items: center;
+  width: 105%;
+  height: 100%;
+  max-height: 5rem;
+  padding: 0.25rem 0;
+  margin-left: -2.5%;
+  border-bottom: 0.5px solid hsl(0, 0%, 10%);
+  font-size: 0.95em;
 }
 
-.face.right,
-.face.left {
-  background-image: linear-gradient(
-    0deg,
-    hsl(151deg 36% 62%) 0%,
-    hsl(175deg 32% 48%) 14%,
-    hsl(199deg 44% 35%) 29%,
-    hsl(223deg 59% 24%) 57%,
-    hsl(246deg 77% 15%) 86%,
-    hsl(270deg 100% 7%) 100%
-  );
+.attacks-row.no-cost {
+  grid-template-columns: 1fr 3rem;
 }
-
-img.title {
-  width: 100%;
-  filter: drop-shadow(0 0.25rem 0.1rem hsl(220 100% 10% / 0.75));
+.attacks-row.no-damage {
+  grid-template-columns: 3rem 1fr;
+  text-align: left;
 }
-img.hf-logo {
-  width: 90%;
+.attacks-row.no-cost.no-damage {
+  grid-template-columns: 1fr;
 }
 
-.triangle.top.right {
-  width: calc(var(--depth) * 10);
-  aspect-ratio: 1 / 1.35;
-  transform: rotateY(90deg) translate3d(0.1px, -59.1px, -39.5px) scale(0.1);
-  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+.attack-text {
+  margin-left: 0.25rem;
+  margin-right: 0.1rem;
 }
-.triangle.top.left {
-  width: calc(var(--depth) * 10);
-  aspect-ratio: 1 / 1.35;
-  transform: rotateY(90deg) translate3d(0.1px, -59.1px, calc(var(--width) - 41.5px)) scale(0.1);
-  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+
+.attack-text > span:only-child {
+  display: block;
+  margin-left: -1rem;
+  text-align: center;
 }
-.triangle.bottom.left {
-  width: calc(var(--depth) * 10);
-  aspect-ratio: 1 / 1.35;
-  transform: rotateY(90deg) translate3d(0.1px, calc(var(--height) - 49px), calc(var(--width) - 41.5px)) scale(0.1);
-  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+
+.no-cost .attack-text > span:only-child, .no-cost.no-damage .attack-text > span:only-child {
+  width: var(--card-width);
+  margin-left: -2.5rem;
 }
-.triangle.bottom.right {
-  width: calc(var(--depth) * 10);
-  aspect-ratio: 1 / 1.35;
-  transform: rotateY(90deg) translate3d(0px, calc(var(--height) - 49px), -39.5px) scale(0.1);
-  clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+.no-damage .attack-text  > span:only-child {
+  width: var(--card-width);
+  margin-left: -5.5rem;
 }
 
-/* Animation */
+.attack-cost {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  text-align: justify;
+}
 
-@keyframes spin-x {
-  from {
-    transform: scale(var(--scale)) rotate(0turn);
-  }
-  to {
-    transform: scale(var(--scale)) rotate(1turn);
-  }
+.energy {
+  width: 1.2em;
+  aspect-ratio: 1 / 1;
+  text-align: center;
+  cursor: default;
+  user-select: none;
 }
 
-@keyframes spin-y {
-  0% {
-    transform: rotateX(var(--booster-rx)) rotateY(0deg) rotateZ(0deg) scale(var(--booster-scale));
-  }
-  100% {
-    transform: rotateX(var(--booster-rx)) rotateY(360deg) rotateZ(0deg) scale(var(--booster-scale));
-  }
+.energy:only-child {
+  justify-self: flex-start;
+  margin: auto;
 }
 
-@keyframes bounce {
-  0% {
-    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
-      scale(var(--booster-scale)) translateY(0%);
-  }
-  30% {
-    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
-      scale(var(--booster-scale)) translateY(-2%);
-  }
-  50% {
-    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
-      scale(var(--booster-scale)) translateY(1%);
-  }
-  70% {
-    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
-      scale(var(--booster-scale)) translateY(-1%);
-  }
-  100% {
-    transform: rotateX(var(--booster-rx)) rotateY(var(--booster-ry)) rotateZ(var(--booster-rz))
-      scale(var(--booster-scale)) translateY(0%);
-  }
+.attack-name {
+  font-weight: bold;
 }
 
-@keyframes shrink {
-  from {
-    transform: rotateZ(-45deg) scale(var(--booster-scale));
-    opacity: 1;
-  }
-  to {
-    transform: rotateZ(-270deg) scale(0);
-    opacity: 0;
-  }
+.attack-damage {
+  min-width: 2.25rem;
+  text-align: center;
+  font-size: 1.375rem;
 }
 
-[data-mode='booster']:is([data-state='ready'], [data-state='generating'], [data-state='completed']) .booster {
-  display: block;
+hr {
+  border: 0.5px solid black;
+  background-color: black;
 }
 
-[data-state='ready'] .booster {
-  animation: 5s bounce infinite ease-out;
+.multipliers {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 2rem;
+  margin-top: 0;
+  text-align: center;
+  font-size: 0.75rem;
+  font-weight: bold;
 }
 
-[data-state='generating'] .scene {
-  animation: 15s spin-x infinite linear;
+.multipliers > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0;
 }
-[data-state='generating'] .booster {
-  transform-origin: center;
-  animation: 3s spin-y infinite linear;
-  cursor: default;
+
+.resistance {
+  position: relative;
 }
 
-[data-mode='booster'][data-state='completed'] .booster {
-  animation: 0.5s shrink ease-out forwards;
+.resistance-total {
+  position: absolute;
+  top: 1rem;
+  left: 2.5rem;
 }
 
-[data-mode='booster'][data-state='completed'] .card-slot {
-  transform: scale(0);
+.description {
+  padding: 0.1rem 0.5rem;
+  margin: 0.25rem 0 0;
+  border: 0.1rem solid;
+  font-size: 0.65rem;
+  font-weight: bold;
+  font-style: italic;
 }
 
-[data-mode='card'][data-state='completed'] .booster {
-  --booster-scale: 0;
+.footer {
+  align-self: end;
+  position: relative;
+  margin: 0.15rem 0;
+  text-align: center;
+  font-size: 0.6rem;
+  font-weight: bold;
 }
 
-[data-mode='card'][data-state='completed'] .card-slot {
-  transform: scale(1);
+.pokecard a {
+  text-decoration: none;
+  color: inherit;
 }

templates/index.html

@@ -14,7 +14,7 @@
     <script type="module" id="script-tag"></script>
     <script>
       const basePath = document.location.origin + document.location.pathname;
-      document.getElementById('script-tag').src = `${basePath}static/index.js`;
+      document.getElementById('script-tag').src = `${basePath}static/js/index.js`;
       document.getElementById('stylesheet-tag').href = `${basePath}static/style.css`;
     </script>
   </head>