{% block title %}
  <span class="title-left">Results</span>
  <span class="title-right">
    <span class="round-chip">Round {{ cur_round }} / {{ num_rounds }}</span>
  </span>
{% endblock %}

{% block content %}

<!-- ===== Round Summary (list style) ===== -->
<div class="card">
  <div class="card__header">
    <h4>Round Summary</h4>
  </div>

  <div class="card__body">
    <div class="kv-list">
      <!-- Endowment first -->
      <div class="kv">
        <div class="k">Your endowment</div>
        <div class="v"><span class="badge badge-neutral">{{ endowment }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Your chosen probability of playing action A</div>
        <div class="v"><span class="badge badge-neutral">{{ your_p }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Your realized action</div>
        <div class="v"><span class="badge badge-neutral">{{ your_action }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Your realized cost</div>
        <div class="v">
          <span class="badge badge-neutral">
            {% if your_action_bool %}{{ cost_one }}{% else %}{{ cost_zero }}{% endif %}
          </span>
        </div>
      </div>

      <div class="kv">
        <div class="k">Number of realized action A’s in your group</div>
        <div class="v"><span class="badge badge-neutral">{{ num_ones }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Number of realized action B’s in your group</div>
        <div class="v"><span class="badge badge-neutral">{{ num_zeros }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Threshold A</div>
        <div class="v"><span class="badge badge-neutral">{{ threshold_one }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Was Threshold A reached?</div>
        <div class="v">
          <span class="badge {% if provided_one %}badge-primary{% else %}badge-muted{% endif %}">
            {% if provided_one %}Yes{% else %}No{% endif %}
          </span>
        </div>
      </div>

      <div class="kv">
        <div class="k">Threshold B</div>
        <div class="v"><span class="badge badge-neutral">{{ threshold_zero }}</span></div>
      </div>

      <div class="kv">
        <div class="k">Was Threshold B reached?</div>
        <div class="v">
          <span class="badge {% if provided_zero %}badge-primary{% else %}badge-muted{% endif %}">
            {% if provided_zero %}Yes{% else %}No{% endif %}
          </span>
        </div>
      </div>

      <div class="kv">
        <div class="k">Your total round earnings</div>
        <div class="v"><span class="badge badge-neutral">{{ player.payoff }}</span></div>
      </div>
    </div>
  </div>
</div>

<!-- Next button OUTSIDE the card, aligned to the right edge of the same content width -->
<div class="next-wrap">
  {{ next_button }}
</div>

<style>
  /* Title bar with right-aligned round */
  .otree-title{
    max-width:900px; margin:6px auto 14px auto !important; padding:6px 2px 0 2px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    font-size:22px !important; font-weight:700 !important; letter-spacing:.2px; color:#111827; border:0;
  }
  .title-right{ display:inline-flex; align-items:center; gap:10px; }
  .round-chip{
    display:inline-block; padding:4px 10px; border-radius:999px;
    background:#f3f6ff; border:1px solid #dbe2f3; color:#1e3a8a; font-weight:700; font-size:12px;
  }

  /* Generic card shell */
  .card{
    max-width:900px; margin:16px auto; border:1px solid #e5e7eb; border-radius:10px;
    background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.06);
  }
  .card__header{
    padding:14px 18px 10px 18px; border-bottom:1px solid #f0f2f5; background:#fafafa;
    border-radius:10px 10px 0 0;
  }
  .card__header h4{ margin:0; font-weight:600; font-size:18px; }
  .card__body{ padding:16px 18px 18px 18px; }

  /* Key-value list */
  .kv-list{ display:grid; grid-template-columns:1fr; gap:10px; }
  .kv{
    display:grid; grid-template-columns: 1fr auto; align-items:center;
    padding:8px 0; border-bottom:1px dashed #eef2f7;
  }
  .kv:last-child{ border-bottom:0; }
  .k{ color:#374151; font-size:14px; }
  .v{ font-variant-numeric: tabular-nums; }

  /* Badges */
  .badge{
    display:inline-block; padding:4px 10px; border-radius:999px; line-height:1.1;
    font-weight:600; font-size:13px;
  }
  .badge-neutral{ background:#f5f7fb; border:1px solid #e2e8f0; color:#111827; }
  .badge-muted{ background:#f6f7f9; border:1px solid #e5e7eb; color:#374151; }
  .badge-primary{ background:#eef3ff; border:1px solid #dbe2f3; color:#1e3a8a; }

  /* Next button row (outside card, right-aligned, tucked up a bit) */
  .next-wrap{
    max-width:900px;
    margin:8px auto 0 auto;   /* same width as card; sits just below it */
    display:flex;
    justify-content:flex-end; /* flush right */
  }
  .next-wrap .btn,
  .otree-btn-next,
  button[type="submit"].btn{
    border-radius:8px; padding:10px 18px; font-weight:600;
    border:1px solid #dbe2f3; background:linear-gradient(180deg,#f4f7ff 0%,#e9efff 100%);
    color:#1e3a8a; box-shadow:0 4px 10px rgba(30,91,255,.08);
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
  }
  .next-wrap .btn:hover,
  .otree-btn-next:hover,
  button[type="submit"].btn:hover{
    background:linear-gradient(180deg,#eaf0ff 0%,#dee7ff 100%); box-shadow:0 6px 14px rgba(30,91,255,.12);
  }
  .next-wrap .btn:active,
  .otree-btn-next:active,
  button[type="submit"].btn:active{ transform: translateY(1px); }

  @media (max-width:640px){
    .otree-title{ flex-direction:column; align-items:flex-start; gap:6px; }
  }
</style>

{% endblock %}