{# 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">
            <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>
            <div class="stat-face stat-face--upright">
                <p class="stat-face-label">Emanation</p>
                <ul class="stat-keywords" id="id_sea_stat_upright"></ul>
            </div>
            <div class="stat-face stat-face--reversed">
                <p class="stat-face-label">Reversal</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>