{# Read-only spectator render of the owner's draw (Phase 1, 2026-05-29).    #}
{# Reuses the owner's `.sea-cross.my-sea-cross` picker DOM (sig center + 6  #}
{# position cells via _my_sea_slot.html) + the shared `_sea_stage.html`     #}
{# modal, bound by sea.js for click→stage + SPIN + FYI + hover — so the     #}
{# visitor sees IDENTICALLY what the owner sees on her own my_sea, just     #}
{# without the FLIP / DEL / AUTO DRAW / deck-stacks / spread combobox       #}
{# (the visitor only watches). `#id_sea_overlay` is what sea.js binds to;   #}
{# `--locked` mirrors the owner's hand-complete picker so no draw           #}
{# affordances surface even if a stray handler fires.                       #}
<div class="my-sea-picker my-sea-picker--locked my-sea-visit-picker"
     id="id_sea_overlay" data-spectator="true">
    <div class="sea-cards-col">
        <div class="sea-cross my-sea-cross" data-spread="{{ default_spread }}">
            <div class="sea-crucifix-cell sea-pos-crown">
                <span class="sea-pos-label" data-position="crown">{{ label_by_position.crown }}</span>
                {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="crown" saved=saved_by_position.crown crossing=False %}
            </div>
            <div class="sea-crucifix-cell sea-pos-leave">
                <span class="sea-pos-label" data-position="leave">{{ label_by_position.leave }}</span>
                {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="leave" saved=saved_by_position.leave crossing=False %}
            </div>
            <div class="sea-crucifix-cell sea-pos-core">
                <div class="sig-stage-card sea-sig-card{% if significator.deck_variant.has_card_images %} sig-stage-card--image{% endif %}"
                     data-card-id="{{ significator.id }}"
                     data-arcana-key="{{ significator.arcana }}">
                    {% if significator.deck_variant.has_card_images %}
                        <img class="sig-stage-card-img" src="{{ significator.image_url }}" alt="{{ significator.name }}">
                    {% else %}
                        <span class="fan-corner-rank">{{ significator.corner_rank }}</span>
                        {% if significator.suit_icon %}<i class="fa-solid {{ significator.suit_icon }}"></i>{% endif %}
                    {% endif %}
                </div>
                <div class="sea-pos-cover">
                    <span class="sea-pos-label" data-position="cover">{{ label_by_position.cover }}</span>
                    {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="cover" saved=saved_by_position.cover crossing=False %}
                </div>
                <div class="sea-pos-cross">
                    <span class="sea-pos-label" data-position="cross">{{ label_by_position.cross }}</span>
                    {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="cross" saved=saved_by_position.cross crossing=True %}
                </div>
            </div>
            <div class="sea-crucifix-cell sea-pos-loom">
                <span class="sea-pos-label" data-position="loom">{{ label_by_position.loom }}</span>
                {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="loom" saved=saved_by_position.loom crossing=False %}
            </div>
            <div class="sea-crucifix-cell sea-pos-lay">
                <span class="sea-pos-label" data-position="lay">{{ label_by_position.lay }}</span>
                {% include "apps/gameboard/_partials/_my_sea_slot.html" with position="lay" saved=saved_by_position.lay crossing=False %}
            </div>
        </div>
    </div>
    {% include "apps/gameboard/_partials/_sea_stage.html" %}
</div>