{{ block title }}
Results - Round {{ round_number }}
{{ endblock }}

{{ block content }}
<style>
    .results-main {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
    }
    .stat-hero {
        flex: 1;
        border-radius: 10px;
        padding: 18px 20px;
        text-align: center;
    }
    .stat-hero.profit  { background: #eff6ff; border: 1px solid #bfdbfe; }
    .stat-hero.score   { background: #f0fdf4; border: 1px solid #bbf7d0; }
    .stat-hero .label  { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
    .stat-hero.profit .label { color: #1e40af; }
    .stat-hero.score  .label { color: #166534; }
    .stat-hero .value  { font-size: 30px; font-weight: 700; }
    .stat-hero.profit .value { color: #1d4ed8; }
    .stat-hero.score  .value { color: #16a34a; }

    .metrics-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
    .metric-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 8px;
        text-align: center;
    }
    .metric-card .m-label {
        font-size: 11px;
        color: #64748b;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 4px;
    }
    .metric-card .m-value {
        font-size: 18px;
        font-weight: 700;
        color: #1e293b;
    }
    .alert-negative {
        padding: 12px 16px;
        border: 1px solid #fca5a5;
        background: #fef2f2;
        color: #991b1b;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 14px;
    }
    .definitions-box {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 14px 18px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .definitions-box h4 {
        margin-top: 0;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
    }
    .definitions-box ul {
        margin: 0;
        padding-left: 18px;
    }
    .definitions-box li {
        font-size: 13px;
        color: #4b5563;
        margin-bottom: 5px;
        line-height: 1.5;
    }
</style>

<h3 style="margin-bottom:16px; font-size:18px; font-weight:700; color:#1e293b;">Performance in Round {{ round_number }}</h3>

<div class="results-main">
    <div class="stat-hero profit">
        <div class="label">Your Profit</div>
        <div class="value">${{ profit }}</div>
    </div>
    <div class="stat-hero score">
        <div class="label">Your Score</div>
        <div class="value">{{ score }}%</div>
    </div>
</div>

<div class="metrics-grid">
    <div class="metric-card">
        <div class="m-label">Demand</div>
        <div class="m-value">{{ actual_demand }}</div>
    </div>
    <div class="metric-card">
        <div class="m-label">Your Order</div>
        <div class="m-value">{{ order_quantity }}</div>
    </div>
    <div class="metric-card">
        <div class="m-label">Sales</div>
        <div class="m-value">{{ sales }}</div>
    </div>
    <div class="metric-card">
        <div class="m-label">Leftover</div>
        <div class="m-value">{{ leftover }}</div>
    </div>
    <div class="metric-card">
        <div class="m-label">Loss</div>
        <div class="m-value">{{ loss }}</div>
    </div>
</div>

{% if score < 0 %}
<div class="alert-negative">
    Your score is negative because the cost of unsold units and/or missed sales outweighed your revenue.
    {% if show_tool_prompt %}
    Consider using the tools on the next page to adjust.
    {% endif %}
</div>
{% endif %}

<div class="definitions-box">
    <h4>What these numbers mean</h4>
    <ul>
        <li><strong>Sales</strong>: the number of units you sold this round.</li>
        <li><strong>Leftover</strong>: units you prepared but did not sell; they earn the salvage value $s each.</li>
        <li><strong>Loss</strong>: unmet demand because you ordered fewer units than were requested.</li>
        <li><strong>Profit</strong>: (Sales &times; p) + (Leftover &times; s) &minus; (Order quantity &times; c).</li>
        <li><strong>Score</strong>: your profit as a percentage of the best profit possible given the demand that occurred.</li>
    </ul>
</div>

{{ next_button }}

{{ endblock }}