{# Sea stage — full-viewport portaled modal (`position: fixed; inset: 0`  #}
{# per _card-deck.scss:1615) that opens above the picker / overlay when   #}
{# `SeaDeal.openStage(card, posSelector, isLevity)` fires. Hosts the      #}
{# full card face + stat block + SPIN / FYI controls; click backdrop to   #}
{# dismiss + reveal the deposited card thumbnail in its slot.             #}
{#                                                                        #}
{# Shared by the gameroom SEA SELECT phase and the my-sea picker — same   #}
{# HTML, same SeaDeal module bindings; only the parent overlay differs.   #}
<div class="sea-stage" id="id_sea_stage" style="display:none">
    <div class="sea-stage-backdrop"></div>
    <div class="sea-stage-content">
        <div class="sig-stage-card sea-stage-card">
            {# Sprint A.7-polish — image-mode slot, populated by stage-card.js #}
            {# `_setImageMode` from the drawn card's `image_url` payload field. #}
            {# Hidden by default; CSS `.sig-stage-card.sig-stage-card--image`  #}
            {# rule (lifted to top-level in A.5) flips visibility on/off. JS    #}
            {# clears the inline `style="display:none"` when activating image  #}
            {# mode (mirrors the my_sign.html stage-card scaffold contract).  #}
            <img class="sig-stage-card-img" alt="" style="display:none">
            <div class="fan-card-corner fan-card-corner--tl">
                <span class="fan-corner-rank"></span>
                <i class="fa-solid stage-suit-icon" style="display:none"></i>
            </div>
            <div class="fan-card-face">
                <div class="fan-card-face-upright">
                    <p class="fan-card-name-group"></p>
                    <p class="sig-qualifier-above"></p>
                    <p class="fan-card-name"></p>
                    <p class="sig-qualifier-below"></p>
                </div>
                <p class="fan-card-arcana"></p>
                <div class="fan-card-face-reversal">
                    {# Default DOM order — matches non-major arcana layout. stage-card.js  #}
                    {# swaps the class names on these <p>s for Major arcana so each      #}
                    {# element's class still matches its semantic content.               #}
                    <p class="fan-card-reversal-name"></p>
                    <p class="fan-card-reversal-qualifier"></p>
                </div>
            </div>
            <div class="fan-card-corner fan-card-corner--br">
                <span class="fan-corner-rank"></span>
                <i class="fa-solid stage-suit-icon" style="display:none"></i>
            </div>
            {% comment %}
            Polish-6 — back-img + FLIP btn. The back-img mirrors the
            my_sign.html / _applet-my-sign.html pattern: only renders
            for non-polarized image-equipped decks (since back-img is
            meaningless otherwise; src derives from user's equipped
            deck). FLIP btn renders UNCONDITIONALLY per user-spec "allow
            the FLIP btn everywhere"; sea.js's click handler no-ops
            when no back-img sibling exists. Multi-user gameroom is a
            known limitation here — the back-img src is the room
            viewer's deck-back, not the drawing gamer's, which is wrong
            when different gamers' decks have different backs. Parked
            for a future multi-user polish pass.
            {% endcomment %}
            {% if request.user.is_authenticated and request.user.equipped_deck.has_card_images and not request.user.equipped_deck.is_polarized %}
            <img class="sig-stage-card-back-img" alt=""
                 src="{{ request.user.equipped_deck.back_image_url }}">
            {% endif %}
            <button class="btn btn-reveal sea-stage-flip-btn" type="button" aria-label="Flip card">FLIP</button>
        </div>
        <div class="sig-stat-block sea-stat-block">
            <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
            <button class="btn btn-info fyi-btn" type="button">FYI</button>
            {% comment %}
            DRY stat-face — see `core/_partials/_stat_face.html`. JS-
            populated; keyword ul carries id for stage-card.js's surface-
            specific selector overrides (populateKeywords opts).
            {% endcomment %}
            {% include "core/_partials/_stat_face.html" with face_modifier="upright" label_text="Emanation" keywords_ul_id="id_sea_stat_upright" %}
            {% include "core/_partials/_stat_face.html" with face_modifier="reversed" label_text="Reversal" keywords_ul_id="id_sea_stat_reversed" %}
            {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_sea_fyi_panel" panel_extra_attrs='style="display:none"' %}
        </div>
    </div>
</div>
