{% extends "global/Page.html" %}

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

{% block content %}

<div class="card">
  <div class="card__header">
    <h4>New Round</h4>
  </div>

  <div class="card__body">
    <p class="lead">
      You have been <strong>randomly matched into a new group</strong>
      for round <strong>{{ cur_round }}.
    </p>
    <p class="muted small">
      Click the "Next" button to begin chatting with your group.
    </p>
  </div>
</div>

<div class="next-wrap">
  {{ next_button }}
</div>

{% endblock %}

{% block styles %}
<style>
  /* --- Keep it consistent with your existing cards --- */
  .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__subtitle{ margin-top:4px; color:#6b7280; font-size:13px; }
  .card__body{ padding:16px 18px 18px 18px; }
  .lead{ font-size:16px; color:#111827; margin:0 0 6px 0; }
  .muted{ color:#6b7280; } .small{ font-size:12px; }

  /* Title bar matching your other pages */
  .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-left{ line-height:1.1; }
  .title-right{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:#111827; }
  .chat-round{ white-space:nowrap; }
  .chat-dot{ color:#9ca3af; }

  .next-wrap{
    max-width:900px; margin: 10px auto 0 auto;
    display:flex; justify-content:flex-end;
  }
  .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);
  }
</style>
{% endblock %}