{{ 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>Expert</strong>.
    {% if round_number == 1 %}
      <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 appraiser_called %}
    <div class="alert alert-success mb-3">
      The buyer invited you — you earned <strong>5 lab points</strong>.
    </div>
  {% else %}
    <div class="alert alert-secondary mb-3">
      The buyer did not invite you this round — you earned <strong>0 lab points</strong>.
    </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 }}