diff --git a/cards/templates/cards/_card_inner_design3.html b/cards/templates/cards/_card_inner_design3.html
index 93e49a3..6cf5743 100644
--- a/cards/templates/cards/_card_inner_design3.html
+++ b/cards/templates/cards/_card_inner_design3.html
@@ -1,38 +1,57 @@
 {# Shared inner fragment for Design 3 - core card markup only #}
 <div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
-  <div class="hero-image" style="background-image: linear-gradient(120deg, rgba(255,122,24,0.18), rgba(175,0,45,0.18)), url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; filter:brightness(0.9); position:relative; overflow:hidden;">
-    {% if card.background and card.background.image or background and background.image %}
-      <img class="print-hero-bg" src="{% if card.background and card.background.image %}{{ card.background.image.url }}{% else %}{{ background.image.url }}{% endif %}" alt="" aria-hidden="true" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;">
-    {% endif %}
+  <div class="hero-image" style="background-image: linear-gradient(120deg, rgba(255,122,24,0.12), rgba(175,0,45,0.12)); background-size:cover; background-position:center; filter:brightness(0.95); position:relative; overflow:hidden;">
     {# diet tint overlay so background colour is visible beneath the gradient and image #}
-    <div class="hero-tint" style="position:absolute; inset:0; z-index:0.5; {% if card.diet == 'herbivore' %}background-color:#e8f6ea;{% elif card.diet == 'carnivore' %}background-color:#fff0f0;{% elif card.diet == 'omnivore' %}background-color:#fff8e6;{% else %}background-color:#f5f5f5;{% endif %} opacity:0.85;"></div>
+    <div class="hero-tint" style="position:absolute; inset:0; z-index:0; {% if card.diet == 'herbivore' %}background-color:#e8f6ea;{% elif card.diet == 'carnivore' %}background-color:#fff0f0;{% elif card.diet == 'omnivore' %}background-color:#fff8e6;{% else %}background-color:#f5f5f5;{% endif %} opacity:0.95;"></div>
+
+      
     {% if card.image %}
       <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
     {% endif %}
   </div>
   <div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
   <div class="card-body" style="padding:12px; background:#fff;">
-    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
-      <div><strong>Era:</strong> {{ card.get_era_display }}</div>
-      <div><strong>Diet:</strong>
+    <div style="display:flex; justify-content:space-between; align-items:center; gap:8px;">
+      <div style="white-space:nowrap;"><strong>Era:</strong>
+        <span class="era-badge" style="display:inline-block;padding:2px 6px;border-radius:999px;color:#fff;font-weight:700;margin-left:6px;font-size:0.85rem;">
+          {% if card.era == 'triassic' %}
+            <span style="background:#8e44ad;padding:2px 6px;border-radius:999px;">{{ card.get_era_display }}</span>
+          {% elif card.era == 'jurassic' %}
+            <span style="background:#27ae60;padding:2px 6px;border-radius:999px;">{{ card.get_era_display }}</span>
+          {% elif card.era == 'cretaceous' %}
+            <span style="background:#d35400;padding:2px 6px;border-radius:999px;">{{ card.get_era_display }}</span>
+          {% else %}
+            <span style="background:#7f8c8d;padding:2px 6px;border-radius:999px;">{{ card.get_era_display }}</span>
+          {% endif %}
+        </span>
+      </div>
+      <div style="white-space:nowrap;"><strong>Diet:</strong>
         {% if card.diet == 'herbivore' %}
-          <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#222;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
+          <span style="display:inline-block;padding:3px 6px;border-radius:999px;background:#2ecc71;color:#222;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
         {% elif card.diet == 'carnivore' %}
-          <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#222;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
+          <span style="display:inline-block;padding:3px 6px;border-radius:999px;background:#e74c3c;color:#222;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
         {% else %}
-          <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#222;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
+          <span style="display:inline-block;padding:3px 6px;border-radius:999px;background:#f39c12;color:#222;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
         {% endif %}
       </div>
     </div>
     <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
     {% if card.facts_list %}
-      <div style="margin-top:0.5rem">
-        <strong>Fun facts</strong>
-        <ul class="fact-list">
-          {% for fact in card.facts_list %}
-            <li>{{ fact }}</li>
-          {% endfor %}
-        </ul>
+      <div style="margin-top:0.5rem;">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+          <span style="background:#ffd54f;color:#222;padding:4px;border-radius:6px;font-weight:800;font-size:0.9rem;">✨</span>
+          <strong style="font-size:0.95rem;">Fun facts</strong>
+        </div>
+        <div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:8px;">
+          <ul style="margin:0;padding:0 0 0 0.85rem;list-style:none;display:flex;flex-direction:column;gap:6px;">
+            {% for fact in card.facts_list %}
+              <li style="display:flex;gap:8px;align-items:flex-start;">
+                <span style="color:#ffb74d;font-size:1.05rem;line-height:1;margin-top:2px;">•</span>
+                <span style="flex:1;color:#333;">{{ fact }}</span>
+              </li>
+            {% endfor %}
+          </ul>
+        </div>
       </div>
     {% endif %}