{# Sprint A.4 — card-deck stack SVG icon. Replaces fa-regular fa-id-badge   #}
{# wherever a deck is represented by an icon (game_kit applet's              #}
{# .token.deck-variant + kit-bag dialog's .kit-bag-deck; future: room.html   #}
{# pile + deck-bag).                                                          #}
{#                                                                            #}
{# 3 rect-cards stacked tightly at rest; .deck-stack-icon SCSS rotates the   #}
{# whole stack 5° CW + drives the fan-out on hover/active/focus. When `deck` #}
{# is image-equipped (has_card_images=True), the rect fills are overridden   #}
{# via inline `style` to use an SVG <pattern> referencing the deck's actual  #}
{# card-back PNG (per [[reference-card-image-naming-convention]] back slot,  #}
{# `<deck-slug>-back.png`). When no deck is passed (kit-bag deck placeholder) #}
{# or the deck has no images (Earthman until art lands, RWS), rects fall     #}
{# through to the SCSS default `fill: rgba(--priUser, 1)` placeholder.       #}
<svg class="deck-stack-icon" viewBox="0 0 32 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
    {% if deck.has_card_images %}
    <defs>
        {# Both patternUnits + patternContentUnits = objectBoundingBox so the #}
        {# image is rendered relative to each card rect's bounding box rather #}
        {# than in fixed user-space. This makes the image TRACK the rect's   #}
        {# transforms (rest-state micro-offsets + hover fan-out) instead of  #}
        {# staying put while the rect slides out from under it — the bug    #}
        {# that read as low-opacity to the user 2026-05-25 PM. width=height=1 #}
        {# normalizes the pattern to fill the bbox; image x/y/width/height   #}
        {# = 0/0/1/1 fills the pattern. preserveAspectRatio=xMidYMid slice   #}
        {# crops the image to the 5:8 card aspect (vs the back PNG's native  #}
        {# 620×1024 ≈ 5:8.25 — minimal crop).                                 #}
        <pattern id="deck-back-{{ deck.short_key }}"
                 patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"
                 width="1" height="1">
            <image href="{{ deck.back_image_url }}" x="0" y="0" width="1" height="1"
                   preserveAspectRatio="xMidYMid slice" />
        </pattern>
    </defs>
    {% endif %}
    <g class="deck-stack-icon__stack">
        <rect class="deck-stack-icon__card deck-stack-icon__card--3"
              x="6" y="8" width="20" height="32" rx="2.5"
              {% if deck.has_card_images %}style="fill: url(#deck-back-{{ deck.short_key }});"{% endif %} />
        <rect class="deck-stack-icon__card deck-stack-icon__card--2"
              x="6" y="8" width="20" height="32" rx="2.5"
              {% if deck.has_card_images %}style="fill: url(#deck-back-{{ deck.short_key }});"{% endif %} />
        <rect class="deck-stack-icon__card deck-stack-icon__card--1"
              x="6" y="8" width="20" height="32" rx="2.5"
              {% if deck.has_card_images %}style="fill: url(#deck-back-{{ deck.short_key }});"{% endif %} />
    </g>
</svg>