{{ extends 'global/Page.html' }}
{{ block title }}Reminder: Island Priority Scores{{ endblock }}

{{ block content }}

<style>
.info-table-container { overflow-x: auto; margin-bottom: 16px; }
.info-table { border-collapse: collapse; margin: 0 auto; }
.info-table th, .info-table td { border: 1px solid #ddd; padding: 6px 14px; text-align: center; }
.info-table th.row-label { text-align: left; font-weight: bold; background-color: #f5f5f5; min-width: 150px; }
.info-table th[data-island], .info-table td[data-island] { min-width: 62px; }
.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}
.number-line-section { margin: 6px auto; text-align: center; }
.number-line-section:last-child { margin-bottom: 0; }
.number-line-label { font-weight: bold; margin-bottom: 2px; font-size: 14px; }
.number-line-svg { display: block; margin: 0 auto; max-width: 100%; }
.box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 16px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    min-height: 380px;
}
.pf-intro-text { min-height: 6.5em; }
</style>

<div class="pf-intro-text">
<p>In addition to points, you will see a priority score for each island.</p>
<p>Your priorities are random and <b>the same</b> at every island.</p>
<p><b>The other travelers' priority scores are assigned in the same way: randomly, like yours.</b></p>
</div>

<div class="box">
    {{ pf_graph }}
</div>

<p></p>
{{ next_button }}

{{ endblock }}