<section
    id="id_applet_my_sea"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url 'my_sea' %}">My Sea</a></h2>
    <div class="my-sea-scroll">
        {% if not request.user.significator_id %}
            {# Sprint 4b applet-gate mirror — same Look!-formatted nudge as #}
            {# the standalone page so the UX is consistent across surfaces. #}
            <div class="my-sea-sign-gate my-sea-sign-gate--applet">
                <p class="my-sea-sign-gate__line">
                    Look!&mdash;pick your sign before drawing the Sea.
                </p>
                <a class="btn btn-info my-sea-sign-gate__fyi"
                   href="{% url 'billboard:my_sign' %}">FYI</a>
            </div>
        {% elif latest_draw_cards %}
            {% for card in latest_draw_cards %}
                <div class="my-sea-card" data-position="{{ card.position }}">
                    <span class="fan-corner-rank">{{ card.corner_rank }}</span>
                    {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
                </div>
            {% endfor %}
        {% else %}
            <p class="my-sea-empty">No draws yet.</p>
        {% endif %}
    </div>
</section>
