{{ block title }}Round Results{{ endblock }}
{{ block content }}
<div class="card shadow-sm p-4" style="max-width: 520px; margin: 0 auto; text-align: center;">

  <h3 class="mb-1">Round Results</h3>
  <p class="text-muted mb-3">
    You are the <strong>{{ role }}</strong>.
    {% if round_number == 2 %}
      <span class="badge bg-warning text-dark ms-2">Practice Round</span>
    {% else %}
      Round <strong>{{ display_round }}</strong> of <strong>{{ display_total }}</strong>
    {% endif %}
  </p>

  {% if role != 'Appraiser' %}
    <div class="mb-2 text-muted small">
      Product value: <strong>{{ product_value }}</strong>
    </div>
  {% endif %}

  {% if deal_reached %}
    <div class="alert alert-success mb-3">
      A deal was reached at <strong>{{ final_price }} lab points.</strong>
    </div>
  {% else %}
    <div class="alert alert-warning mb-3">
      No deal was reached.
    </div>
  {% endif %}

  {% if appraiser_called %}
    <div class="text-muted small mb-2">Expert was called.</div>
    <div class="text-muted small mb-3">Expert's appraisal: <strong>{{ appraiser_value }}</strong></div>
  {% else %}
    <div class="text-muted small mb-3">No expert was called — you have not been charged 5.</div>
  {% endif %}

  {% if is_decision_maker and appraiser_called %}
    <div class="text-muted small mb-3">You called the expert — you have been charged 5.</div>
  {% endif %}

  <!-- This round's payoff -->
  <div style="
    display: inline-block;
    background: #f0fdf4;
    border: 3px solid #198754;
    border-radius: 16px;
    padding: 20px 48px;
    margin-top: 8px;
    margin-bottom: 16px;
  ">
    <div style="font-size: 0.85rem; font-weight: 600; color: #198754; margin-bottom: 4px;">
      This round's payoff (lab points):
    </div>
    <div style="font-size: 3rem; font-weight: 800; color: #198754;">
      {{ payoff }}
    </div>
  </div>

  <!-- Cumulative payoff (only for non-practice rounds) -->
  {% if round_number > 1 %}
  <div style="
    display: block;
    background: #eff6ff;
    border: 2px solid #3b82f6;
    border-radius: 12px;
    padding: 14px 40px;
    margin-bottom: 16px;
  ">
    <div style="font-size: 0.82rem; font-weight: 600; color: #1d4ed8; margin-bottom: 4px;">
      Cumulative total so far (lab points):
    </div>
    <div style="font-size: 2.2rem; font-weight: 800; color: #1d4ed8;">
      {{ cumulative_payoff }}
    </div>
  </div>
  {% endif %}

  <div class="mt-3">
    {% if is_last_round %}
      <p class="text-muted small">This was the final round.</p>
    {% endif %}
    {{ next_button }}
  </div>

</div>
{{ endblock }}