{# 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>
        </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>
            {# Sprint A.7.5 — `.stat-face-header` wraps the rank+suit chip   #}
            {# inline w. EMANATION/REVERSAL per [[project-image-based-deck-  #}
            {# face-rendering]]'s A.3 Q3 spec. Chip empty by default; stage- #}
            {# card.js populateStatExtras fills both faces' chips identically.#}
            <div class="stat-face stat-face--upright">
                <div class="stat-face-header">
                    <span class="stat-chip-rank"></span>
                    <div class="stat-chip-tag">
                        <i class="fa-solid stat-chip-icon" style="display:none"></i>
                        <p class="stat-face-label">Emanation</p>
                    </div>
                </div>
                <p class="stat-face-title"></p>
                <p class="stat-face-arcana"></p>
                <ul class="stat-keywords" id="id_sea_stat_upright"></ul>
            </div>
            <div class="stat-face stat-face--reversed">
                <div class="stat-face-header">
                    <span class="stat-chip-rank"></span>
                    <div class="stat-chip-tag">
                        <i class="fa-solid stat-chip-icon" style="display:none"></i>
                        <p class="stat-face-label">Reversal</p>
                    </div>
                </div>
                <p class="stat-face-title"></p>
                <p class="stat-face-arcana"></p>
                <ul class="stat-keywords" id="id_sea_stat_reversed"></ul>
            </div>
            {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_sea_fyi_panel" panel_extra_attrs='style="display:none"' %}
        </div>
    </div>
</div>
