diff --git a/assets/css/app.css b/assets/css/app.css
index 30ef540..60f6ebf 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -102,14 +102,14 @@
 /* Make LiveView wrapper divs transparent for layout */
 [data-phx-session], [data-phx-teleported-src] { display: contents }
 
-/* Spinning wheel animation — items repeated 5× in DOM, scroll through 4 full cycles */
+/* Spinning wheel animation — end position and duration set per-wheel via CSS vars */
 @keyframes spin-wheel {
   0%   { transform: translateY(0); }
-  100% { transform: translateY(-80%); }
+  100% { transform: translateY(var(--wheel-end, -80%)); }
 }
 
 .wheel-inner.spinning {
-  animation: spin-wheel 3s cubic-bezier(0.05, 0.8, 0.3, 1.0) forwards;
+  animation: spin-wheel var(--wheel-duration, 3s) cubic-bezier(0.17, 0.67, 0.35, 1.0) forwards;
 }
 
 .wheel-item {
diff --git a/lib/mtg_wheel_web/live/wheel_live.ex b/lib/mtg_wheel_web/live/wheel_live.ex
index 71a06c2..5aa0cd3 100644
--- a/lib/mtg_wheel_web/live/wheel_live.ex
+++ b/lib/mtg_wheel_web/live/wheel_live.ex
@@ -2,7 +2,8 @@ defmodule MtgWheelWeb.WheelLive do
   use MtgWheelWeb, :live_view
   alias MtgWheel.DeckGenerator
 
-  @spin_duration_ms 3000
+  @spin_duration_ms 3700
+  @item_height_px 112
 
   @impl true
   def mount(_params, _session, socket) do
@@ -37,10 +38,10 @@ defmodule MtgWheelWeb.WheelLive do
       <h1 class="text-4xl font-bold tracking-tight text-purple-400">MTG Deck Wheel</h1>
 
       <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
-        <.wheel label="Budget" items={Enum.map(@budgets, &"$#{&1}")} result={@result && @result.budget} spinning={@spinning} />
-        <.wheel label="Archetype" items={@archetypes} result={@result && @result.archetype} spinning={@spinning} />
-        <.wheel label="Subtheme" items={@subthemes} result={@result && @result.subtheme} spinning={@spinning} />
-        <.wheel label="Colors" items={@color_combos} result={@result && @result.colors} spinning={@spinning} color?={true} />
+        <.wheel label="Budget" items={Enum.map(@budgets, &"$#{&1}")} result={@result && @result.budget} spinning={@spinning} duration={2500} />
+        <.wheel label="Archetype" items={@archetypes} result={@result && @result.archetype} spinning={@spinning} duration={2900} />
+        <.wheel label="Subtheme" items={@subthemes} result={@result && @result.subtheme} spinning={@spinning} duration={3300} />
+        <.wheel label="Colors" items={@color_combos} result={@result && @result.colors} spinning={@spinning} color?={true} duration={3600} />
       </div>
 
       <button
@@ -67,13 +68,19 @@ defmodule MtgWheelWeb.WheelLive do
   end
 
   defp wheel(assigns) do
-    assigns = assign_new(assigns, :color?, fn -> false end)
+    assigns =
+      assigns
+      |> assign_new(:color?, fn -> false end)
+      |> assign_new(:duration, fn -> 3000 end)
 
     ~H"""
     <div class="flex flex-col items-center gap-2">
       <span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span>
       <div class="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950">
-        <div class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}>
+        <div
+          class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}
+          style={wheel_style(@items, @result, @duration)}
+        >
           <%= for _ <- 1..5 do %>
             <%= for item <- @items do %>
               <div class="wheel-item flex-shrink-0 w-full h-28 flex items-center justify-center text-xs font-bold text-center px-1">
@@ -99,6 +106,13 @@ defmodule MtgWheelWeb.WheelLive do
     """
   end
 
+  defp wheel_style(items, result, duration_ms) do
+    n = length(items)
+    idx = if result, do: Enum.find_index(items, &(&1 == result)) || 0, else: 0
+    end_px = -(3 * n + idx) * @item_height_px
+    "--wheel-end: #{end_px}px; --wheel-duration: #{duration_ms}ms"
+  end
+
   defp color_icons(assigns) do
     assigns = assign_new(assigns, :size, fn -> "md" end)