# Epoch Duel: Cyberpunk LLM Alignment Battle > Source: > Published: 2026-07-08 18:57:56+00:00 Have you ever wondered how AI engineers fine-tune and align large language models? Under the hood, they run Supervised Fine-Tuning (SFT), optimize parameters using direct preference gradients (DPO), filter out low-quality pre-training corpuses (Pruning), and mitigate catastrophic drifts. To help you visualize how LLM alignment and parameter optimization work in a highly strategic way, I built a cyberpunk card battler inspired by Gwent: ## 🤖 Epoch Duel: Cyberpunk LLM Alignment Battle [Play in Fullscreen Mode (if the embed sizing is tight)](https://epoch-duel-90043718455.us-central1.run.app) ## 🛠️ Tune Your Model Parameters Your mission as an alignment engineer is to play optimizer cards to outscore the adversarial baseline AI across 3 training Epochs: - **⚙️ Logic & Coding:** Run SFT code snippets, compile theorem provers, and deploy Python scripts to build your coding benchmark scores. - **📖 Language & Speech:** Train on multilingual datasets and summarization corpuses to maximize reading comprehension. - **🛡️ Safety & Alignment:** Implement red-team safeguards, configure RLHF preference pairs, and run DPO tuning to protect your model's outputs. - **⚡ regularizers & Drifts:** Deploy Regularization cards like **Gradient Clipping (Scorch)** and **Model Pruning** to destroy anomalies, or exploit **Anomalous Drifts** to collapse the AI's rows. ## 🧬 Playable ML Concepts Explained Here is how the card battle mechanics map to production machine learning pipelines: ### 1. ✂️ Model Pruning (Weight Compression) - **In-Game:** Playing the **Model Pruning** card triggers a glitchy dissolution animation that purges the lowest-value card from the targeted board row, cleaning up noise. ### 💾 The Real-World Counterpart Model Pruning removes unimportant weights (often those closest to zero) from a trained neural network. It shrinks the memory footprint of the model, allowing it to run faster on edge devices. ### ⚠️ How it affects LLMs By stripping out low-impact weights, pruning compresses models by 30-50% with minimal loss in benchmark accuracy, making deployment significantly cheaper. ### 2. 🔀 DPO vs RLHF (Direct Optimization vs Reward Modeling) - **In-Game:** - **RLHF Preference Pair:** Swaps the power value of one of your units with an opponent's unit, representing human correction. - **DPO Tuning:** Piles directly on your board, boosting the values of all units in its row. ### 🗜️ The Real-World Counterpart RLHF (Reinforcement Learning from Human Feedback) trains a separate Reward Model to evaluate outputs. DPO (Direct Preference Optimization) bypasses the reward model entirely, mathematically optimizing the policy directly from preference pairs. ### 🚀 How it affects LLMs DPO simplifies the post-training pipeline. It is computationally lightweight, more stable than PPO-based RLHF, and has become the industry standard for aligning models like Llama 3 and Mistral. ### 3. 📉 Catastrophic Forgetting (Anomalous Drift) - **In-Game:** Drifts like **Catastrophic Forgetting** collapse all cards in the Language row to a power rating of `1` , instantly erasing rounds of SFT progress. ### 🔋 The Real-World Counterpart Catastrophic Forgetting occurs when a neural network is fine-tuned on a new task, causing it to overwrite the weights that were storing information from its initial pre-training. ### ⚠️ How it affects LLMs If you fine-tune an LLM exclusively on medical datasets, it may lose its general coding abilities. Developers mitigate this by mixing a small percentage of general pre-training data back into the fine-tuning dataset. ## 🛠️ The Under-the-Hood Engineering Journey Building a Gwent-style tabletop card game that fits inside a Dev.to embed presented some unique web design challenges: ### 1. Asynchronous Animation Queues in Vanilla JS To make card destructions (like Scorch or Pruning) visual, we couldn't just delete the card object instantly. - **The Solution:** We trigger a CSS `.prune-animation` class (a neon-pink glitchy disintegration), block turn progression using an `isAnimating` lock, and delay database modification by exactly 600ms to synchronize state with the screen: ### 2. Responsive Viewport-Height (vh) Scaling for 500x600 embeds Standard pixel dimensions cause the 6-row Gwent board to squish and overlap inside small embeds. - **The Solution:** We refactored all layouts, cards, and font sizes to use relative **Viewport Height (**`vh` ) units. Tying sizes to the screen height guarantees that the card proportions remain perfect and fit without any clipping on any resolution: ### 💬 Let's Discuss: - What is your high score fine-tuning your candidate model? - Have you managed to bait the AI into passing early by playing a Spy card? - Which alignment strategy did you find more effective: SFT raw power stacking or anomaly regularization? ### Card game to teach players about LLMs # Epoch Duel: Cyberpunk LLM Alignment Battle 🤖 An interactive cyberpunk TCG card battler built in vanilla HTML/CSS/JS. Players step into the role of an AI alignment engineer, fine-tuning their candidate models and aligning weights against adversarial baseline models across 3 training Epoch rounds. The game is designed to run standalone or scale fluidly inside a compact `500x600` Dev.to iframe embed. ## 🎮 Features - **🃏 Witcher 3 Gwent scoring interface:** Circular neon row badges and large player/AI total score circles on the left, alongside pass indicator ribbons. - **📦 50 Unique ML-Themed Cards:** Build coding capacity with *SFT Code Snippets*, deploy *Red-Team Jailbreak* spies to draw cards, double parameters using *LoRA Adapters*, or optimize weight adjustments using *DPO Tuning* and *AdamW Optimizers*. - **📉 Anomalous Drifts & Regularizers:** Navigate drifts like *Catastrophic Forgetting* and *Exploding Gradients* which collapse rows to Power 1, or regularize with *Gradient Clipping (Scorch)* and *Model Pruning*… *Disclaimer: AI was used throughout this project, it is just fitting that it would co-author with me, so special thanks to the Foundry for its tireless hours toiling away and Gemini for producing the cover image.*