{# Shared inner fragment for Design 5 - core card markup only #}
<div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08); position:relative;">
  {% 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 style="padding:14px; display:flex; align-items:center; gap:12px;">
    <div style="flex:1">
      <div style="font-weight:800; font-size:1.3rem">{{ card.name }}</div>
      <div class="is-size-7">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
    </div>
    {% if card.image %}
      <div style="width:120px; height:80px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:6px; overflow:hidden;">
        <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:76px; transform:scale({{ card.image_scale }});">
      </div>
    {% endif %}
  </div>
  <div style="padding:10px 14px; border-top:1px solid #eee;">
    <div style="display:flex; gap:8px; justify-content:space-between;">
      <div style="flex:1; text-align:center;">
        <div style="font-weight:700">{{ card.speed_display }}</div>
        <div class="is-size-7">Speed</div>
      </div>
      <div style="flex:1; text-align:center;">
        <div style="font-weight:700">{{ card.weight_display }}</div>
        <div class="is-size-7">Weight</div>
      </div>
      <div style="flex:1; text-align:center;">
        <div style="font-weight:700">{{ card.intelligence_display }}</div>
        <div class="is-size-7">Intel</div>
      </div>
      <div style="flex:1; text-align:center;">
        <div style="font-weight:700">{{ card.height_display }}</div>
        <div class="is-size-7">Height</div>
      </div>
    </div>
    {% if card.facts_list %}
      <div style="margin-top:10px;">
        <strong>Fun facts</strong>
        <ul class="fact-list">
          {% for fact in card.facts_list %}
            <li>{{ fact }}</li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}
  </div>
</div>