{% comment %}
Miniaturized spread PREVIEW — a small Celtic-Cross shape that reflects the
spread chosen in the modal's `.sea-select`. It is ONLY a preview: its slots
NEVER receive dealt cards (SeaDeal scopes its slot queries to
`.sea-cross:not(.sea-cross--preview)`, and the picker IIFE deals onto
`.my-sea-cross`). The slots keep their dashed-empty + opacity styling so the
shape still reads. Shared by the gameroom Sea Select modal AND my_sea's spread
modal so the two locations are identical.

The cell classes are namespaced `.sea-prev-pos-*` (NOT `.sea-pos-*`) so a bare
`.sea-pos-*` selector matches ONLY the live `.my-sea-cross` cells, never this
preview. The preview's Celtic-Cross geometry is supplied by scoped copies under
`.sea-cross--preview` in _gameboard.scss.

Args:
  preview_spread — slug to seed `data-spread` (drives the per-spread show/hide).
  sig            — the significator card for the center pip (corner_rank +
                   suit_icon only; text render is fine at preview scale).
{% endcomment %}
<div class="sea-cards-col sea-cards-col--preview">
    <div class="sea-cross sea-cross--preview" data-spread="{{ preview_spread }}">
        <div class="sea-crucifix-cell sea-prev-pos-crown">
            <div class="sea-card-slot sea-card-slot--empty"></div>
        </div>
        <div class="sea-crucifix-cell sea-prev-pos-leave">
            <div class="sea-card-slot sea-card-slot--empty"></div>
        </div>
        <div class="sea-crucifix-cell sea-prev-pos-core">
            <div class="sig-stage-card sea-sig-card" style="--sig-card-w: 2rem">
                {% if sig %}<span class="fan-corner-rank">{{ sig.corner_rank }}</span>{% if sig.suit_icon %}<i class="fa-solid {{ sig.suit_icon }}"></i>{% endif %}{% endif %}
            </div>
            <div class="sea-prev-pos-cover">
                <div class="sea-card-slot sea-card-slot--empty"></div>
            </div>
            <div class="sea-prev-pos-cross">
                <div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
            </div>
        </div>
        <div class="sea-crucifix-cell sea-prev-pos-loom">
            <div class="sea-card-slot sea-card-slot--empty"></div>
        </div>
        <div class="sea-crucifix-cell sea-prev-pos-lay">
            <div class="sea-card-slot sea-card-slot--empty"></div>
        </div>
    </div>
</div>