<turbo-stream action="replace" target="search-form"><template>
  <form id="search-form" class="contents" data-controller="search-filter multiselect" data-action="submit-&gt;search-filter#submit" data-search-filter-target="form" data-search-filter="form" action="/load_collection" accept-charset="UTF-8" data-remote="true" method="get">
  <!-- Search Field -->
  <div class="flex-1 w-full md:min-w-[200px] md:max-w-[400px]">
    <div class="flex flex-col">
      <h3 class="mb-2 text-grey-text">Search</h3>

      <div class="flex flex-row space-x-0">
        <input placeholder="Name, or c:b t:creature r:uncommon" onfocus="this.select();" data-search-filter-target="searchInput" class="w-full border text-grey-text rounded-l-md bg-background border-highlight focus:border-accent-50 focus:ring-accent-50" type="text" name="search" id="search" />

        <input autocomplete="off" value="denvermullets" type="hidden" name="username" id="username" />
        <input autocomplete="off" type="hidden" name="code" id="code" />
        <input autocomplete="off" type="hidden" name="collection_id" id="collection_id" />
        <input autocomplete="off" type="hidden" name="valuable_only" id="valuable_only" />
        <input autocomplete="off" type="hidden" name="owned_only" id="owned_only" />
        <input autocomplete="off" type="hidden" name="sort" id="sort" />
        <input autocomplete="off" value="asc" type="hidden" name="direction" id="direction" />
        <input autocomplete="off" type="hidden" name="view_mode" id="view_mode" />
        <input autocomplete="off" type="hidden" name="grouping" id="grouping" />
        <input autocomplete="off" type="hidden" name="exact_color_match" id="exact_color_match" />
        <input autocomplete="off" value="true" type="hidden" name="hide_proxies" id="hide_proxies" />

        <input type="submit" name="commit" value="Search" class="p-2 bg-background text-grey-text rounded-r-md border border-highlight hover:cursor-pointer hover:bg-gray-700" data-disable-with="Search" />
      </div>

        
<div data-controller="dialog" class="mt-2">
  <p class="text-xs text-grey-text">
    Search by name, or
    <button
      type="button"
      data-action="click->dialog#open"
      class="underline cursor-pointer text-accent-50 hover:text-nine-white"
    >
      use advanced syntax
    </button>
  </p>

  <dialog
    data-dialog-target="dialog"
    data-action="click->dialog#closeOnBackdrop keydown.esc->dialog#close"
    class="
      fixed p-0 m-0 border rounded-lg top-1/2 left-1/2 -translate-x-1/2
      -translate-y-1/2 bg-foreground border-highlight backdrop:bg-black/50
    "
  >
    <div class="w-[52rem] max-w-[92vw] max-h-[85vh] p-6 overflow-y-auto">
      <div class="flex items-start justify-between mb-1">
        <h3 class="text-lg font-semibold text-nine-white">Advanced search</h3>

        <button
          type="button"
          data-action="click->dialog#close"
          class="cursor-pointer text-grey-text hover:text-nine-white"
          aria-label="Close"
        >
          <svg
            class="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>

      <p class="mb-5 text-sm text-grey-text">
        Terms combine with AND, so
        <code class="text-accent-50">c:b t:creature</code> finds black
        creatures. Anything that isn't a term is matched against the card name.
      </p>

      <div class="grid gap-6 md:grid-cols-2">
        <div>
          <h4
            class="
              mb-2 text-xs font-semibold tracking-wide uppercase
              text-nine-white
            "
          >
            Fields
          </h4>

          <dl class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
              <dt class="font-mono whitespace-nowrap text-accent-50">
                c:

                  <span class="text-grey-text">/</span>
                  id:
              </dt>

              <dd class="text-grey-text">color, color identity</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                t:

              </dt>

              <dd class="text-grey-text">card type, subtype or supertype</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                r:

              </dt>

              <dd class="text-grey-text">rarity</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                o:

              </dt>

              <dd class="text-grey-text">oracle text</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                n:

                  <span class="text-grey-text">/</span>
                  m:
              </dt>

              <dd class="text-grey-text">name, mana cost</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                mv:

              </dt>

              <dd class="text-grey-text">mana value</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                pow:

                  <span class="text-grey-text">/</span>
                  tou:
              </dt>

              <dd class="text-grey-text">power, toughness</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                s:

              </dt>

              <dd class="text-grey-text">set code</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                kw:

                  <span class="text-grey-text">/</span>
                  a:
              </dt>

              <dd class="text-grey-text">keyword, artist</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                role:

                  <span class="text-grey-text">/</span>
                  effect:
              </dt>

              <dd class="text-grey-text">what a card does - ramp, removal, mana_rock</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                commander:

              </dt>

              <dd class="text-grey-text">legal in that commander&#39;s color identity</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                rank:

                  <span class="text-grey-text">/</span>
                  edhrec:
              </dt>

              <dd class="text-grey-text">EDHREC rank - higher is less played</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                salt:

              </dt>

              <dd class="text-grey-text">EDHREC saltiness</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                f:

                  <span class="text-grey-text">/</span>
                  banned:
              </dt>

              <dd class="text-grey-text">legal in / banned in a format</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                is:

              </dt>

              <dd class="text-grey-text">commander, token, reprint, reserved, dfc, colorless, foil, etched</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                qty:

                  <span class="text-grey-text">/</span>
                  needed:
              </dt>

              <dd class="text-grey-text">copies you own, cards marked needed</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                foil:

                  <span class="text-grey-text">/</span>
                  proxy:
              </dt>

              <dd class="text-grey-text">true or false</dd>
              <dt class="font-mono whitespace-nowrap text-accent-50">
                usd:

                  <span class="text-grey-text">/</span>
                  change:
              </dt>

              <dd class="text-grey-text">price, weekly price change</dd>
          </dl>
        </div>

        <div class="flex flex-col gap-6">
          <div>
            <h4
              class="
                mb-2 text-xs font-semibold tracking-wide uppercase
                text-nine-white
              "
            >
              Operators
            </h4>

            <dl class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 text-sm">
                <dt class="font-mono whitespace-nowrap text-accent-50">
                  :
                </dt>

                <dd class="text-grey-text">
                  contains or matches part of
                  <span class="font-mono text-xs">— t:goblin</span>
                </dd>
                <dt class="font-mono whitespace-nowrap text-accent-50">
                  =
                </dt>

                <dd class="text-grey-text">
                  is exactly
                  <span class="font-mono text-xs">— t=creature</span>
                </dd>
                <dt class="font-mono whitespace-nowrap text-accent-50">
                  !=
                </dt>

                <dd class="text-grey-text">
                  is not exactly
                  <span class="font-mono text-xs">— r!=rare</span>
                </dd>
                <dt class="font-mono whitespace-nowrap text-accent-50">
                  &gt;= &lt;= &gt; &lt;
                </dt>

                <dd class="text-grey-text">
                  compares
                  <span class="font-mono text-xs">— mv&lt;=3</span>
                </dd>
                <dt class="font-mono whitespace-nowrap text-accent-50">
                  -
                </dt>

                <dd class="text-grey-text">
                  excludes
                  <span class="font-mono text-xs">— -t:legendary</span>
                </dd>
                <dt class="font-mono whitespace-nowrap text-accent-50">
                  &quot; &quot;
                </dt>

                <dd class="text-grey-text">
                  groups a phrase
                  <span class="font-mono text-xs">— o:&quot;draw a card&quot;</span>
                </dd>
            </dl>
          </div>

          <div>
            <h4
              class="
                mb-2 text-xs font-semibold tracking-wide uppercase
                text-nine-white
              "
            >
              Examples
            </h4>

            <ul class="flex flex-col gap-2 text-sm">
                <li>
                  <span class="font-mono text-accent-50">c:b t:creature r:uncommon</span>

                  <span class="block text-xs text-grey-text">
                    black uncommon creatures
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">t:goblin -t:legendary mv&lt;=3</span>

                  <span class="block text-xs text-grey-text">
                    cheap non-legendary goblins
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">o:&quot;draw a card&quot; c&gt;=wu</span>

                  <span class="block text-xs text-grey-text">
                    azorius cantrips
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">f:commander pow&gt;=5 kw:flying</span>

                  <span class="block text-xs text-grey-text">
                    big commander-legal fliers
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">r&gt;=rare usd&gt;=20 qty&gt;=4</span>

                  <span class="block text-xs text-grey-text">
                    rares worth $20+ you own a playset of
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">c:c t:artifact foil:true</span>

                  <span class="block text-xs text-grey-text">
                    colorless artifacts you own in foil
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">commander:prossh role:sacrifice qty&gt;=1</span>

                  <span class="block text-xs text-grey-text">
                    sac outlets you own that are legal under Prossh
                  </span>
                </li>
                <li>
                  <span class="font-mono text-accent-50">role:ramp rank&gt;8000 qty&gt;=1</span>

                  <span class="block text-xs text-grey-text">
                    ramp you own that almost nobody plays
                  </span>
                </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </dialog>
</div>

    </div>
  </div>

  <!-- Mana Filter -->
  <div class="w-auto">
    <div class="flex flex-col">
      <h3 class="mb-2 text-grey-text">Mana</h3>

      <div class="flex flex-row flex-wrap items-center gap-2">
        <div class="flex flex-row flex-wrap">
            <button
              type="button"
              data-action="click->multiselect#toggle"
              data-multiselect-target="item"
              data-multiselect-group="mana"
              data-value="B"
              class="
                cursor-pointer rounded-full p-1 transition border-2
                border-transparent data-selected:border-accent-50
                data-selected:bg-accent-50/20
              "
            >
              <i class="no-tailwind ms ms-cost ml-0 ms-b"></i>
            </button>
            <button
              type="button"
              data-action="click->multiselect#toggle"
              data-multiselect-target="item"
              data-multiselect-group="mana"
              data-value="U"
              class="
                cursor-pointer rounded-full p-1 transition border-2
                border-transparent data-selected:border-accent-50
                data-selected:bg-accent-50/20
              "
            >
              <i class="no-tailwind ms ms-cost ml-0 ms-u"></i>
            </button>
            <button
              type="button"
              data-action="click->multiselect#toggle"
              data-multiselect-target="item"
              data-multiselect-group="mana"
              data-value="W"
              class="
                cursor-pointer rounded-full p-1 transition border-2
                border-transparent data-selected:border-accent-50
                data-selected:bg-accent-50/20
              "
            >
              <i class="no-tailwind ms ms-cost ml-0 ms-w"></i>
            </button>
            <button
              type="button"
              data-action="click->multiselect#toggle"
              data-multiselect-target="item"
              data-multiselect-group="mana"
              data-value="R"
              class="
                cursor-pointer rounded-full p-1 transition border-2
                border-transparent data-selected:border-accent-50
                data-selected:bg-accent-50/20
              "
            >
              <i class="no-tailwind ms ms-cost ml-0 ms-r"></i>
            </button>
            <button
              type="button"
              data-action="click->multiselect#toggle"
              data-multiselect-target="item"
              data-multiselect-group="mana"
              data-value="G"
              class="
                cursor-pointer rounded-full p-1 transition border-2
                border-transparent data-selected:border-accent-50
                data-selected:bg-accent-50/20
              "
            >
              <i class="no-tailwind ms ms-cost ml-0 ms-g"></i>
            </button>
            <button
              type="button"
              data-action="click->multiselect#toggle"
              data-multiselect-target="item"
              data-multiselect-group="mana"
              data-value="C"
              class="
                cursor-pointer rounded-full p-1 transition border-2
                border-transparent data-selected:border-accent-50
                data-selected:bg-accent-50/20
              "
            >
              <i class="no-tailwind ms ms-cost ml-0 ms-c"></i>
            </button>
        </div>

        <button
          type="button"
          data-action="click->search-filter#toggleExactColor"
          data-search-filter-target="exactColorButton"
          class="cursor-pointer px-3 py-1 text-xs rounded-lg transition border-2 border-transparent bg-background text-grey-text hover:bg-menu"
        >
          Exact
        </button>
      </div>

      <p class="mt-2 text-xs text-grey-text">Select color to filter by</p>
    </div>
  </div>

  <!-- Rarity Filter -->
  <div class="w-auto">
    <div class="flex flex-col">
      <h3 class="mb-2 text-grey-text">Rarity</h3>

      <div class="flex flex-row flex-wrap">
          <button
            type="button"
            data-action="click->multiselect#toggle"
            data-multiselect-target="item"
            data-multiselect-group="rarity"
            data-value="mythic"
            class="
              cursor-pointer rounded-full p-1 transition border-2
              border-transparent data-selected:border-accent-50
              data-selected:bg-accent-50/20
            "
          >
            <i class="no-tailwind ml-0 ss ss-mythic ms-2x"></i>
          </button>
          <button
            type="button"
            data-action="click->multiselect#toggle"
            data-multiselect-target="item"
            data-multiselect-group="rarity"
            data-value="rare"
            class="
              cursor-pointer rounded-full p-1 transition border-2
              border-transparent data-selected:border-accent-50
              data-selected:bg-accent-50/20
            "
          >
            <i class="no-tailwind ml-0 ss ss-rare ms-2x"></i>
          </button>
          <button
            type="button"
            data-action="click->multiselect#toggle"
            data-multiselect-target="item"
            data-multiselect-group="rarity"
            data-value="uncommon"
            class="
              cursor-pointer rounded-full p-1 transition border-2
              border-transparent data-selected:border-accent-50
              data-selected:bg-accent-50/20
            "
          >
            <i class="no-tailwind ml-0 ss ss-uncommon ms-2x"></i>
          </button>
          <button
            type="button"
            data-action="click->multiselect#toggle"
            data-multiselect-target="item"
            data-multiselect-group="rarity"
            data-value="common"
            class="
              cursor-pointer rounded-full p-1 transition border-2
              border-transparent data-selected:border-accent-50
              data-selected:bg-accent-50/20
            "
          >
            <i class="no-tailwind ml-0 ss ss-common ms-2x"></i>
          </button>
      </div>

      <p class="mt-2 text-xs text-grey-text">Select rarity to filter by</p>
    </div>
  </div>


  <!-- Hidden fields for selected filters -->
  <div id="filter-hidden-fields" class="hidden"></div>
</form>
</template></turbo-stream>
<turbo-stream action="update" target="table-container"><template>
    
<!-- Mobile Card View -->
<div class="lg:hidden mb-24 max-w-full">
    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="23860"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dsk ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Funeral Room 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Enchantment — Room
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              10%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.21
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Funeral Room // Awakening Hall" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/4/8/48237c98-5067-47a8-af74-7b9bce57c6a4.jpg?1783909480" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Funeral Room 
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Enchantment — Room</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <div data-controller="card-flip" class="flex flex-col items-center">
          <div
            data-action="click->card-flip#flip"
            class="flip-container cursor-pointer w-full max-w-xs mx-auto"
          >
            <div data-card-flip-target="card" class="flip-card">
              <div class="flip-card-front">
                <img class="w-full h-auto rounded-2xl" alt="Funeral Room // Awakening Hall" src="https://cards.scryfall.io/large/front/4/8/48237c98-5067-47a8-af74-7b9bce57c6a4.jpg?1783909480" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Funeral Room // Awakening Hall" src="https://cards.scryfall.io/large/front/4/8/48237c98-5067-47a8-af74-7b9bce57c6a4.jpg?1783909480" />
              </div>
            </div>
          </div>

          <p class="mt-2 text-sm text-grey-text">Tap card to flip</p>
        </div>
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.21
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  10%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.27
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$5.00</span>
              <span class="text-xs text-grey-text">Credit: $6.50</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-12&quot;:6.81},{&quot;2026-06-13&quot;:6.84},{&quot;2026-06-14&quot;:6.84},{&quot;2026-06-15&quot;:6.84},{&quot;2026-06-16&quot;:6.84},{&quot;2026-06-17&quot;:6.84},{&quot;2026-06-18&quot;:6.84},{&quot;2026-06-19&quot;:6.84},{&quot;2026-06-20&quot;:6.84},{&quot;2026-06-21&quot;:6.84},{&quot;2026-06-22&quot;:6.84},{&quot;2026-06-23&quot;:6.84},{&quot;2026-06-24&quot;:6.84},{&quot;2026-06-25&quot;:6.82},{&quot;2026-06-26&quot;:6.79},{&quot;2026-06-27&quot;:6.79},{&quot;2026-06-28&quot;:6.79},{&quot;2026-06-29&quot;:6.79},{&quot;2026-06-30&quot;:6.79},{&quot;2026-07-01&quot;:6.79},{&quot;2026-07-02&quot;:6.79},{&quot;2026-07-03&quot;:6.75},{&quot;2026-07-04&quot;:6.75},{&quot;2026-07-05&quot;:6.75},{&quot;2026-07-06&quot;:6.75},{&quot;2026-07-07&quot;:6.75},{&quot;2026-07-08&quot;:6.75},{&quot;2026-07-09&quot;:6.75},{&quot;2026-07-10&quot;:6.75},{&quot;2026-07-11&quot;:6.63},{&quot;2026-07-12&quot;:6.63},{&quot;2026-07-13&quot;:6.63},{&quot;2026-07-14&quot;:6.63},{&quot;2026-07-15&quot;:6.63},{&quot;2026-07-16&quot;:6.63},{&quot;2026-07-17&quot;:6.63},{&quot;2026-07-18&quot;:6.63},{&quot;2026-07-19&quot;:6.63},{&quot;2026-07-20&quot;:6.67},{&quot;2026-07-21&quot;:6.82},{&quot;2026-07-23&quot;:6.91},{&quot;2026-07-24&quot;:6.91},{&quot;2026-07-25&quot;:6.91},{&quot;2026-07-26&quot;:6.91},{&quot;2026-07-27&quot;:6.91},{&quot;2026-07-28&quot;:6.91},{&quot;2026-07-29&quot;:6.91},{&quot;2026-07-30&quot;:6.91},{&quot;2026-07-31&quot;:6.91},{&quot;2026-08-01&quot;:6.91},{&quot;2026-08-02&quot;:6.91},{&quot;2026-08-03&quot;:6.91},{&quot;2026-08-04&quot;:6.91},{&quot;2026-08-05&quot;:6.8},{&quot;2026-08-07&quot;:6.62},{&quot;2026-08-08&quot;:6.48},{&quot;2026-08-09&quot;:6.48},{&quot;2026-08-10&quot;:6.48},{&quot;2026-08-11&quot;:6.42},{&quot;2026-08-12&quot;:6.55},{&quot;2026-08-13&quot;:6.55},{&quot;2026-08-14&quot;:6.65},{&quot;2026-08-15&quot;:6.61},{&quot;2026-08-16&quot;:6.61},{&quot;2026-08-17&quot;:6.61},{&quot;2026-08-18&quot;:6.54},{&quot;2026-08-19&quot;:6.44},{&quot;2026-08-20&quot;:6.44},{&quot;2026-08-21&quot;:6.45},{&quot;2026-08-22&quot;:6.45},{&quot;2026-08-23&quot;:6.35},{&quot;2026-08-24&quot;:6.26},{&quot;2026-08-25&quot;:6.26},{&quot;2026-08-26&quot;:6.26},{&quot;2026-08-27&quot;:6.24},{&quot;2026-08-28&quot;:6.07},{&quot;2026-08-29&quot;:6.07},{&quot;2026-08-30&quot;:6.07},{&quot;2026-08-31&quot;:6.13},{&quot;2026-09-01&quot;:6.13},{&quot;2026-09-02&quot;:6.56},{&quot;2026-09-03&quot;:6.56},{&quot;2026-09-04&quot;:6.45},{&quot;2026-09-05&quot;:6.45},{&quot;2026-09-06&quot;:6.25},{&quot;2026-09-07&quot;:6.25},{&quot;2026-09-08&quot;:6.2},{&quot;2026-09-09&quot;:6.31},{&quot;2026-09-10&quot;:6.24},{&quot;2026-09-11&quot;:6.27}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:6.02},{&quot;2026-06-13&quot;:6.17},{&quot;2026-06-14&quot;:6.15},{&quot;2026-06-15&quot;:5.99},{&quot;2026-06-16&quot;:5.91},{&quot;2026-06-17&quot;:5.63},{&quot;2026-06-18&quot;:5.42},{&quot;2026-06-19&quot;:5.22},{&quot;2026-06-20&quot;:5.12},{&quot;2026-06-21&quot;:5.19},{&quot;2026-06-22&quot;:5.25},{&quot;2026-06-23&quot;:5.25},{&quot;2026-06-24&quot;:5.47},{&quot;2026-06-25&quot;:5.62},{&quot;2026-06-26&quot;:5.46},{&quot;2026-06-27&quot;:5.48},{&quot;2026-06-28&quot;:5.54},{&quot;2026-06-29&quot;:5.54},{&quot;2026-06-30&quot;:5.74},{&quot;2026-07-01&quot;:5.97},{&quot;2026-07-02&quot;:5.84},{&quot;2026-07-03&quot;:5.55},{&quot;2026-07-04&quot;:5.69},{&quot;2026-07-05&quot;:5.72},{&quot;2026-07-06&quot;:5.56},{&quot;2026-07-07&quot;:5.48},{&quot;2026-07-08&quot;:5.63},{&quot;2026-07-09&quot;:5.4},{&quot;2026-07-10&quot;:5.15},{&quot;2026-07-11&quot;:5.12},{&quot;2026-07-12&quot;:4.99},{&quot;2026-07-13&quot;:5.18},{&quot;2026-07-14&quot;:5.21},{&quot;2026-07-15&quot;:4.99},{&quot;2026-07-16&quot;:4.93},{&quot;2026-07-17&quot;:5.17},{&quot;2026-07-18&quot;:5.39},{&quot;2026-07-19&quot;:5.53},{&quot;2026-07-20&quot;:5.61},{&quot;2026-07-21&quot;:5.8},{&quot;2026-07-23&quot;:5.88},{&quot;2026-07-24&quot;:5.86},{&quot;2026-07-25&quot;:5.85},{&quot;2026-07-26&quot;:5.84},{&quot;2026-07-27&quot;:5.88},{&quot;2026-07-28&quot;:5.86},{&quot;2026-07-29&quot;:6.04},{&quot;2026-07-30&quot;:6.17},{&quot;2026-07-31&quot;:6.27},{&quot;2026-08-01&quot;:6.28},{&quot;2026-08-02&quot;:6.46},{&quot;2026-08-03&quot;:6.54},{&quot;2026-08-04&quot;:6.48},{&quot;2026-08-05&quot;:6.85},{&quot;2026-08-07&quot;:7.25},{&quot;2026-08-08&quot;:7.14},{&quot;2026-08-09&quot;:7.07},{&quot;2026-08-10&quot;:6.9},{&quot;2026-08-11&quot;:6.99},{&quot;2026-08-12&quot;:6.98},{&quot;2026-08-13&quot;:6.72},{&quot;2026-08-14&quot;:6.82},{&quot;2026-08-15&quot;:7.11},{&quot;2026-08-16&quot;:7.06},{&quot;2026-08-17&quot;:6.87},{&quot;2026-08-18&quot;:6.39},{&quot;2026-08-19&quot;:6.55},{&quot;2026-08-20&quot;:6.55},{&quot;2026-08-21&quot;:6.58},{&quot;2026-08-22&quot;:6.58},{&quot;2026-08-23&quot;:6.53},{&quot;2026-08-24&quot;:6.58},{&quot;2026-08-25&quot;:6.67},{&quot;2026-08-26&quot;:7.25},{&quot;2026-08-27&quot;:7.16},{&quot;2026-08-28&quot;:6.99},{&quot;2026-08-29&quot;:6.99},{&quot;2026-08-30&quot;:6.51},{&quot;2026-08-31&quot;:6.52},{&quot;2026-09-01&quot;:6.6},{&quot;2026-09-02&quot;:6.42},{&quot;2026-09-03&quot;:6.47},{&quot;2026-09-04&quot;:6.72},{&quot;2026-09-05&quot;:6.92},{&quot;2026-09-06&quot;:6.96},{&quot;2026-09-07&quot;:6.96},{&quot;2026-09-08&quot;:6.85},{&quot;2026-09-09&quot;:6.59},{&quot;2026-09-10&quot;:6.57},{&quot;2026-09-11&quot;:6.21}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="79652"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tsr ss-special ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Dismember
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Instant
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $6.20
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Dismember" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/8/08d405dc-180f-4edb-8c53-80a034ee622e.jpg?1783927733" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Dismember
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            special
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Instant</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-bp'></i><i class='no-tailwind ms ms-cost ml-0 ms-bp'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Dismember" src="https://cards.scryfall.io/large/front/0/8/08d405dc-180f-4edb-8c53-80a034ee622e.jpg?1783927733" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.20
              </span>

            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $120.75
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  4%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.30</span>
              <span class="text-xs text-grey-text">Credit: $5.59</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:99.56},{&quot;2026-06-14&quot;:100.11},{&quot;2026-06-15&quot;:100.11},{&quot;2026-06-16&quot;:100.11},{&quot;2026-06-17&quot;:100.11},{&quot;2026-06-18&quot;:100.11},{&quot;2026-06-19&quot;:100.11},{&quot;2026-06-20&quot;:100.11},{&quot;2026-06-21&quot;:100.11},{&quot;2026-06-22&quot;:100.11},{&quot;2026-06-23&quot;:100.11},{&quot;2026-06-24&quot;:100.11},{&quot;2026-06-25&quot;:102.82},{&quot;2026-06-26&quot;:102.82},{&quot;2026-06-27&quot;:102.82},{&quot;2026-06-28&quot;:102.82},{&quot;2026-06-29&quot;:102.82},{&quot;2026-06-30&quot;:102.82},{&quot;2026-07-01&quot;:103.36},{&quot;2026-07-02&quot;:103.36},{&quot;2026-07-03&quot;:103.36},{&quot;2026-07-04&quot;:103.36},{&quot;2026-07-05&quot;:103.36},{&quot;2026-07-06&quot;:103.36},{&quot;2026-07-07&quot;:103.36},{&quot;2026-07-08&quot;:103.36},{&quot;2026-07-09&quot;:103.36},{&quot;2026-07-10&quot;:103.36},{&quot;2026-07-11&quot;:106.27},{&quot;2026-07-12&quot;:108.82},{&quot;2026-07-13&quot;:108.82},{&quot;2026-07-14&quot;:108.82},{&quot;2026-07-15&quot;:108.82},{&quot;2026-07-16&quot;:108.82},{&quot;2026-07-17&quot;:108.82},{&quot;2026-07-18&quot;:108.82},{&quot;2026-07-19&quot;:108.82},{&quot;2026-07-20&quot;:108.82},{&quot;2026-07-21&quot;:108.82},{&quot;2026-07-22&quot;:108.82},{&quot;2026-07-23&quot;:108.82},{&quot;2026-07-24&quot;:109.96},{&quot;2026-07-25&quot;:109.96},{&quot;2026-07-26&quot;:109.96},{&quot;2026-07-27&quot;:109.96},{&quot;2026-07-28&quot;:109.96},{&quot;2026-07-29&quot;:109.96},{&quot;2026-07-30&quot;:112.79},{&quot;2026-07-31&quot;:112.79},{&quot;2026-08-01&quot;:112.79},{&quot;2026-08-02&quot;:112.79},{&quot;2026-08-03&quot;:112.79},{&quot;2026-08-04&quot;:112.79},{&quot;2026-08-05&quot;:112.79},{&quot;2026-08-07&quot;:112.79},{&quot;2026-08-08&quot;:112.79},{&quot;2026-08-09&quot;:112.79},{&quot;2026-08-10&quot;:112.79},{&quot;2026-08-11&quot;:112.79},{&quot;2026-08-12&quot;:112.79},{&quot;2026-08-13&quot;:112.79},{&quot;2026-08-14&quot;:112.79},{&quot;2026-08-15&quot;:112.79},{&quot;2026-08-16&quot;:112.79},{&quot;2026-08-17&quot;:112.79},{&quot;2026-08-18&quot;:112.79},{&quot;2026-08-19&quot;:112.79},{&quot;2026-08-20&quot;:112.79},{&quot;2026-08-21&quot;:112.79},{&quot;2026-08-22&quot;:112.79},{&quot;2026-08-23&quot;:112.79},{&quot;2026-08-24&quot;:112.79},{&quot;2026-08-25&quot;:112.79},{&quot;2026-08-26&quot;:112.79},{&quot;2026-08-27&quot;:112.79},{&quot;2026-08-28&quot;:112.79},{&quot;2026-08-29&quot;:112.79},{&quot;2026-08-30&quot;:116.65},{&quot;2026-08-31&quot;:116.65},{&quot;2026-09-01&quot;:116.65},{&quot;2026-09-02&quot;:116.65},{&quot;2026-09-03&quot;:116.65},{&quot;2026-09-04&quot;:116.65},{&quot;2026-09-05&quot;:116.65},{&quot;2026-09-06&quot;:116.65},{&quot;2026-09-07&quot;:116.65},{&quot;2026-09-08&quot;:116.65},{&quot;2026-09-09&quot;:120.75},{&quot;2026-09-10&quot;:120.75},{&quot;2026-09-11&quot;:120.75}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:7.13},{&quot;2026-06-14&quot;:7.13},{&quot;2026-06-15&quot;:7.13},{&quot;2026-06-16&quot;:7.1},{&quot;2026-06-17&quot;:7.1},{&quot;2026-06-18&quot;:7.1},{&quot;2026-06-19&quot;:7.1},{&quot;2026-06-20&quot;:7.1},{&quot;2026-06-21&quot;:7.1},{&quot;2026-06-22&quot;:7.1},{&quot;2026-06-23&quot;:7.1},{&quot;2026-06-24&quot;:7.17},{&quot;2026-06-25&quot;:7.17},{&quot;2026-06-26&quot;:7.03},{&quot;2026-06-27&quot;:7.03},{&quot;2026-06-28&quot;:7.11},{&quot;2026-06-29&quot;:7.09},{&quot;2026-06-30&quot;:6.98},{&quot;2026-07-01&quot;:6.83},{&quot;2026-07-02&quot;:6.83},{&quot;2026-07-03&quot;:6.73},{&quot;2026-07-04&quot;:6.73},{&quot;2026-07-05&quot;:6.55},{&quot;2026-07-06&quot;:6.52},{&quot;2026-07-07&quot;:6.49},{&quot;2026-07-08&quot;:6.49},{&quot;2026-07-09&quot;:6.47},{&quot;2026-07-10&quot;:6.49},{&quot;2026-07-11&quot;:6.47},{&quot;2026-07-12&quot;:6.47},{&quot;2026-07-13&quot;:6.47},{&quot;2026-07-14&quot;:6.47},{&quot;2026-07-15&quot;:6.47},{&quot;2026-07-16&quot;:6.41},{&quot;2026-07-17&quot;:6.41},{&quot;2026-07-18&quot;:6.34},{&quot;2026-07-19&quot;:6.34},{&quot;2026-07-20&quot;:6.3},{&quot;2026-07-21&quot;:6.26},{&quot;2026-07-22&quot;:6.18},{&quot;2026-07-23&quot;:6.24},{&quot;2026-07-24&quot;:6.24},{&quot;2026-07-25&quot;:6.24},{&quot;2026-07-26&quot;:6.19},{&quot;2026-07-27&quot;:6.17},{&quot;2026-07-28&quot;:6.08},{&quot;2026-07-29&quot;:6.05},{&quot;2026-07-30&quot;:5.99},{&quot;2026-07-31&quot;:6.05},{&quot;2026-08-01&quot;:6.06},{&quot;2026-08-02&quot;:6.06},{&quot;2026-08-03&quot;:6.06},{&quot;2026-08-04&quot;:6.3},{&quot;2026-08-05&quot;:6.29},{&quot;2026-08-07&quot;:6.32},{&quot;2026-08-08&quot;:6.32},{&quot;2026-08-09&quot;:6.32},{&quot;2026-08-10&quot;:6.32},{&quot;2026-08-11&quot;:6.4},{&quot;2026-08-12&quot;:6.41},{&quot;2026-08-13&quot;:6.41},{&quot;2026-08-14&quot;:6.41},{&quot;2026-08-15&quot;:6.41},{&quot;2026-08-16&quot;:6.43},{&quot;2026-08-17&quot;:6.43},{&quot;2026-08-18&quot;:6.45},{&quot;2026-08-19&quot;:6.45},{&quot;2026-08-20&quot;:6.45},{&quot;2026-08-21&quot;:6.46},{&quot;2026-08-22&quot;:6.44},{&quot;2026-08-23&quot;:6.46},{&quot;2026-08-24&quot;:6.41},{&quot;2026-08-25&quot;:6.37},{&quot;2026-08-26&quot;:6.37},{&quot;2026-08-27&quot;:6.37},{&quot;2026-08-28&quot;:6.37},{&quot;2026-08-29&quot;:6.37},{&quot;2026-08-30&quot;:6.4},{&quot;2026-08-31&quot;:6.38},{&quot;2026-09-01&quot;:6.38},{&quot;2026-09-02&quot;:6.38},{&quot;2026-09-03&quot;:6.19},{&quot;2026-09-04&quot;:6.19},{&quot;2026-09-05&quot;:6.2},{&quot;2026-09-06&quot;:6.2},{&quot;2026-09-07&quot;:6.2},{&quot;2026-09-08&quot;:6.19},{&quot;2026-09-09&quot;:6.18},{&quot;2026-09-10&quot;:6.19},{&quot;2026-09-11&quot;:6.2}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="34493"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-ice ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Jeweled Amulet
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $6.19
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Jeweled Amulet" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/4/34f7bad2-d28f-42d2-9246-fe3545ef49a7.jpg?1783947458" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Jeweled Amulet
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-0'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Jeweled Amulet" src="https://cards.scryfall.io/large/front/3/4/34f7bad2-d28f-42d2-9246-fe3545ef49a7.jpg?1783947458" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.19
              </span>

            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$5.00</span>
              <span class="text-xs text-grey-text">Credit: $6.50</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:10.44},{&quot;2026-06-14&quot;:10.44},{&quot;2026-06-15&quot;:10.43},{&quot;2026-06-16&quot;:10.58},{&quot;2026-06-17&quot;:10.58},{&quot;2026-06-18&quot;:10.49},{&quot;2026-06-19&quot;:10.51},{&quot;2026-06-20&quot;:10.42},{&quot;2026-06-21&quot;:10.42},{&quot;2026-06-22&quot;:10.43},{&quot;2026-06-23&quot;:10.29},{&quot;2026-06-24&quot;:10.3},{&quot;2026-06-25&quot;:10.3},{&quot;2026-06-26&quot;:10.3},{&quot;2026-06-27&quot;:10.3},{&quot;2026-06-28&quot;:10.28},{&quot;2026-06-29&quot;:10.16},{&quot;2026-06-30&quot;:10.11},{&quot;2026-07-01&quot;:10.11},{&quot;2026-07-02&quot;:10.11},{&quot;2026-07-03&quot;:10.11},{&quot;2026-07-04&quot;:10.09},{&quot;2026-07-05&quot;:10.04},{&quot;2026-07-06&quot;:9.76},{&quot;2026-07-07&quot;:9.76},{&quot;2026-07-08&quot;:9.76},{&quot;2026-07-09&quot;:10.08},{&quot;2026-07-10&quot;:9.76},{&quot;2026-07-11&quot;:9.4},{&quot;2026-07-12&quot;:9.4},{&quot;2026-07-13&quot;:9.02},{&quot;2026-07-14&quot;:8.72},{&quot;2026-07-15&quot;:8.83},{&quot;2026-07-16&quot;:8.83},{&quot;2026-07-17&quot;:8.83},{&quot;2026-07-18&quot;:8.75},{&quot;2026-07-19&quot;:8.69},{&quot;2026-07-20&quot;:8.69},{&quot;2026-07-21&quot;:8.69},{&quot;2026-07-22&quot;:8.69},{&quot;2026-07-23&quot;:8.69},{&quot;2026-07-24&quot;:8.69},{&quot;2026-07-25&quot;:8.69},{&quot;2026-07-26&quot;:8.64},{&quot;2026-07-27&quot;:8.48},{&quot;2026-07-28&quot;:8.48},{&quot;2026-07-29&quot;:8.48},{&quot;2026-07-30&quot;:8.48},{&quot;2026-07-31&quot;:8.63},{&quot;2026-08-01&quot;:8.63},{&quot;2026-08-02&quot;:8.63},{&quot;2026-08-03&quot;:8.47},{&quot;2026-08-04&quot;:8.47},{&quot;2026-08-05&quot;:8.41},{&quot;2026-08-07&quot;:8.41},{&quot;2026-08-08&quot;:8.38},{&quot;2026-08-09&quot;:8.07},{&quot;2026-08-10&quot;:8.07},{&quot;2026-08-11&quot;:7.94},{&quot;2026-08-12&quot;:7.78},{&quot;2026-08-13&quot;:7.78},{&quot;2026-08-14&quot;:7.78},{&quot;2026-08-15&quot;:7.66},{&quot;2026-08-16&quot;:7.58},{&quot;2026-08-17&quot;:7.58},{&quot;2026-08-18&quot;:7.56},{&quot;2026-08-19&quot;:7.29},{&quot;2026-08-20&quot;:7.05},{&quot;2026-08-21&quot;:7.05},{&quot;2026-08-22&quot;:7.05},{&quot;2026-08-23&quot;:7.03},{&quot;2026-08-24&quot;:7.03},{&quot;2026-08-25&quot;:6.92},{&quot;2026-08-26&quot;:6.92},{&quot;2026-08-27&quot;:6.91},{&quot;2026-08-28&quot;:6.48},{&quot;2026-08-29&quot;:6.48},{&quot;2026-08-30&quot;:6.22},{&quot;2026-08-31&quot;:6.22},{&quot;2026-09-01&quot;:6.22},{&quot;2026-09-02&quot;:6.12},{&quot;2026-09-03&quot;:6.12},{&quot;2026-09-04&quot;:6.16},{&quot;2026-09-05&quot;:6.16},{&quot;2026-09-06&quot;:6.13},{&quot;2026-09-07&quot;:5.97},{&quot;2026-09-08&quot;:5.97},{&quot;2026-09-09&quot;:5.97},{&quot;2026-09-10&quot;:6.04},{&quot;2026-09-11&quot;:6.19}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="80175"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-uma ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Back to Basics
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Enchantment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $6.19
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Back to Basics" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/6/0600d6c2-0f72-4e79-a55d-1f06dffa48c2.jpg?1783933849" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Back to Basics
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Enchantment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Back to Basics" src="https://cards.scryfall.io/large/front/0/6/0600d6c2-0f72-4e79-a55d-1f06dffa48c2.jpg?1783933849" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.19
              </span>

            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $9.23
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.50</span>
              <span class="text-xs text-grey-text">Credit: $3.25</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:9.94},{&quot;2026-06-14&quot;:9.94},{&quot;2026-06-15&quot;:9.94},{&quot;2026-06-16&quot;:9.94},{&quot;2026-06-17&quot;:9.91},{&quot;2026-06-18&quot;:9.91},{&quot;2026-06-19&quot;:9.91},{&quot;2026-06-20&quot;:9.91},{&quot;2026-06-21&quot;:9.9},{&quot;2026-06-22&quot;:9.9},{&quot;2026-06-23&quot;:9.91},{&quot;2026-06-24&quot;:9.7},{&quot;2026-06-25&quot;:9.7},{&quot;2026-06-26&quot;:9.7},{&quot;2026-06-27&quot;:9.7},{&quot;2026-06-28&quot;:9.7},{&quot;2026-06-29&quot;:9.7},{&quot;2026-06-30&quot;:9.7},{&quot;2026-07-01&quot;:9.7},{&quot;2026-07-02&quot;:9.7},{&quot;2026-07-03&quot;:9.7},{&quot;2026-07-04&quot;:9.7},{&quot;2026-07-05&quot;:9.71},{&quot;2026-07-06&quot;:9.71},{&quot;2026-07-07&quot;:9.71},{&quot;2026-07-08&quot;:9.71},{&quot;2026-07-09&quot;:9.71},{&quot;2026-07-10&quot;:9.71},{&quot;2026-07-11&quot;:9.71},{&quot;2026-07-12&quot;:9.71},{&quot;2026-07-13&quot;:9.71},{&quot;2026-07-14&quot;:9.71},{&quot;2026-07-15&quot;:9.71},{&quot;2026-07-16&quot;:9.71},{&quot;2026-07-17&quot;:9.71},{&quot;2026-07-18&quot;:9.71},{&quot;2026-07-19&quot;:9.71},{&quot;2026-07-20&quot;:9.71},{&quot;2026-07-21&quot;:9.71},{&quot;2026-07-22&quot;:9.71},{&quot;2026-07-23&quot;:9.61},{&quot;2026-07-24&quot;:9.61},{&quot;2026-07-25&quot;:9.61},{&quot;2026-07-26&quot;:9.61},{&quot;2026-07-27&quot;:9.63},{&quot;2026-07-28&quot;:9.63},{&quot;2026-07-29&quot;:9.63},{&quot;2026-07-30&quot;:9.63},{&quot;2026-07-31&quot;:9.63},{&quot;2026-08-01&quot;:9.63},{&quot;2026-08-02&quot;:9.63},{&quot;2026-08-03&quot;:9.63},{&quot;2026-08-04&quot;:9.63},{&quot;2026-08-05&quot;:9.63},{&quot;2026-08-07&quot;:9.53},{&quot;2026-08-08&quot;:9.53},{&quot;2026-08-09&quot;:9.53},{&quot;2026-08-10&quot;:9.53},{&quot;2026-08-11&quot;:9.53},{&quot;2026-08-12&quot;:9.53},{&quot;2026-08-13&quot;:9.53},{&quot;2026-08-14&quot;:9.53},{&quot;2026-08-15&quot;:9.53},{&quot;2026-08-16&quot;:9.53},{&quot;2026-08-17&quot;:9.39},{&quot;2026-08-18&quot;:9.39},{&quot;2026-08-19&quot;:9.39},{&quot;2026-08-20&quot;:9.39},{&quot;2026-08-21&quot;:9.39},{&quot;2026-08-22&quot;:9.39},{&quot;2026-08-23&quot;:9.39},{&quot;2026-08-24&quot;:9.39},{&quot;2026-08-25&quot;:9.39},{&quot;2026-08-26&quot;:9.39},{&quot;2026-08-27&quot;:9.28},{&quot;2026-08-28&quot;:9.28},{&quot;2026-08-29&quot;:9.28},{&quot;2026-08-30&quot;:9.28},{&quot;2026-08-31&quot;:9.19},{&quot;2026-09-01&quot;:9.19},{&quot;2026-09-02&quot;:9.2},{&quot;2026-09-03&quot;:9.2},{&quot;2026-09-04&quot;:9.2},{&quot;2026-09-05&quot;:9.2},{&quot;2026-09-06&quot;:9.2},{&quot;2026-09-07&quot;:9.2},{&quot;2026-09-08&quot;:9.2},{&quot;2026-09-09&quot;:9.2},{&quot;2026-09-10&quot;:9.23},{&quot;2026-09-11&quot;:9.23}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:6.24},{&quot;2026-06-14&quot;:6.24},{&quot;2026-06-15&quot;:6.21},{&quot;2026-06-16&quot;:6.25},{&quot;2026-06-17&quot;:6.18},{&quot;2026-06-18&quot;:6.39},{&quot;2026-06-19&quot;:6.41},{&quot;2026-06-20&quot;:6.4},{&quot;2026-06-21&quot;:6.4},{&quot;2026-06-22&quot;:6.4},{&quot;2026-06-23&quot;:6.39},{&quot;2026-06-24&quot;:6.45},{&quot;2026-06-25&quot;:6.5},{&quot;2026-06-26&quot;:6.5},{&quot;2026-06-27&quot;:6.54},{&quot;2026-06-28&quot;:6.54},{&quot;2026-06-29&quot;:6.65},{&quot;2026-06-30&quot;:6.65},{&quot;2026-07-01&quot;:6.65},{&quot;2026-07-02&quot;:6.65},{&quot;2026-07-03&quot;:6.52},{&quot;2026-07-04&quot;:6.5},{&quot;2026-07-05&quot;:6.58},{&quot;2026-07-06&quot;:6.61},{&quot;2026-07-07&quot;:6.46},{&quot;2026-07-08&quot;:6.46},{&quot;2026-07-09&quot;:6.37},{&quot;2026-07-10&quot;:6.21},{&quot;2026-07-11&quot;:6.36},{&quot;2026-07-12&quot;:6.2},{&quot;2026-07-13&quot;:6.32},{&quot;2026-07-14&quot;:6.32},{&quot;2026-07-15&quot;:6.34},{&quot;2026-07-16&quot;:6.27},{&quot;2026-07-17&quot;:6.27},{&quot;2026-07-18&quot;:6.27},{&quot;2026-07-19&quot;:6.27},{&quot;2026-07-20&quot;:6.32},{&quot;2026-07-21&quot;:6.32},{&quot;2026-07-22&quot;:6.46},{&quot;2026-07-23&quot;:6.46},{&quot;2026-07-24&quot;:6.44},{&quot;2026-07-25&quot;:6.56},{&quot;2026-07-26&quot;:6.58},{&quot;2026-07-27&quot;:6.54},{&quot;2026-07-28&quot;:6.61},{&quot;2026-07-29&quot;:6.61},{&quot;2026-07-30&quot;:6.54},{&quot;2026-07-31&quot;:6.54},{&quot;2026-08-01&quot;:6.53},{&quot;2026-08-02&quot;:6.53},{&quot;2026-08-03&quot;:6.53},{&quot;2026-08-04&quot;:6.5},{&quot;2026-08-05&quot;:6.44},{&quot;2026-08-07&quot;:6.67},{&quot;2026-08-08&quot;:6.77},{&quot;2026-08-09&quot;:6.77},{&quot;2026-08-10&quot;:6.89},{&quot;2026-08-11&quot;:6.84},{&quot;2026-08-12&quot;:6.84},{&quot;2026-08-13&quot;:6.84},{&quot;2026-08-14&quot;:6.73},{&quot;2026-08-15&quot;:6.34},{&quot;2026-08-16&quot;:6.34},{&quot;2026-08-17&quot;:6.29},{&quot;2026-08-18&quot;:6.35},{&quot;2026-08-19&quot;:6.36},{&quot;2026-08-20&quot;:6.36},{&quot;2026-08-21&quot;:6.36},{&quot;2026-08-22&quot;:6.36},{&quot;2026-08-23&quot;:6.32},{&quot;2026-08-24&quot;:6.16},{&quot;2026-08-25&quot;:6.27},{&quot;2026-08-26&quot;:6.51},{&quot;2026-08-27&quot;:6.49},{&quot;2026-08-28&quot;:6.49},{&quot;2026-08-29&quot;:6.49},{&quot;2026-08-30&quot;:6.49},{&quot;2026-08-31&quot;:6.49},{&quot;2026-09-01&quot;:6.44},{&quot;2026-09-02&quot;:6.35},{&quot;2026-09-03&quot;:6.35},{&quot;2026-09-04&quot;:6.35},{&quot;2026-09-05&quot;:6.19},{&quot;2026-09-06&quot;:6.19},{&quot;2026-09-07&quot;:6.19},{&quot;2026-09-08&quot;:6.19},{&quot;2026-09-09&quot;:6.19},{&quot;2026-09-10&quot;:6.19},{&quot;2026-09-11&quot;:6.19}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="96770"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-spg ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Deafening Silence
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Enchantment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.19
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Deafening Silence" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/0/d0269de7-f273-44ac-806b-a36a5cfc6812.jpg?1783905795" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Deafening Silence
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Enchantment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Deafening Silence" src="https://cards.scryfall.io/large/front/d/0/d0269de7-f273-44ac-806b-a36a5cfc6812.jpg?1783905795" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.19
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $11.53
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  4%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.20</span>
              <span class="text-xs text-grey-text">Credit: $5.46</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:10.15},{&quot;2026-06-11&quot;:10.15},{&quot;2026-06-12&quot;:10.21},{&quot;2026-06-13&quot;:10.21},{&quot;2026-06-14&quot;:10.13},{&quot;2026-06-15&quot;:10.13},{&quot;2026-06-16&quot;:10.2},{&quot;2026-06-17&quot;:10.29},{&quot;2026-06-18&quot;:10.29},{&quot;2026-06-19&quot;:10.31},{&quot;2026-06-20&quot;:10.31},{&quot;2026-06-21&quot;:10.31},{&quot;2026-06-22&quot;:10.21},{&quot;2026-06-23&quot;:10.21},{&quot;2026-06-24&quot;:10.21},{&quot;2026-06-25&quot;:10.28},{&quot;2026-06-26&quot;:10.43},{&quot;2026-06-27&quot;:10.43},{&quot;2026-06-28&quot;:10.39},{&quot;2026-06-29&quot;:10.39},{&quot;2026-06-30&quot;:10.39},{&quot;2026-07-01&quot;:10.32},{&quot;2026-07-02&quot;:10.24},{&quot;2026-07-03&quot;:10.2},{&quot;2026-07-04&quot;:10.2},{&quot;2026-07-05&quot;:10.2},{&quot;2026-07-06&quot;:10.2},{&quot;2026-07-07&quot;:10.2},{&quot;2026-07-08&quot;:10.2},{&quot;2026-07-09&quot;:10.2},{&quot;2026-07-10&quot;:10.15},{&quot;2026-07-11&quot;:10.15},{&quot;2026-07-12&quot;:9.9},{&quot;2026-07-13&quot;:9.9},{&quot;2026-07-14&quot;:9.72},{&quot;2026-07-15&quot;:9.64},{&quot;2026-07-16&quot;:9.59},{&quot;2026-07-17&quot;:9.47},{&quot;2026-07-18&quot;:9.47},{&quot;2026-07-19&quot;:9.36},{&quot;2026-07-20&quot;:9.36},{&quot;2026-07-21&quot;:9.29},{&quot;2026-07-23&quot;:9.32},{&quot;2026-07-25&quot;:9.12},{&quot;2026-07-26&quot;:9.12},{&quot;2026-07-27&quot;:9.07},{&quot;2026-07-29&quot;:9.07},{&quot;2026-07-30&quot;:9.11},{&quot;2026-07-31&quot;:9.11},{&quot;2026-08-01&quot;:9.11},{&quot;2026-08-02&quot;:9.11},{&quot;2026-08-03&quot;:9.27},{&quot;2026-08-04&quot;:9.27},{&quot;2026-08-05&quot;:9.31},{&quot;2026-08-07&quot;:9.38},{&quot;2026-08-08&quot;:9.38},{&quot;2026-08-09&quot;:9.36},{&quot;2026-08-10&quot;:9.36},{&quot;2026-08-11&quot;:9.36},{&quot;2026-08-12&quot;:9.36},{&quot;2026-08-13&quot;:9.62},{&quot;2026-08-14&quot;:9.7},{&quot;2026-08-15&quot;:9.86},{&quot;2026-08-16&quot;:9.86},{&quot;2026-08-17&quot;:9.94},{&quot;2026-08-18&quot;:9.98},{&quot;2026-08-19&quot;:9.98},{&quot;2026-08-20&quot;:9.98},{&quot;2026-08-21&quot;:10.06},{&quot;2026-08-22&quot;:10.06},{&quot;2026-08-23&quot;:10.13},{&quot;2026-08-24&quot;:10.1},{&quot;2026-08-25&quot;:10.1},{&quot;2026-08-26&quot;:10.36},{&quot;2026-08-27&quot;:10.61},{&quot;2026-08-28&quot;:10.61},{&quot;2026-08-29&quot;:10.61},{&quot;2026-08-30&quot;:10.55},{&quot;2026-08-31&quot;:10.78},{&quot;2026-09-01&quot;:10.78},{&quot;2026-09-02&quot;:10.78},{&quot;2026-09-03&quot;:10.96},{&quot;2026-09-04&quot;:11.07},{&quot;2026-09-05&quot;:11.07},{&quot;2026-09-06&quot;:11.07},{&quot;2026-09-07&quot;:11.33},{&quot;2026-09-08&quot;:11.44},{&quot;2026-09-09&quot;:11.44},{&quot;2026-09-10&quot;:11.44},{&quot;2026-09-11&quot;:11.53}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:5.66},{&quot;2026-06-11&quot;:5.53},{&quot;2026-06-12&quot;:5.52},{&quot;2026-06-13&quot;:5.52},{&quot;2026-06-14&quot;:5.29},{&quot;2026-06-15&quot;:5.28},{&quot;2026-06-16&quot;:5.33},{&quot;2026-06-17&quot;:5.26},{&quot;2026-06-18&quot;:5.23},{&quot;2026-06-19&quot;:5.17},{&quot;2026-06-20&quot;:5.22},{&quot;2026-06-21&quot;:5.07},{&quot;2026-06-22&quot;:4.99},{&quot;2026-06-23&quot;:5.08},{&quot;2026-06-24&quot;:5.08},{&quot;2026-06-25&quot;:5.09},{&quot;2026-06-26&quot;:5.14},{&quot;2026-06-27&quot;:5.14},{&quot;2026-06-28&quot;:5.19},{&quot;2026-06-29&quot;:5.25},{&quot;2026-06-30&quot;:5.22},{&quot;2026-07-01&quot;:5.2},{&quot;2026-07-02&quot;:5.24},{&quot;2026-07-03&quot;:5.16},{&quot;2026-07-04&quot;:5.11},{&quot;2026-07-05&quot;:5.09},{&quot;2026-07-06&quot;:5.07},{&quot;2026-07-07&quot;:5.07},{&quot;2026-07-08&quot;:5.02},{&quot;2026-07-09&quot;:4.99},{&quot;2026-07-10&quot;:4.9},{&quot;2026-07-11&quot;:4.84},{&quot;2026-07-12&quot;:4.8},{&quot;2026-07-13&quot;:4.77},{&quot;2026-07-14&quot;:4.77},{&quot;2026-07-15&quot;:4.8},{&quot;2026-07-16&quot;:4.77},{&quot;2026-07-17&quot;:4.93},{&quot;2026-07-18&quot;:4.93},{&quot;2026-07-19&quot;:5.0},{&quot;2026-07-20&quot;:5.04},{&quot;2026-07-21&quot;:5.05},{&quot;2026-07-23&quot;:5.26},{&quot;2026-07-25&quot;:5.22},{&quot;2026-07-26&quot;:5.32},{&quot;2026-07-27&quot;:5.4},{&quot;2026-07-29&quot;:5.49},{&quot;2026-07-30&quot;:5.49},{&quot;2026-07-31&quot;:5.56},{&quot;2026-08-01&quot;:5.7},{&quot;2026-08-02&quot;:5.65},{&quot;2026-08-03&quot;:5.85},{&quot;2026-08-04&quot;:5.86},{&quot;2026-08-05&quot;:5.9},{&quot;2026-08-07&quot;:5.97},{&quot;2026-08-08&quot;:5.96},{&quot;2026-08-09&quot;:5.89},{&quot;2026-08-10&quot;:5.89},{&quot;2026-08-11&quot;:5.76},{&quot;2026-08-12&quot;:5.93},{&quot;2026-08-13&quot;:5.95},{&quot;2026-08-14&quot;:6.11},{&quot;2026-08-15&quot;:5.9},{&quot;2026-08-16&quot;:6.1},{&quot;2026-08-17&quot;:6.12},{&quot;2026-08-18&quot;:6.18},{&quot;2026-08-19&quot;:6.2},{&quot;2026-08-20&quot;:6.2},{&quot;2026-08-21&quot;:6.26},{&quot;2026-08-22&quot;:6.26},{&quot;2026-08-23&quot;:6.32},{&quot;2026-08-24&quot;:6.35},{&quot;2026-08-25&quot;:6.35},{&quot;2026-08-26&quot;:6.35},{&quot;2026-08-27&quot;:6.41},{&quot;2026-08-28&quot;:6.46},{&quot;2026-08-29&quot;:6.46},{&quot;2026-08-30&quot;:6.51},{&quot;2026-08-31&quot;:6.68},{&quot;2026-09-01&quot;:6.68},{&quot;2026-09-02&quot;:6.49},{&quot;2026-09-03&quot;:6.49},{&quot;2026-09-04&quot;:6.36},{&quot;2026-09-05&quot;:6.36},{&quot;2026-09-06&quot;:6.36},{&quot;2026-09-07&quot;:6.36},{&quot;2026-09-08&quot;:6.36},{&quot;2026-09-09&quot;:6.33},{&quot;2026-09-10&quot;:6.29},{&quot;2026-09-11&quot;:6.19}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="42229"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-neo ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Light-Paws, Emperor&#39;s Voice
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Fox Advisor
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              13%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.17
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Light-Paws, Emperor&#39;s Voice" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/7/6/76614523-e51a-44ff-83ad-5be9e322697a.jpg?1783923777" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Light-Paws, Emperor&#39;s Voice
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Fox Advisor</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Light-Paws, Emperor&#39;s Voice" src="https://cards.scryfall.io/large/front/7/6/76614523-e51a-44ff-83ad-5be9e322697a.jpg?1783923777" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.17
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  13%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $17.49
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.60</span>
              <span class="text-xs text-grey-text">Credit: $4.68</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-08&quot;:27.1},{&quot;2026-06-10&quot;:27.1},{&quot;2026-06-11&quot;:27.1},{&quot;2026-06-12&quot;:27.1},{&quot;2026-06-13&quot;:27.1},{&quot;2026-06-14&quot;:27.1},{&quot;2026-06-15&quot;:27.1},{&quot;2026-06-16&quot;:27.1},{&quot;2026-06-17&quot;:27.1},{&quot;2026-06-18&quot;:27.1},{&quot;2026-06-19&quot;:27.1},{&quot;2026-06-20&quot;:27.1},{&quot;2026-06-21&quot;:25.82},{&quot;2026-06-22&quot;:25.82},{&quot;2026-06-24&quot;:25.82},{&quot;2026-06-25&quot;:24.92},{&quot;2026-06-26&quot;:24.92},{&quot;2026-06-27&quot;:24.92},{&quot;2026-06-28&quot;:24.79},{&quot;2026-06-29&quot;:24.79},{&quot;2026-06-30&quot;:24.79},{&quot;2026-07-01&quot;:24.79},{&quot;2026-07-02&quot;:24.79},{&quot;2026-07-03&quot;:24.16},{&quot;2026-07-04&quot;:24.16},{&quot;2026-07-05&quot;:24.16},{&quot;2026-07-06&quot;:24.16},{&quot;2026-07-07&quot;:23.67},{&quot;2026-07-08&quot;:23.67},{&quot;2026-07-09&quot;:23.67},{&quot;2026-07-10&quot;:23.67},{&quot;2026-07-11&quot;:23.67},{&quot;2026-07-12&quot;:23.67},{&quot;2026-07-13&quot;:23.67},{&quot;2026-07-14&quot;:23.19},{&quot;2026-07-15&quot;:23.19},{&quot;2026-07-16&quot;:22.95},{&quot;2026-07-17&quot;:22.81},{&quot;2026-07-18&quot;:22.81},{&quot;2026-07-19&quot;:22.81},{&quot;2026-07-20&quot;:22.81},{&quot;2026-07-21&quot;:22.63},{&quot;2026-07-23&quot;:22.57},{&quot;2026-07-25&quot;:22.57},{&quot;2026-07-26&quot;:22.2},{&quot;2026-07-27&quot;:22.2},{&quot;2026-07-29&quot;:22.2},{&quot;2026-07-30&quot;:22.2},{&quot;2026-07-31&quot;:21.31},{&quot;2026-08-01&quot;:21.31},{&quot;2026-08-02&quot;:21.31},{&quot;2026-08-03&quot;:21.02},{&quot;2026-08-04&quot;:21.02},{&quot;2026-08-05&quot;:21.02},{&quot;2026-08-07&quot;:19.97},{&quot;2026-08-08&quot;:19.75},{&quot;2026-08-09&quot;:19.47},{&quot;2026-08-10&quot;:19.47},{&quot;2026-08-11&quot;:18.56},{&quot;2026-08-12&quot;:18.56},{&quot;2026-08-13&quot;:18.56},{&quot;2026-08-14&quot;:18.34},{&quot;2026-08-15&quot;:18.09},{&quot;2026-08-16&quot;:18.09},{&quot;2026-08-17&quot;:18.09},{&quot;2026-08-18&quot;:18.09},{&quot;2026-08-19&quot;:18.09},{&quot;2026-08-20&quot;:18.09},{&quot;2026-08-21&quot;:18.08},{&quot;2026-08-22&quot;:18.08},{&quot;2026-08-23&quot;:18.08},{&quot;2026-08-24&quot;:18.08},{&quot;2026-08-25&quot;:18.08},{&quot;2026-08-26&quot;:18.08},{&quot;2026-08-27&quot;:18.08},{&quot;2026-08-28&quot;:18.05},{&quot;2026-08-29&quot;:18.05},{&quot;2026-08-30&quot;:18.04},{&quot;2026-08-31&quot;:18.04},{&quot;2026-09-01&quot;:18.04},{&quot;2026-09-02&quot;:17.97},{&quot;2026-09-03&quot;:17.97},{&quot;2026-09-04&quot;:17.97},{&quot;2026-09-05&quot;:18.02},{&quot;2026-09-06&quot;:18.02},{&quot;2026-09-07&quot;:18.02},{&quot;2026-09-08&quot;:18.02},{&quot;2026-09-09&quot;:18.02},{&quot;2026-09-10&quot;:17.49},{&quot;2026-09-11&quot;:17.49}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:11.4},{&quot;2026-06-10&quot;:11.4},{&quot;2026-06-11&quot;:11.4},{&quot;2026-06-12&quot;:11.45},{&quot;2026-06-13&quot;:11.65},{&quot;2026-06-14&quot;:11.67},{&quot;2026-06-15&quot;:11.5},{&quot;2026-06-16&quot;:11.5},{&quot;2026-06-17&quot;:11.35},{&quot;2026-06-18&quot;:11.35},{&quot;2026-06-19&quot;:11.47},{&quot;2026-06-20&quot;:11.38},{&quot;2026-06-21&quot;:11.38},{&quot;2026-06-22&quot;:11.38},{&quot;2026-06-24&quot;:11.37},{&quot;2026-06-25&quot;:11.37},{&quot;2026-06-26&quot;:11.37},{&quot;2026-06-27&quot;:11.34},{&quot;2026-06-28&quot;:10.83},{&quot;2026-06-29&quot;:10.32},{&quot;2026-06-30&quot;:10.32},{&quot;2026-07-01&quot;:10.32},{&quot;2026-07-02&quot;:10.16},{&quot;2026-07-03&quot;:9.83},{&quot;2026-07-04&quot;:9.74},{&quot;2026-07-05&quot;:9.67},{&quot;2026-07-06&quot;:9.42},{&quot;2026-07-07&quot;:9.44},{&quot;2026-07-08&quot;:9.38},{&quot;2026-07-09&quot;:9.24},{&quot;2026-07-10&quot;:8.91},{&quot;2026-07-11&quot;:8.73},{&quot;2026-07-12&quot;:8.76},{&quot;2026-07-13&quot;:8.82},{&quot;2026-07-14&quot;:8.86},{&quot;2026-07-15&quot;:8.86},{&quot;2026-07-16&quot;:8.86},{&quot;2026-07-17&quot;:8.92},{&quot;2026-07-18&quot;:9.09},{&quot;2026-07-19&quot;:9.09},{&quot;2026-07-20&quot;:9.1},{&quot;2026-07-21&quot;:9.07},{&quot;2026-07-23&quot;:9.08},{&quot;2026-07-25&quot;:9.02},{&quot;2026-07-26&quot;:8.87},{&quot;2026-07-27&quot;:8.63},{&quot;2026-07-29&quot;:8.34},{&quot;2026-07-30&quot;:7.65},{&quot;2026-07-31&quot;:7.94},{&quot;2026-08-01&quot;:7.94},{&quot;2026-08-02&quot;:7.94},{&quot;2026-08-03&quot;:7.74},{&quot;2026-08-04&quot;:7.63},{&quot;2026-08-05&quot;:7.63},{&quot;2026-08-07&quot;:7.15},{&quot;2026-08-08&quot;:7.03},{&quot;2026-08-09&quot;:7.03},{&quot;2026-08-10&quot;:6.81},{&quot;2026-08-11&quot;:6.6},{&quot;2026-08-12&quot;:6.48},{&quot;2026-08-13&quot;:6.52},{&quot;2026-08-14&quot;:6.52},{&quot;2026-08-15&quot;:7.12},{&quot;2026-08-16&quot;:7.12},{&quot;2026-08-17&quot;:7.08},{&quot;2026-08-18&quot;:7.08},{&quot;2026-08-19&quot;:7.3},{&quot;2026-08-20&quot;:7.3},{&quot;2026-08-21&quot;:7.14},{&quot;2026-08-22&quot;:7.14},{&quot;2026-08-23&quot;:7.14},{&quot;2026-08-24&quot;:6.91},{&quot;2026-08-25&quot;:6.91},{&quot;2026-08-26&quot;:6.98},{&quot;2026-08-27&quot;:6.98},{&quot;2026-08-28&quot;:6.96},{&quot;2026-08-29&quot;:6.96},{&quot;2026-08-30&quot;:7.0},{&quot;2026-08-31&quot;:7.04},{&quot;2026-09-01&quot;:7.04},{&quot;2026-09-02&quot;:7.08},{&quot;2026-09-03&quot;:7.09},{&quot;2026-09-04&quot;:7.1},{&quot;2026-09-05&quot;:7.1},{&quot;2026-09-06&quot;:7.1},{&quot;2026-09-07&quot;:7.1},{&quot;2026-09-08&quot;:6.92},{&quot;2026-09-09&quot;:6.89},{&quot;2026-09-10&quot;:6.89},{&quot;2026-09-11&quot;:6.17}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="108393"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tmc ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Undergrowth Stadium
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Land
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.17
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Undergrowth Stadium" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/f/2/f25aa8aa-e2f7-4634-8a96-2082e76c6503.jpg?1783904148" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Undergrowth Stadium
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Land</span>
        </div>

      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Undergrowth Stadium" src="https://cards.scryfall.io/large/front/f/2/f25aa8aa-e2f7-4634-8a96-2082e76c6503.jpg?1783904148" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.17
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $11.20
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.50</span>
              <span class="text-xs text-grey-text">Credit: $5.85</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-08-19&quot;:11.06},{&quot;2026-08-20&quot;:11.06},{&quot;2026-08-21&quot;:11.06},{&quot;2026-08-22&quot;:11.06},{&quot;2026-08-23&quot;:11.06},{&quot;2026-08-24&quot;:11.06},{&quot;2026-08-25&quot;:11.39},{&quot;2026-08-26&quot;:11.39},{&quot;2026-08-27&quot;:11.39},{&quot;2026-08-28&quot;:11.39},{&quot;2026-08-29&quot;:11.39},{&quot;2026-08-30&quot;:11.39},{&quot;2026-08-31&quot;:11.39},{&quot;2026-09-01&quot;:11.39},{&quot;2026-09-02&quot;:11.32},{&quot;2026-09-03&quot;:11.32},{&quot;2026-09-04&quot;:11.32},{&quot;2026-09-05&quot;:11.28},{&quot;2026-09-06&quot;:11.2},{&quot;2026-09-07&quot;:11.2},{&quot;2026-09-08&quot;:11.2},{&quot;2026-09-09&quot;:11.2},{&quot;2026-09-10&quot;:11.2},{&quot;2026-09-11&quot;:11.2}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:5.64},{&quot;2026-06-14&quot;:5.7},{&quot;2026-06-15&quot;:5.51},{&quot;2026-06-16&quot;:5.45},{&quot;2026-06-17&quot;:5.71},{&quot;2026-06-18&quot;:5.73},{&quot;2026-06-19&quot;:5.83},{&quot;2026-06-20&quot;:5.95},{&quot;2026-06-21&quot;:5.92},{&quot;2026-06-22&quot;:6.04},{&quot;2026-06-23&quot;:5.96},{&quot;2026-06-24&quot;:6.01},{&quot;2026-06-25&quot;:5.9},{&quot;2026-06-26&quot;:5.63},{&quot;2026-06-27&quot;:5.77},{&quot;2026-06-28&quot;:5.92},{&quot;2026-06-29&quot;:5.9},{&quot;2026-06-30&quot;:5.96},{&quot;2026-07-01&quot;:5.24},{&quot;2026-07-02&quot;:5.3},{&quot;2026-07-03&quot;:5.7},{&quot;2026-07-04&quot;:5.77},{&quot;2026-07-05&quot;:5.61},{&quot;2026-07-06&quot;:5.84},{&quot;2026-07-07&quot;:5.77},{&quot;2026-07-08&quot;:5.56},{&quot;2026-07-09&quot;:5.65},{&quot;2026-07-10&quot;:5.69},{&quot;2026-07-11&quot;:5.69},{&quot;2026-07-12&quot;:5.19},{&quot;2026-07-13&quot;:5.31},{&quot;2026-07-14&quot;:5.52},{&quot;2026-07-15&quot;:5.72},{&quot;2026-07-16&quot;:5.77},{&quot;2026-07-17&quot;:5.69},{&quot;2026-07-18&quot;:5.79},{&quot;2026-07-19&quot;:6.19},{&quot;2026-07-20&quot;:6.05},{&quot;2026-07-21&quot;:6.04},{&quot;2026-07-22&quot;:6.04},{&quot;2026-07-23&quot;:5.88},{&quot;2026-07-24&quot;:5.87},{&quot;2026-07-25&quot;:5.96},{&quot;2026-07-26&quot;:5.88},{&quot;2026-07-27&quot;:6.06},{&quot;2026-07-28&quot;:6.32},{&quot;2026-07-29&quot;:6.21},{&quot;2026-07-30&quot;:6.18},{&quot;2026-07-31&quot;:5.57},{&quot;2026-08-01&quot;:5.38},{&quot;2026-08-02&quot;:5.42},{&quot;2026-08-03&quot;:5.59},{&quot;2026-08-04&quot;:5.7},{&quot;2026-08-05&quot;:5.79},{&quot;2026-08-07&quot;:5.92},{&quot;2026-08-08&quot;:6.04},{&quot;2026-08-09&quot;:5.98},{&quot;2026-08-10&quot;:5.81},{&quot;2026-08-11&quot;:5.83},{&quot;2026-08-12&quot;:5.64},{&quot;2026-08-13&quot;:6.01},{&quot;2026-08-14&quot;:6.01},{&quot;2026-08-15&quot;:5.98},{&quot;2026-08-16&quot;:6.03},{&quot;2026-08-17&quot;:6.14},{&quot;2026-08-18&quot;:6.13},{&quot;2026-08-19&quot;:6.23},{&quot;2026-08-20&quot;:6.28},{&quot;2026-08-21&quot;:6.09},{&quot;2026-08-22&quot;:6.09},{&quot;2026-08-23&quot;:6.33},{&quot;2026-08-24&quot;:6.2},{&quot;2026-08-25&quot;:6.36},{&quot;2026-08-26&quot;:6.31},{&quot;2026-08-27&quot;:6.22},{&quot;2026-08-28&quot;:6.16},{&quot;2026-08-29&quot;:6.16},{&quot;2026-08-30&quot;:6.47},{&quot;2026-08-31&quot;:6.46},{&quot;2026-09-01&quot;:6.41},{&quot;2026-09-02&quot;:6.25},{&quot;2026-09-03&quot;:6.39},{&quot;2026-09-04&quot;:6.44},{&quot;2026-09-05&quot;:5.99},{&quot;2026-09-06&quot;:5.57},{&quot;2026-09-07&quot;:5.84},{&quot;2026-09-08&quot;:6.04},{&quot;2026-09-09&quot;:6.06},{&quot;2026-09-10&quot;:6.11},{&quot;2026-09-11&quot;:6.17}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="14457"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-clb ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Stuffy Doll
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact Creature — Construct
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              5%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.16
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Stuffy Doll" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/9/7/978c2c7d-6898-4be2-aed7-e673210ce654.jpg?1783922384" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Stuffy Doll
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact Creature — Construct</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-5'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Stuffy Doll" src="https://cards.scryfall.io/large/front/9/7/978c2c7d-6898-4be2-aed7-e673210ce654.jpg?1783922384" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.16
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  5%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.70</span>
              <span class="text-xs text-grey-text">Credit: $4.81</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:5.51},{&quot;2026-06-14&quot;:5.41},{&quot;2026-06-15&quot;:5.4},{&quot;2026-06-16&quot;:5.42},{&quot;2026-06-17&quot;:5.42},{&quot;2026-06-18&quot;:5.56},{&quot;2026-06-19&quot;:5.45},{&quot;2026-06-20&quot;:5.4},{&quot;2026-06-21&quot;:5.29},{&quot;2026-06-22&quot;:5.29},{&quot;2026-06-23&quot;:5.4},{&quot;2026-06-24&quot;:5.48},{&quot;2026-06-25&quot;:5.52},{&quot;2026-06-26&quot;:5.69},{&quot;2026-06-27&quot;:5.74},{&quot;2026-06-28&quot;:5.85},{&quot;2026-06-29&quot;:6.0},{&quot;2026-06-30&quot;:6.27},{&quot;2026-07-01&quot;:6.43},{&quot;2026-07-02&quot;:6.41},{&quot;2026-07-03&quot;:6.41},{&quot;2026-07-04&quot;:6.41},{&quot;2026-07-05&quot;:6.52},{&quot;2026-07-06&quot;:6.73},{&quot;2026-07-07&quot;:6.78},{&quot;2026-07-08&quot;:6.68},{&quot;2026-07-09&quot;:6.56},{&quot;2026-07-10&quot;:6.42},{&quot;2026-07-11&quot;:6.32},{&quot;2026-07-12&quot;:6.34},{&quot;2026-07-13&quot;:6.25},{&quot;2026-07-14&quot;:6.16},{&quot;2026-07-15&quot;:6.16},{&quot;2026-07-16&quot;:6.09},{&quot;2026-07-17&quot;:6.19},{&quot;2026-07-18&quot;:6.12},{&quot;2026-07-19&quot;:6.12},{&quot;2026-07-20&quot;:6.21},{&quot;2026-07-21&quot;:5.95},{&quot;2026-07-22&quot;:6.07},{&quot;2026-07-23&quot;:5.6},{&quot;2026-07-24&quot;:5.43},{&quot;2026-07-25&quot;:5.24},{&quot;2026-07-26&quot;:5.23},{&quot;2026-07-27&quot;:5.23},{&quot;2026-07-28&quot;:5.19},{&quot;2026-07-29&quot;:5.44},{&quot;2026-07-30&quot;:5.45},{&quot;2026-07-31&quot;:5.35},{&quot;2026-08-01&quot;:5.41},{&quot;2026-08-02&quot;:5.54},{&quot;2026-08-03&quot;:5.91},{&quot;2026-08-04&quot;:6.11},{&quot;2026-08-05&quot;:6.06},{&quot;2026-08-07&quot;:6.06},{&quot;2026-08-08&quot;:6.06},{&quot;2026-08-09&quot;:6.04},{&quot;2026-08-10&quot;:6.0},{&quot;2026-08-11&quot;:6.01},{&quot;2026-08-12&quot;:6.01},{&quot;2026-08-13&quot;:5.92},{&quot;2026-08-14&quot;:5.93},{&quot;2026-08-15&quot;:5.9},{&quot;2026-08-16&quot;:5.83},{&quot;2026-08-17&quot;:5.77},{&quot;2026-08-18&quot;:5.8},{&quot;2026-08-19&quot;:5.89},{&quot;2026-08-20&quot;:5.83},{&quot;2026-08-21&quot;:5.89},{&quot;2026-08-22&quot;:5.93},{&quot;2026-08-23&quot;:5.85},{&quot;2026-08-24&quot;:6.14},{&quot;2026-08-25&quot;:6.18},{&quot;2026-08-26&quot;:6.17},{&quot;2026-08-27&quot;:6.05},{&quot;2026-08-28&quot;:5.83},{&quot;2026-08-29&quot;:5.83},{&quot;2026-08-30&quot;:5.81},{&quot;2026-08-31&quot;:5.8},{&quot;2026-09-01&quot;:5.69},{&quot;2026-09-02&quot;:5.78},{&quot;2026-09-03&quot;:5.85},{&quot;2026-09-04&quot;:5.85},{&quot;2026-09-05&quot;:5.88},{&quot;2026-09-06&quot;:5.87},{&quot;2026-09-07&quot;:5.87},{&quot;2026-09-08&quot;:5.86},{&quot;2026-09-09&quot;:6.0},{&quot;2026-09-10&quot;:6.04},{&quot;2026-09-11&quot;:6.16}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="28838"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fdn ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Omniscience
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Enchantment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.16
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Omniscience" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/3/d33d91d0-1506-45e4-9def-975bf901815e.jpg?1783909079" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Omniscience
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Enchantment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-7'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Omniscience" src="https://cards.scryfall.io/large/front/d/3/d33d91d0-1506-45e4-9def-975bf901815e.jpg?1783909079" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.16
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.65
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.80</span>
              <span class="text-xs text-grey-text">Credit: $4.94</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-12&quot;:6.91},{&quot;2026-06-13&quot;:6.93},{&quot;2026-06-14&quot;:7.02},{&quot;2026-06-15&quot;:7.1},{&quot;2026-06-16&quot;:7.07},{&quot;2026-06-17&quot;:7.07},{&quot;2026-06-18&quot;:7.17},{&quot;2026-06-19&quot;:7.15},{&quot;2026-06-20&quot;:7.15},{&quot;2026-06-21&quot;:7.15},{&quot;2026-06-22&quot;:7.15},{&quot;2026-06-23&quot;:7.15},{&quot;2026-06-24&quot;:7.15},{&quot;2026-06-25&quot;:7.15},{&quot;2026-06-26&quot;:7.15},{&quot;2026-06-27&quot;:7.15},{&quot;2026-06-28&quot;:7.23},{&quot;2026-06-29&quot;:7.23},{&quot;2026-06-30&quot;:7.0},{&quot;2026-07-01&quot;:7.0},{&quot;2026-07-02&quot;:7.0},{&quot;2026-07-03&quot;:6.94},{&quot;2026-07-04&quot;:6.95},{&quot;2026-07-05&quot;:6.95},{&quot;2026-07-06&quot;:6.95},{&quot;2026-07-07&quot;:6.95},{&quot;2026-07-08&quot;:6.95},{&quot;2026-07-09&quot;:6.95},{&quot;2026-07-10&quot;:7.04},{&quot;2026-07-11&quot;:7.04},{&quot;2026-07-12&quot;:7.17},{&quot;2026-07-13&quot;:7.17},{&quot;2026-07-14&quot;:7.17},{&quot;2026-07-15&quot;:7.36},{&quot;2026-07-16&quot;:7.37},{&quot;2026-07-17&quot;:7.4},{&quot;2026-07-18&quot;:7.35},{&quot;2026-07-19&quot;:7.35},{&quot;2026-07-20&quot;:7.22},{&quot;2026-07-21&quot;:7.36},{&quot;2026-07-23&quot;:7.33},{&quot;2026-07-24&quot;:7.33},{&quot;2026-07-25&quot;:7.33},{&quot;2026-07-26&quot;:7.33},{&quot;2026-07-27&quot;:7.2},{&quot;2026-07-28&quot;:7.21},{&quot;2026-07-29&quot;:7.21},{&quot;2026-07-30&quot;:7.21},{&quot;2026-07-31&quot;:7.08},{&quot;2026-08-01&quot;:7.1},{&quot;2026-08-02&quot;:7.16},{&quot;2026-08-03&quot;:6.97},{&quot;2026-08-04&quot;:6.97},{&quot;2026-08-05&quot;:6.83},{&quot;2026-08-07&quot;:6.65},{&quot;2026-08-08&quot;:6.65},{&quot;2026-08-09&quot;:6.65},{&quot;2026-08-10&quot;:6.69},{&quot;2026-08-11&quot;:6.67},{&quot;2026-08-12&quot;:6.67},{&quot;2026-08-13&quot;:6.67},{&quot;2026-08-14&quot;:6.67},{&quot;2026-08-15&quot;:6.64},{&quot;2026-08-16&quot;:6.73},{&quot;2026-08-17&quot;:6.73},{&quot;2026-08-18&quot;:6.73},{&quot;2026-08-19&quot;:6.76},{&quot;2026-08-20&quot;:6.76},{&quot;2026-08-21&quot;:6.76},{&quot;2026-08-22&quot;:6.76},{&quot;2026-08-23&quot;:6.76},{&quot;2026-08-24&quot;:6.79},{&quot;2026-08-25&quot;:6.79},{&quot;2026-08-26&quot;:6.59},{&quot;2026-08-27&quot;:6.66},{&quot;2026-08-28&quot;:6.67},{&quot;2026-08-29&quot;:6.67},{&quot;2026-08-30&quot;:6.68},{&quot;2026-08-31&quot;:6.5},{&quot;2026-09-01&quot;:6.49},{&quot;2026-09-02&quot;:6.58},{&quot;2026-09-03&quot;:6.69},{&quot;2026-09-04&quot;:6.66},{&quot;2026-09-05&quot;:6.66},{&quot;2026-09-06&quot;:6.66},{&quot;2026-09-07&quot;:6.66},{&quot;2026-09-08&quot;:6.62},{&quot;2026-09-09&quot;:6.62},{&quot;2026-09-10&quot;:6.65},{&quot;2026-09-11&quot;:6.65}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:6.23},{&quot;2026-06-13&quot;:6.46},{&quot;2026-06-14&quot;:6.49},{&quot;2026-06-15&quot;:6.62},{&quot;2026-06-16&quot;:6.44},{&quot;2026-06-17&quot;:6.45},{&quot;2026-06-18&quot;:6.4},{&quot;2026-06-19&quot;:6.2},{&quot;2026-06-20&quot;:5.96},{&quot;2026-06-21&quot;:5.93},{&quot;2026-06-22&quot;:5.97},{&quot;2026-06-23&quot;:6.06},{&quot;2026-06-24&quot;:6.05},{&quot;2026-06-25&quot;:6.0},{&quot;2026-06-26&quot;:6.03},{&quot;2026-06-27&quot;:5.96},{&quot;2026-06-28&quot;:6.2},{&quot;2026-06-29&quot;:6.09},{&quot;2026-06-30&quot;:6.22},{&quot;2026-07-01&quot;:6.14},{&quot;2026-07-02&quot;:6.08},{&quot;2026-07-03&quot;:6.04},{&quot;2026-07-04&quot;:6.03},{&quot;2026-07-05&quot;:5.95},{&quot;2026-07-06&quot;:5.96},{&quot;2026-07-07&quot;:6.08},{&quot;2026-07-08&quot;:6.28},{&quot;2026-07-09&quot;:6.28},{&quot;2026-07-10&quot;:6.42},{&quot;2026-07-11&quot;:6.36},{&quot;2026-07-12&quot;:6.46},{&quot;2026-07-13&quot;:6.31},{&quot;2026-07-14&quot;:6.27},{&quot;2026-07-15&quot;:6.3},{&quot;2026-07-16&quot;:6.35},{&quot;2026-07-17&quot;:6.28},{&quot;2026-07-18&quot;:6.1},{&quot;2026-07-19&quot;:6.14},{&quot;2026-07-20&quot;:5.96},{&quot;2026-07-21&quot;:6.43},{&quot;2026-07-23&quot;:6.4},{&quot;2026-07-24&quot;:6.4},{&quot;2026-07-25&quot;:6.33},{&quot;2026-07-26&quot;:5.64},{&quot;2026-07-27&quot;:5.8},{&quot;2026-07-28&quot;:5.7},{&quot;2026-07-29&quot;:5.8},{&quot;2026-07-30&quot;:5.73},{&quot;2026-07-31&quot;:5.78},{&quot;2026-08-01&quot;:6.08},{&quot;2026-08-02&quot;:5.99},{&quot;2026-08-03&quot;:6.41},{&quot;2026-08-04&quot;:6.38},{&quot;2026-08-05&quot;:6.5},{&quot;2026-08-07&quot;:6.34},{&quot;2026-08-08&quot;:6.26},{&quot;2026-08-09&quot;:6.19},{&quot;2026-08-10&quot;:5.99},{&quot;2026-08-11&quot;:5.86},{&quot;2026-08-12&quot;:5.93},{&quot;2026-08-13&quot;:5.75},{&quot;2026-08-14&quot;:5.77},{&quot;2026-08-15&quot;:6.04},{&quot;2026-08-16&quot;:6.16},{&quot;2026-08-17&quot;:6.07},{&quot;2026-08-18&quot;:6.3},{&quot;2026-08-19&quot;:6.28},{&quot;2026-08-20&quot;:6.28},{&quot;2026-08-21&quot;:5.99},{&quot;2026-08-22&quot;:5.99},{&quot;2026-08-23&quot;:6.09},{&quot;2026-08-24&quot;:6.5},{&quot;2026-08-25&quot;:6.57},{&quot;2026-08-26&quot;:6.67},{&quot;2026-08-27&quot;:6.86},{&quot;2026-08-28&quot;:6.64},{&quot;2026-08-29&quot;:6.64},{&quot;2026-08-30&quot;:6.49},{&quot;2026-08-31&quot;:6.78},{&quot;2026-09-01&quot;:6.59},{&quot;2026-09-02&quot;:6.22},{&quot;2026-09-03&quot;:6.44},{&quot;2026-09-04&quot;:6.14},{&quot;2026-09-05&quot;:5.99},{&quot;2026-09-06&quot;:6.13},{&quot;2026-09-07&quot;:6.18},{&quot;2026-09-08&quot;:6.17},{&quot;2026-09-09&quot;:6.25},{&quot;2026-09-10&quot;:6.26},{&quot;2026-09-11&quot;:6.16}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="76480"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Phyrexian Crusader
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Phyrexian Zombie Knight
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.16
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Phyrexian Crusader" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/8/b8d837a9-9960-46ca-ab7d-c8eb1cd316f8.jpg?1783916770" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Phyrexian Crusader
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Phyrexian Zombie Knight</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Phyrexian Crusader" src="https://cards.scryfall.io/large/front/b/8/b8d837a9-9960-46ca-ab7d-c8eb1cd316f8.jpg?1783916770" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.16
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.50</span>
              <span class="text-xs text-grey-text">Credit: $3.25</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:6.09},{&quot;2026-06-14&quot;:6.1},{&quot;2026-06-15&quot;:6.1},{&quot;2026-06-16&quot;:6.1},{&quot;2026-06-17&quot;:6.1},{&quot;2026-06-18&quot;:6.1},{&quot;2026-06-19&quot;:6.06},{&quot;2026-06-20&quot;:6.06},{&quot;2026-06-21&quot;:6.0},{&quot;2026-06-22&quot;:6.0},{&quot;2026-06-23&quot;:6.0},{&quot;2026-06-24&quot;:5.87},{&quot;2026-06-25&quot;:5.87},{&quot;2026-06-26&quot;:5.87},{&quot;2026-06-27&quot;:5.94},{&quot;2026-06-28&quot;:5.94},{&quot;2026-06-29&quot;:5.94},{&quot;2026-06-30&quot;:5.94},{&quot;2026-07-01&quot;:5.94},{&quot;2026-07-02&quot;:5.94},{&quot;2026-07-03&quot;:5.94},{&quot;2026-07-04&quot;:5.94},{&quot;2026-07-05&quot;:5.94},{&quot;2026-07-06&quot;:5.94},{&quot;2026-07-07&quot;:5.94},{&quot;2026-07-08&quot;:5.94},{&quot;2026-07-09&quot;:5.94},{&quot;2026-07-10&quot;:5.94},{&quot;2026-07-11&quot;:5.94},{&quot;2026-07-12&quot;:5.88},{&quot;2026-07-13&quot;:5.88},{&quot;2026-07-14&quot;:5.88},{&quot;2026-07-15&quot;:5.88},{&quot;2026-07-16&quot;:5.88},{&quot;2026-07-17&quot;:5.88},{&quot;2026-07-18&quot;:5.88},{&quot;2026-07-19&quot;:5.92},{&quot;2026-07-20&quot;:5.92},{&quot;2026-07-21&quot;:5.92},{&quot;2026-07-22&quot;:5.92},{&quot;2026-07-23&quot;:6.04},{&quot;2026-07-24&quot;:6.04},{&quot;2026-07-25&quot;:6.04},{&quot;2026-07-26&quot;:6.04},{&quot;2026-07-27&quot;:6.02},{&quot;2026-07-28&quot;:6.02},{&quot;2026-07-29&quot;:6.02},{&quot;2026-07-30&quot;:6.06},{&quot;2026-07-31&quot;:6.09},{&quot;2026-08-01&quot;:6.09},{&quot;2026-08-02&quot;:6.23},{&quot;2026-08-03&quot;:6.04},{&quot;2026-08-04&quot;:6.04},{&quot;2026-08-05&quot;:6.04},{&quot;2026-08-07&quot;:6.04},{&quot;2026-08-08&quot;:6.04},{&quot;2026-08-09&quot;:6.04},{&quot;2026-08-10&quot;:6.04},{&quot;2026-08-11&quot;:5.99},{&quot;2026-08-12&quot;:5.99},{&quot;2026-08-13&quot;:5.99},{&quot;2026-08-14&quot;:5.99},{&quot;2026-08-15&quot;:5.99},{&quot;2026-08-16&quot;:5.99},{&quot;2026-08-17&quot;:5.99},{&quot;2026-08-18&quot;:5.99},{&quot;2026-08-19&quot;:5.99},{&quot;2026-08-20&quot;:5.96},{&quot;2026-08-21&quot;:5.96},{&quot;2026-08-22&quot;:5.96},{&quot;2026-08-23&quot;:5.96},{&quot;2026-08-24&quot;:5.94},{&quot;2026-08-25&quot;:5.94},{&quot;2026-08-26&quot;:5.94},{&quot;2026-08-27&quot;:5.94},{&quot;2026-08-28&quot;:5.94},{&quot;2026-08-29&quot;:5.94},{&quot;2026-08-30&quot;:6.01},{&quot;2026-08-31&quot;:6.01},{&quot;2026-09-01&quot;:6.01},{&quot;2026-09-02&quot;:6.0},{&quot;2026-09-03&quot;:6.0},{&quot;2026-09-04&quot;:6.0},{&quot;2026-09-05&quot;:6.0},{&quot;2026-09-06&quot;:6.0},{&quot;2026-09-07&quot;:6.0},{&quot;2026-09-08&quot;:6.0},{&quot;2026-09-09&quot;:6.0},{&quot;2026-09-10&quot;:6.16},{&quot;2026-09-11&quot;:6.16}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="88007"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Lightning Greaves
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact — Equipment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              14%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.12
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Lightning Greaves" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/e/f/ef5c570d-e415-4ac3-b48f-574ce109303a.jpg?1783931747" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Lightning Greaves
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact — Equipment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Lightning Greaves" src="https://cards.scryfall.io/large/front/e/f/ef5c570d-e415-4ac3-b48f-574ce109303a.jpg?1783931747" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.12
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  14%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.50</span>
              <span class="text-xs text-grey-text">Credit: $3.25</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-12&quot;:6.05},{&quot;2026-06-13&quot;:6.18},{&quot;2026-06-14&quot;:6.18},{&quot;2026-06-15&quot;:6.18},{&quot;2026-06-16&quot;:6.08},{&quot;2026-06-17&quot;:6.08},{&quot;2026-06-18&quot;:6.08},{&quot;2026-06-19&quot;:6.1},{&quot;2026-06-20&quot;:6.1},{&quot;2026-06-21&quot;:5.94},{&quot;2026-06-22&quot;:5.84},{&quot;2026-06-23&quot;:5.71},{&quot;2026-06-24&quot;:5.71},{&quot;2026-06-25&quot;:5.85},{&quot;2026-06-26&quot;:5.85},{&quot;2026-06-27&quot;:5.85},{&quot;2026-06-28&quot;:5.85},{&quot;2026-06-29&quot;:5.7},{&quot;2026-06-30&quot;:5.7},{&quot;2026-07-01&quot;:5.85},{&quot;2026-07-02&quot;:5.8},{&quot;2026-07-03&quot;:5.8},{&quot;2026-07-04&quot;:5.7},{&quot;2026-07-05&quot;:5.7},{&quot;2026-07-06&quot;:5.7},{&quot;2026-07-07&quot;:5.67},{&quot;2026-07-08&quot;:5.67},{&quot;2026-07-09&quot;:5.67},{&quot;2026-07-10&quot;:5.67},{&quot;2026-07-11&quot;:5.67},{&quot;2026-07-12&quot;:5.6},{&quot;2026-07-13&quot;:5.6},{&quot;2026-07-14&quot;:5.6},{&quot;2026-07-15&quot;:5.47},{&quot;2026-07-16&quot;:5.47},{&quot;2026-07-17&quot;:5.47},{&quot;2026-07-18&quot;:5.42},{&quot;2026-07-19&quot;:5.43},{&quot;2026-07-20&quot;:5.27},{&quot;2026-07-21&quot;:5.27},{&quot;2026-07-23&quot;:5.22},{&quot;2026-07-24&quot;:5.22},{&quot;2026-07-25&quot;:5.34},{&quot;2026-07-26&quot;:5.4},{&quot;2026-07-27&quot;:5.19},{&quot;2026-07-28&quot;:5.31},{&quot;2026-07-29&quot;:5.51},{&quot;2026-07-30&quot;:5.42},{&quot;2026-07-31&quot;:5.42},{&quot;2026-08-01&quot;:5.42},{&quot;2026-08-02&quot;:5.34},{&quot;2026-08-03&quot;:5.34},{&quot;2026-08-04&quot;:5.34},{&quot;2026-08-05&quot;:5.29},{&quot;2026-08-07&quot;:5.35},{&quot;2026-08-08&quot;:5.35},{&quot;2026-08-09&quot;:5.35},{&quot;2026-08-10&quot;:5.38},{&quot;2026-08-11&quot;:5.4},{&quot;2026-08-12&quot;:5.21},{&quot;2026-08-13&quot;:5.21},{&quot;2026-08-14&quot;:5.13},{&quot;2026-08-15&quot;:5.02},{&quot;2026-08-16&quot;:4.96},{&quot;2026-08-17&quot;:4.97},{&quot;2026-08-18&quot;:5.64},{&quot;2026-08-19&quot;:5.55},{&quot;2026-08-20&quot;:5.55},{&quot;2026-08-21&quot;:5.32},{&quot;2026-08-22&quot;:5.32},{&quot;2026-08-23&quot;:5.32},{&quot;2026-08-24&quot;:5.33},{&quot;2026-08-25&quot;:5.33},{&quot;2026-08-26&quot;:5.33},{&quot;2026-08-27&quot;:5.33},{&quot;2026-08-28&quot;:5.33},{&quot;2026-08-29&quot;:5.33},{&quot;2026-08-30&quot;:5.33},{&quot;2026-08-31&quot;:5.33},{&quot;2026-09-01&quot;:5.33},{&quot;2026-09-02&quot;:5.33},{&quot;2026-09-03&quot;:5.33},{&quot;2026-09-04&quot;:5.24},{&quot;2026-09-05&quot;:5.36},{&quot;2026-09-06&quot;:5.35},{&quot;2026-09-07&quot;:5.42},{&quot;2026-09-08&quot;:5.79},{&quot;2026-09-09&quot;:6.03},{&quot;2026-09-10&quot;:6.1},{&quot;2026-09-11&quot;:6.12}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="5148"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-blb ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Rottenmouth Viper
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Elemental Snake
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.10
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Rottenmouth Viper" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/7/3/735e79b1-a3a9-4ddf-8bbc-f756c8a0452b.jpg?1783910830" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Rottenmouth Viper
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Elemental Snake</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-5'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Rottenmouth Viper" src="https://cards.scryfall.io/large/front/7/3/735e79b1-a3a9-4ddf-8bbc-f756c8a0452b.jpg?1783910830" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.10
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.03
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  2%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.50</span>
              <span class="text-xs text-grey-text">Credit: $4.55</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:6.79},{&quot;2026-06-14&quot;:6.79},{&quot;2026-06-15&quot;:6.79},{&quot;2026-06-16&quot;:6.79},{&quot;2026-06-17&quot;:6.91},{&quot;2026-06-18&quot;:6.97},{&quot;2026-06-19&quot;:6.97},{&quot;2026-06-20&quot;:6.99},{&quot;2026-06-21&quot;:6.96},{&quot;2026-06-22&quot;:6.93},{&quot;2026-06-23&quot;:6.93},{&quot;2026-06-24&quot;:6.99},{&quot;2026-06-25&quot;:6.99},{&quot;2026-06-26&quot;:6.99},{&quot;2026-06-27&quot;:6.98},{&quot;2026-06-28&quot;:6.98},{&quot;2026-06-29&quot;:6.98},{&quot;2026-06-30&quot;:6.97},{&quot;2026-07-01&quot;:6.97},{&quot;2026-07-02&quot;:6.97},{&quot;2026-07-03&quot;:6.97},{&quot;2026-07-04&quot;:6.97},{&quot;2026-07-05&quot;:6.98},{&quot;2026-07-06&quot;:7.03},{&quot;2026-07-07&quot;:7.01},{&quot;2026-07-08&quot;:7.01},{&quot;2026-07-09&quot;:7.02},{&quot;2026-07-10&quot;:7.11},{&quot;2026-07-11&quot;:7.11},{&quot;2026-07-12&quot;:7.11},{&quot;2026-07-13&quot;:7.11},{&quot;2026-07-14&quot;:7.11},{&quot;2026-07-15&quot;:7.02},{&quot;2026-07-16&quot;:6.92},{&quot;2026-07-17&quot;:6.92},{&quot;2026-07-18&quot;:6.9},{&quot;2026-07-19&quot;:6.9},{&quot;2026-07-20&quot;:6.94},{&quot;2026-07-21&quot;:6.94},{&quot;2026-07-22&quot;:6.87},{&quot;2026-07-23&quot;:6.87},{&quot;2026-07-24&quot;:6.87},{&quot;2026-07-25&quot;:6.82},{&quot;2026-07-26&quot;:6.82},{&quot;2026-07-27&quot;:6.91},{&quot;2026-07-28&quot;:6.86},{&quot;2026-07-29&quot;:6.86},{&quot;2026-07-30&quot;:6.81},{&quot;2026-07-31&quot;:6.66},{&quot;2026-08-01&quot;:6.66},{&quot;2026-08-02&quot;:6.66},{&quot;2026-08-03&quot;:6.66},{&quot;2026-08-04&quot;:6.61},{&quot;2026-08-05&quot;:6.67},{&quot;2026-08-07&quot;:6.58},{&quot;2026-08-08&quot;:6.56},{&quot;2026-08-09&quot;:6.58},{&quot;2026-08-10&quot;:6.48},{&quot;2026-08-11&quot;:6.48},{&quot;2026-08-12&quot;:6.48},{&quot;2026-08-13&quot;:6.48},{&quot;2026-08-14&quot;:6.37},{&quot;2026-08-15&quot;:6.4},{&quot;2026-08-16&quot;:6.4},{&quot;2026-08-17&quot;:6.29},{&quot;2026-08-18&quot;:6.31},{&quot;2026-08-19&quot;:6.31},{&quot;2026-08-20&quot;:6.31},{&quot;2026-08-21&quot;:6.31},{&quot;2026-08-22&quot;:6.39},{&quot;2026-08-23&quot;:6.39},{&quot;2026-08-24&quot;:6.44},{&quot;2026-08-25&quot;:6.36},{&quot;2026-08-26&quot;:6.36},{&quot;2026-08-27&quot;:6.36},{&quot;2026-08-28&quot;:6.36},{&quot;2026-08-29&quot;:6.36},{&quot;2026-08-30&quot;:6.26},{&quot;2026-08-31&quot;:6.05},{&quot;2026-09-01&quot;:6.05},{&quot;2026-09-02&quot;:6.17},{&quot;2026-09-03&quot;:6.17},{&quot;2026-09-04&quot;:6.17},{&quot;2026-09-05&quot;:6.17},{&quot;2026-09-06&quot;:6.17},{&quot;2026-09-07&quot;:6.17},{&quot;2026-09-08&quot;:6.1},{&quot;2026-09-09&quot;:6.1},{&quot;2026-09-10&quot;:5.95},{&quot;2026-09-11&quot;:6.03}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:6.03},{&quot;2026-06-14&quot;:6.24},{&quot;2026-06-15&quot;:6.05},{&quot;2026-06-16&quot;:5.51},{&quot;2026-06-17&quot;:5.35},{&quot;2026-06-18&quot;:5.31},{&quot;2026-06-19&quot;:5.35},{&quot;2026-06-20&quot;:5.5},{&quot;2026-06-21&quot;:5.43},{&quot;2026-06-22&quot;:5.36},{&quot;2026-06-23&quot;:5.37},{&quot;2026-06-24&quot;:5.41},{&quot;2026-06-25&quot;:5.45},{&quot;2026-06-26&quot;:5.25},{&quot;2026-06-27&quot;:5.48},{&quot;2026-06-28&quot;:5.85},{&quot;2026-06-29&quot;:6.17},{&quot;2026-06-30&quot;:5.99},{&quot;2026-07-01&quot;:5.95},{&quot;2026-07-02&quot;:5.83},{&quot;2026-07-03&quot;:5.65},{&quot;2026-07-04&quot;:5.57},{&quot;2026-07-05&quot;:5.19},{&quot;2026-07-06&quot;:5.12},{&quot;2026-07-07&quot;:5.08},{&quot;2026-07-08&quot;:5.06},{&quot;2026-07-09&quot;:5.05},{&quot;2026-07-10&quot;:5.02},{&quot;2026-07-11&quot;:4.72},{&quot;2026-07-12&quot;:4.73},{&quot;2026-07-13&quot;:4.75},{&quot;2026-07-14&quot;:4.91},{&quot;2026-07-15&quot;:5.13},{&quot;2026-07-16&quot;:5.63},{&quot;2026-07-17&quot;:5.48},{&quot;2026-07-18&quot;:5.42},{&quot;2026-07-19&quot;:5.35},{&quot;2026-07-20&quot;:5.25},{&quot;2026-07-21&quot;:5.15},{&quot;2026-07-22&quot;:4.8},{&quot;2026-07-23&quot;:4.74},{&quot;2026-07-24&quot;:4.86},{&quot;2026-07-25&quot;:4.96},{&quot;2026-07-26&quot;:4.88},{&quot;2026-07-27&quot;:5.0},{&quot;2026-07-28&quot;:5.08},{&quot;2026-07-29&quot;:5.14},{&quot;2026-07-30&quot;:5.32},{&quot;2026-07-31&quot;:5.34},{&quot;2026-08-01&quot;:5.51},{&quot;2026-08-02&quot;:5.52},{&quot;2026-08-03&quot;:5.59},{&quot;2026-08-04&quot;:5.66},{&quot;2026-08-05&quot;:5.53},{&quot;2026-08-07&quot;:5.74},{&quot;2026-08-08&quot;:5.69},{&quot;2026-08-09&quot;:5.81},{&quot;2026-08-10&quot;:5.76},{&quot;2026-08-11&quot;:5.66},{&quot;2026-08-12&quot;:5.66},{&quot;2026-08-13&quot;:5.83},{&quot;2026-08-14&quot;:6.11},{&quot;2026-08-15&quot;:5.64},{&quot;2026-08-16&quot;:5.87},{&quot;2026-08-17&quot;:6.0},{&quot;2026-08-18&quot;:6.16},{&quot;2026-08-19&quot;:6.37},{&quot;2026-08-20&quot;:6.37},{&quot;2026-08-21&quot;:6.57},{&quot;2026-08-22&quot;:6.57},{&quot;2026-08-23&quot;:6.69},{&quot;2026-08-24&quot;:6.66},{&quot;2026-08-25&quot;:6.75},{&quot;2026-08-26&quot;:6.73},{&quot;2026-08-27&quot;:6.63},{&quot;2026-08-28&quot;:6.27},{&quot;2026-08-29&quot;:6.27},{&quot;2026-08-30&quot;:5.99},{&quot;2026-08-31&quot;:6.04},{&quot;2026-09-01&quot;:5.87},{&quot;2026-09-02&quot;:5.78},{&quot;2026-09-03&quot;:5.78},{&quot;2026-09-04&quot;:5.87},{&quot;2026-09-05&quot;:6.15},{&quot;2026-09-06&quot;:6.28},{&quot;2026-09-07&quot;:6.5},{&quot;2026-09-08&quot;:6.38},{&quot;2026-09-09&quot;:6.32},{&quot;2026-09-10&quot;:6.19},{&quot;2026-09-11&quot;:6.1}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="17122"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dst ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Arcbound Reclaimer
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact Creature — Golem
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.10
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Arcbound Reclaimer" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/e/3e4c5228-1dff-4df0-9d14-f8103364c701.jpg?1783944429" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Arcbound Reclaimer
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact Creature — Golem</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-4'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Arcbound Reclaimer" src="https://cards.scryfall.io/large/front/3/e/3e4c5228-1dff-4df0-9d14-f8103364c701.jpg?1783944429" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.10
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $33.38
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$6.90</span>
              <span class="text-xs text-grey-text">Credit: $8.97</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:27.17},{&quot;2026-06-14&quot;:27.17},{&quot;2026-06-15&quot;:27.17},{&quot;2026-06-16&quot;:27.17},{&quot;2026-06-17&quot;:27.17},{&quot;2026-06-18&quot;:27.17},{&quot;2026-06-19&quot;:27.17},{&quot;2026-06-20&quot;:27.17},{&quot;2026-06-21&quot;:27.17},{&quot;2026-06-22&quot;:27.17},{&quot;2026-06-23&quot;:27.17},{&quot;2026-06-24&quot;:27.17},{&quot;2026-06-25&quot;:27.17},{&quot;2026-06-26&quot;:27.17},{&quot;2026-06-27&quot;:27.17},{&quot;2026-06-28&quot;:27.17},{&quot;2026-06-29&quot;:27.17},{&quot;2026-06-30&quot;:27.17},{&quot;2026-07-01&quot;:27.17},{&quot;2026-07-02&quot;:27.17},{&quot;2026-07-03&quot;:27.17},{&quot;2026-07-04&quot;:27.17},{&quot;2026-07-05&quot;:27.17},{&quot;2026-07-06&quot;:27.17},{&quot;2026-07-07&quot;:27.17},{&quot;2026-07-08&quot;:27.17},{&quot;2026-07-09&quot;:27.17},{&quot;2026-07-10&quot;:27.17},{&quot;2026-07-11&quot;:27.17},{&quot;2026-07-12&quot;:27.17},{&quot;2026-07-13&quot;:27.17},{&quot;2026-07-14&quot;:27.17},{&quot;2026-07-15&quot;:27.17},{&quot;2026-07-16&quot;:27.17},{&quot;2026-07-17&quot;:27.17},{&quot;2026-07-18&quot;:27.17},{&quot;2026-07-19&quot;:27.17},{&quot;2026-07-20&quot;:27.17},{&quot;2026-07-21&quot;:27.17},{&quot;2026-07-22&quot;:27.17},{&quot;2026-07-23&quot;:27.17},{&quot;2026-07-24&quot;:27.17},{&quot;2026-07-25&quot;:27.17},{&quot;2026-07-26&quot;:27.17},{&quot;2026-07-27&quot;:27.17},{&quot;2026-07-28&quot;:27.17},{&quot;2026-07-29&quot;:27.17},{&quot;2026-07-30&quot;:27.17},{&quot;2026-07-31&quot;:27.17},{&quot;2026-08-01&quot;:27.17},{&quot;2026-08-02&quot;:27.17},{&quot;2026-08-03&quot;:27.17},{&quot;2026-08-04&quot;:27.17},{&quot;2026-08-05&quot;:27.17},{&quot;2026-08-07&quot;:27.17},{&quot;2026-08-08&quot;:27.17},{&quot;2026-08-09&quot;:27.17},{&quot;2026-08-10&quot;:27.17},{&quot;2026-08-11&quot;:27.17},{&quot;2026-08-12&quot;:27.17},{&quot;2026-08-13&quot;:27.17},{&quot;2026-08-14&quot;:27.17},{&quot;2026-08-15&quot;:27.17},{&quot;2026-08-16&quot;:27.17},{&quot;2026-08-17&quot;:27.17},{&quot;2026-08-18&quot;:27.17},{&quot;2026-08-19&quot;:27.17},{&quot;2026-08-20&quot;:27.17},{&quot;2026-08-21&quot;:27.17},{&quot;2026-08-22&quot;:27.17},{&quot;2026-08-23&quot;:27.17},{&quot;2026-08-24&quot;:27.17},{&quot;2026-08-25&quot;:27.17},{&quot;2026-08-26&quot;:27.17},{&quot;2026-08-27&quot;:27.17},{&quot;2026-08-28&quot;:27.17},{&quot;2026-08-29&quot;:27.17},{&quot;2026-08-30&quot;:27.17},{&quot;2026-08-31&quot;:27.17},{&quot;2026-09-01&quot;:27.17},{&quot;2026-09-02&quot;:27.17},{&quot;2026-09-03&quot;:33.38},{&quot;2026-09-04&quot;:33.38},{&quot;2026-09-05&quot;:33.38},{&quot;2026-09-06&quot;:33.38},{&quot;2026-09-07&quot;:33.38},{&quot;2026-09-08&quot;:33.38},{&quot;2026-09-09&quot;:33.38},{&quot;2026-09-10&quot;:33.38},{&quot;2026-09-11&quot;:33.38}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:7.06},{&quot;2026-06-14&quot;:7.06},{&quot;2026-06-15&quot;:7.06},{&quot;2026-06-16&quot;:7.06},{&quot;2026-06-17&quot;:7.06},{&quot;2026-06-18&quot;:7.06},{&quot;2026-06-19&quot;:7.06},{&quot;2026-06-20&quot;:7.06},{&quot;2026-06-21&quot;:7.06},{&quot;2026-06-22&quot;:7.06},{&quot;2026-06-23&quot;:7.07},{&quot;2026-06-24&quot;:7.07},{&quot;2026-06-25&quot;:7.07},{&quot;2026-06-26&quot;:7.07},{&quot;2026-06-27&quot;:7.16},{&quot;2026-06-28&quot;:7.16},{&quot;2026-06-29&quot;:7.16},{&quot;2026-06-30&quot;:7.04},{&quot;2026-07-01&quot;:7.04},{&quot;2026-07-02&quot;:7.04},{&quot;2026-07-03&quot;:7.04},{&quot;2026-07-04&quot;:7.04},{&quot;2026-07-05&quot;:7.04},{&quot;2026-07-06&quot;:7.04},{&quot;2026-07-07&quot;:7.04},{&quot;2026-07-08&quot;:7.04},{&quot;2026-07-09&quot;:7.08},{&quot;2026-07-10&quot;:6.97},{&quot;2026-07-11&quot;:6.9},{&quot;2026-07-12&quot;:6.9},{&quot;2026-07-13&quot;:6.9},{&quot;2026-07-14&quot;:6.79},{&quot;2026-07-15&quot;:6.79},{&quot;2026-07-16&quot;:6.79},{&quot;2026-07-17&quot;:6.76},{&quot;2026-07-18&quot;:6.76},{&quot;2026-07-19&quot;:6.78},{&quot;2026-07-20&quot;:6.78},{&quot;2026-07-21&quot;:6.78},{&quot;2026-07-22&quot;:6.78},{&quot;2026-07-23&quot;:6.78},{&quot;2026-07-24&quot;:6.78},{&quot;2026-07-25&quot;:6.78},{&quot;2026-07-26&quot;:6.78},{&quot;2026-07-27&quot;:6.34},{&quot;2026-07-28&quot;:6.41},{&quot;2026-07-29&quot;:6.34},{&quot;2026-07-30&quot;:6.34},{&quot;2026-07-31&quot;:6.43},{&quot;2026-08-01&quot;:6.43},{&quot;2026-08-02&quot;:6.43},{&quot;2026-08-03&quot;:6.26},{&quot;2026-08-04&quot;:6.26},{&quot;2026-08-05&quot;:6.26},{&quot;2026-08-07&quot;:6.04},{&quot;2026-08-08&quot;:5.88},{&quot;2026-08-09&quot;:5.93},{&quot;2026-08-10&quot;:5.93},{&quot;2026-08-11&quot;:5.96},{&quot;2026-08-12&quot;:5.96},{&quot;2026-08-13&quot;:5.96},{&quot;2026-08-14&quot;:5.96},{&quot;2026-08-15&quot;:5.96},{&quot;2026-08-16&quot;:5.96},{&quot;2026-08-17&quot;:5.96},{&quot;2026-08-18&quot;:5.96},{&quot;2026-08-19&quot;:6.05},{&quot;2026-08-20&quot;:6.05},{&quot;2026-08-21&quot;:6.05},{&quot;2026-08-22&quot;:6.05},{&quot;2026-08-23&quot;:6.05},{&quot;2026-08-24&quot;:6.05},{&quot;2026-08-25&quot;:6.09},{&quot;2026-08-26&quot;:6.14},{&quot;2026-08-27&quot;:6.14},{&quot;2026-08-28&quot;:6.14},{&quot;2026-08-29&quot;:6.14},{&quot;2026-08-30&quot;:6.14},{&quot;2026-08-31&quot;:6.14},{&quot;2026-09-01&quot;:6.14},{&quot;2026-09-02&quot;:6.1},{&quot;2026-09-03&quot;:6.15},{&quot;2026-09-04&quot;:6.11},{&quot;2026-09-05&quot;:6.16},{&quot;2026-09-06&quot;:6.09},{&quot;2026-09-07&quot;:6.09},{&quot;2026-09-08&quot;:6.1},{&quot;2026-09-09&quot;:6.1},{&quot;2026-09-10&quot;:6.1},{&quot;2026-09-11&quot;:6.1}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="11926"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmr ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Hellkite Courser
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Dragon
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              30%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.09
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Hellkite Courser" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/b/db45122e-b5ef-487b-8ea9-59ea066d3c88.jpg?1783928813" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Hellkite Courser
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Dragon</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-4'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Hellkite Courser" src="https://cards.scryfall.io/large/front/d/b/db45122e-b5ef-487b-8ea9-59ea066d3c88.jpg?1783928813" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.09
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  30%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $14.59
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.50</span>
              <span class="text-xs text-grey-text">Credit: $3.25</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-08&quot;:14.05},{&quot;2026-06-10&quot;:14.05},{&quot;2026-06-11&quot;:13.99},{&quot;2026-06-12&quot;:13.96},{&quot;2026-06-13&quot;:13.96},{&quot;2026-06-14&quot;:13.96},{&quot;2026-06-15&quot;:13.96},{&quot;2026-06-16&quot;:13.96},{&quot;2026-06-17&quot;:13.96},{&quot;2026-06-18&quot;:13.96},{&quot;2026-06-19&quot;:13.96},{&quot;2026-06-20&quot;:13.96},{&quot;2026-06-21&quot;:13.96},{&quot;2026-06-22&quot;:13.96},{&quot;2026-06-24&quot;:14.03},{&quot;2026-06-25&quot;:14.03},{&quot;2026-06-26&quot;:14.03},{&quot;2026-06-27&quot;:14.05},{&quot;2026-06-28&quot;:14.05},{&quot;2026-06-29&quot;:14.05},{&quot;2026-06-30&quot;:14.05},{&quot;2026-07-01&quot;:14.05},{&quot;2026-07-02&quot;:14.05},{&quot;2026-07-03&quot;:13.97},{&quot;2026-07-04&quot;:13.97},{&quot;2026-07-05&quot;:14.05},{&quot;2026-07-06&quot;:14.09},{&quot;2026-07-07&quot;:14.09},{&quot;2026-07-08&quot;:14.09},{&quot;2026-07-09&quot;:14.09},{&quot;2026-07-10&quot;:14.09},{&quot;2026-07-11&quot;:14.09},{&quot;2026-07-12&quot;:14.09},{&quot;2026-07-13&quot;:14.09},{&quot;2026-07-14&quot;:14.09},{&quot;2026-07-15&quot;:14.09},{&quot;2026-07-16&quot;:14.09},{&quot;2026-07-17&quot;:14.09},{&quot;2026-07-18&quot;:14.09},{&quot;2026-07-19&quot;:14.09},{&quot;2026-07-20&quot;:14.09},{&quot;2026-07-21&quot;:14.09},{&quot;2026-07-23&quot;:14.09},{&quot;2026-07-25&quot;:14.13},{&quot;2026-07-26&quot;:14.13},{&quot;2026-07-27&quot;:14.13},{&quot;2026-07-29&quot;:14.13},{&quot;2026-07-30&quot;:14.13},{&quot;2026-07-31&quot;:14.13},{&quot;2026-08-01&quot;:14.13},{&quot;2026-08-02&quot;:14.14},{&quot;2026-08-03&quot;:14.14},{&quot;2026-08-04&quot;:14.14},{&quot;2026-08-05&quot;:14.2},{&quot;2026-08-07&quot;:14.26},{&quot;2026-08-08&quot;:14.26},{&quot;2026-08-09&quot;:14.26},{&quot;2026-08-10&quot;:14.26},{&quot;2026-08-11&quot;:14.38},{&quot;2026-08-12&quot;:14.38},{&quot;2026-08-13&quot;:14.38},{&quot;2026-08-14&quot;:14.41},{&quot;2026-08-15&quot;:14.41},{&quot;2026-08-16&quot;:14.41},{&quot;2026-08-17&quot;:14.41},{&quot;2026-08-18&quot;:14.41},{&quot;2026-08-19&quot;:14.41},{&quot;2026-08-20&quot;:14.41},{&quot;2026-08-21&quot;:14.44},{&quot;2026-08-22&quot;:14.44},{&quot;2026-08-23&quot;:14.44},{&quot;2026-08-24&quot;:14.44},{&quot;2026-08-25&quot;:14.44},{&quot;2026-08-26&quot;:14.44},{&quot;2026-08-27&quot;:14.44},{&quot;2026-08-28&quot;:14.44},{&quot;2026-08-29&quot;:14.44},{&quot;2026-08-30&quot;:14.57},{&quot;2026-08-31&quot;:14.57},{&quot;2026-09-01&quot;:14.57},{&quot;2026-09-02&quot;:14.57},{&quot;2026-09-03&quot;:14.57},{&quot;2026-09-04&quot;:14.59},{&quot;2026-09-05&quot;:14.59},{&quot;2026-09-06&quot;:14.59},{&quot;2026-09-07&quot;:14.59},{&quot;2026-09-08&quot;:14.59},{&quot;2026-09-09&quot;:14.59},{&quot;2026-09-10&quot;:14.59},{&quot;2026-09-11&quot;:14.59}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:4.82},{&quot;2026-06-10&quot;:4.82},{&quot;2026-06-11&quot;:4.82},{&quot;2026-06-12&quot;:5.06},{&quot;2026-06-13&quot;:5.51},{&quot;2026-06-14&quot;:5.78},{&quot;2026-06-15&quot;:6.0},{&quot;2026-06-16&quot;:5.96},{&quot;2026-06-17&quot;:6.51},{&quot;2026-06-18&quot;:6.53},{&quot;2026-06-19&quot;:6.53},{&quot;2026-06-20&quot;:6.53},{&quot;2026-06-21&quot;:6.53},{&quot;2026-06-22&quot;:6.53},{&quot;2026-06-24&quot;:6.38},{&quot;2026-06-25&quot;:6.38},{&quot;2026-06-26&quot;:6.55},{&quot;2026-06-27&quot;:6.58},{&quot;2026-06-28&quot;:6.22},{&quot;2026-06-29&quot;:6.22},{&quot;2026-06-30&quot;:6.19},{&quot;2026-07-01&quot;:6.19},{&quot;2026-07-02&quot;:6.02},{&quot;2026-07-03&quot;:5.68},{&quot;2026-07-04&quot;:5.68},{&quot;2026-07-05&quot;:5.62},{&quot;2026-07-06&quot;:5.76},{&quot;2026-07-07&quot;:5.59},{&quot;2026-07-08&quot;:5.59},{&quot;2026-07-09&quot;:5.56},{&quot;2026-07-10&quot;:5.41},{&quot;2026-07-11&quot;:5.2},{&quot;2026-07-12&quot;:5.27},{&quot;2026-07-13&quot;:5.87},{&quot;2026-07-14&quot;:6.01},{&quot;2026-07-15&quot;:5.98},{&quot;2026-07-16&quot;:5.8},{&quot;2026-07-17&quot;:5.8},{&quot;2026-07-18&quot;:5.87},{&quot;2026-07-19&quot;:5.84},{&quot;2026-07-20&quot;:5.7},{&quot;2026-07-21&quot;:5.6},{&quot;2026-07-23&quot;:5.34},{&quot;2026-07-25&quot;:5.12},{&quot;2026-07-26&quot;:5.12},{&quot;2026-07-27&quot;:5.12},{&quot;2026-07-29&quot;:4.78},{&quot;2026-07-30&quot;:4.42},{&quot;2026-07-31&quot;:4.48},{&quot;2026-08-01&quot;:4.44},{&quot;2026-08-02&quot;:4.44},{&quot;2026-08-03&quot;:4.52},{&quot;2026-08-04&quot;:4.61},{&quot;2026-08-05&quot;:4.53},{&quot;2026-08-07&quot;:4.55},{&quot;2026-08-08&quot;:4.55},{&quot;2026-08-09&quot;:4.6},{&quot;2026-08-10&quot;:4.55},{&quot;2026-08-11&quot;:4.55},{&quot;2026-08-12&quot;:4.55},{&quot;2026-08-13&quot;:4.56},{&quot;2026-08-14&quot;:4.66},{&quot;2026-08-15&quot;:4.66},{&quot;2026-08-16&quot;:4.87},{&quot;2026-08-17&quot;:4.81},{&quot;2026-08-18&quot;:4.85},{&quot;2026-08-19&quot;:4.95},{&quot;2026-08-20&quot;:4.95},{&quot;2026-08-21&quot;:5.17},{&quot;2026-08-22&quot;:4.91},{&quot;2026-08-23&quot;:4.9},{&quot;2026-08-24&quot;:4.9},{&quot;2026-08-25&quot;:4.9},{&quot;2026-08-26&quot;:5.0},{&quot;2026-08-27&quot;:4.88},{&quot;2026-08-28&quot;:4.79},{&quot;2026-08-29&quot;:4.79},{&quot;2026-08-30&quot;:4.54},{&quot;2026-08-31&quot;:4.54},{&quot;2026-09-01&quot;:4.54},{&quot;2026-09-02&quot;:4.67},{&quot;2026-09-03&quot;:4.59},{&quot;2026-09-04&quot;:4.38},{&quot;2026-09-05&quot;:4.68},{&quot;2026-09-06&quot;:5.21},{&quot;2026-09-07&quot;:5.73},{&quot;2026-09-08&quot;:5.96},{&quot;2026-09-09&quot;:6.09},{&quot;2026-09-10&quot;:6.14},{&quot;2026-09-11&quot;:6.09}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="12003"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Kozilek, the Great Distortion
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Eldrazi
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.08
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Kozilek, the Great Distortion" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/4/c41554e7-2a07-4cc7-b01b-44deed08e588.jpg?1783915732" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Kozilek, the Great Distortion
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Eldrazi</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-8'></i><i class='no-tailwind ms ms-cost ml-0 ms-c'></i><i class='no-tailwind ms ms-cost ml-0 ms-c'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Kozilek, the Great Distortion" src="https://cards.scryfall.io/large/front/c/4/c41554e7-2a07-4cc7-b01b-44deed08e588.jpg?1783915732" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.08
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  2%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $7.37
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.20</span>
              <span class="text-xs text-grey-text">Credit: $5.46</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-08&quot;:7.03},{&quot;2026-06-10&quot;:7.15},{&quot;2026-06-11&quot;:7.15},{&quot;2026-06-12&quot;:7.15},{&quot;2026-06-13&quot;:7.15},{&quot;2026-06-14&quot;:7.15},{&quot;2026-06-15&quot;:7.15},{&quot;2026-06-16&quot;:7.15},{&quot;2026-06-17&quot;:7.15},{&quot;2026-06-18&quot;:7.15},{&quot;2026-06-19&quot;:7.15},{&quot;2026-06-20&quot;:7.15},{&quot;2026-06-21&quot;:7.09},{&quot;2026-06-22&quot;:7.09},{&quot;2026-06-24&quot;:7.13},{&quot;2026-06-25&quot;:7.13},{&quot;2026-06-26&quot;:7.13},{&quot;2026-06-27&quot;:7.13},{&quot;2026-06-28&quot;:7.04},{&quot;2026-06-29&quot;:7.04},{&quot;2026-06-30&quot;:7.04},{&quot;2026-07-01&quot;:7.04},{&quot;2026-07-02&quot;:7.13},{&quot;2026-07-03&quot;:7.13},{&quot;2026-07-04&quot;:7.13},{&quot;2026-07-05&quot;:7.13},{&quot;2026-07-06&quot;:7.13},{&quot;2026-07-07&quot;:7.13},{&quot;2026-07-08&quot;:7.13},{&quot;2026-07-09&quot;:7.13},{&quot;2026-07-10&quot;:7.1},{&quot;2026-07-11&quot;:7.1},{&quot;2026-07-12&quot;:7.1},{&quot;2026-07-13&quot;:7.1},{&quot;2026-07-14&quot;:7.1},{&quot;2026-07-15&quot;:7.1},{&quot;2026-07-16&quot;:7.1},{&quot;2026-07-17&quot;:7.1},{&quot;2026-07-18&quot;:7.1},{&quot;2026-07-19&quot;:7.1},{&quot;2026-07-20&quot;:7.1},{&quot;2026-07-21&quot;:7.1},{&quot;2026-07-23&quot;:7.1},{&quot;2026-07-25&quot;:7.1},{&quot;2026-07-26&quot;:7.1},{&quot;2026-07-27&quot;:7.1},{&quot;2026-07-29&quot;:7.1},{&quot;2026-07-30&quot;:7.1},{&quot;2026-07-31&quot;:7.1},{&quot;2026-08-01&quot;:7.1},{&quot;2026-08-02&quot;:7.1},{&quot;2026-08-03&quot;:7.1},{&quot;2026-08-04&quot;:7.1},{&quot;2026-08-05&quot;:7.1},{&quot;2026-08-07&quot;:7.1},{&quot;2026-08-08&quot;:7.1},{&quot;2026-08-09&quot;:7.1},{&quot;2026-08-10&quot;:7.1},{&quot;2026-08-11&quot;:7.1},{&quot;2026-08-12&quot;:7.1},{&quot;2026-08-13&quot;:7.1},{&quot;2026-08-14&quot;:7.1},{&quot;2026-08-15&quot;:7.1},{&quot;2026-08-16&quot;:7.1},{&quot;2026-08-17&quot;:7.1},{&quot;2026-08-18&quot;:7.1},{&quot;2026-08-19&quot;:7.1},{&quot;2026-08-20&quot;:7.1},{&quot;2026-08-21&quot;:7.26},{&quot;2026-08-22&quot;:7.26},{&quot;2026-08-23&quot;:7.26},{&quot;2026-08-24&quot;:7.26},{&quot;2026-08-25&quot;:7.26},{&quot;2026-08-26&quot;:7.26},{&quot;2026-08-27&quot;:7.26},{&quot;2026-08-28&quot;:7.26},{&quot;2026-08-29&quot;:7.26},{&quot;2026-08-30&quot;:7.26},{&quot;2026-08-31&quot;:7.26},{&quot;2026-09-01&quot;:7.26},{&quot;2026-09-02&quot;:7.3},{&quot;2026-09-03&quot;:7.3},{&quot;2026-09-04&quot;:7.3},{&quot;2026-09-05&quot;:7.3},{&quot;2026-09-06&quot;:7.3},{&quot;2026-09-07&quot;:7.3},{&quot;2026-09-08&quot;:7.3},{&quot;2026-09-09&quot;:7.3},{&quot;2026-09-10&quot;:7.3},{&quot;2026-09-11&quot;:7.37}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:5.12},{&quot;2026-06-10&quot;:5.3},{&quot;2026-06-11&quot;:5.21},{&quot;2026-06-12&quot;:5.06},{&quot;2026-06-13&quot;:5.05},{&quot;2026-06-14&quot;:5.14},{&quot;2026-06-15&quot;:5.18},{&quot;2026-06-16&quot;:5.21},{&quot;2026-06-17&quot;:5.15},{&quot;2026-06-18&quot;:4.87},{&quot;2026-06-19&quot;:4.77},{&quot;2026-06-20&quot;:4.46},{&quot;2026-06-21&quot;:4.52},{&quot;2026-06-22&quot;:4.53},{&quot;2026-06-24&quot;:4.65},{&quot;2026-06-25&quot;:4.65},{&quot;2026-06-26&quot;:4.64},{&quot;2026-06-27&quot;:4.7},{&quot;2026-06-28&quot;:4.76},{&quot;2026-06-29&quot;:4.78},{&quot;2026-06-30&quot;:4.84},{&quot;2026-07-01&quot;:4.7},{&quot;2026-07-02&quot;:4.83},{&quot;2026-07-03&quot;:4.89},{&quot;2026-07-04&quot;:5.04},{&quot;2026-07-05&quot;:5.03},{&quot;2026-07-06&quot;:5.07},{&quot;2026-07-07&quot;:5.08},{&quot;2026-07-08&quot;:5.08},{&quot;2026-07-09&quot;:5.21},{&quot;2026-07-10&quot;:5.13},{&quot;2026-07-11&quot;:5.26},{&quot;2026-07-12&quot;:5.25},{&quot;2026-07-13&quot;:5.17},{&quot;2026-07-14&quot;:5.25},{&quot;2026-07-15&quot;:5.27},{&quot;2026-07-16&quot;:5.27},{&quot;2026-07-17&quot;:5.35},{&quot;2026-07-18&quot;:5.28},{&quot;2026-07-19&quot;:5.33},{&quot;2026-07-20&quot;:5.52},{&quot;2026-07-21&quot;:5.75},{&quot;2026-07-23&quot;:5.79},{&quot;2026-07-25&quot;:5.73},{&quot;2026-07-26&quot;:5.58},{&quot;2026-07-27&quot;:5.63},{&quot;2026-07-29&quot;:5.71},{&quot;2026-07-30&quot;:5.82},{&quot;2026-07-31&quot;:5.83},{&quot;2026-08-01&quot;:5.86},{&quot;2026-08-02&quot;:5.86},{&quot;2026-08-03&quot;:5.95},{&quot;2026-08-04&quot;:5.86},{&quot;2026-08-05&quot;:5.87},{&quot;2026-08-07&quot;:5.86},{&quot;2026-08-08&quot;:5.83},{&quot;2026-08-09&quot;:5.92},{&quot;2026-08-10&quot;:6.03},{&quot;2026-08-11&quot;:6.03},{&quot;2026-08-12&quot;:6.06},{&quot;2026-08-13&quot;:5.97},{&quot;2026-08-14&quot;:6.07},{&quot;2026-08-15&quot;:6.01},{&quot;2026-08-16&quot;:5.96},{&quot;2026-08-17&quot;:5.92},{&quot;2026-08-18&quot;:5.8},{&quot;2026-08-19&quot;:5.68},{&quot;2026-08-20&quot;:5.68},{&quot;2026-08-21&quot;:5.41},{&quot;2026-08-22&quot;:5.37},{&quot;2026-08-23&quot;:5.45},{&quot;2026-08-24&quot;:5.59},{&quot;2026-08-25&quot;:5.59},{&quot;2026-08-26&quot;:5.52},{&quot;2026-08-27&quot;:5.57},{&quot;2026-08-28&quot;:5.73},{&quot;2026-08-29&quot;:5.73},{&quot;2026-08-30&quot;:5.9},{&quot;2026-08-31&quot;:5.97},{&quot;2026-09-01&quot;:5.97},{&quot;2026-09-02&quot;:6.04},{&quot;2026-09-03&quot;:6.04},{&quot;2026-09-04&quot;:6.13},{&quot;2026-09-05&quot;:6.21},{&quot;2026-09-06&quot;:5.98},{&quot;2026-09-07&quot;:6.01},{&quot;2026-09-08&quot;:6.13},{&quot;2026-09-09&quot;:6.12},{&quot;2026-09-10&quot;:6.08},{&quot;2026-09-11&quot;:6.08}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="75640"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-lcc ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Windfall
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Sorcery
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.08
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Windfall" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/4/14e1af91-34fe-4d82-b119-cbadf75a7dbe.jpg?1783913879" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Windfall
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Sorcery</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Windfall" src="https://cards.scryfall.io/large/front/1/4/14e1af91-34fe-4d82-b119-cbadf75a7dbe.jpg?1783913879" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.08
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  2%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.70</span>
              <span class="text-xs text-grey-text">Credit: $6.11</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-12&quot;:5.15},{&quot;2026-06-13&quot;:5.23},{&quot;2026-06-14&quot;:5.24},{&quot;2026-06-15&quot;:5.31},{&quot;2026-06-16&quot;:5.54},{&quot;2026-06-17&quot;:5.58},{&quot;2026-06-18&quot;:5.51},{&quot;2026-06-19&quot;:5.44},{&quot;2026-06-20&quot;:5.46},{&quot;2026-06-21&quot;:5.46},{&quot;2026-06-22&quot;:5.48},{&quot;2026-06-23&quot;:5.52},{&quot;2026-06-24&quot;:5.47},{&quot;2026-06-25&quot;:5.46},{&quot;2026-06-26&quot;:5.45},{&quot;2026-06-27&quot;:5.46},{&quot;2026-06-28&quot;:5.46},{&quot;2026-06-29&quot;:5.39},{&quot;2026-06-30&quot;:5.34},{&quot;2026-07-01&quot;:5.29},{&quot;2026-07-02&quot;:5.27},{&quot;2026-07-03&quot;:5.21},{&quot;2026-07-04&quot;:5.22},{&quot;2026-07-05&quot;:4.63},{&quot;2026-07-06&quot;:4.48},{&quot;2026-07-07&quot;:4.78},{&quot;2026-07-08&quot;:4.73},{&quot;2026-07-09&quot;:4.52},{&quot;2026-07-10&quot;:4.71},{&quot;2026-07-11&quot;:4.77},{&quot;2026-07-12&quot;:4.98},{&quot;2026-07-13&quot;:5.17},{&quot;2026-07-14&quot;:5.25},{&quot;2026-07-15&quot;:5.18},{&quot;2026-07-16&quot;:5.15},{&quot;2026-07-17&quot;:5.08},{&quot;2026-07-18&quot;:5.19},{&quot;2026-07-19&quot;:5.4},{&quot;2026-07-20&quot;:5.47},{&quot;2026-07-21&quot;:5.47},{&quot;2026-07-23&quot;:5.46},{&quot;2026-07-24&quot;:5.51},{&quot;2026-07-25&quot;:5.49},{&quot;2026-07-26&quot;:5.53},{&quot;2026-07-27&quot;:5.5},{&quot;2026-07-28&quot;:5.29},{&quot;2026-07-29&quot;:5.12},{&quot;2026-07-30&quot;:5.09},{&quot;2026-07-31&quot;:4.87},{&quot;2026-08-01&quot;:5.16},{&quot;2026-08-02&quot;:4.83},{&quot;2026-08-03&quot;:4.9},{&quot;2026-08-04&quot;:5.25},{&quot;2026-08-05&quot;:5.38},{&quot;2026-08-07&quot;:5.31},{&quot;2026-08-08&quot;:5.35},{&quot;2026-08-09&quot;:5.39},{&quot;2026-08-10&quot;:5.55},{&quot;2026-08-11&quot;:5.65},{&quot;2026-08-12&quot;:5.78},{&quot;2026-08-13&quot;:5.89},{&quot;2026-08-14&quot;:6.01},{&quot;2026-08-15&quot;:5.98},{&quot;2026-08-16&quot;:5.86},{&quot;2026-08-17&quot;:5.89},{&quot;2026-08-18&quot;:5.92},{&quot;2026-08-19&quot;:5.84},{&quot;2026-08-20&quot;:5.84},{&quot;2026-08-21&quot;:5.93},{&quot;2026-08-22&quot;:5.75},{&quot;2026-08-23&quot;:5.79},{&quot;2026-08-24&quot;:5.83},{&quot;2026-08-25&quot;:5.85},{&quot;2026-08-26&quot;:5.9},{&quot;2026-08-27&quot;:6.0},{&quot;2026-08-28&quot;:6.04},{&quot;2026-08-29&quot;:6.04},{&quot;2026-08-30&quot;:5.88},{&quot;2026-08-31&quot;:5.99},{&quot;2026-09-01&quot;:5.98},{&quot;2026-09-02&quot;:5.91},{&quot;2026-09-03&quot;:5.97},{&quot;2026-09-04&quot;:5.94},{&quot;2026-09-05&quot;:5.95},{&quot;2026-09-06&quot;:6.13},{&quot;2026-09-07&quot;:6.18},{&quot;2026-09-08&quot;:6.15},{&quot;2026-09-09&quot;:6.31},{&quot;2026-09-10&quot;:6.18},{&quot;2026-09-11&quot;:6.08}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="76997"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Herald of Secret Streams
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Merfolk Warrior
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $6.08
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Herald of Secret Streams" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/1/d18870fa-624d-4291-a711-9743e504711f.jpg?1783910326" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Herald of Secret Streams
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Merfolk Warrior</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Herald of Secret Streams" src="https://cards.scryfall.io/large/front/d/1/d18870fa-624d-4291-a711-9743e504711f.jpg?1783910326" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.08
              </span>

            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$5.50</span>
              <span class="text-xs text-grey-text">Credit: $7.15</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-10&quot;:5.16},{&quot;2026-06-11&quot;:5.16},{&quot;2026-06-12&quot;:5.16},{&quot;2026-06-13&quot;:5.16},{&quot;2026-06-14&quot;:5.16},{&quot;2026-06-15&quot;:5.19},{&quot;2026-06-16&quot;:5.2},{&quot;2026-06-17&quot;:5.14},{&quot;2026-06-18&quot;:5.14},{&quot;2026-06-19&quot;:5.13},{&quot;2026-06-20&quot;:5.13},{&quot;2026-06-21&quot;:5.13},{&quot;2026-06-22&quot;:5.12},{&quot;2026-06-23&quot;:5.19},{&quot;2026-06-24&quot;:5.19},{&quot;2026-06-25&quot;:5.26},{&quot;2026-06-26&quot;:5.26},{&quot;2026-06-27&quot;:5.21},{&quot;2026-06-28&quot;:5.21},{&quot;2026-06-29&quot;:5.27},{&quot;2026-06-30&quot;:5.22},{&quot;2026-07-01&quot;:5.24},{&quot;2026-07-02&quot;:5.24},{&quot;2026-07-03&quot;:5.21},{&quot;2026-07-04&quot;:5.34},{&quot;2026-07-05&quot;:5.34},{&quot;2026-07-06&quot;:5.34},{&quot;2026-07-07&quot;:5.31},{&quot;2026-07-08&quot;:5.38},{&quot;2026-07-09&quot;:5.48},{&quot;2026-07-10&quot;:5.52},{&quot;2026-07-11&quot;:5.5},{&quot;2026-07-12&quot;:5.56},{&quot;2026-07-13&quot;:5.56},{&quot;2026-07-14&quot;:5.71},{&quot;2026-07-15&quot;:5.69},{&quot;2026-07-16&quot;:5.69},{&quot;2026-07-17&quot;:5.77},{&quot;2026-07-18&quot;:5.84},{&quot;2026-07-19&quot;:5.84},{&quot;2026-07-20&quot;:5.84},{&quot;2026-07-21&quot;:5.86},{&quot;2026-07-23&quot;:5.89},{&quot;2026-07-25&quot;:5.98},{&quot;2026-07-26&quot;:5.98},{&quot;2026-07-27&quot;:5.98},{&quot;2026-07-29&quot;:5.96},{&quot;2026-07-30&quot;:5.92},{&quot;2026-07-31&quot;:5.85},{&quot;2026-08-01&quot;:5.82},{&quot;2026-08-02&quot;:5.66},{&quot;2026-08-03&quot;:5.29},{&quot;2026-08-04&quot;:5.24},{&quot;2026-08-05&quot;:5.25},{&quot;2026-08-07&quot;:5.36},{&quot;2026-08-08&quot;:5.35},{&quot;2026-08-09&quot;:5.43},{&quot;2026-08-10&quot;:5.45},{&quot;2026-08-11&quot;:5.43},{&quot;2026-08-12&quot;:5.52},{&quot;2026-08-13&quot;:5.6},{&quot;2026-08-14&quot;:5.63},{&quot;2026-08-15&quot;:5.57},{&quot;2026-08-16&quot;:5.52},{&quot;2026-08-17&quot;:5.5},{&quot;2026-08-18&quot;:5.57},{&quot;2026-08-19&quot;:5.6},{&quot;2026-08-20&quot;:5.6},{&quot;2026-08-21&quot;:5.7},{&quot;2026-08-22&quot;:5.78},{&quot;2026-08-23&quot;:5.79},{&quot;2026-08-24&quot;:5.81},{&quot;2026-08-25&quot;:5.81},{&quot;2026-08-26&quot;:5.93},{&quot;2026-08-27&quot;:5.91},{&quot;2026-08-28&quot;:5.93},{&quot;2026-08-29&quot;:5.93},{&quot;2026-08-30&quot;:6.06},{&quot;2026-08-31&quot;:6.16},{&quot;2026-09-01&quot;:6.16},{&quot;2026-09-02&quot;:6.18},{&quot;2026-09-03&quot;:6.18},{&quot;2026-09-04&quot;:6.11},{&quot;2026-09-05&quot;:6.1},{&quot;2026-09-06&quot;:6.17},{&quot;2026-09-07&quot;:6.12},{&quot;2026-09-08&quot;:6.2},{&quot;2026-09-09&quot;:6.14},{&quot;2026-09-10&quot;:6.08},{&quot;2026-09-11&quot;:6.08}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="79527"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tsr ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Swarmyard
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Land
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              6%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.08
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Swarmyard" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/8/b89329f2-d386-40a7-9098-6d80beeb8843.jpg?1783927748" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Swarmyard
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Land</span>
        </div>

      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Swarmyard" src="https://cards.scryfall.io/large/front/b/8/b89329f2-d386-40a7-9098-6d80beeb8843.jpg?1783927748" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.08
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  6%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $11.01
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.70</span>
              <span class="text-xs text-grey-text">Credit: $4.81</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-11&quot;:10.01},{&quot;2026-06-12&quot;:10.01},{&quot;2026-06-13&quot;:10.01},{&quot;2026-06-14&quot;:10.01},{&quot;2026-06-15&quot;:10.01},{&quot;2026-06-16&quot;:10.01},{&quot;2026-06-17&quot;:10.01},{&quot;2026-06-18&quot;:10.01},{&quot;2026-06-19&quot;:10.01},{&quot;2026-06-20&quot;:10.01},{&quot;2026-06-21&quot;:10.01},{&quot;2026-06-22&quot;:10.01},{&quot;2026-06-23&quot;:10.01},{&quot;2026-06-24&quot;:9.96},{&quot;2026-06-25&quot;:9.96},{&quot;2026-06-26&quot;:9.96},{&quot;2026-06-27&quot;:9.96},{&quot;2026-06-28&quot;:9.96},{&quot;2026-06-29&quot;:9.96},{&quot;2026-06-30&quot;:9.96},{&quot;2026-07-01&quot;:9.96},{&quot;2026-07-02&quot;:9.96},{&quot;2026-07-03&quot;:10.08},{&quot;2026-07-04&quot;:10.08},{&quot;2026-07-05&quot;:10.08},{&quot;2026-07-06&quot;:10.31},{&quot;2026-07-07&quot;:10.31},{&quot;2026-07-08&quot;:10.52},{&quot;2026-07-09&quot;:10.72},{&quot;2026-07-10&quot;:10.72},{&quot;2026-07-11&quot;:10.72},{&quot;2026-07-12&quot;:10.72},{&quot;2026-07-13&quot;:10.72},{&quot;2026-07-14&quot;:10.73},{&quot;2026-07-15&quot;:10.73},{&quot;2026-07-16&quot;:10.73},{&quot;2026-07-17&quot;:10.73},{&quot;2026-07-18&quot;:10.73},{&quot;2026-07-19&quot;:10.73},{&quot;2026-07-20&quot;:10.73},{&quot;2026-07-21&quot;:10.81},{&quot;2026-07-23&quot;:10.73},{&quot;2026-07-25&quot;:10.97},{&quot;2026-07-26&quot;:10.97},{&quot;2026-07-27&quot;:10.97},{&quot;2026-07-28&quot;:10.97},{&quot;2026-07-29&quot;:10.97},{&quot;2026-07-30&quot;:10.97},{&quot;2026-07-31&quot;:11.0},{&quot;2026-08-01&quot;:11.0},{&quot;2026-08-02&quot;:10.97},{&quot;2026-08-03&quot;:10.97},{&quot;2026-08-04&quot;:10.97},{&quot;2026-08-05&quot;:10.97},{&quot;2026-08-07&quot;:10.97},{&quot;2026-08-08&quot;:10.97},{&quot;2026-08-09&quot;:10.97},{&quot;2026-08-10&quot;:10.97},{&quot;2026-08-11&quot;:10.97},{&quot;2026-08-12&quot;:10.97},{&quot;2026-08-13&quot;:10.97},{&quot;2026-08-14&quot;:10.97},{&quot;2026-08-15&quot;:10.97},{&quot;2026-08-16&quot;:10.97},{&quot;2026-08-17&quot;:10.81},{&quot;2026-08-18&quot;:10.81},{&quot;2026-08-19&quot;:10.81},{&quot;2026-08-20&quot;:10.81},{&quot;2026-08-21&quot;:10.81},{&quot;2026-08-22&quot;:10.81},{&quot;2026-08-23&quot;:10.71},{&quot;2026-08-24&quot;:10.71},{&quot;2026-08-25&quot;:10.71},{&quot;2026-08-26&quot;:10.71},{&quot;2026-08-27&quot;:10.71},{&quot;2026-08-28&quot;:10.71},{&quot;2026-08-29&quot;:10.71},{&quot;2026-08-30&quot;:10.66},{&quot;2026-08-31&quot;:10.66},{&quot;2026-09-01&quot;:10.66},{&quot;2026-09-02&quot;:10.66},{&quot;2026-09-03&quot;:10.66},{&quot;2026-09-04&quot;:10.66},{&quot;2026-09-05&quot;:10.66},{&quot;2026-09-06&quot;:10.66},{&quot;2026-09-07&quot;:10.66},{&quot;2026-09-08&quot;:10.7},{&quot;2026-09-09&quot;:11.01},{&quot;2026-09-10&quot;:11.01},{&quot;2026-09-11&quot;:11.01}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:4.34},{&quot;2026-06-12&quot;:4.34},{&quot;2026-06-13&quot;:4.24},{&quot;2026-06-14&quot;:3.96},{&quot;2026-06-15&quot;:3.86},{&quot;2026-06-16&quot;:3.94},{&quot;2026-06-17&quot;:3.94},{&quot;2026-06-18&quot;:3.77},{&quot;2026-06-19&quot;:3.83},{&quot;2026-06-20&quot;:3.82},{&quot;2026-06-21&quot;:3.77},{&quot;2026-06-22&quot;:3.74},{&quot;2026-06-23&quot;:3.94},{&quot;2026-06-24&quot;:4.09},{&quot;2026-06-25&quot;:4.15},{&quot;2026-06-26&quot;:4.22},{&quot;2026-06-27&quot;:4.47},{&quot;2026-06-28&quot;:4.83},{&quot;2026-06-29&quot;:4.83},{&quot;2026-06-30&quot;:4.83},{&quot;2026-07-01&quot;:4.95},{&quot;2026-07-02&quot;:5.04},{&quot;2026-07-03&quot;:4.54},{&quot;2026-07-04&quot;:4.61},{&quot;2026-07-05&quot;:4.51},{&quot;2026-07-06&quot;:4.87},{&quot;2026-07-07&quot;:4.69},{&quot;2026-07-08&quot;:4.68},{&quot;2026-07-09&quot;:4.81},{&quot;2026-07-10&quot;:4.93},{&quot;2026-07-11&quot;:4.94},{&quot;2026-07-12&quot;:4.92},{&quot;2026-07-13&quot;:5.16},{&quot;2026-07-14&quot;:4.95},{&quot;2026-07-15&quot;:4.93},{&quot;2026-07-16&quot;:4.81},{&quot;2026-07-17&quot;:4.67},{&quot;2026-07-18&quot;:4.68},{&quot;2026-07-19&quot;:4.71},{&quot;2026-07-20&quot;:4.74},{&quot;2026-07-21&quot;:4.65},{&quot;2026-07-23&quot;:4.48},{&quot;2026-07-25&quot;:4.43},{&quot;2026-07-26&quot;:4.49},{&quot;2026-07-27&quot;:4.73},{&quot;2026-07-28&quot;:5.08},{&quot;2026-07-29&quot;:5.48},{&quot;2026-07-30&quot;:5.48},{&quot;2026-07-31&quot;:5.47},{&quot;2026-08-01&quot;:5.46},{&quot;2026-08-02&quot;:5.44},{&quot;2026-08-03&quot;:5.52},{&quot;2026-08-04&quot;:5.52},{&quot;2026-08-05&quot;:5.53},{&quot;2026-08-07&quot;:5.18},{&quot;2026-08-08&quot;:5.04},{&quot;2026-08-09&quot;:5.42},{&quot;2026-08-10&quot;:5.44},{&quot;2026-08-11&quot;:5.65},{&quot;2026-08-12&quot;:5.83},{&quot;2026-08-13&quot;:6.02},{&quot;2026-08-14&quot;:6.08},{&quot;2026-08-15&quot;:6.03},{&quot;2026-08-16&quot;:6.17},{&quot;2026-08-17&quot;:6.17},{&quot;2026-08-18&quot;:6.3},{&quot;2026-08-19&quot;:6.3},{&quot;2026-08-20&quot;:6.3},{&quot;2026-08-21&quot;:6.36},{&quot;2026-08-22&quot;:6.36},{&quot;2026-08-23&quot;:6.36},{&quot;2026-08-24&quot;:6.36},{&quot;2026-08-25&quot;:6.35},{&quot;2026-08-26&quot;:6.27},{&quot;2026-08-27&quot;:6.55},{&quot;2026-08-28&quot;:6.43},{&quot;2026-08-29&quot;:6.43},{&quot;2026-08-30&quot;:6.4},{&quot;2026-08-31&quot;:6.4},{&quot;2026-09-01&quot;:6.41},{&quot;2026-09-02&quot;:6.41},{&quot;2026-09-03&quot;:6.5},{&quot;2026-09-04&quot;:6.46},{&quot;2026-09-05&quot;:6.46},{&quot;2026-09-06&quot;:6.46},{&quot;2026-09-07&quot;:6.38},{&quot;2026-09-08&quot;:6.34},{&quot;2026-09-09&quot;:6.31},{&quot;2026-09-10&quot;:6.11},{&quot;2026-09-11&quot;:6.08}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="95498"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fin ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Squall, SeeD Mercenary
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Human Knight Mercenary
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              8%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.08
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Squall, SeeD Mercenary" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/8/883c6111-c921-4cd6-930d-4fa335ef2871.jpg?1783906500" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Squall, SeeD Mercenary
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Human Knight Mercenary</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Squall, SeeD Mercenary" src="https://cards.scryfall.io/large/front/8/8/883c6111-c921-4cd6-930d-4fa335ef2871.jpg?1783906500" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.08
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  8%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $8.09
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.00</span>
              <span class="text-xs text-grey-text">Credit: $3.90</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-11&quot;:7.43},{&quot;2026-06-12&quot;:7.45},{&quot;2026-06-13&quot;:7.5},{&quot;2026-06-14&quot;:7.5},{&quot;2026-06-15&quot;:7.5},{&quot;2026-06-16&quot;:7.5},{&quot;2026-06-17&quot;:7.58},{&quot;2026-06-18&quot;:7.64},{&quot;2026-06-19&quot;:7.72},{&quot;2026-06-20&quot;:7.11},{&quot;2026-06-21&quot;:7.18},{&quot;2026-06-22&quot;:6.69},{&quot;2026-06-23&quot;:6.83},{&quot;2026-06-24&quot;:6.83},{&quot;2026-06-25&quot;:6.83},{&quot;2026-06-26&quot;:6.83},{&quot;2026-06-27&quot;:6.88},{&quot;2026-06-28&quot;:6.91},{&quot;2026-06-29&quot;:7.07},{&quot;2026-06-30&quot;:7.26},{&quot;2026-07-01&quot;:7.19},{&quot;2026-07-02&quot;:7.19},{&quot;2026-07-03&quot;:7.38},{&quot;2026-07-04&quot;:7.51},{&quot;2026-07-05&quot;:7.39},{&quot;2026-07-06&quot;:7.51},{&quot;2026-07-07&quot;:7.34},{&quot;2026-07-08&quot;:7.34},{&quot;2026-07-09&quot;:7.34},{&quot;2026-07-10&quot;:7.21},{&quot;2026-07-11&quot;:7.29},{&quot;2026-07-12&quot;:7.16},{&quot;2026-07-13&quot;:7.1},{&quot;2026-07-14&quot;:7.2},{&quot;2026-07-15&quot;:7.18},{&quot;2026-07-16&quot;:7.18},{&quot;2026-07-17&quot;:7.23},{&quot;2026-07-18&quot;:7.37},{&quot;2026-07-19&quot;:7.26},{&quot;2026-07-20&quot;:7.09},{&quot;2026-07-21&quot;:7.14},{&quot;2026-07-23&quot;:7.25},{&quot;2026-07-25&quot;:7.31},{&quot;2026-07-26&quot;:7.31},{&quot;2026-07-27&quot;:7.42},{&quot;2026-07-28&quot;:7.42},{&quot;2026-07-29&quot;:7.44},{&quot;2026-07-30&quot;:7.44},{&quot;2026-07-31&quot;:7.61},{&quot;2026-08-01&quot;:7.61},{&quot;2026-08-02&quot;:7.39},{&quot;2026-08-03&quot;:7.49},{&quot;2026-08-04&quot;:7.51},{&quot;2026-08-05&quot;:7.59},{&quot;2026-08-07&quot;:7.51},{&quot;2026-08-08&quot;:7.72},{&quot;2026-08-09&quot;:7.64},{&quot;2026-08-10&quot;:7.62},{&quot;2026-08-11&quot;:7.59},{&quot;2026-08-12&quot;:7.65},{&quot;2026-08-13&quot;:7.7},{&quot;2026-08-14&quot;:7.71},{&quot;2026-08-15&quot;:7.77},{&quot;2026-08-16&quot;:7.78},{&quot;2026-08-17&quot;:7.79},{&quot;2026-08-18&quot;:7.79},{&quot;2026-08-19&quot;:7.79},{&quot;2026-08-20&quot;:7.79},{&quot;2026-08-21&quot;:7.8},{&quot;2026-08-22&quot;:7.83},{&quot;2026-08-23&quot;:7.83},{&quot;2026-08-24&quot;:7.8},{&quot;2026-08-25&quot;:7.8},{&quot;2026-08-26&quot;:7.8},{&quot;2026-08-27&quot;:7.86},{&quot;2026-08-28&quot;:7.88},{&quot;2026-08-29&quot;:7.88},{&quot;2026-08-30&quot;:7.91},{&quot;2026-08-31&quot;:7.86},{&quot;2026-09-01&quot;:7.86},{&quot;2026-09-02&quot;:7.74},{&quot;2026-09-03&quot;:7.74},{&quot;2026-09-04&quot;:7.88},{&quot;2026-09-05&quot;:7.88},{&quot;2026-09-06&quot;:7.97},{&quot;2026-09-07&quot;:8.11},{&quot;2026-09-08&quot;:8.09},{&quot;2026-09-09&quot;:8.09},{&quot;2026-09-10&quot;:8.09},{&quot;2026-09-11&quot;:8.09}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:3.8},{&quot;2026-06-12&quot;:3.87},{&quot;2026-06-13&quot;:3.91},{&quot;2026-06-14&quot;:3.58},{&quot;2026-06-15&quot;:3.65},{&quot;2026-06-16&quot;:3.48},{&quot;2026-06-17&quot;:3.47},{&quot;2026-06-18&quot;:3.44},{&quot;2026-06-19&quot;:3.71},{&quot;2026-06-20&quot;:3.77},{&quot;2026-06-21&quot;:4.1},{&quot;2026-06-22&quot;:4.09},{&quot;2026-06-23&quot;:4.37},{&quot;2026-06-24&quot;:4.37},{&quot;2026-06-25&quot;:4.37},{&quot;2026-06-26&quot;:4.59},{&quot;2026-06-27&quot;:4.56},{&quot;2026-06-28&quot;:4.59},{&quot;2026-06-29&quot;:4.36},{&quot;2026-06-30&quot;:4.37},{&quot;2026-07-01&quot;:4.38},{&quot;2026-07-02&quot;:4.34},{&quot;2026-07-03&quot;:4.3},{&quot;2026-07-04&quot;:4.3},{&quot;2026-07-05&quot;:3.83},{&quot;2026-07-06&quot;:3.97},{&quot;2026-07-07&quot;:3.88},{&quot;2026-07-08&quot;:3.98},{&quot;2026-07-09&quot;:3.99},{&quot;2026-07-10&quot;:4.03},{&quot;2026-07-11&quot;:4.17},{&quot;2026-07-12&quot;:4.29},{&quot;2026-07-13&quot;:4.12},{&quot;2026-07-14&quot;:4.11},{&quot;2026-07-15&quot;:4.06},{&quot;2026-07-16&quot;:4.31},{&quot;2026-07-17&quot;:4.26},{&quot;2026-07-18&quot;:4.44},{&quot;2026-07-19&quot;:4.48},{&quot;2026-07-20&quot;:4.39},{&quot;2026-07-21&quot;:4.37},{&quot;2026-07-23&quot;:4.78},{&quot;2026-07-25&quot;:4.54},{&quot;2026-07-26&quot;:4.48},{&quot;2026-07-27&quot;:4.46},{&quot;2026-07-28&quot;:4.26},{&quot;2026-07-29&quot;:4.24},{&quot;2026-07-30&quot;:4.13},{&quot;2026-07-31&quot;:4.05},{&quot;2026-08-01&quot;:4.15},{&quot;2026-08-02&quot;:4.12},{&quot;2026-08-03&quot;:4.28},{&quot;2026-08-04&quot;:4.38},{&quot;2026-08-05&quot;:4.34},{&quot;2026-08-07&quot;:5.06},{&quot;2026-08-08&quot;:4.95},{&quot;2026-08-09&quot;:4.95},{&quot;2026-08-10&quot;:4.89},{&quot;2026-08-11&quot;:5.15},{&quot;2026-08-12&quot;:5.01},{&quot;2026-08-13&quot;:5.25},{&quot;2026-08-14&quot;:5.19},{&quot;2026-08-15&quot;:5.33},{&quot;2026-08-16&quot;:5.2},{&quot;2026-08-17&quot;:4.89},{&quot;2026-08-18&quot;:4.74},{&quot;2026-08-19&quot;:4.89},{&quot;2026-08-20&quot;:4.89},{&quot;2026-08-21&quot;:4.85},{&quot;2026-08-22&quot;:4.85},{&quot;2026-08-23&quot;:4.82},{&quot;2026-08-24&quot;:4.84},{&quot;2026-08-25&quot;:4.84},{&quot;2026-08-26&quot;:4.78},{&quot;2026-08-27&quot;:4.79},{&quot;2026-08-28&quot;:5.11},{&quot;2026-08-29&quot;:5.11},{&quot;2026-08-30&quot;:5.25},{&quot;2026-08-31&quot;:5.41},{&quot;2026-09-01&quot;:5.41},{&quot;2026-09-02&quot;:5.57},{&quot;2026-09-03&quot;:5.88},{&quot;2026-09-04&quot;:5.62},{&quot;2026-09-05&quot;:5.62},{&quot;2026-09-06&quot;:5.54},{&quot;2026-09-07&quot;:5.61},{&quot;2026-09-08&quot;:5.86},{&quot;2026-09-09&quot;:6.08},{&quot;2026-09-10&quot;:6.1},{&quot;2026-09-11&quot;:6.08}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="21251"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2x2 ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Bloodforged Battle-Axe
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact — Equipment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              8%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.07
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Bloodforged Battle-Axe" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/f/6/f66202ab-cd10-4116-8e22-05b45a45fa85.jpg?1783921756" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Bloodforged Battle-Axe
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact — Equipment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Bloodforged Battle-Axe" src="https://cards.scryfall.io/large/front/f/6/f66202ab-cd10-4116-8e22-05b45a45fa85.jpg?1783921756" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $4.30
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  7%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.07
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  8%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Foil</span>
              <span class="text-lg font-medium text-nine-white">$3.30</span>
              <span class="text-xs text-grey-text">Credit: $4.29</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:4.03},{&quot;2026-06-14&quot;:3.95},{&quot;2026-06-15&quot;:3.95},{&quot;2026-06-16&quot;:3.95},{&quot;2026-06-17&quot;:3.91},{&quot;2026-06-18&quot;:3.91},{&quot;2026-06-19&quot;:3.95},{&quot;2026-06-20&quot;:3.95},{&quot;2026-06-21&quot;:3.95},{&quot;2026-06-22&quot;:4.02},{&quot;2026-06-23&quot;:4.02},{&quot;2026-06-24&quot;:4.0},{&quot;2026-06-25&quot;:4.0},{&quot;2026-06-26&quot;:4.0},{&quot;2026-06-27&quot;:4.0},{&quot;2026-06-28&quot;:4.01},{&quot;2026-06-29&quot;:4.01},{&quot;2026-06-30&quot;:4.01},{&quot;2026-07-01&quot;:4.01},{&quot;2026-07-02&quot;:4.01},{&quot;2026-07-03&quot;:4.03},{&quot;2026-07-04&quot;:4.03},{&quot;2026-07-05&quot;:4.03},{&quot;2026-07-06&quot;:3.99},{&quot;2026-07-07&quot;:3.93},{&quot;2026-07-08&quot;:4.0},{&quot;2026-07-09&quot;:3.95},{&quot;2026-07-10&quot;:3.95},{&quot;2026-07-11&quot;:3.88},{&quot;2026-07-12&quot;:3.92},{&quot;2026-07-13&quot;:3.92},{&quot;2026-07-14&quot;:3.98},{&quot;2026-07-15&quot;:3.98},{&quot;2026-07-16&quot;:3.94},{&quot;2026-07-17&quot;:3.94},{&quot;2026-07-18&quot;:3.96},{&quot;2026-07-19&quot;:3.96},{&quot;2026-07-20&quot;:3.94},{&quot;2026-07-21&quot;:3.94},{&quot;2026-07-22&quot;:3.94},{&quot;2026-07-23&quot;:3.9},{&quot;2026-07-24&quot;:3.9},{&quot;2026-07-25&quot;:3.9},{&quot;2026-07-26&quot;:3.94},{&quot;2026-07-27&quot;:3.99},{&quot;2026-07-28&quot;:3.99},{&quot;2026-07-29&quot;:3.99},{&quot;2026-07-30&quot;:3.99},{&quot;2026-07-31&quot;:3.97},{&quot;2026-08-01&quot;:4.05},{&quot;2026-08-02&quot;:4.05},{&quot;2026-08-03&quot;:4.03},{&quot;2026-08-04&quot;:4.03},{&quot;2026-08-05&quot;:4.03},{&quot;2026-08-07&quot;:4.03},{&quot;2026-08-08&quot;:4.05},{&quot;2026-08-09&quot;:4.09},{&quot;2026-08-10&quot;:4.15},{&quot;2026-08-11&quot;:4.15},{&quot;2026-08-12&quot;:4.15},{&quot;2026-08-13&quot;:4.18},{&quot;2026-08-14&quot;:4.13},{&quot;2026-08-15&quot;:4.11},{&quot;2026-08-16&quot;:4.09},{&quot;2026-08-17&quot;:4.07},{&quot;2026-08-18&quot;:4.24},{&quot;2026-08-19&quot;:4.25},{&quot;2026-08-20&quot;:4.35},{&quot;2026-08-21&quot;:4.37},{&quot;2026-08-22&quot;:4.37},{&quot;2026-08-23&quot;:4.37},{&quot;2026-08-24&quot;:4.41},{&quot;2026-08-25&quot;:4.36},{&quot;2026-08-26&quot;:4.48},{&quot;2026-08-27&quot;:4.48},{&quot;2026-08-28&quot;:4.49},{&quot;2026-08-29&quot;:4.49},{&quot;2026-08-30&quot;:4.63},{&quot;2026-08-31&quot;:5.03},{&quot;2026-09-01&quot;:5.06},{&quot;2026-09-02&quot;:5.28},{&quot;2026-09-03&quot;:5.32},{&quot;2026-09-04&quot;:5.32},{&quot;2026-09-05&quot;:5.63},{&quot;2026-09-06&quot;:5.63},{&quot;2026-09-07&quot;:5.75},{&quot;2026-09-08&quot;:5.75},{&quot;2026-09-09&quot;:5.72},{&quot;2026-09-10&quot;:5.62},{&quot;2026-09-11&quot;:6.07}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:3.34},{&quot;2026-06-14&quot;:3.34},{&quot;2026-06-15&quot;:3.34},{&quot;2026-06-16&quot;:3.28},{&quot;2026-06-17&quot;:3.28},{&quot;2026-06-18&quot;:3.28},{&quot;2026-06-19&quot;:3.31},{&quot;2026-06-20&quot;:3.3},{&quot;2026-06-21&quot;:3.3},{&quot;2026-06-22&quot;:3.3},{&quot;2026-06-23&quot;:3.29},{&quot;2026-06-24&quot;:3.4},{&quot;2026-06-25&quot;:3.4},{&quot;2026-06-26&quot;:3.4},{&quot;2026-06-27&quot;:3.38},{&quot;2026-06-28&quot;:3.38},{&quot;2026-06-29&quot;:3.32},{&quot;2026-06-30&quot;:3.32},{&quot;2026-07-01&quot;:3.32},{&quot;2026-07-02&quot;:3.32},{&quot;2026-07-03&quot;:3.32},{&quot;2026-07-04&quot;:3.36},{&quot;2026-07-05&quot;:3.39},{&quot;2026-07-06&quot;:3.34},{&quot;2026-07-07&quot;:3.42},{&quot;2026-07-08&quot;:3.42},{&quot;2026-07-09&quot;:3.42},{&quot;2026-07-10&quot;:3.42},{&quot;2026-07-11&quot;:3.42},{&quot;2026-07-12&quot;:3.37},{&quot;2026-07-13&quot;:3.49},{&quot;2026-07-14&quot;:3.48},{&quot;2026-07-15&quot;:3.48},{&quot;2026-07-16&quot;:3.48},{&quot;2026-07-17&quot;:3.49},{&quot;2026-07-18&quot;:3.49},{&quot;2026-07-19&quot;:3.47},{&quot;2026-07-20&quot;:3.47},{&quot;2026-07-21&quot;:3.44},{&quot;2026-07-22&quot;:3.58},{&quot;2026-07-23&quot;:3.58},{&quot;2026-07-24&quot;:3.52},{&quot;2026-07-25&quot;:3.52},{&quot;2026-07-26&quot;:3.63},{&quot;2026-07-27&quot;:3.68},{&quot;2026-07-28&quot;:3.68},{&quot;2026-07-29&quot;:3.68},{&quot;2026-07-30&quot;:3.76},{&quot;2026-07-31&quot;:3.74},{&quot;2026-08-01&quot;:3.74},{&quot;2026-08-02&quot;:3.72},{&quot;2026-08-03&quot;:3.7},{&quot;2026-08-04&quot;:3.8},{&quot;2026-08-05&quot;:3.86},{&quot;2026-08-07&quot;:3.84},{&quot;2026-08-08&quot;:3.79},{&quot;2026-08-09&quot;:3.84},{&quot;2026-08-10&quot;:3.84},{&quot;2026-08-11&quot;:3.86},{&quot;2026-08-12&quot;:4.06},{&quot;2026-08-13&quot;:4.08},{&quot;2026-08-14&quot;:4.1},{&quot;2026-08-15&quot;:4.1},{&quot;2026-08-16&quot;:4.12},{&quot;2026-08-17&quot;:4.12},{&quot;2026-08-18&quot;:4.11},{&quot;2026-08-19&quot;:4.06},{&quot;2026-08-20&quot;:4.07},{&quot;2026-08-21&quot;:4.04},{&quot;2026-08-22&quot;:4.04},{&quot;2026-08-23&quot;:3.96},{&quot;2026-08-24&quot;:3.93},{&quot;2026-08-25&quot;:3.93},{&quot;2026-08-26&quot;:4.03},{&quot;2026-08-27&quot;:3.96},{&quot;2026-08-28&quot;:3.66},{&quot;2026-08-29&quot;:3.66},{&quot;2026-08-30&quot;:3.78},{&quot;2026-08-31&quot;:3.78},{&quot;2026-09-01&quot;:3.79},{&quot;2026-09-02&quot;:3.81},{&quot;2026-09-03&quot;:3.83},{&quot;2026-09-04&quot;:3.93},{&quot;2026-09-05&quot;:4.02},{&quot;2026-09-06&quot;:3.96},{&quot;2026-09-07&quot;:3.94},{&quot;2026-09-08&quot;:4.04},{&quot;2026-09-09&quot;:4.12},{&quot;2026-09-10&quot;:4.19},{&quot;2026-09-11&quot;:4.3}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="109597"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-sos ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Erode
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Instant
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            4 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.07
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Erode" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/2/32e670da-7563-4f6a-a7db-4c126a440eb8.jpg?1782683022" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Erode
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Instant</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Erode" src="https://cards.scryfall.io/large/front/3/2/32e670da-7563-4f6a-a7db-4c126a440eb8.jpg?1782683022" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            4
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.07
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.55
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$7.00</span>
              <span class="text-xs text-grey-text">Credit: $9.10</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-11&quot;:7.21},{&quot;2026-06-12&quot;:7.28},{&quot;2026-06-13&quot;:6.69},{&quot;2026-06-14&quot;:6.38},{&quot;2026-06-15&quot;:5.95},{&quot;2026-06-16&quot;:6.09},{&quot;2026-06-17&quot;:6.03},{&quot;2026-06-18&quot;:5.69},{&quot;2026-06-19&quot;:5.73},{&quot;2026-06-20&quot;:5.64},{&quot;2026-06-21&quot;:5.89},{&quot;2026-06-22&quot;:5.95},{&quot;2026-06-23&quot;:6.39},{&quot;2026-06-24&quot;:6.37},{&quot;2026-06-25&quot;:6.42},{&quot;2026-06-26&quot;:6.41},{&quot;2026-06-27&quot;:6.55},{&quot;2026-06-28&quot;:6.38},{&quot;2026-06-29&quot;:6.13},{&quot;2026-06-30&quot;:6.24},{&quot;2026-07-01&quot;:6.05},{&quot;2026-07-02&quot;:6.13},{&quot;2026-07-03&quot;:5.94},{&quot;2026-07-04&quot;:6.01},{&quot;2026-07-05&quot;:6.0},{&quot;2026-07-06&quot;:5.89},{&quot;2026-07-07&quot;:6.28},{&quot;2026-07-08&quot;:6.1},{&quot;2026-07-09&quot;:6.29},{&quot;2026-07-10&quot;:6.24},{&quot;2026-07-11&quot;:6.26},{&quot;2026-07-12&quot;:6.14},{&quot;2026-07-13&quot;:6.09},{&quot;2026-07-14&quot;:6.01},{&quot;2026-07-15&quot;:5.97},{&quot;2026-07-16&quot;:5.88},{&quot;2026-07-17&quot;:5.98},{&quot;2026-07-18&quot;:6.11},{&quot;2026-07-19&quot;:6.01},{&quot;2026-07-20&quot;:5.91},{&quot;2026-07-21&quot;:5.78},{&quot;2026-07-23&quot;:5.57},{&quot;2026-07-25&quot;:5.88},{&quot;2026-07-26&quot;:6.48},{&quot;2026-07-27&quot;:6.36},{&quot;2026-07-28&quot;:6.06},{&quot;2026-07-29&quot;:6.09},{&quot;2026-07-30&quot;:5.85},{&quot;2026-07-31&quot;:5.99},{&quot;2026-08-01&quot;:5.99},{&quot;2026-08-02&quot;:6.14},{&quot;2026-08-03&quot;:6.4},{&quot;2026-08-04&quot;:6.38},{&quot;2026-08-05&quot;:5.99},{&quot;2026-08-07&quot;:6.06},{&quot;2026-08-08&quot;:6.14},{&quot;2026-08-09&quot;:6.16},{&quot;2026-08-10&quot;:6.04},{&quot;2026-08-11&quot;:5.94},{&quot;2026-08-12&quot;:5.86},{&quot;2026-08-13&quot;:5.72},{&quot;2026-08-14&quot;:5.77},{&quot;2026-08-15&quot;:5.85},{&quot;2026-08-16&quot;:5.71},{&quot;2026-08-17&quot;:5.7},{&quot;2026-08-18&quot;:6.07},{&quot;2026-08-19&quot;:6.3},{&quot;2026-08-20&quot;:6.3},{&quot;2026-08-21&quot;:6.55},{&quot;2026-08-22&quot;:6.57},{&quot;2026-08-23&quot;:6.57},{&quot;2026-08-24&quot;:6.47},{&quot;2026-08-25&quot;:6.47},{&quot;2026-08-26&quot;:6.26},{&quot;2026-08-27&quot;:6.25},{&quot;2026-08-28&quot;:6.39},{&quot;2026-08-29&quot;:6.39},{&quot;2026-08-30&quot;:6.42},{&quot;2026-08-31&quot;:6.42},{&quot;2026-09-01&quot;:6.42},{&quot;2026-09-02&quot;:6.48},{&quot;2026-09-03&quot;:6.49},{&quot;2026-09-04&quot;:6.52},{&quot;2026-09-05&quot;:6.61},{&quot;2026-09-06&quot;:6.39},{&quot;2026-09-07&quot;:6.39},{&quot;2026-09-08&quot;:6.43},{&quot;2026-09-09&quot;:6.47},{&quot;2026-09-10&quot;:6.49},{&quot;2026-09-11&quot;:6.55}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:5.28},{&quot;2026-06-12&quot;:5.81},{&quot;2026-06-13&quot;:5.17},{&quot;2026-06-14&quot;:5.67},{&quot;2026-06-15&quot;:5.28},{&quot;2026-06-16&quot;:6.01},{&quot;2026-06-17&quot;:5.78},{&quot;2026-06-18&quot;:5.82},{&quot;2026-06-19&quot;:6.51},{&quot;2026-06-20&quot;:5.97},{&quot;2026-06-21&quot;:5.56},{&quot;2026-06-22&quot;:5.86},{&quot;2026-06-23&quot;:5.72},{&quot;2026-06-24&quot;:5.85},{&quot;2026-06-25&quot;:6.32},{&quot;2026-06-26&quot;:5.52},{&quot;2026-06-27&quot;:5.65},{&quot;2026-06-28&quot;:5.97},{&quot;2026-06-29&quot;:5.65},{&quot;2026-06-30&quot;:5.55},{&quot;2026-07-01&quot;:5.43},{&quot;2026-07-02&quot;:5.22},{&quot;2026-07-03&quot;:5.83},{&quot;2026-07-04&quot;:5.83},{&quot;2026-07-05&quot;:5.97},{&quot;2026-07-06&quot;:5.83},{&quot;2026-07-07&quot;:5.56},{&quot;2026-07-08&quot;:5.65},{&quot;2026-07-09&quot;:5.99},{&quot;2026-07-10&quot;:5.76},{&quot;2026-07-11&quot;:5.59},{&quot;2026-07-12&quot;:5.73},{&quot;2026-07-13&quot;:5.5},{&quot;2026-07-14&quot;:5.45},{&quot;2026-07-15&quot;:5.93},{&quot;2026-07-16&quot;:5.76},{&quot;2026-07-17&quot;:5.64},{&quot;2026-07-18&quot;:5.65},{&quot;2026-07-19&quot;:5.43},{&quot;2026-07-20&quot;:5.71},{&quot;2026-07-21&quot;:5.5},{&quot;2026-07-23&quot;:5.39},{&quot;2026-07-25&quot;:5.82},{&quot;2026-07-26&quot;:5.93},{&quot;2026-07-27&quot;:6.03},{&quot;2026-07-28&quot;:6.42},{&quot;2026-07-29&quot;:6.56},{&quot;2026-07-30&quot;:6.59},{&quot;2026-07-31&quot;:6.14},{&quot;2026-08-01&quot;:6.08},{&quot;2026-08-02&quot;:6.13},{&quot;2026-08-03&quot;:6.08},{&quot;2026-08-04&quot;:6.3},{&quot;2026-08-05&quot;:5.61},{&quot;2026-08-07&quot;:5.74},{&quot;2026-08-08&quot;:5.81},{&quot;2026-08-09&quot;:5.8},{&quot;2026-08-10&quot;:5.74},{&quot;2026-08-11&quot;:5.77},{&quot;2026-08-12&quot;:5.62},{&quot;2026-08-13&quot;:5.51},{&quot;2026-08-14&quot;:5.69},{&quot;2026-08-15&quot;:5.82},{&quot;2026-08-16&quot;:5.34},{&quot;2026-08-17&quot;:5.97},{&quot;2026-08-18&quot;:6.2},{&quot;2026-08-19&quot;:6.14},{&quot;2026-08-20&quot;:6.14},{&quot;2026-08-21&quot;:6.46},{&quot;2026-08-22&quot;:6.22},{&quot;2026-08-23&quot;:5.97},{&quot;2026-08-24&quot;:6.41},{&quot;2026-08-25&quot;:6.41},{&quot;2026-08-26&quot;:6.31},{&quot;2026-08-27&quot;:6.41},{&quot;2026-08-28&quot;:5.93},{&quot;2026-08-29&quot;:5.93},{&quot;2026-08-30&quot;:6.09},{&quot;2026-08-31&quot;:6.42},{&quot;2026-09-01&quot;:6.42},{&quot;2026-09-02&quot;:6.36},{&quot;2026-09-03&quot;:5.7},{&quot;2026-09-04&quot;:6.0},{&quot;2026-09-05&quot;:6.14},{&quot;2026-09-06&quot;:6.46},{&quot;2026-09-07&quot;:6.56},{&quot;2026-09-08&quot;:6.62},{&quot;2026-09-09&quot;:6.11},{&quot;2026-09-10&quot;:6.21},{&quot;2026-09-11&quot;:6.07}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="41273"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-neo ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            March of Swirling Mist
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Instant
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              14%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.06
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="March of Swirling Mist" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/0/100171d8-7436-44c8-b4cb-0101ffa05c25.jpg?1783923901" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            March of Swirling Mist
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Instant</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-x'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="March of Swirling Mist" src="https://cards.scryfall.io/large/front/1/0/100171d8-7436-44c8-b4cb-0101ffa05c25.jpg?1783923901" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.06
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  14%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $5.52
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.30</span>
              <span class="text-xs text-grey-text">Credit: $2.99</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:5.97},{&quot;2026-06-11&quot;:5.97},{&quot;2026-06-12&quot;:5.71},{&quot;2026-06-13&quot;:5.71},{&quot;2026-06-14&quot;:5.71},{&quot;2026-06-15&quot;:5.71},{&quot;2026-06-16&quot;:5.78},{&quot;2026-06-17&quot;:5.84},{&quot;2026-06-18&quot;:5.59},{&quot;2026-06-19&quot;:5.59},{&quot;2026-06-20&quot;:5.62},{&quot;2026-06-21&quot;:5.64},{&quot;2026-06-22&quot;:5.67},{&quot;2026-06-23&quot;:5.67},{&quot;2026-06-24&quot;:5.67},{&quot;2026-06-25&quot;:5.67},{&quot;2026-06-26&quot;:5.64},{&quot;2026-06-27&quot;:5.6},{&quot;2026-06-28&quot;:5.6},{&quot;2026-06-29&quot;:5.61},{&quot;2026-06-30&quot;:5.7},{&quot;2026-07-01&quot;:5.7},{&quot;2026-07-02&quot;:5.7},{&quot;2026-07-03&quot;:5.66},{&quot;2026-07-04&quot;:5.73},{&quot;2026-07-05&quot;:5.73},{&quot;2026-07-06&quot;:5.61},{&quot;2026-07-07&quot;:5.65},{&quot;2026-07-08&quot;:5.65},{&quot;2026-07-09&quot;:5.69},{&quot;2026-07-10&quot;:5.69},{&quot;2026-07-11&quot;:5.64},{&quot;2026-07-12&quot;:5.59},{&quot;2026-07-13&quot;:5.59},{&quot;2026-07-14&quot;:5.7},{&quot;2026-07-15&quot;:5.74},{&quot;2026-07-16&quot;:5.74},{&quot;2026-07-17&quot;:5.74},{&quot;2026-07-18&quot;:5.65},{&quot;2026-07-19&quot;:5.65},{&quot;2026-07-20&quot;:5.75},{&quot;2026-07-21&quot;:5.75},{&quot;2026-07-23&quot;:5.75},{&quot;2026-07-25&quot;:5.81},{&quot;2026-07-26&quot;:5.8},{&quot;2026-07-27&quot;:5.79},{&quot;2026-07-29&quot;:5.76},{&quot;2026-07-30&quot;:5.76},{&quot;2026-07-31&quot;:5.76},{&quot;2026-08-01&quot;:5.76},{&quot;2026-08-02&quot;:5.76},{&quot;2026-08-03&quot;:5.76},{&quot;2026-08-04&quot;:5.76},{&quot;2026-08-05&quot;:5.81},{&quot;2026-08-07&quot;:5.91},{&quot;2026-08-08&quot;:5.98},{&quot;2026-08-09&quot;:6.1},{&quot;2026-08-10&quot;:6.06},{&quot;2026-08-11&quot;:6.06},{&quot;2026-08-12&quot;:6.06},{&quot;2026-08-13&quot;:6.06},{&quot;2026-08-14&quot;:6.06},{&quot;2026-08-15&quot;:6.06},{&quot;2026-08-16&quot;:6.06},{&quot;2026-08-17&quot;:6.06},{&quot;2026-08-18&quot;:6.06},{&quot;2026-08-19&quot;:6.02},{&quot;2026-08-20&quot;:6.02},{&quot;2026-08-21&quot;:5.99},{&quot;2026-08-22&quot;:5.99},{&quot;2026-08-23&quot;:5.99},{&quot;2026-08-24&quot;:5.99},{&quot;2026-08-25&quot;:5.99},{&quot;2026-08-26&quot;:5.95},{&quot;2026-08-27&quot;:6.02},{&quot;2026-08-28&quot;:5.92},{&quot;2026-08-29&quot;:5.92},{&quot;2026-08-30&quot;:6.02},{&quot;2026-08-31&quot;:5.89},{&quot;2026-09-01&quot;:5.89},{&quot;2026-09-02&quot;:5.75},{&quot;2026-09-03&quot;:5.75},{&quot;2026-09-04&quot;:5.58},{&quot;2026-09-05&quot;:5.58},{&quot;2026-09-06&quot;:5.58},{&quot;2026-09-07&quot;:5.4},{&quot;2026-09-08&quot;:5.52},{&quot;2026-09-09&quot;:5.52},{&quot;2026-09-10&quot;:5.52},{&quot;2026-09-11&quot;:5.52}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:5.64},{&quot;2026-06-11&quot;:5.68},{&quot;2026-06-12&quot;:5.54},{&quot;2026-06-13&quot;:5.55},{&quot;2026-06-14&quot;:5.54},{&quot;2026-06-15&quot;:5.73},{&quot;2026-06-16&quot;:5.44},{&quot;2026-06-17&quot;:5.46},{&quot;2026-06-18&quot;:5.44},{&quot;2026-06-19&quot;:5.46},{&quot;2026-06-20&quot;:5.12},{&quot;2026-06-21&quot;:5.12},{&quot;2026-06-22&quot;:5.4},{&quot;2026-06-23&quot;:5.48},{&quot;2026-06-24&quot;:5.42},{&quot;2026-06-25&quot;:5.49},{&quot;2026-06-26&quot;:5.6},{&quot;2026-06-27&quot;:5.68},{&quot;2026-06-28&quot;:5.48},{&quot;2026-06-29&quot;:5.49},{&quot;2026-06-30&quot;:5.55},{&quot;2026-07-01&quot;:5.35},{&quot;2026-07-02&quot;:5.26},{&quot;2026-07-03&quot;:5.21},{&quot;2026-07-04&quot;:5.14},{&quot;2026-07-05&quot;:5.14},{&quot;2026-07-06&quot;:5.35},{&quot;2026-07-07&quot;:5.2},{&quot;2026-07-08&quot;:5.27},{&quot;2026-07-09&quot;:5.24},{&quot;2026-07-10&quot;:5.4},{&quot;2026-07-11&quot;:5.42},{&quot;2026-07-12&quot;:5.42},{&quot;2026-07-13&quot;:5.34},{&quot;2026-07-14&quot;:4.42},{&quot;2026-07-15&quot;:4.07},{&quot;2026-07-16&quot;:3.58},{&quot;2026-07-17&quot;:3.42},{&quot;2026-07-18&quot;:3.7},{&quot;2026-07-19&quot;:3.61},{&quot;2026-07-20&quot;:3.35},{&quot;2026-07-21&quot;:3.34},{&quot;2026-07-23&quot;:3.52},{&quot;2026-07-25&quot;:3.74},{&quot;2026-07-26&quot;:3.81},{&quot;2026-07-27&quot;:3.55},{&quot;2026-07-29&quot;:3.88},{&quot;2026-07-30&quot;:3.78},{&quot;2026-07-31&quot;:4.06},{&quot;2026-08-01&quot;:3.96},{&quot;2026-08-02&quot;:4.11},{&quot;2026-08-03&quot;:4.4},{&quot;2026-08-04&quot;:4.71},{&quot;2026-08-05&quot;:4.64},{&quot;2026-08-07&quot;:4.45},{&quot;2026-08-08&quot;:4.27},{&quot;2026-08-09&quot;:4.49},{&quot;2026-08-10&quot;:4.65},{&quot;2026-08-11&quot;:4.64},{&quot;2026-08-12&quot;:4.19},{&quot;2026-08-13&quot;:4.32},{&quot;2026-08-14&quot;:4.2},{&quot;2026-08-15&quot;:3.76},{&quot;2026-08-16&quot;:3.88},{&quot;2026-08-17&quot;:4.08},{&quot;2026-08-18&quot;:4.09},{&quot;2026-08-19&quot;:4.14},{&quot;2026-08-20&quot;:4.14},{&quot;2026-08-21&quot;:4.17},{&quot;2026-08-22&quot;:4.16},{&quot;2026-08-23&quot;:4.2},{&quot;2026-08-24&quot;:4.5},{&quot;2026-08-25&quot;:4.5},{&quot;2026-08-26&quot;:4.54},{&quot;2026-08-27&quot;:4.59},{&quot;2026-08-28&quot;:5.01},{&quot;2026-08-29&quot;:5.01},{&quot;2026-08-30&quot;:4.99},{&quot;2026-08-31&quot;:4.96},{&quot;2026-09-01&quot;:4.96},{&quot;2026-09-02&quot;:4.74},{&quot;2026-09-03&quot;:4.52},{&quot;2026-09-04&quot;:4.68},{&quot;2026-09-05&quot;:5.31},{&quot;2026-09-06&quot;:5.42},{&quot;2026-09-07&quot;:5.53},{&quot;2026-09-08&quot;:5.6},{&quot;2026-09-09&quot;:5.74},{&quot;2026-09-10&quot;:6.06},{&quot;2026-09-11&quot;:6.06}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="74033"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-ltr ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Glóin, Dwarf Emissary
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Dwarf Advisor
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.06
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Glóin, Dwarf Emissary" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/6/868a2aa7-bcaf-409b-8802-d00ee1f2ae77.jpg?1783916283" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Glóin, Dwarf Emissary
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Dwarf Advisor</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Glóin, Dwarf Emissary" src="https://cards.scryfall.io/large/front/8/6/868a2aa7-bcaf-409b-8802-d00ee1f2ae77.jpg?1783916283" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.06
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  1%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $7.27
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  6%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.25</span>
              <span class="text-xs text-grey-text">Credit: $4.23</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-08&quot;:0.77},{&quot;2026-06-10&quot;:0.78},{&quot;2026-06-11&quot;:0.79},{&quot;2026-06-12&quot;:0.74},{&quot;2026-06-13&quot;:0.78},{&quot;2026-06-14&quot;:0.77},{&quot;2026-06-15&quot;:0.77},{&quot;2026-06-16&quot;:0.77},{&quot;2026-06-17&quot;:0.77},{&quot;2026-06-18&quot;:0.77},{&quot;2026-06-19&quot;:0.76},{&quot;2026-06-20&quot;:0.76},{&quot;2026-06-21&quot;:0.86},{&quot;2026-06-22&quot;:1.2},{&quot;2026-06-24&quot;:1.22},{&quot;2026-06-25&quot;:1.22},{&quot;2026-06-26&quot;:1.22},{&quot;2026-06-27&quot;:1.22},{&quot;2026-06-28&quot;:1.22},{&quot;2026-06-29&quot;:1.22},{&quot;2026-06-30&quot;:1.22},{&quot;2026-07-01&quot;:1.25},{&quot;2026-07-02&quot;:1.25},{&quot;2026-07-03&quot;:1.25},{&quot;2026-07-04&quot;:1.25},{&quot;2026-07-05&quot;:1.92},{&quot;2026-07-06&quot;:1.93},{&quot;2026-07-07&quot;:1.93},{&quot;2026-07-08&quot;:1.95},{&quot;2026-07-09&quot;:1.96},{&quot;2026-07-10&quot;:1.96},{&quot;2026-07-11&quot;:1.85},{&quot;2026-07-12&quot;:1.85},{&quot;2026-07-13&quot;:1.85},{&quot;2026-07-14&quot;:2.36},{&quot;2026-07-15&quot;:2.36},{&quot;2026-07-16&quot;:2.4},{&quot;2026-07-17&quot;:2.43},{&quot;2026-07-18&quot;:2.4},{&quot;2026-07-19&quot;:2.4},{&quot;2026-07-20&quot;:2.86},{&quot;2026-07-21&quot;:3.32},{&quot;2026-07-23&quot;:3.33},{&quot;2026-07-25&quot;:3.04},{&quot;2026-07-26&quot;:3.08},{&quot;2026-07-27&quot;:2.58},{&quot;2026-07-29&quot;:2.66},{&quot;2026-07-30&quot;:2.25},{&quot;2026-07-31&quot;:2.28},{&quot;2026-08-01&quot;:2.3},{&quot;2026-08-02&quot;:2.28},{&quot;2026-08-03&quot;:2.32},{&quot;2026-08-04&quot;:2.32},{&quot;2026-08-05&quot;:1.93},{&quot;2026-08-07&quot;:1.47},{&quot;2026-08-08&quot;:1.56},{&quot;2026-08-09&quot;:1.51},{&quot;2026-08-10&quot;:1.48},{&quot;2026-08-11&quot;:1.48},{&quot;2026-08-12&quot;:1.62},{&quot;2026-08-13&quot;:1.58},{&quot;2026-08-14&quot;:1.56},{&quot;2026-08-15&quot;:1.48},{&quot;2026-08-16&quot;:1.54},{&quot;2026-08-17&quot;:1.53},{&quot;2026-08-18&quot;:1.58},{&quot;2026-08-19&quot;:1.47},{&quot;2026-08-20&quot;:1.47},{&quot;2026-08-21&quot;:1.78},{&quot;2026-08-22&quot;:4.02},{&quot;2026-08-23&quot;:4.49},{&quot;2026-08-24&quot;:5.17},{&quot;2026-08-25&quot;:5.17},{&quot;2026-08-26&quot;:5.35},{&quot;2026-08-27&quot;:5.51},{&quot;2026-08-28&quot;:6.52},{&quot;2026-08-29&quot;:6.52},{&quot;2026-08-30&quot;:6.65},{&quot;2026-08-31&quot;:6.65},{&quot;2026-09-01&quot;:6.65},{&quot;2026-09-02&quot;:6.34},{&quot;2026-09-03&quot;:6.33},{&quot;2026-09-04&quot;:6.47},{&quot;2026-09-05&quot;:6.86},{&quot;2026-09-06&quot;:7.04},{&quot;2026-09-07&quot;:7.04},{&quot;2026-09-08&quot;:7.04},{&quot;2026-09-09&quot;:7.04},{&quot;2026-09-10&quot;:7.05},{&quot;2026-09-11&quot;:7.27}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:1.25},{&quot;2026-06-10&quot;:1.21},{&quot;2026-06-11&quot;:1.12},{&quot;2026-06-12&quot;:1.16},{&quot;2026-06-13&quot;:0.94},{&quot;2026-06-14&quot;:1.05},{&quot;2026-06-15&quot;:1.0},{&quot;2026-06-16&quot;:0.96},{&quot;2026-06-17&quot;:0.93},{&quot;2026-06-18&quot;:0.97},{&quot;2026-06-19&quot;:0.94},{&quot;2026-06-20&quot;:0.95},{&quot;2026-06-21&quot;:0.87},{&quot;2026-06-22&quot;:0.87},{&quot;2026-06-24&quot;:0.78},{&quot;2026-06-25&quot;:0.87},{&quot;2026-06-26&quot;:0.9},{&quot;2026-06-27&quot;:0.8},{&quot;2026-06-28&quot;:0.81},{&quot;2026-06-29&quot;:0.88},{&quot;2026-06-30&quot;:0.88},{&quot;2026-07-01&quot;:0.96},{&quot;2026-07-02&quot;:1.05},{&quot;2026-07-03&quot;:1.1},{&quot;2026-07-04&quot;:1.12},{&quot;2026-07-05&quot;:1.08},{&quot;2026-07-06&quot;:1.08},{&quot;2026-07-07&quot;:1.07},{&quot;2026-07-08&quot;:1.09},{&quot;2026-07-09&quot;:1.11},{&quot;2026-07-10&quot;:1.04},{&quot;2026-07-11&quot;:0.96},{&quot;2026-07-12&quot;:1.04},{&quot;2026-07-13&quot;:1.05},{&quot;2026-07-14&quot;:1.03},{&quot;2026-07-15&quot;:1.01},{&quot;2026-07-16&quot;:0.95},{&quot;2026-07-17&quot;:0.88},{&quot;2026-07-18&quot;:0.92},{&quot;2026-07-19&quot;:1.1},{&quot;2026-07-20&quot;:1.12},{&quot;2026-07-21&quot;:1.04},{&quot;2026-07-23&quot;:1.13},{&quot;2026-07-25&quot;:1.32},{&quot;2026-07-26&quot;:1.52},{&quot;2026-07-27&quot;:1.26},{&quot;2026-07-29&quot;:1.22},{&quot;2026-07-30&quot;:1.11},{&quot;2026-07-31&quot;:1.1},{&quot;2026-08-01&quot;:1.39},{&quot;2026-08-02&quot;:1.48},{&quot;2026-08-03&quot;:1.42},{&quot;2026-08-04&quot;:1.4},{&quot;2026-08-05&quot;:1.09},{&quot;2026-08-07&quot;:1.21},{&quot;2026-08-08&quot;:1.52},{&quot;2026-08-09&quot;:1.23},{&quot;2026-08-10&quot;:0.87},{&quot;2026-08-11&quot;:1.71},{&quot;2026-08-12&quot;:1.98},{&quot;2026-08-13&quot;:1.57},{&quot;2026-08-14&quot;:1.26},{&quot;2026-08-15&quot;:1.38},{&quot;2026-08-16&quot;:1.77},{&quot;2026-08-17&quot;:1.77},{&quot;2026-08-18&quot;:1.89},{&quot;2026-08-19&quot;:2.47},{&quot;2026-08-20&quot;:2.47},{&quot;2026-08-21&quot;:2.84},{&quot;2026-08-22&quot;:3.93},{&quot;2026-08-23&quot;:5.02},{&quot;2026-08-24&quot;:5.04},{&quot;2026-08-25&quot;:5.04},{&quot;2026-08-26&quot;:5.31},{&quot;2026-08-27&quot;:5.56},{&quot;2026-08-28&quot;:6.04},{&quot;2026-08-29&quot;:6.04},{&quot;2026-08-30&quot;:5.77},{&quot;2026-08-31&quot;:5.84},{&quot;2026-09-01&quot;:5.84},{&quot;2026-09-02&quot;:5.74},{&quot;2026-09-03&quot;:6.42},{&quot;2026-09-04&quot;:6.12},{&quot;2026-09-05&quot;:5.98},{&quot;2026-09-06&quot;:6.49},{&quot;2026-09-07&quot;:5.9},{&quot;2026-09-08&quot;:5.23},{&quot;2026-09-09&quot;:5.1},{&quot;2026-09-10&quot;:5.61},{&quot;2026-09-11&quot;:6.06}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="91115"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-inr ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Infernal Grasp
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Instant
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.06
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Infernal Grasp" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/f/1/f1168f11-759d-4125-800f-f18816da025c.jpg?1783908044" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Infernal Grasp
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Instant</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Infernal Grasp" src="https://cards.scryfall.io/large/front/f/1/f1168f11-759d-4125-800f-f18816da025c.jpg?1783908044" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.06
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $7.68
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  7%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.30</span>
              <span class="text-xs text-grey-text">Credit: $2.99</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:7.78},{&quot;2026-06-14&quot;:7.78},{&quot;2026-06-15&quot;:7.78},{&quot;2026-06-16&quot;:7.78},{&quot;2026-06-17&quot;:7.78},{&quot;2026-06-18&quot;:7.78},{&quot;2026-06-19&quot;:7.78},{&quot;2026-06-20&quot;:7.95},{&quot;2026-06-21&quot;:7.95},{&quot;2026-06-22&quot;:7.89},{&quot;2026-06-23&quot;:7.89},{&quot;2026-06-24&quot;:7.9},{&quot;2026-06-25&quot;:7.9},{&quot;2026-06-26&quot;:7.71},{&quot;2026-06-27&quot;:7.66},{&quot;2026-06-28&quot;:7.66},{&quot;2026-06-29&quot;:7.66},{&quot;2026-06-30&quot;:7.66},{&quot;2026-07-01&quot;:7.66},{&quot;2026-07-02&quot;:7.66},{&quot;2026-07-03&quot;:7.66},{&quot;2026-07-04&quot;:7.66},{&quot;2026-07-05&quot;:7.73},{&quot;2026-07-06&quot;:7.83},{&quot;2026-07-07&quot;:7.83},{&quot;2026-07-08&quot;:7.83},{&quot;2026-07-09&quot;:7.83},{&quot;2026-07-10&quot;:8.06},{&quot;2026-07-11&quot;:8.06},{&quot;2026-07-12&quot;:8.06},{&quot;2026-07-13&quot;:8.06},{&quot;2026-07-14&quot;:8.06},{&quot;2026-07-15&quot;:8.01},{&quot;2026-07-16&quot;:8.01},{&quot;2026-07-17&quot;:8.01},{&quot;2026-07-18&quot;:8.01},{&quot;2026-07-19&quot;:8.01},{&quot;2026-07-20&quot;:8.05},{&quot;2026-07-21&quot;:8.04},{&quot;2026-07-22&quot;:8.04},{&quot;2026-07-23&quot;:8.04},{&quot;2026-07-24&quot;:8.04},{&quot;2026-07-25&quot;:8.04},{&quot;2026-07-26&quot;:8.04},{&quot;2026-07-27&quot;:8.02},{&quot;2026-07-28&quot;:8.02},{&quot;2026-07-29&quot;:8.02},{&quot;2026-07-30&quot;:8.09},{&quot;2026-07-31&quot;:8.09},{&quot;2026-08-01&quot;:8.08},{&quot;2026-08-02&quot;:8.1},{&quot;2026-08-03&quot;:7.98},{&quot;2026-08-04&quot;:7.91},{&quot;2026-08-05&quot;:7.91},{&quot;2026-08-07&quot;:7.68},{&quot;2026-08-08&quot;:7.76},{&quot;2026-08-09&quot;:7.76},{&quot;2026-08-10&quot;:7.85},{&quot;2026-08-11&quot;:7.85},{&quot;2026-08-12&quot;:7.8},{&quot;2026-08-13&quot;:7.63},{&quot;2026-08-14&quot;:7.38},{&quot;2026-08-15&quot;:7.38},{&quot;2026-08-16&quot;:7.38},{&quot;2026-08-17&quot;:7.07},{&quot;2026-08-18&quot;:7.07},{&quot;2026-08-19&quot;:7.07},{&quot;2026-08-20&quot;:7.07},{&quot;2026-08-21&quot;:7.1},{&quot;2026-08-22&quot;:7.19},{&quot;2026-08-23&quot;:7.19},{&quot;2026-08-24&quot;:7.08},{&quot;2026-08-25&quot;:7.04},{&quot;2026-08-26&quot;:6.98},{&quot;2026-08-27&quot;:6.94},{&quot;2026-08-28&quot;:6.96},{&quot;2026-08-29&quot;:6.96},{&quot;2026-08-30&quot;:6.96},{&quot;2026-08-31&quot;:6.96},{&quot;2026-09-01&quot;:7.15},{&quot;2026-09-02&quot;:7.15},{&quot;2026-09-03&quot;:7.15},{&quot;2026-09-04&quot;:7.18},{&quot;2026-09-05&quot;:7.15},{&quot;2026-09-06&quot;:7.17},{&quot;2026-09-07&quot;:7.3},{&quot;2026-09-08&quot;:7.45},{&quot;2026-09-09&quot;:7.62},{&quot;2026-09-10&quot;:7.68},{&quot;2026-09-11&quot;:7.68}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:6.67},{&quot;2026-06-14&quot;:6.67},{&quot;2026-06-15&quot;:6.67},{&quot;2026-06-16&quot;:6.66},{&quot;2026-06-17&quot;:6.65},{&quot;2026-06-18&quot;:6.64},{&quot;2026-06-19&quot;:6.62},{&quot;2026-06-20&quot;:6.67},{&quot;2026-06-21&quot;:6.65},{&quot;2026-06-22&quot;:6.65},{&quot;2026-06-23&quot;:6.65},{&quot;2026-06-24&quot;:6.67},{&quot;2026-06-25&quot;:6.71},{&quot;2026-06-26&quot;:6.79},{&quot;2026-06-27&quot;:6.79},{&quot;2026-06-28&quot;:6.79},{&quot;2026-06-29&quot;:6.79},{&quot;2026-06-30&quot;:6.79},{&quot;2026-07-01&quot;:7.01},{&quot;2026-07-02&quot;:7.01},{&quot;2026-07-03&quot;:7.03},{&quot;2026-07-04&quot;:7.01},{&quot;2026-07-05&quot;:7.04},{&quot;2026-07-06&quot;:7.04},{&quot;2026-07-07&quot;:7.04},{&quot;2026-07-08&quot;:7.04},{&quot;2026-07-09&quot;:7.04},{&quot;2026-07-10&quot;:7.04},{&quot;2026-07-11&quot;:7.05},{&quot;2026-07-12&quot;:7.05},{&quot;2026-07-13&quot;:7.05},{&quot;2026-07-14&quot;:7.02},{&quot;2026-07-15&quot;:7.02},{&quot;2026-07-16&quot;:7.02},{&quot;2026-07-17&quot;:7.02},{&quot;2026-07-18&quot;:6.97},{&quot;2026-07-19&quot;:6.97},{&quot;2026-07-20&quot;:6.97},{&quot;2026-07-21&quot;:6.97},{&quot;2026-07-22&quot;:6.97},{&quot;2026-07-23&quot;:6.97},{&quot;2026-07-24&quot;:6.97},{&quot;2026-07-25&quot;:6.92},{&quot;2026-07-26&quot;:6.92},{&quot;2026-07-27&quot;:6.92},{&quot;2026-07-28&quot;:6.84},{&quot;2026-07-29&quot;:6.9},{&quot;2026-07-30&quot;:6.94},{&quot;2026-07-31&quot;:6.94},{&quot;2026-08-01&quot;:6.94},{&quot;2026-08-02&quot;:6.94},{&quot;2026-08-03&quot;:6.85},{&quot;2026-08-04&quot;:6.76},{&quot;2026-08-05&quot;:6.82},{&quot;2026-08-07&quot;:6.72},{&quot;2026-08-08&quot;:6.72},{&quot;2026-08-09&quot;:6.72},{&quot;2026-08-10&quot;:6.63},{&quot;2026-08-11&quot;:6.63},{&quot;2026-08-12&quot;:6.63},{&quot;2026-08-13&quot;:6.56},{&quot;2026-08-14&quot;:6.47},{&quot;2026-08-15&quot;:6.47},{&quot;2026-08-16&quot;:6.47},{&quot;2026-08-17&quot;:6.35},{&quot;2026-08-18&quot;:6.34},{&quot;2026-08-19&quot;:6.34},{&quot;2026-08-20&quot;:6.34},{&quot;2026-08-21&quot;:6.44},{&quot;2026-08-22&quot;:6.61},{&quot;2026-08-23&quot;:6.61},{&quot;2026-08-24&quot;:6.39},{&quot;2026-08-25&quot;:6.19},{&quot;2026-08-26&quot;:6.19},{&quot;2026-08-27&quot;:6.07},{&quot;2026-08-28&quot;:6.07},{&quot;2026-08-29&quot;:6.07},{&quot;2026-08-30&quot;:6.14},{&quot;2026-08-31&quot;:6.2},{&quot;2026-09-01&quot;:6.2},{&quot;2026-09-02&quot;:6.2},{&quot;2026-09-03&quot;:6.18},{&quot;2026-09-04&quot;:6.07},{&quot;2026-09-05&quot;:6.26},{&quot;2026-09-06&quot;:6.19},{&quot;2026-09-07&quot;:6.07},{&quot;2026-09-08&quot;:6.0},{&quot;2026-09-09&quot;:6.0},{&quot;2026-09-10&quot;:6.0},{&quot;2026-09-11&quot;:6.06}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="108897"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-soc ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Turbulent Steppe
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Land — Mountain Plains
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.06
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Turbulent Steppe" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/0/c0c73dd5-0a88-4a94-9c01-c1473433e46f.jpg?1782683339" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Turbulent Steppe
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Land — Mountain Plains</span>
        </div>

      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Turbulent Steppe" src="https://cards.scryfall.io/large/front/c/0/c0c73dd5-0a88-4a94-9c01-c1473433e46f.jpg?1782683339" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.06
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $0.00
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.00</span>
              <span class="text-xs text-grey-text">Credit: $5.20</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:4.18},{&quot;2026-06-14&quot;:4.05},{&quot;2026-06-15&quot;:4.11},{&quot;2026-06-16&quot;:4.1},{&quot;2026-06-17&quot;:4.0},{&quot;2026-06-18&quot;:3.9},{&quot;2026-06-19&quot;:3.92},{&quot;2026-06-20&quot;:3.93},{&quot;2026-06-21&quot;:3.87},{&quot;2026-06-22&quot;:3.85},{&quot;2026-06-23&quot;:3.97},{&quot;2026-06-24&quot;:3.97},{&quot;2026-06-25&quot;:3.85},{&quot;2026-06-26&quot;:3.85},{&quot;2026-06-27&quot;:3.88},{&quot;2026-06-28&quot;:3.89},{&quot;2026-06-29&quot;:3.94},{&quot;2026-06-30&quot;:4.1},{&quot;2026-07-01&quot;:4.35},{&quot;2026-07-02&quot;:4.37},{&quot;2026-07-03&quot;:4.19},{&quot;2026-07-04&quot;:4.04},{&quot;2026-07-05&quot;:4.19},{&quot;2026-07-06&quot;:4.23},{&quot;2026-07-07&quot;:4.38},{&quot;2026-07-08&quot;:4.16},{&quot;2026-07-09&quot;:3.74},{&quot;2026-07-10&quot;:3.39},{&quot;2026-07-11&quot;:3.49},{&quot;2026-07-12&quot;:3.49},{&quot;2026-07-13&quot;:3.49},{&quot;2026-07-14&quot;:3.44},{&quot;2026-07-15&quot;:3.41},{&quot;2026-07-16&quot;:3.32},{&quot;2026-07-17&quot;:3.32},{&quot;2026-07-18&quot;:3.36},{&quot;2026-07-19&quot;:3.36},{&quot;2026-07-20&quot;:3.54},{&quot;2026-07-21&quot;:3.56},{&quot;2026-07-22&quot;:3.8},{&quot;2026-07-23&quot;:3.68},{&quot;2026-07-24&quot;:3.8},{&quot;2026-07-25&quot;:4.0},{&quot;2026-07-26&quot;:3.86},{&quot;2026-07-27&quot;:3.85},{&quot;2026-07-28&quot;:3.78},{&quot;2026-07-29&quot;:4.01},{&quot;2026-07-30&quot;:4.02},{&quot;2026-07-31&quot;:4.17},{&quot;2026-08-01&quot;:4.11},{&quot;2026-08-02&quot;:4.08},{&quot;2026-08-03&quot;:4.26},{&quot;2026-08-04&quot;:4.16},{&quot;2026-08-05&quot;:4.14},{&quot;2026-08-07&quot;:4.34},{&quot;2026-08-08&quot;:4.52},{&quot;2026-08-09&quot;:4.61},{&quot;2026-08-10&quot;:4.38},{&quot;2026-08-11&quot;:4.37},{&quot;2026-08-12&quot;:4.41},{&quot;2026-08-13&quot;:4.34},{&quot;2026-08-14&quot;:4.19},{&quot;2026-08-15&quot;:4.21},{&quot;2026-08-16&quot;:4.18},{&quot;2026-08-17&quot;:4.32},{&quot;2026-08-18&quot;:5.24},{&quot;2026-08-19&quot;:5.26},{&quot;2026-08-20&quot;:5.02},{&quot;2026-08-21&quot;:5.25},{&quot;2026-08-22&quot;:5.3},{&quot;2026-08-23&quot;:5.33},{&quot;2026-08-24&quot;:5.44},{&quot;2026-08-25&quot;:5.48},{&quot;2026-08-26&quot;:5.37},{&quot;2026-08-27&quot;:5.39},{&quot;2026-08-28&quot;:5.3},{&quot;2026-08-29&quot;:5.3},{&quot;2026-08-30&quot;:5.71},{&quot;2026-08-31&quot;:5.36},{&quot;2026-09-01&quot;:5.36},{&quot;2026-09-02&quot;:5.41},{&quot;2026-09-03&quot;:5.73},{&quot;2026-09-04&quot;:5.78},{&quot;2026-09-05&quot;:5.91},{&quot;2026-09-06&quot;:5.93},{&quot;2026-09-07&quot;:5.98},{&quot;2026-09-08&quot;:6.02},{&quot;2026-09-09&quot;:6.09},{&quot;2026-09-10&quot;:6.03},{&quot;2026-09-11&quot;:6.06}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="74152"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Rebuff the Wicked
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Instant
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $6.02
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Rebuff the Wicked" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/5/85232cbf-d907-4eb6-8f42-a451969213ca.jpg?1783915160" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Rebuff the Wicked
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Instant</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Rebuff the Wicked" src="https://cards.scryfall.io/large/front/8/5/85232cbf-d907-4eb6-8f42-a451969213ca.jpg?1783915160" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $6.02
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.50</span>
              <span class="text-xs text-grey-text">Credit: $4.55</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-08&quot;:6.35},{&quot;2026-06-10&quot;:6.48},{&quot;2026-06-11&quot;:6.25},{&quot;2026-06-12&quot;:6.26},{&quot;2026-06-13&quot;:6.35},{&quot;2026-06-14&quot;:6.36},{&quot;2026-06-15&quot;:6.55},{&quot;2026-06-16&quot;:6.49},{&quot;2026-06-17&quot;:6.55},{&quot;2026-06-18&quot;:6.79},{&quot;2026-06-19&quot;:7.1},{&quot;2026-06-20&quot;:7.1},{&quot;2026-06-21&quot;:7.2},{&quot;2026-06-22&quot;:7.23},{&quot;2026-06-24&quot;:6.93},{&quot;2026-06-25&quot;:7.0},{&quot;2026-06-26&quot;:7.0},{&quot;2026-06-27&quot;:7.0},{&quot;2026-06-28&quot;:7.0},{&quot;2026-06-29&quot;:7.16},{&quot;2026-06-30&quot;:7.24},{&quot;2026-07-01&quot;:7.23},{&quot;2026-07-02&quot;:7.23},{&quot;2026-07-03&quot;:7.23},{&quot;2026-07-04&quot;:7.26},{&quot;2026-07-05&quot;:7.23},{&quot;2026-07-06&quot;:7.24},{&quot;2026-07-07&quot;:7.26},{&quot;2026-07-08&quot;:7.27},{&quot;2026-07-09&quot;:7.16},{&quot;2026-07-10&quot;:7.21},{&quot;2026-07-11&quot;:7.1},{&quot;2026-07-12&quot;:6.96},{&quot;2026-07-13&quot;:6.96},{&quot;2026-07-14&quot;:6.96},{&quot;2026-07-15&quot;:7.1},{&quot;2026-07-16&quot;:7.1},{&quot;2026-07-17&quot;:6.89},{&quot;2026-07-18&quot;:6.78},{&quot;2026-07-19&quot;:6.74},{&quot;2026-07-20&quot;:6.96},{&quot;2026-07-21&quot;:7.17},{&quot;2026-07-23&quot;:7.3},{&quot;2026-07-25&quot;:7.78},{&quot;2026-07-26&quot;:7.89},{&quot;2026-07-27&quot;:7.67},{&quot;2026-07-29&quot;:8.22},{&quot;2026-07-30&quot;:8.22},{&quot;2026-07-31&quot;:7.98},{&quot;2026-08-01&quot;:7.17},{&quot;2026-08-02&quot;:6.87},{&quot;2026-08-03&quot;:6.76},{&quot;2026-08-04&quot;:6.63},{&quot;2026-08-05&quot;:6.38},{&quot;2026-08-07&quot;:5.86},{&quot;2026-08-08&quot;:5.29},{&quot;2026-08-09&quot;:5.26},{&quot;2026-08-10&quot;:5.22},{&quot;2026-08-11&quot;:5.28},{&quot;2026-08-12&quot;:5.67},{&quot;2026-08-13&quot;:5.21},{&quot;2026-08-14&quot;:5.39},{&quot;2026-08-15&quot;:6.18},{&quot;2026-08-16&quot;:6.12},{&quot;2026-08-17&quot;:6.01},{&quot;2026-08-18&quot;:5.64},{&quot;2026-08-19&quot;:5.76},{&quot;2026-08-20&quot;:5.76},{&quot;2026-08-21&quot;:5.73},{&quot;2026-08-22&quot;:5.62},{&quot;2026-08-23&quot;:5.85},{&quot;2026-08-24&quot;:6.24},{&quot;2026-08-25&quot;:6.24},{&quot;2026-08-26&quot;:6.22},{&quot;2026-08-27&quot;:6.22},{&quot;2026-08-28&quot;:6.07},{&quot;2026-08-29&quot;:6.07},{&quot;2026-08-30&quot;:6.21},{&quot;2026-08-31&quot;:6.07},{&quot;2026-09-01&quot;:6.07},{&quot;2026-09-02&quot;:6.1},{&quot;2026-09-03&quot;:6.09},{&quot;2026-09-04&quot;:6.09},{&quot;2026-09-05&quot;:6.11},{&quot;2026-09-06&quot;:5.99},{&quot;2026-09-07&quot;:6.11},{&quot;2026-09-08&quot;:6.13},{&quot;2026-09-09&quot;:6.23},{&quot;2026-09-10&quot;:6.22},{&quot;2026-09-11&quot;:6.02}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="21087"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2xm ss-common ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Forest
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Basic Land — Forest
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $2.12
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Forest" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/4/146b803f-0455-497b-8362-03da2547070d.jpg?1783930059" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Forest
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            common
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Basic Land — Forest</span>
        </div>

      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Forest" src="https://cards.scryfall.io/large/front/1/4/146b803f-0455-497b-8362-03da2547070d.jpg?1783930059" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $2.12
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  2%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.00
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$1.60</span>
              <span class="text-xs text-grey-text">Credit: $2.08</span>
            </div>
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Foil</span>
              <span class="text-lg font-medium text-nine-white">$2.40</span>
              <span class="text-xs text-grey-text">Credit: $3.12</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:5.96},{&quot;2026-06-11&quot;:5.96},{&quot;2026-06-12&quot;:5.96},{&quot;2026-06-13&quot;:5.96},{&quot;2026-06-14&quot;:5.96},{&quot;2026-06-15&quot;:5.96},{&quot;2026-06-16&quot;:6.06},{&quot;2026-06-17&quot;:6.06},{&quot;2026-06-18&quot;:6.06},{&quot;2026-06-19&quot;:6.06},{&quot;2026-06-20&quot;:6.06},{&quot;2026-06-21&quot;:5.99},{&quot;2026-06-22&quot;:6.18},{&quot;2026-06-23&quot;:6.36},{&quot;2026-06-24&quot;:6.36},{&quot;2026-06-25&quot;:6.3},{&quot;2026-06-26&quot;:6.3},{&quot;2026-06-27&quot;:6.3},{&quot;2026-06-28&quot;:6.3},{&quot;2026-06-29&quot;:6.3},{&quot;2026-06-30&quot;:6.3},{&quot;2026-07-01&quot;:6.3},{&quot;2026-07-02&quot;:6.3},{&quot;2026-07-03&quot;:6.3},{&quot;2026-07-04&quot;:6.3},{&quot;2026-07-05&quot;:6.3},{&quot;2026-07-06&quot;:6.3},{&quot;2026-07-07&quot;:6.3},{&quot;2026-07-08&quot;:6.3},{&quot;2026-07-09&quot;:6.3},{&quot;2026-07-10&quot;:6.3},{&quot;2026-07-11&quot;:6.3},{&quot;2026-07-12&quot;:6.3},{&quot;2026-07-13&quot;:6.3},{&quot;2026-07-14&quot;:6.3},{&quot;2026-07-15&quot;:6.3},{&quot;2026-07-16&quot;:6.3},{&quot;2026-07-17&quot;:6.3},{&quot;2026-07-18&quot;:6.3},{&quot;2026-07-19&quot;:6.3},{&quot;2026-07-20&quot;:6.27},{&quot;2026-07-21&quot;:6.27},{&quot;2026-07-23&quot;:6.27},{&quot;2026-07-25&quot;:6.29},{&quot;2026-07-26&quot;:6.29},{&quot;2026-07-27&quot;:6.29},{&quot;2026-07-29&quot;:6.31},{&quot;2026-07-30&quot;:6.31},{&quot;2026-07-31&quot;:6.29},{&quot;2026-08-01&quot;:6.29},{&quot;2026-08-02&quot;:6.29},{&quot;2026-08-03&quot;:6.29},{&quot;2026-08-04&quot;:6.29},{&quot;2026-08-05&quot;:6.22},{&quot;2026-08-07&quot;:6.22},{&quot;2026-08-08&quot;:6.17},{&quot;2026-08-09&quot;:6.17},{&quot;2026-08-10&quot;:6.12},{&quot;2026-08-11&quot;:6.12},{&quot;2026-08-12&quot;:6.12},{&quot;2026-08-13&quot;:6.12},{&quot;2026-08-14&quot;:6.12},{&quot;2026-08-15&quot;:6.12},{&quot;2026-08-16&quot;:6.12},{&quot;2026-08-17&quot;:6.12},{&quot;2026-08-18&quot;:6.12},{&quot;2026-08-19&quot;:6.12},{&quot;2026-08-20&quot;:6.12},{&quot;2026-08-21&quot;:6.15},{&quot;2026-08-22&quot;:6.16},{&quot;2026-08-23&quot;:6.16},{&quot;2026-08-24&quot;:6.16},{&quot;2026-08-25&quot;:6.16},{&quot;2026-08-26&quot;:6.16},{&quot;2026-08-27&quot;:6.16},{&quot;2026-08-28&quot;:6.16},{&quot;2026-08-29&quot;:6.16},{&quot;2026-08-30&quot;:6.16},{&quot;2026-08-31&quot;:6.16},{&quot;2026-09-01&quot;:6.16},{&quot;2026-09-02&quot;:6.16},{&quot;2026-09-03&quot;:6.16},{&quot;2026-09-04&quot;:6.16},{&quot;2026-09-05&quot;:6.21},{&quot;2026-09-06&quot;:6.0},{&quot;2026-09-07&quot;:6.0},{&quot;2026-09-08&quot;:6.0},{&quot;2026-09-09&quot;:6.0},{&quot;2026-09-10&quot;:6.0},{&quot;2026-09-11&quot;:6.0}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:2.46},{&quot;2026-06-11&quot;:2.46},{&quot;2026-06-12&quot;:2.46},{&quot;2026-06-13&quot;:2.46},{&quot;2026-06-14&quot;:2.46},{&quot;2026-06-15&quot;:2.46},{&quot;2026-06-16&quot;:2.43},{&quot;2026-06-17&quot;:2.43},{&quot;2026-06-18&quot;:2.43},{&quot;2026-06-19&quot;:2.43},{&quot;2026-06-20&quot;:2.38},{&quot;2026-06-21&quot;:2.35},{&quot;2026-06-22&quot;:2.35},{&quot;2026-06-23&quot;:2.35},{&quot;2026-06-24&quot;:2.35},{&quot;2026-06-25&quot;:2.35},{&quot;2026-06-26&quot;:2.35},{&quot;2026-06-27&quot;:2.35},{&quot;2026-06-28&quot;:2.35},{&quot;2026-06-29&quot;:2.32},{&quot;2026-06-30&quot;:2.3},{&quot;2026-07-01&quot;:2.3},{&quot;2026-07-02&quot;:2.28},{&quot;2026-07-03&quot;:2.29},{&quot;2026-07-04&quot;:2.29},{&quot;2026-07-05&quot;:2.29},{&quot;2026-07-06&quot;:2.34},{&quot;2026-07-07&quot;:2.24},{&quot;2026-07-08&quot;:2.25},{&quot;2026-07-09&quot;:2.28},{&quot;2026-07-10&quot;:2.29},{&quot;2026-07-11&quot;:2.26},{&quot;2026-07-12&quot;:2.25},{&quot;2026-07-13&quot;:2.21},{&quot;2026-07-14&quot;:2.21},{&quot;2026-07-15&quot;:2.21},{&quot;2026-07-16&quot;:2.15},{&quot;2026-07-17&quot;:2.15},{&quot;2026-07-18&quot;:2.17},{&quot;2026-07-19&quot;:2.13},{&quot;2026-07-20&quot;:2.07},{&quot;2026-07-21&quot;:2.07},{&quot;2026-07-23&quot;:2.07},{&quot;2026-07-25&quot;:2.07},{&quot;2026-07-26&quot;:2.05},{&quot;2026-07-27&quot;:2.07},{&quot;2026-07-29&quot;:2.14},{&quot;2026-07-30&quot;:2.11},{&quot;2026-07-31&quot;:2.15},{&quot;2026-08-01&quot;:2.16},{&quot;2026-08-02&quot;:2.12},{&quot;2026-08-03&quot;:2.12},{&quot;2026-08-04&quot;:2.06},{&quot;2026-08-05&quot;:2.02},{&quot;2026-08-07&quot;:1.99},{&quot;2026-08-08&quot;:1.99},{&quot;2026-08-09&quot;:1.97},{&quot;2026-08-10&quot;:1.97},{&quot;2026-08-11&quot;:1.98},{&quot;2026-08-12&quot;:1.98},{&quot;2026-08-13&quot;:2.04},{&quot;2026-08-14&quot;:1.99},{&quot;2026-08-15&quot;:1.99},{&quot;2026-08-16&quot;:1.97},{&quot;2026-08-17&quot;:1.98},{&quot;2026-08-18&quot;:1.98},{&quot;2026-08-19&quot;:1.9},{&quot;2026-08-20&quot;:1.9},{&quot;2026-08-21&quot;:1.9},{&quot;2026-08-22&quot;:1.9},{&quot;2026-08-23&quot;:1.88},{&quot;2026-08-24&quot;:1.92},{&quot;2026-08-25&quot;:1.92},{&quot;2026-08-26&quot;:1.92},{&quot;2026-08-27&quot;:1.94},{&quot;2026-08-28&quot;:2.05},{&quot;2026-08-29&quot;:2.05},{&quot;2026-08-30&quot;:2.11},{&quot;2026-08-31&quot;:2.08},{&quot;2026-09-01&quot;:2.08},{&quot;2026-09-02&quot;:2.13},{&quot;2026-09-03&quot;:2.12},{&quot;2026-09-04&quot;:2.12},{&quot;2026-09-05&quot;:2.08},{&quot;2026-09-06&quot;:2.1},{&quot;2026-09-07&quot;:2.04},{&quot;2026-09-08&quot;:2.08},{&quot;2026-09-09&quot;:2.16},{&quot;2026-09-10&quot;:2.12},{&quot;2026-09-11&quot;:2.12}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="20601"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2xm ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Rhys the Redeemed
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Elf Warrior
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.99
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Rhys the Redeemed" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/9/b91dadcb-31e9-43b0-b425-c9311af3e9d7.jpg?1783930128" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Rhys the Redeemed
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Elf Warrior</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-gw'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Rhys the Redeemed" src="https://cards.scryfall.io/large/front/b/9/b91dadcb-31e9-43b0-b425-c9311af3e9d7.jpg?1783930128" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.99
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  2%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $8.33
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$1.50</span>
              <span class="text-xs text-grey-text">Credit: $1.95</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:9.01},{&quot;2026-06-14&quot;:9.01},{&quot;2026-06-15&quot;:9.01},{&quot;2026-06-16&quot;:9.01},{&quot;2026-06-17&quot;:9.01},{&quot;2026-06-18&quot;:9.01},{&quot;2026-06-19&quot;:9.01},{&quot;2026-06-20&quot;:9.01},{&quot;2026-06-21&quot;:9.01},{&quot;2026-06-22&quot;:9.01},{&quot;2026-06-23&quot;:9.01},{&quot;2026-06-24&quot;:9.01},{&quot;2026-06-25&quot;:9.01},{&quot;2026-06-26&quot;:9.01},{&quot;2026-06-27&quot;:8.94},{&quot;2026-06-28&quot;:8.94},{&quot;2026-06-29&quot;:8.94},{&quot;2026-06-30&quot;:8.94},{&quot;2026-07-01&quot;:8.94},{&quot;2026-07-02&quot;:8.94},{&quot;2026-07-03&quot;:8.94},{&quot;2026-07-04&quot;:8.94},{&quot;2026-07-05&quot;:8.94},{&quot;2026-07-06&quot;:8.94},{&quot;2026-07-07&quot;:8.94},{&quot;2026-07-08&quot;:8.94},{&quot;2026-07-09&quot;:8.94},{&quot;2026-07-10&quot;:8.94},{&quot;2026-07-11&quot;:8.94},{&quot;2026-07-12&quot;:8.94},{&quot;2026-07-13&quot;:8.94},{&quot;2026-07-14&quot;:8.94},{&quot;2026-07-15&quot;:8.94},{&quot;2026-07-16&quot;:8.94},{&quot;2026-07-17&quot;:8.94},{&quot;2026-07-18&quot;:8.94},{&quot;2026-07-19&quot;:8.94},{&quot;2026-07-20&quot;:8.94},{&quot;2026-07-21&quot;:8.94},{&quot;2026-07-22&quot;:8.86},{&quot;2026-07-23&quot;:8.77},{&quot;2026-07-24&quot;:8.77},{&quot;2026-07-25&quot;:8.77},{&quot;2026-07-26&quot;:8.77},{&quot;2026-07-27&quot;:8.77},{&quot;2026-07-28&quot;:8.68},{&quot;2026-07-29&quot;:8.68},{&quot;2026-07-30&quot;:8.68},{&quot;2026-07-31&quot;:8.68},{&quot;2026-08-01&quot;:8.68},{&quot;2026-08-02&quot;:8.68},{&quot;2026-08-03&quot;:8.68},{&quot;2026-08-04&quot;:8.68},{&quot;2026-08-05&quot;:8.62},{&quot;2026-08-07&quot;:8.36},{&quot;2026-08-08&quot;:8.36},{&quot;2026-08-09&quot;:8.36},{&quot;2026-08-10&quot;:8.36},{&quot;2026-08-11&quot;:8.36},{&quot;2026-08-12&quot;:8.36},{&quot;2026-08-13&quot;:8.36},{&quot;2026-08-14&quot;:8.33},{&quot;2026-08-15&quot;:8.33},{&quot;2026-08-16&quot;:8.33},{&quot;2026-08-17&quot;:8.33},{&quot;2026-08-18&quot;:8.33},{&quot;2026-08-19&quot;:8.33},{&quot;2026-08-20&quot;:8.33},{&quot;2026-08-21&quot;:8.33},{&quot;2026-08-22&quot;:8.33},{&quot;2026-08-23&quot;:8.33},{&quot;2026-08-24&quot;:8.33},{&quot;2026-08-25&quot;:8.33},{&quot;2026-08-26&quot;:8.33},{&quot;2026-08-27&quot;:8.33},{&quot;2026-08-28&quot;:8.33},{&quot;2026-08-29&quot;:8.33},{&quot;2026-08-30&quot;:8.33},{&quot;2026-08-31&quot;:8.34},{&quot;2026-09-01&quot;:8.34},{&quot;2026-09-02&quot;:8.34},{&quot;2026-09-03&quot;:8.34},{&quot;2026-09-04&quot;:8.35},{&quot;2026-09-05&quot;:8.35},{&quot;2026-09-06&quot;:8.35},{&quot;2026-09-07&quot;:8.35},{&quot;2026-09-08&quot;:8.33},{&quot;2026-09-09&quot;:8.33},{&quot;2026-09-10&quot;:8.33},{&quot;2026-09-11&quot;:8.33}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:5.87},{&quot;2026-06-14&quot;:5.9},{&quot;2026-06-15&quot;:6.0},{&quot;2026-06-16&quot;:6.05},{&quot;2026-06-17&quot;:6.05},{&quot;2026-06-18&quot;:6.05},{&quot;2026-06-19&quot;:6.05},{&quot;2026-06-20&quot;:5.99},{&quot;2026-06-21&quot;:6.0},{&quot;2026-06-22&quot;:5.88},{&quot;2026-06-23&quot;:5.88},{&quot;2026-06-24&quot;:5.88},{&quot;2026-06-25&quot;:5.68},{&quot;2026-06-26&quot;:5.73},{&quot;2026-06-27&quot;:5.73},{&quot;2026-06-28&quot;:5.73},{&quot;2026-06-29&quot;:5.63},{&quot;2026-06-30&quot;:5.63},{&quot;2026-07-01&quot;:5.7},{&quot;2026-07-02&quot;:5.7},{&quot;2026-07-03&quot;:5.62},{&quot;2026-07-04&quot;:5.62},{&quot;2026-07-05&quot;:5.62},{&quot;2026-07-06&quot;:5.62},{&quot;2026-07-07&quot;:5.62},{&quot;2026-07-08&quot;:5.62},{&quot;2026-07-09&quot;:5.75},{&quot;2026-07-10&quot;:5.75},{&quot;2026-07-11&quot;:5.75},{&quot;2026-07-12&quot;:5.76},{&quot;2026-07-13&quot;:5.76},{&quot;2026-07-14&quot;:5.69},{&quot;2026-07-15&quot;:5.69},{&quot;2026-07-16&quot;:5.7},{&quot;2026-07-17&quot;:5.67},{&quot;2026-07-18&quot;:5.67},{&quot;2026-07-19&quot;:5.62},{&quot;2026-07-20&quot;:5.57},{&quot;2026-07-21&quot;:5.65},{&quot;2026-07-22&quot;:5.67},{&quot;2026-07-23&quot;:5.67},{&quot;2026-07-24&quot;:5.43},{&quot;2026-07-25&quot;:5.47},{&quot;2026-07-26&quot;:5.47},{&quot;2026-07-27&quot;:5.51},{&quot;2026-07-28&quot;:5.67},{&quot;2026-07-29&quot;:5.67},{&quot;2026-07-30&quot;:5.67},{&quot;2026-07-31&quot;:5.66},{&quot;2026-08-01&quot;:5.66},{&quot;2026-08-02&quot;:5.66},{&quot;2026-08-03&quot;:5.64},{&quot;2026-08-04&quot;:5.7},{&quot;2026-08-05&quot;:5.64},{&quot;2026-08-07&quot;:5.44},{&quot;2026-08-08&quot;:5.39},{&quot;2026-08-09&quot;:5.33},{&quot;2026-08-10&quot;:5.33},{&quot;2026-08-11&quot;:5.3},{&quot;2026-08-12&quot;:5.46},{&quot;2026-08-13&quot;:5.42},{&quot;2026-08-14&quot;:5.57},{&quot;2026-08-15&quot;:5.6},{&quot;2026-08-16&quot;:5.6},{&quot;2026-08-17&quot;:5.61},{&quot;2026-08-18&quot;:5.89},{&quot;2026-08-19&quot;:5.89},{&quot;2026-08-20&quot;:5.89},{&quot;2026-08-21&quot;:5.89},{&quot;2026-08-22&quot;:5.92},{&quot;2026-08-23&quot;:5.98},{&quot;2026-08-24&quot;:5.98},{&quot;2026-08-25&quot;:6.11},{&quot;2026-08-26&quot;:5.86},{&quot;2026-08-27&quot;:5.86},{&quot;2026-08-28&quot;:5.65},{&quot;2026-08-29&quot;:5.65},{&quot;2026-08-30&quot;:5.66},{&quot;2026-08-31&quot;:5.91},{&quot;2026-09-01&quot;:6.01},{&quot;2026-09-02&quot;:5.92},{&quot;2026-09-03&quot;:5.92},{&quot;2026-09-04&quot;:5.83},{&quot;2026-09-05&quot;:5.85},{&quot;2026-09-06&quot;:6.03},{&quot;2026-09-07&quot;:6.15},{&quot;2026-09-08&quot;:6.11},{&quot;2026-09-09&quot;:6.05},{&quot;2026-09-10&quot;:6.08},{&quot;2026-09-11&quot;:5.99}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="41156"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-neo ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Light-Paws, Emperor&#39;s Voice
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Fox Advisor
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              7%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.98
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Light-Paws, Emperor&#39;s Voice" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/9/39555a72-a57b-45ee-9222-ce3b9e8de126.jpg?1783923918" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Light-Paws, Emperor&#39;s Voice
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Fox Advisor</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Light-Paws, Emperor&#39;s Voice" src="https://cards.scryfall.io/large/front/3/9/39555a72-a57b-45ee-9222-ce3b9e8de126.jpg?1783923918" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $2.28
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  25%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $5.98
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  7%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Foil</span>
              <span class="text-lg font-medium text-nine-white">$1.75</span>
              <span class="text-xs text-grey-text">Credit: $2.28</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:9.71},{&quot;2026-06-14&quot;:9.71},{&quot;2026-06-15&quot;:9.81},{&quot;2026-06-16&quot;:9.44},{&quot;2026-06-17&quot;:9.44},{&quot;2026-06-18&quot;:9.27},{&quot;2026-06-19&quot;:9.27},{&quot;2026-06-20&quot;:9.27},{&quot;2026-06-21&quot;:9.27},{&quot;2026-06-22&quot;:9.05},{&quot;2026-06-23&quot;:8.53},{&quot;2026-06-24&quot;:8.52},{&quot;2026-06-25&quot;:8.16},{&quot;2026-06-26&quot;:8.16},{&quot;2026-06-27&quot;:7.79},{&quot;2026-06-28&quot;:7.79},{&quot;2026-06-29&quot;:7.79},{&quot;2026-06-30&quot;:7.36},{&quot;2026-07-01&quot;:7.36},{&quot;2026-07-02&quot;:7.36},{&quot;2026-07-03&quot;:7.31},{&quot;2026-07-04&quot;:7.31},{&quot;2026-07-05&quot;:7.13},{&quot;2026-07-06&quot;:7.13},{&quot;2026-07-07&quot;:6.91},{&quot;2026-07-08&quot;:6.84},{&quot;2026-07-09&quot;:6.65},{&quot;2026-07-10&quot;:6.65},{&quot;2026-07-11&quot;:6.65},{&quot;2026-07-12&quot;:6.65},{&quot;2026-07-13&quot;:6.56},{&quot;2026-07-14&quot;:6.7},{&quot;2026-07-15&quot;:6.12},{&quot;2026-07-16&quot;:6.12},{&quot;2026-07-17&quot;:5.92},{&quot;2026-07-18&quot;:5.25},{&quot;2026-07-19&quot;:4.75},{&quot;2026-07-20&quot;:4.75},{&quot;2026-07-21&quot;:4.63},{&quot;2026-07-22&quot;:4.68},{&quot;2026-07-23&quot;:4.68},{&quot;2026-07-24&quot;:4.68},{&quot;2026-07-25&quot;:4.68},{&quot;2026-07-26&quot;:4.68},{&quot;2026-07-27&quot;:4.68},{&quot;2026-07-28&quot;:4.68},{&quot;2026-07-29&quot;:4.66},{&quot;2026-07-30&quot;:4.66},{&quot;2026-07-31&quot;:4.49},{&quot;2026-08-01&quot;:4.49},{&quot;2026-08-02&quot;:4.89},{&quot;2026-08-03&quot;:4.89},{&quot;2026-08-04&quot;:5.01},{&quot;2026-08-05&quot;:5.02},{&quot;2026-08-07&quot;:4.78},{&quot;2026-08-08&quot;:4.7},{&quot;2026-08-09&quot;:4.7},{&quot;2026-08-10&quot;:4.7},{&quot;2026-08-11&quot;:5.25},{&quot;2026-08-12&quot;:5.25},{&quot;2026-08-13&quot;:5.25},{&quot;2026-08-14&quot;:5.25},{&quot;2026-08-15&quot;:5.25},{&quot;2026-08-16&quot;:5.25},{&quot;2026-08-17&quot;:5.25},{&quot;2026-08-18&quot;:5.64},{&quot;2026-08-19&quot;:5.8},{&quot;2026-08-20&quot;:5.8},{&quot;2026-08-21&quot;:5.98},{&quot;2026-08-22&quot;:6.0},{&quot;2026-08-23&quot;:5.96},{&quot;2026-08-24&quot;:5.96},{&quot;2026-08-25&quot;:5.95},{&quot;2026-08-26&quot;:6.05},{&quot;2026-08-27&quot;:6.05},{&quot;2026-08-28&quot;:6.13},{&quot;2026-08-29&quot;:6.13},{&quot;2026-08-30&quot;:5.86},{&quot;2026-08-31&quot;:5.86},{&quot;2026-09-01&quot;:5.86},{&quot;2026-09-02&quot;:5.6},{&quot;2026-09-03&quot;:5.6},{&quot;2026-09-04&quot;:5.58},{&quot;2026-09-05&quot;:5.58},{&quot;2026-09-06&quot;:5.58},{&quot;2026-09-07&quot;:5.58},{&quot;2026-09-08&quot;:5.52},{&quot;2026-09-09&quot;:5.7},{&quot;2026-09-10&quot;:5.91},{&quot;2026-09-11&quot;:5.98}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:5.42},{&quot;2026-06-14&quot;:5.57},{&quot;2026-06-15&quot;:5.44},{&quot;2026-06-16&quot;:5.33},{&quot;2026-06-17&quot;:5.48},{&quot;2026-06-18&quot;:5.42},{&quot;2026-06-19&quot;:5.37},{&quot;2026-06-20&quot;:5.35},{&quot;2026-06-21&quot;:5.34},{&quot;2026-06-22&quot;:5.4},{&quot;2026-06-23&quot;:5.4},{&quot;2026-06-24&quot;:5.4},{&quot;2026-06-25&quot;:5.4},{&quot;2026-06-26&quot;:5.38},{&quot;2026-06-27&quot;:5.2},{&quot;2026-06-28&quot;:5.04},{&quot;2026-06-29&quot;:5.04},{&quot;2026-06-30&quot;:5.04},{&quot;2026-07-01&quot;:4.9},{&quot;2026-07-02&quot;:4.97},{&quot;2026-07-03&quot;:4.39},{&quot;2026-07-04&quot;:4.51},{&quot;2026-07-05&quot;:4.45},{&quot;2026-07-06&quot;:4.42},{&quot;2026-07-07&quot;:4.39},{&quot;2026-07-08&quot;:4.37},{&quot;2026-07-09&quot;:4.32},{&quot;2026-07-10&quot;:4.36},{&quot;2026-07-11&quot;:4.38},{&quot;2026-07-12&quot;:4.34},{&quot;2026-07-13&quot;:4.24},{&quot;2026-07-14&quot;:4.24},{&quot;2026-07-15&quot;:4.18},{&quot;2026-07-16&quot;:4.17},{&quot;2026-07-17&quot;:4.14},{&quot;2026-07-18&quot;:4.11},{&quot;2026-07-19&quot;:3.99},{&quot;2026-07-20&quot;:3.94},{&quot;2026-07-21&quot;:3.89},{&quot;2026-07-22&quot;:3.86},{&quot;2026-07-23&quot;:3.8},{&quot;2026-07-24&quot;:3.73},{&quot;2026-07-25&quot;:3.63},{&quot;2026-07-26&quot;:3.62},{&quot;2026-07-27&quot;:3.53},{&quot;2026-07-28&quot;:3.29},{&quot;2026-07-29&quot;:3.14},{&quot;2026-07-30&quot;:3.18},{&quot;2026-07-31&quot;:3.2},{&quot;2026-08-01&quot;:3.27},{&quot;2026-08-02&quot;:3.29},{&quot;2026-08-03&quot;:3.25},{&quot;2026-08-04&quot;:3.16},{&quot;2026-08-05&quot;:3.15},{&quot;2026-08-07&quot;:3.07},{&quot;2026-08-08&quot;:3.09},{&quot;2026-08-09&quot;:2.94},{&quot;2026-08-10&quot;:2.81},{&quot;2026-08-11&quot;:2.92},{&quot;2026-08-12&quot;:2.91},{&quot;2026-08-13&quot;:2.86},{&quot;2026-08-14&quot;:2.76},{&quot;2026-08-15&quot;:2.79},{&quot;2026-08-16&quot;:2.77},{&quot;2026-08-17&quot;:2.76},{&quot;2026-08-18&quot;:2.82},{&quot;2026-08-19&quot;:3.0},{&quot;2026-08-20&quot;:2.92},{&quot;2026-08-21&quot;:2.83},{&quot;2026-08-22&quot;:2.84},{&quot;2026-08-23&quot;:2.93},{&quot;2026-08-24&quot;:2.93},{&quot;2026-08-25&quot;:2.91},{&quot;2026-08-26&quot;:2.99},{&quot;2026-08-27&quot;:2.91},{&quot;2026-08-28&quot;:2.97},{&quot;2026-08-29&quot;:2.97},{&quot;2026-08-30&quot;:2.99},{&quot;2026-08-31&quot;:2.97},{&quot;2026-09-01&quot;:3.0},{&quot;2026-09-02&quot;:3.04},{&quot;2026-09-03&quot;:3.04},{&quot;2026-09-04&quot;:3.1},{&quot;2026-09-05&quot;:3.03},{&quot;2026-09-06&quot;:2.8},{&quot;2026-09-07&quot;:2.64},{&quot;2026-09-08&quot;:2.66},{&quot;2026-09-09&quot;:2.52},{&quot;2026-09-10&quot;:2.45},{&quot;2026-09-11&quot;:2.28}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="109224"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-sos ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Emeritus of Ideation 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Human Wizard
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            2 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              4%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.98
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Emeritus of Ideation // Ancestral Recall" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/7/5/75961d36-acf6-425f-9698-0bf52af74f31.jpg?1782682999" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Emeritus of Ideation 
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Human Wizard</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <div data-controller="card-flip" class="flex flex-col items-center">
          <div
            data-action="click->card-flip#flip"
            class="flip-container cursor-pointer w-full max-w-xs mx-auto"
          >
            <div data-card-flip-target="card" class="flip-card">
              <div class="flip-card-front">
                <img class="w-full h-auto rounded-2xl" alt="Emeritus of Ideation // Ancestral Recall" src="https://cards.scryfall.io/large/front/7/5/75961d36-acf6-425f-9698-0bf52af74f31.jpg?1782682999" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Emeritus of Ideation // Ancestral Recall" src="https://cards.scryfall.io/large/front/7/5/75961d36-acf6-425f-9698-0bf52af74f31.jpg?1782682999" />
              </div>
            </div>
          </div>

          <p class="mt-2 text-sm text-grey-text">Tap card to flip</p>
        </div>
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            2
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.98
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  4%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.29
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  6%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$5.50</span>
              <span class="text-xs text-grey-text">Credit: $7.15</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:10.94},{&quot;2026-06-14&quot;:10.73},{&quot;2026-06-15&quot;:10.72},{&quot;2026-06-16&quot;:10.89},{&quot;2026-06-17&quot;:10.78},{&quot;2026-06-18&quot;:10.74},{&quot;2026-06-19&quot;:10.62},{&quot;2026-06-20&quot;:10.4},{&quot;2026-06-21&quot;:11.08},{&quot;2026-06-22&quot;:10.75},{&quot;2026-06-23&quot;:10.74},{&quot;2026-06-24&quot;:10.72},{&quot;2026-06-25&quot;:10.72},{&quot;2026-06-26&quot;:10.37},{&quot;2026-06-27&quot;:9.82},{&quot;2026-06-28&quot;:9.5},{&quot;2026-06-29&quot;:9.09},{&quot;2026-06-30&quot;:8.87},{&quot;2026-07-01&quot;:7.72},{&quot;2026-07-02&quot;:7.94},{&quot;2026-07-03&quot;:8.0},{&quot;2026-07-04&quot;:8.09},{&quot;2026-07-05&quot;:8.08},{&quot;2026-07-06&quot;:7.95},{&quot;2026-07-07&quot;:7.97},{&quot;2026-07-08&quot;:7.89},{&quot;2026-07-09&quot;:7.67},{&quot;2026-07-10&quot;:7.42},{&quot;2026-07-11&quot;:7.37},{&quot;2026-07-12&quot;:7.24},{&quot;2026-07-13&quot;:7.1},{&quot;2026-07-14&quot;:6.95},{&quot;2026-07-15&quot;:6.67},{&quot;2026-07-16&quot;:6.66},{&quot;2026-07-17&quot;:6.52},{&quot;2026-07-18&quot;:6.39},{&quot;2026-07-19&quot;:6.36},{&quot;2026-07-20&quot;:6.33},{&quot;2026-07-21&quot;:6.35},{&quot;2026-07-22&quot;:6.19},{&quot;2026-07-23&quot;:6.14},{&quot;2026-07-24&quot;:6.06},{&quot;2026-07-25&quot;:6.05},{&quot;2026-07-26&quot;:5.91},{&quot;2026-07-27&quot;:5.85},{&quot;2026-07-28&quot;:5.76},{&quot;2026-07-29&quot;:5.56},{&quot;2026-07-30&quot;:5.46},{&quot;2026-07-31&quot;:5.66},{&quot;2026-08-01&quot;:5.72},{&quot;2026-08-02&quot;:5.81},{&quot;2026-08-03&quot;:5.8},{&quot;2026-08-04&quot;:5.81},{&quot;2026-08-05&quot;:5.82},{&quot;2026-08-07&quot;:5.67},{&quot;2026-08-08&quot;:5.63},{&quot;2026-08-09&quot;:5.54},{&quot;2026-08-10&quot;:5.54},{&quot;2026-08-11&quot;:5.61},{&quot;2026-08-12&quot;:5.6},{&quot;2026-08-13&quot;:5.63},{&quot;2026-08-14&quot;:5.57},{&quot;2026-08-15&quot;:5.64},{&quot;2026-08-16&quot;:5.61},{&quot;2026-08-17&quot;:5.47},{&quot;2026-08-18&quot;:5.56},{&quot;2026-08-19&quot;:5.56},{&quot;2026-08-20&quot;:5.75},{&quot;2026-08-21&quot;:5.85},{&quot;2026-08-22&quot;:6.03},{&quot;2026-08-23&quot;:6.09},{&quot;2026-08-24&quot;:6.24},{&quot;2026-08-25&quot;:6.36},{&quot;2026-08-26&quot;:6.29},{&quot;2026-08-27&quot;:6.07},{&quot;2026-08-28&quot;:6.1},{&quot;2026-08-29&quot;:6.1},{&quot;2026-08-30&quot;:6.01},{&quot;2026-08-31&quot;:5.96},{&quot;2026-09-01&quot;:5.86},{&quot;2026-09-02&quot;:5.9},{&quot;2026-09-03&quot;:5.9},{&quot;2026-09-04&quot;:5.91},{&quot;2026-09-05&quot;:5.91},{&quot;2026-09-06&quot;:5.98},{&quot;2026-09-07&quot;:5.99},{&quot;2026-09-08&quot;:6.05},{&quot;2026-09-09&quot;:6.13},{&quot;2026-09-10&quot;:6.13},{&quot;2026-09-11&quot;:6.29}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:9.02},{&quot;2026-06-14&quot;:8.57},{&quot;2026-06-15&quot;:8.73},{&quot;2026-06-16&quot;:8.72},{&quot;2026-06-17&quot;:8.2},{&quot;2026-06-18&quot;:7.12},{&quot;2026-06-19&quot;:7.03},{&quot;2026-06-20&quot;:6.98},{&quot;2026-06-21&quot;:6.99},{&quot;2026-06-22&quot;:6.78},{&quot;2026-06-23&quot;:6.43},{&quot;2026-06-24&quot;:6.01},{&quot;2026-06-25&quot;:5.98},{&quot;2026-06-26&quot;:5.96},{&quot;2026-06-27&quot;:6.3},{&quot;2026-06-28&quot;:6.13},{&quot;2026-06-29&quot;:6.48},{&quot;2026-06-30&quot;:6.57},{&quot;2026-07-01&quot;:6.43},{&quot;2026-07-02&quot;:6.16},{&quot;2026-07-03&quot;:6.48},{&quot;2026-07-04&quot;:6.51},{&quot;2026-07-05&quot;:6.5},{&quot;2026-07-06&quot;:6.64},{&quot;2026-07-07&quot;:6.51},{&quot;2026-07-08&quot;:6.54},{&quot;2026-07-09&quot;:6.57},{&quot;2026-07-10&quot;:6.38},{&quot;2026-07-11&quot;:6.37},{&quot;2026-07-12&quot;:6.42},{&quot;2026-07-13&quot;:6.31},{&quot;2026-07-14&quot;:5.84},{&quot;2026-07-15&quot;:5.96},{&quot;2026-07-16&quot;:5.88},{&quot;2026-07-17&quot;:6.02},{&quot;2026-07-18&quot;:6.21},{&quot;2026-07-19&quot;:6.13},{&quot;2026-07-20&quot;:6.13},{&quot;2026-07-21&quot;:6.08},{&quot;2026-07-22&quot;:5.62},{&quot;2026-07-23&quot;:5.03},{&quot;2026-07-24&quot;:4.76},{&quot;2026-07-25&quot;:4.85},{&quot;2026-07-26&quot;:4.88},{&quot;2026-07-27&quot;:5.53},{&quot;2026-07-28&quot;:5.25},{&quot;2026-07-29&quot;:5.5},{&quot;2026-07-30&quot;:5.26},{&quot;2026-07-31&quot;:5.63},{&quot;2026-08-01&quot;:5.6},{&quot;2026-08-02&quot;:5.59},{&quot;2026-08-03&quot;:5.46},{&quot;2026-08-04&quot;:5.5},{&quot;2026-08-05&quot;:4.99},{&quot;2026-08-07&quot;:5.18},{&quot;2026-08-08&quot;:5.32},{&quot;2026-08-09&quot;:5.51},{&quot;2026-08-10&quot;:5.53},{&quot;2026-08-11&quot;:5.7},{&quot;2026-08-12&quot;:5.66},{&quot;2026-08-13&quot;:5.59},{&quot;2026-08-14&quot;:5.67},{&quot;2026-08-15&quot;:5.4},{&quot;2026-08-16&quot;:5.67},{&quot;2026-08-17&quot;:5.99},{&quot;2026-08-18&quot;:5.87},{&quot;2026-08-19&quot;:5.51},{&quot;2026-08-20&quot;:5.53},{&quot;2026-08-21&quot;:5.53},{&quot;2026-08-22&quot;:5.77},{&quot;2026-08-23&quot;:5.68},{&quot;2026-08-24&quot;:5.79},{&quot;2026-08-25&quot;:5.54},{&quot;2026-08-26&quot;:5.55},{&quot;2026-08-27&quot;:5.86},{&quot;2026-08-28&quot;:5.86},{&quot;2026-08-29&quot;:5.86},{&quot;2026-08-30&quot;:5.73},{&quot;2026-08-31&quot;:5.83},{&quot;2026-09-01&quot;:5.64},{&quot;2026-09-02&quot;:5.53},{&quot;2026-09-03&quot;:5.5},{&quot;2026-09-04&quot;:5.55},{&quot;2026-09-05&quot;:5.77},{&quot;2026-09-06&quot;:5.84},{&quot;2026-09-07&quot;:5.76},{&quot;2026-09-08&quot;:5.93},{&quot;2026-09-09&quot;:5.96},{&quot;2026-09-10&quot;:6.08},{&quot;2026-09-11&quot;:5.98}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="28957"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-afc ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Sword of the Animist
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Artifact — Equipment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $5.97
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Sword of the Animist" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/b/3bfa6b8c-6e4b-42fa-9f6c-40c95e162b9a.jpg?1783926167" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Sword of the Animist
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Artifact — Equipment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Sword of the Animist" src="https://cards.scryfall.io/large/front/3/b/3bfa6b8c-6e4b-42fa-9f6c-40c95e162b9a.jpg?1783926167" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.97
              </span>

            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$1.40</span>
              <span class="text-xs text-grey-text">Credit: $1.82</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:9.37},{&quot;2026-06-14&quot;:9.37},{&quot;2026-06-15&quot;:9.43},{&quot;2026-06-16&quot;:9.43},{&quot;2026-06-17&quot;:9.24},{&quot;2026-06-18&quot;:9.34},{&quot;2026-06-19&quot;:9.34},{&quot;2026-06-20&quot;:9.19},{&quot;2026-06-21&quot;:9.19},{&quot;2026-06-22&quot;:8.9},{&quot;2026-06-23&quot;:8.9},{&quot;2026-06-24&quot;:8.9},{&quot;2026-06-25&quot;:8.76},{&quot;2026-06-26&quot;:8.67},{&quot;2026-06-27&quot;:8.67},{&quot;2026-06-28&quot;:8.67},{&quot;2026-06-29&quot;:8.63},{&quot;2026-06-30&quot;:8.63},{&quot;2026-07-01&quot;:8.63},{&quot;2026-07-02&quot;:8.65},{&quot;2026-07-03&quot;:8.46},{&quot;2026-07-04&quot;:8.46},{&quot;2026-07-05&quot;:8.29},{&quot;2026-07-06&quot;:8.07},{&quot;2026-07-07&quot;:8.07},{&quot;2026-07-08&quot;:8.07},{&quot;2026-07-09&quot;:7.88},{&quot;2026-07-10&quot;:7.62},{&quot;2026-07-11&quot;:7.55},{&quot;2026-07-12&quot;:7.16},{&quot;2026-07-13&quot;:6.95},{&quot;2026-07-14&quot;:6.78},{&quot;2026-07-15&quot;:6.3},{&quot;2026-07-16&quot;:6.34},{&quot;2026-07-17&quot;:6.23},{&quot;2026-07-18&quot;:6.26},{&quot;2026-07-19&quot;:6.22},{&quot;2026-07-20&quot;:6.56},{&quot;2026-07-21&quot;:6.43},{&quot;2026-07-22&quot;:6.43},{&quot;2026-07-23&quot;:6.43},{&quot;2026-07-24&quot;:6.54},{&quot;2026-07-25&quot;:6.54},{&quot;2026-07-26&quot;:6.41},{&quot;2026-07-27&quot;:6.65},{&quot;2026-07-28&quot;:6.75},{&quot;2026-07-29&quot;:6.89},{&quot;2026-07-30&quot;:6.89},{&quot;2026-07-31&quot;:6.89},{&quot;2026-08-01&quot;:6.84},{&quot;2026-08-02&quot;:6.8},{&quot;2026-08-03&quot;:6.8},{&quot;2026-08-04&quot;:6.8},{&quot;2026-08-05&quot;:6.8},{&quot;2026-08-07&quot;:6.8},{&quot;2026-08-08&quot;:6.8},{&quot;2026-08-09&quot;:6.75},{&quot;2026-08-10&quot;:6.75},{&quot;2026-08-11&quot;:6.75},{&quot;2026-08-12&quot;:6.75},{&quot;2026-08-13&quot;:6.75},{&quot;2026-08-14&quot;:6.75},{&quot;2026-08-15&quot;:6.59},{&quot;2026-08-16&quot;:6.61},{&quot;2026-08-17&quot;:6.63},{&quot;2026-08-18&quot;:6.71},{&quot;2026-08-19&quot;:6.71},{&quot;2026-08-20&quot;:6.71},{&quot;2026-08-21&quot;:6.71},{&quot;2026-08-22&quot;:6.66},{&quot;2026-08-23&quot;:6.63},{&quot;2026-08-24&quot;:6.63},{&quot;2026-08-25&quot;:6.76},{&quot;2026-08-26&quot;:6.68},{&quot;2026-08-27&quot;:6.46},{&quot;2026-08-28&quot;:6.09},{&quot;2026-08-29&quot;:6.09},{&quot;2026-08-30&quot;:6.14},{&quot;2026-08-31&quot;:6.14},{&quot;2026-09-01&quot;:6.18},{&quot;2026-09-02&quot;:6.25},{&quot;2026-09-03&quot;:6.3},{&quot;2026-09-04&quot;:6.21},{&quot;2026-09-05&quot;:5.99},{&quot;2026-09-06&quot;:5.99},{&quot;2026-09-07&quot;:5.98},{&quot;2026-09-08&quot;:5.98},{&quot;2026-09-09&quot;:5.98},{&quot;2026-09-10&quot;:5.97},{&quot;2026-09-11&quot;:5.97}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="14438"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Not of This World
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Kindred Instant — Eldrazi
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              4%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.96
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Not of This World" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/1/d18ce39e-211d-460b-a200-a26c17aeeb12.jpg?1783915456" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Not of This World
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Kindred Instant — Eldrazi</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-7'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Not of This World" src="https://cards.scryfall.io/large/front/d/1/d18ce39e-211d-460b-a200-a26c17aeeb12.jpg?1783915456" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.96
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  4%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.10</span>
              <span class="text-xs text-grey-text">Credit: $4.03</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-08&quot;:5.91},{&quot;2026-06-10&quot;:5.98},{&quot;2026-06-11&quot;:5.94},{&quot;2026-06-12&quot;:5.88},{&quot;2026-06-13&quot;:5.91},{&quot;2026-06-14&quot;:5.99},{&quot;2026-06-15&quot;:5.98},{&quot;2026-06-16&quot;:6.01},{&quot;2026-06-17&quot;:6.01},{&quot;2026-06-18&quot;:6.01},{&quot;2026-06-19&quot;:5.89},{&quot;2026-06-20&quot;:5.87},{&quot;2026-06-21&quot;:5.87},{&quot;2026-06-22&quot;:5.96},{&quot;2026-06-24&quot;:5.95},{&quot;2026-06-25&quot;:5.9},{&quot;2026-06-26&quot;:5.83},{&quot;2026-06-27&quot;:5.85},{&quot;2026-06-28&quot;:5.86},{&quot;2026-06-29&quot;:5.86},{&quot;2026-06-30&quot;:5.87},{&quot;2026-07-01&quot;:5.84},{&quot;2026-07-02&quot;:5.68},{&quot;2026-07-03&quot;:5.6},{&quot;2026-07-04&quot;:5.71},{&quot;2026-07-05&quot;:5.73},{&quot;2026-07-06&quot;:5.68},{&quot;2026-07-07&quot;:5.71},{&quot;2026-07-08&quot;:5.67},{&quot;2026-07-09&quot;:5.66},{&quot;2026-07-10&quot;:5.62},{&quot;2026-07-11&quot;:5.6},{&quot;2026-07-12&quot;:5.6},{&quot;2026-07-13&quot;:5.62},{&quot;2026-07-14&quot;:5.79},{&quot;2026-07-15&quot;:5.79},{&quot;2026-07-16&quot;:5.77},{&quot;2026-07-17&quot;:5.77},{&quot;2026-07-18&quot;:5.8},{&quot;2026-07-19&quot;:5.77},{&quot;2026-07-20&quot;:5.74},{&quot;2026-07-21&quot;:5.76},{&quot;2026-07-23&quot;:5.71},{&quot;2026-07-25&quot;:5.83},{&quot;2026-07-26&quot;:5.75},{&quot;2026-07-27&quot;:5.71},{&quot;2026-07-29&quot;:5.68},{&quot;2026-07-30&quot;:5.63},{&quot;2026-07-31&quot;:5.67},{&quot;2026-08-01&quot;:5.67},{&quot;2026-08-02&quot;:5.68},{&quot;2026-08-03&quot;:5.75},{&quot;2026-08-04&quot;:5.72},{&quot;2026-08-05&quot;:5.72},{&quot;2026-08-07&quot;:5.67},{&quot;2026-08-08&quot;:5.78},{&quot;2026-08-09&quot;:5.69},{&quot;2026-08-10&quot;:5.65},{&quot;2026-08-11&quot;:5.76},{&quot;2026-08-12&quot;:5.86},{&quot;2026-08-13&quot;:5.91},{&quot;2026-08-14&quot;:5.83},{&quot;2026-08-15&quot;:5.75},{&quot;2026-08-16&quot;:5.73},{&quot;2026-08-17&quot;:5.71},{&quot;2026-08-18&quot;:5.79},{&quot;2026-08-19&quot;:5.79},{&quot;2026-08-20&quot;:5.79},{&quot;2026-08-21&quot;:5.73},{&quot;2026-08-22&quot;:5.78},{&quot;2026-08-23&quot;:5.79},{&quot;2026-08-24&quot;:5.67},{&quot;2026-08-25&quot;:5.67},{&quot;2026-08-26&quot;:5.9},{&quot;2026-08-27&quot;:5.9},{&quot;2026-08-28&quot;:5.9},{&quot;2026-08-29&quot;:5.9},{&quot;2026-08-30&quot;:5.81},{&quot;2026-08-31&quot;:5.82},{&quot;2026-09-01&quot;:5.82},{&quot;2026-09-02&quot;:5.86},{&quot;2026-09-03&quot;:5.82},{&quot;2026-09-04&quot;:5.78},{&quot;2026-09-05&quot;:5.74},{&quot;2026-09-06&quot;:5.85},{&quot;2026-09-07&quot;:5.88},{&quot;2026-09-08&quot;:5.91},{&quot;2026-09-09&quot;:5.92},{&quot;2026-09-10&quot;:5.96},{&quot;2026-09-11&quot;:5.96}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="34957"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-vow ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Hullbreaker Horror
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Kraken Horror
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $5.96
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Hullbreaker Horror" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/4/b/4b546bcf-2e86-42af-bf32-81c7fd36ef8c.jpg?1783924891" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Hullbreaker Horror
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Kraken Horror</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-5'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Hullbreaker Horror" src="https://cards.scryfall.io/large/front/4/b/4b546bcf-2e86-42af-bf32-81c7fd36ef8c.jpg?1783924891" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.96
              </span>

            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $6.79
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  4%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$5.30</span>
              <span class="text-xs text-grey-text">Credit: $6.89</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:8.67},{&quot;2026-06-14&quot;:8.67},{&quot;2026-06-15&quot;:8.67},{&quot;2026-06-16&quot;:8.67},{&quot;2026-06-17&quot;:8.56},{&quot;2026-06-18&quot;:8.56},{&quot;2026-06-19&quot;:8.91},{&quot;2026-06-20&quot;:8.91},{&quot;2026-06-21&quot;:8.91},{&quot;2026-06-22&quot;:8.91},{&quot;2026-06-23&quot;:8.91},{&quot;2026-06-24&quot;:9.05},{&quot;2026-06-25&quot;:9.19},{&quot;2026-06-26&quot;:9.18},{&quot;2026-06-27&quot;:9.18},{&quot;2026-06-28&quot;:9.18},{&quot;2026-06-29&quot;:9.18},{&quot;2026-06-30&quot;:9.18},{&quot;2026-07-01&quot;:9.18},{&quot;2026-07-02&quot;:9.18},{&quot;2026-07-03&quot;:9.18},{&quot;2026-07-04&quot;:9.38},{&quot;2026-07-05&quot;:9.38},{&quot;2026-07-06&quot;:9.38},{&quot;2026-07-07&quot;:9.38},{&quot;2026-07-08&quot;:9.38},{&quot;2026-07-09&quot;:9.26},{&quot;2026-07-10&quot;:9.26},{&quot;2026-07-11&quot;:9.26},{&quot;2026-07-12&quot;:9.26},{&quot;2026-07-13&quot;:9.26},{&quot;2026-07-14&quot;:9.26},{&quot;2026-07-15&quot;:9.26},{&quot;2026-07-16&quot;:9.26},{&quot;2026-07-17&quot;:9.24},{&quot;2026-07-18&quot;:9.24},{&quot;2026-07-19&quot;:9.24},{&quot;2026-07-20&quot;:9.24},{&quot;2026-07-21&quot;:9.33},{&quot;2026-07-22&quot;:9.33},{&quot;2026-07-23&quot;:7.53},{&quot;2026-07-24&quot;:7.61},{&quot;2026-07-25&quot;:7.32},{&quot;2026-07-26&quot;:7.32},{&quot;2026-07-27&quot;:7.52},{&quot;2026-07-28&quot;:7.52},{&quot;2026-07-29&quot;:7.52},{&quot;2026-07-30&quot;:7.45},{&quot;2026-07-31&quot;:7.45},{&quot;2026-08-01&quot;:7.2},{&quot;2026-08-02&quot;:7.38},{&quot;2026-08-03&quot;:7.38},{&quot;2026-08-04&quot;:7.36},{&quot;2026-08-05&quot;:7.36},{&quot;2026-08-07&quot;:7.22},{&quot;2026-08-08&quot;:7.16},{&quot;2026-08-09&quot;:7.3},{&quot;2026-08-10&quot;:7.27},{&quot;2026-08-11&quot;:7.07},{&quot;2026-08-12&quot;:7.07},{&quot;2026-08-13&quot;:7.07},{&quot;2026-08-14&quot;:7.07},{&quot;2026-08-15&quot;:6.88},{&quot;2026-08-16&quot;:6.88},{&quot;2026-08-17&quot;:6.88},{&quot;2026-08-18&quot;:6.88},{&quot;2026-08-19&quot;:6.85},{&quot;2026-08-20&quot;:6.85},{&quot;2026-08-21&quot;:6.85},{&quot;2026-08-22&quot;:6.85},{&quot;2026-08-23&quot;:6.79},{&quot;2026-08-24&quot;:6.79},{&quot;2026-08-25&quot;:6.79},{&quot;2026-08-26&quot;:6.7},{&quot;2026-08-27&quot;:6.7},{&quot;2026-08-28&quot;:6.7},{&quot;2026-08-29&quot;:6.7},{&quot;2026-08-30&quot;:6.7},{&quot;2026-08-31&quot;:6.7},{&quot;2026-09-01&quot;:6.7},{&quot;2026-09-02&quot;:6.7},{&quot;2026-09-03&quot;:6.66},{&quot;2026-09-04&quot;:6.56},{&quot;2026-09-05&quot;:6.56},{&quot;2026-09-06&quot;:6.56},{&quot;2026-09-07&quot;:6.56},{&quot;2026-09-08&quot;:6.56},{&quot;2026-09-09&quot;:6.67},{&quot;2026-09-10&quot;:6.79},{&quot;2026-09-11&quot;:6.79}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:6.46},{&quot;2026-06-14&quot;:6.75},{&quot;2026-06-15&quot;:6.76},{&quot;2026-06-16&quot;:6.24},{&quot;2026-06-17&quot;:5.93},{&quot;2026-06-18&quot;:5.8},{&quot;2026-06-19&quot;:5.93},{&quot;2026-06-20&quot;:6.37},{&quot;2026-06-21&quot;:6.12},{&quot;2026-06-22&quot;:6.5},{&quot;2026-06-23&quot;:6.15},{&quot;2026-06-24&quot;:5.28},{&quot;2026-06-25&quot;:5.36},{&quot;2026-06-26&quot;:5.09},{&quot;2026-06-27&quot;:5.76},{&quot;2026-06-28&quot;:5.87},{&quot;2026-06-29&quot;:6.14},{&quot;2026-06-30&quot;:5.93},{&quot;2026-07-01&quot;:6.28},{&quot;2026-07-02&quot;:6.46},{&quot;2026-07-03&quot;:6.29},{&quot;2026-07-04&quot;:6.31},{&quot;2026-07-05&quot;:6.18},{&quot;2026-07-06&quot;:5.88},{&quot;2026-07-07&quot;:5.74},{&quot;2026-07-08&quot;:5.88},{&quot;2026-07-09&quot;:5.74},{&quot;2026-07-10&quot;:5.82},{&quot;2026-07-11&quot;:5.67},{&quot;2026-07-12&quot;:5.88},{&quot;2026-07-13&quot;:6.1},{&quot;2026-07-14&quot;:5.85},{&quot;2026-07-15&quot;:5.97},{&quot;2026-07-16&quot;:5.94},{&quot;2026-07-17&quot;:6.02},{&quot;2026-07-18&quot;:6.19},{&quot;2026-07-19&quot;:6.19},{&quot;2026-07-20&quot;:6.53},{&quot;2026-07-21&quot;:6.62},{&quot;2026-07-22&quot;:6.12},{&quot;2026-07-23&quot;:5.94},{&quot;2026-07-24&quot;:5.66},{&quot;2026-07-25&quot;:5.57},{&quot;2026-07-26&quot;:5.44},{&quot;2026-07-27&quot;:5.73},{&quot;2026-07-28&quot;:5.67},{&quot;2026-07-29&quot;:5.59},{&quot;2026-07-30&quot;:5.61},{&quot;2026-07-31&quot;:5.3},{&quot;2026-08-01&quot;:5.33},{&quot;2026-08-02&quot;:5.66},{&quot;2026-08-03&quot;:5.87},{&quot;2026-08-04&quot;:6.03},{&quot;2026-08-05&quot;:6.22},{&quot;2026-08-07&quot;:6.39},{&quot;2026-08-08&quot;:6.88},{&quot;2026-08-09&quot;:6.88},{&quot;2026-08-10&quot;:6.78},{&quot;2026-08-11&quot;:6.73},{&quot;2026-08-12&quot;:6.41},{&quot;2026-08-13&quot;:5.61},{&quot;2026-08-14&quot;:4.73},{&quot;2026-08-15&quot;:4.7},{&quot;2026-08-16&quot;:5.3},{&quot;2026-08-17&quot;:5.87},{&quot;2026-08-18&quot;:6.75},{&quot;2026-08-19&quot;:6.87},{&quot;2026-08-20&quot;:6.99},{&quot;2026-08-21&quot;:7.06},{&quot;2026-08-22&quot;:6.71},{&quot;2026-08-23&quot;:6.47},{&quot;2026-08-24&quot;:6.41},{&quot;2026-08-25&quot;:6.07},{&quot;2026-08-26&quot;:6.24},{&quot;2026-08-27&quot;:6.45},{&quot;2026-08-28&quot;:6.58},{&quot;2026-08-29&quot;:6.58},{&quot;2026-08-30&quot;:6.37},{&quot;2026-08-31&quot;:5.5},{&quot;2026-09-01&quot;:5.71},{&quot;2026-09-02&quot;:6.07},{&quot;2026-09-03&quot;:6.21},{&quot;2026-09-04&quot;:6.08},{&quot;2026-09-05&quot;:5.98},{&quot;2026-09-06&quot;:5.86},{&quot;2026-09-07&quot;:5.86},{&quot;2026-09-08&quot;:6.11},{&quot;2026-09-09&quot;:6.22},{&quot;2026-09-10&quot;:6.03},{&quot;2026-09-11&quot;:5.96}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="13761"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-clb ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Firkraag, Cunning Instigator
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Dragon
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.95
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Firkraag, Cunning Instigator" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/5/b55e624b-6f6a-42ae-89aa-0cc62ee55a31.jpg?1783922517" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Firkraag, Cunning Instigator
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Dragon</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Firkraag, Cunning Instigator" src="https://cards.scryfall.io/large/front/b/5/b55e624b-6f6a-42ae-89aa-0cc62ee55a31.jpg?1783922517" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $5.95
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Foil</span>
              <span class="text-lg font-medium text-nine-white">$1.60</span>
              <span class="text-xs text-grey-text">Credit: $2.08</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:6.05},{&quot;2026-06-14&quot;:6.05},{&quot;2026-06-15&quot;:6.06},{&quot;2026-06-16&quot;:6.06},{&quot;2026-06-17&quot;:6.16},{&quot;2026-06-18&quot;:6.17},{&quot;2026-06-19&quot;:6.22},{&quot;2026-06-20&quot;:6.22},{&quot;2026-06-21&quot;:6.22},{&quot;2026-06-22&quot;:6.32},{&quot;2026-06-23&quot;:6.27},{&quot;2026-06-24&quot;:6.27},{&quot;2026-06-25&quot;:6.27},{&quot;2026-06-26&quot;:6.53},{&quot;2026-06-27&quot;:6.53},{&quot;2026-06-28&quot;:6.53},{&quot;2026-06-29&quot;:6.47},{&quot;2026-06-30&quot;:6.7},{&quot;2026-07-01&quot;:6.52},{&quot;2026-07-02&quot;:6.52},{&quot;2026-07-03&quot;:6.63},{&quot;2026-07-04&quot;:6.5},{&quot;2026-07-05&quot;:6.5},{&quot;2026-07-06&quot;:6.42},{&quot;2026-07-07&quot;:6.48},{&quot;2026-07-08&quot;:6.37},{&quot;2026-07-09&quot;:6.36},{&quot;2026-07-10&quot;:6.36},{&quot;2026-07-11&quot;:6.35},{&quot;2026-07-12&quot;:6.41},{&quot;2026-07-13&quot;:6.25},{&quot;2026-07-14&quot;:6.24},{&quot;2026-07-15&quot;:6.29},{&quot;2026-07-16&quot;:6.42},{&quot;2026-07-17&quot;:6.42},{&quot;2026-07-18&quot;:6.37},{&quot;2026-07-19&quot;:6.32},{&quot;2026-07-20&quot;:6.1},{&quot;2026-07-21&quot;:6.21},{&quot;2026-07-22&quot;:6.21},{&quot;2026-07-23&quot;:6.21},{&quot;2026-07-24&quot;:6.16},{&quot;2026-07-25&quot;:6.16},{&quot;2026-07-26&quot;:6.15},{&quot;2026-07-27&quot;:6.15},{&quot;2026-07-28&quot;:6.03},{&quot;2026-07-29&quot;:5.95},{&quot;2026-07-30&quot;:5.93},{&quot;2026-07-31&quot;:5.76},{&quot;2026-08-01&quot;:5.76},{&quot;2026-08-02&quot;:5.76},{&quot;2026-08-03&quot;:5.71},{&quot;2026-08-04&quot;:5.84},{&quot;2026-08-05&quot;:5.88},{&quot;2026-08-07&quot;:5.84},{&quot;2026-08-08&quot;:5.88},{&quot;2026-08-09&quot;:5.63},{&quot;2026-08-10&quot;:5.63},{&quot;2026-08-11&quot;:5.58},{&quot;2026-08-12&quot;:5.51},{&quot;2026-08-13&quot;:5.59},{&quot;2026-08-14&quot;:5.65},{&quot;2026-08-15&quot;:5.86},{&quot;2026-08-16&quot;:5.86},{&quot;2026-08-17&quot;:5.86},{&quot;2026-08-18&quot;:5.86},{&quot;2026-08-19&quot;:5.86},{&quot;2026-08-20&quot;:5.86},{&quot;2026-08-21&quot;:5.86},{&quot;2026-08-22&quot;:5.86},{&quot;2026-08-23&quot;:6.0},{&quot;2026-08-24&quot;:5.99},{&quot;2026-08-25&quot;:5.99},{&quot;2026-08-26&quot;:5.95},{&quot;2026-08-27&quot;:6.03},{&quot;2026-08-28&quot;:6.03},{&quot;2026-08-29&quot;:6.03},{&quot;2026-08-30&quot;:6.09},{&quot;2026-08-31&quot;:6.09},{&quot;2026-09-01&quot;:6.01},{&quot;2026-09-02&quot;:5.98},{&quot;2026-09-03&quot;:5.98},{&quot;2026-09-04&quot;:5.98},{&quot;2026-09-05&quot;:5.98},{&quot;2026-09-06&quot;:6.03},{&quot;2026-09-07&quot;:6.03},{&quot;2026-09-08&quot;:5.98},{&quot;2026-09-09&quot;:5.98},{&quot;2026-09-10&quot;:5.91},{&quot;2026-09-11&quot;:5.95}],&quot;normal&quot;:[]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="57509"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-one ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Urabrask&#39;s Forge
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $5.94
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Urabrask&#39;s Forge" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/2/a/2a9f089b-ee4a-4765-a384-4490962df403.jpg?1783917828" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Urabrask&#39;s Forge
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Urabrask&#39;s Forge" src="https://cards.scryfall.io/large/front/2/a/2a9f089b-ee4a-4765-a384-4490962df403.jpg?1783917828" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $5.94
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Foil</span>
              <span class="text-lg font-medium text-nine-white">$0.90</span>
              <span class="text-xs text-grey-text">Credit: $1.17</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:5.18},{&quot;2026-06-14&quot;:5.18},{&quot;2026-06-15&quot;:5.18},{&quot;2026-06-16&quot;:5.18},{&quot;2026-06-17&quot;:5.18},{&quot;2026-06-18&quot;:5.18},{&quot;2026-06-19&quot;:5.18},{&quot;2026-06-20&quot;:5.18},{&quot;2026-06-21&quot;:5.18},{&quot;2026-06-22&quot;:5.18},{&quot;2026-06-23&quot;:5.18},{&quot;2026-06-24&quot;:5.18},{&quot;2026-06-25&quot;:5.18},{&quot;2026-06-26&quot;:5.18},{&quot;2026-06-27&quot;:5.18},{&quot;2026-06-28&quot;:5.18},{&quot;2026-06-29&quot;:5.18},{&quot;2026-06-30&quot;:5.18},{&quot;2026-07-01&quot;:5.18},{&quot;2026-07-02&quot;:5.18},{&quot;2026-07-03&quot;:5.18},{&quot;2026-07-04&quot;:5.18},{&quot;2026-07-05&quot;:5.18},{&quot;2026-07-06&quot;:5.18},{&quot;2026-07-07&quot;:5.14},{&quot;2026-07-08&quot;:5.18},{&quot;2026-07-09&quot;:5.18},{&quot;2026-07-10&quot;:5.18},{&quot;2026-07-11&quot;:5.18},{&quot;2026-07-12&quot;:5.18},{&quot;2026-07-13&quot;:5.18},{&quot;2026-07-14&quot;:5.18},{&quot;2026-07-15&quot;:5.18},{&quot;2026-07-16&quot;:5.18},{&quot;2026-07-17&quot;:5.18},{&quot;2026-07-18&quot;:5.18},{&quot;2026-07-19&quot;:5.18},{&quot;2026-07-20&quot;:5.18},{&quot;2026-07-21&quot;:5.18},{&quot;2026-07-22&quot;:5.18},{&quot;2026-07-23&quot;:5.18},{&quot;2026-07-24&quot;:5.18},{&quot;2026-07-25&quot;:5.18},{&quot;2026-07-26&quot;:5.18},{&quot;2026-07-27&quot;:5.18},{&quot;2026-07-28&quot;:5.18},{&quot;2026-07-29&quot;:5.18},{&quot;2026-07-30&quot;:5.18},{&quot;2026-07-31&quot;:5.18},{&quot;2026-08-01&quot;:5.18},{&quot;2026-08-02&quot;:5.18},{&quot;2026-08-03&quot;:5.18},{&quot;2026-08-04&quot;:5.18},{&quot;2026-08-05&quot;:5.18},{&quot;2026-08-07&quot;:5.18},{&quot;2026-08-08&quot;:5.18},{&quot;2026-08-09&quot;:5.18},{&quot;2026-08-10&quot;:5.18},{&quot;2026-08-11&quot;:5.18},{&quot;2026-08-12&quot;:5.18},{&quot;2026-08-13&quot;:5.18},{&quot;2026-08-14&quot;:5.18},{&quot;2026-08-15&quot;:5.18},{&quot;2026-08-16&quot;:5.18},{&quot;2026-08-17&quot;:5.18},{&quot;2026-08-18&quot;:5.18},{&quot;2026-08-19&quot;:5.18},{&quot;2026-08-20&quot;:5.68},{&quot;2026-08-21&quot;:5.68},{&quot;2026-08-22&quot;:5.68},{&quot;2026-08-23&quot;:5.61},{&quot;2026-08-24&quot;:5.61},{&quot;2026-08-25&quot;:5.61},{&quot;2026-08-26&quot;:5.61},{&quot;2026-08-27&quot;:5.61},{&quot;2026-08-28&quot;:5.61},{&quot;2026-08-29&quot;:5.61},{&quot;2026-08-30&quot;:5.61},{&quot;2026-08-31&quot;:5.61},{&quot;2026-09-01&quot;:5.61},{&quot;2026-09-02&quot;:5.61},{&quot;2026-09-03&quot;:5.94},{&quot;2026-09-04&quot;:5.94},{&quot;2026-09-05&quot;:5.94},{&quot;2026-09-06&quot;:5.94},{&quot;2026-09-07&quot;:5.94},{&quot;2026-09-08&quot;:5.94},{&quot;2026-09-09&quot;:5.94},{&quot;2026-09-10&quot;:5.94},{&quot;2026-09-11&quot;:5.94}],&quot;normal&quot;:[]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="112553"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-hob ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Beorn the Fierce
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Bear Shapeshifter Warrior
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              15%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.93
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Beorn the Fierce" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/6/367d5f8b-77ee-47f7-bc71-972d62c280a9.jpg?1784632151" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Beorn the Fierce
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Bear Shapeshifter Warrior</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Beorn the Fierce" src="https://cards.scryfall.io/large/front/3/6/367d5f8b-77ee-47f7-bc71-972d62c280a9.jpg?1784632151" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.93
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  15%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $8.30
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  8%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.50</span>
              <span class="text-xs text-grey-text">Credit: $5.85</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-07-31&quot;:27.5},{&quot;2026-08-01&quot;:27.5},{&quot;2026-08-02&quot;:27.5},{&quot;2026-08-03&quot;:27.5},{&quot;2026-08-04&quot;:27.5},{&quot;2026-08-05&quot;:26.86},{&quot;2026-08-07&quot;:26.86},{&quot;2026-08-08&quot;:18.12},{&quot;2026-08-09&quot;:16.32},{&quot;2026-08-10&quot;:13.28},{&quot;2026-08-11&quot;:9.27},{&quot;2026-08-12&quot;:8.92},{&quot;2026-08-13&quot;:8.85},{&quot;2026-08-14&quot;:8.89},{&quot;2026-08-15&quot;:6.26},{&quot;2026-08-16&quot;:6.03},{&quot;2026-08-17&quot;:6.6},{&quot;2026-08-18&quot;:7.28},{&quot;2026-08-19&quot;:8.57},{&quot;2026-08-20&quot;:7.72},{&quot;2026-08-21&quot;:8.09},{&quot;2026-08-22&quot;:9.49},{&quot;2026-08-23&quot;:9.32},{&quot;2026-08-24&quot;:9.5},{&quot;2026-08-25&quot;:9.33},{&quot;2026-08-26&quot;:8.73},{&quot;2026-08-27&quot;:8.19},{&quot;2026-08-28&quot;:8.19},{&quot;2026-08-29&quot;:8.19},{&quot;2026-08-30&quot;:8.69},{&quot;2026-08-31&quot;:9.03},{&quot;2026-09-01&quot;:10.16},{&quot;2026-09-02&quot;:10.02},{&quot;2026-09-03&quot;:10.04},{&quot;2026-09-04&quot;:9.57},{&quot;2026-09-05&quot;:9.05},{&quot;2026-09-06&quot;:8.5},{&quot;2026-09-07&quot;:9.07},{&quot;2026-09-08&quot;:9.27},{&quot;2026-09-09&quot;:8.7},{&quot;2026-09-10&quot;:8.62},{&quot;2026-09-11&quot;:8.3}],&quot;normal&quot;:[{&quot;2026-07-25&quot;:31.73},{&quot;2026-07-26&quot;:38.78},{&quot;2026-07-27&quot;:38.78},{&quot;2026-07-28&quot;:38.78},{&quot;2026-07-29&quot;:41.62},{&quot;2026-07-30&quot;:41.62},{&quot;2026-07-31&quot;:42.0},{&quot;2026-08-01&quot;:42.0},{&quot;2026-08-02&quot;:42.0},{&quot;2026-08-03&quot;:41.27},{&quot;2026-08-04&quot;:41.27},{&quot;2026-08-05&quot;:39.73},{&quot;2026-08-07&quot;:22.7},{&quot;2026-08-08&quot;:10.13},{&quot;2026-08-09&quot;:9.23},{&quot;2026-08-10&quot;:9.44},{&quot;2026-08-11&quot;:9.18},{&quot;2026-08-12&quot;:8.96},{&quot;2026-08-13&quot;:8.69},{&quot;2026-08-14&quot;:8.53},{&quot;2026-08-15&quot;:6.26},{&quot;2026-08-16&quot;:5.49},{&quot;2026-08-17&quot;:6.49},{&quot;2026-08-18&quot;:6.27},{&quot;2026-08-19&quot;:6.36},{&quot;2026-08-20&quot;:6.62},{&quot;2026-08-21&quot;:7.08},{&quot;2026-08-22&quot;:7.13},{&quot;2026-08-23&quot;:7.35},{&quot;2026-08-24&quot;:7.45},{&quot;2026-08-25&quot;:7.8},{&quot;2026-08-26&quot;:7.89},{&quot;2026-08-27&quot;:8.16},{&quot;2026-08-28&quot;:8.83},{&quot;2026-08-29&quot;:8.83},{&quot;2026-08-30&quot;:8.77},{&quot;2026-08-31&quot;:8.19},{&quot;2026-09-01&quot;:7.74},{&quot;2026-09-02&quot;:7.25},{&quot;2026-09-03&quot;:7.72},{&quot;2026-09-04&quot;:8.28},{&quot;2026-09-05&quot;:6.96},{&quot;2026-09-06&quot;:7.11},{&quot;2026-09-07&quot;:6.09},{&quot;2026-09-08&quot;:5.76},{&quot;2026-09-09&quot;:5.74},{&quot;2026-09-10&quot;:5.96},{&quot;2026-09-11&quot;:5.93}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="14418"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            All Is Dust
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Kindred Sorcery — Eldrazi
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $5.92
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="All Is Dust" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/4/2/4210c54e-89fd-4971-ab6a-ca8f4e7fe97a.jpg?1783915459" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            All Is Dust
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Kindred Sorcery — Eldrazi</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-7'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="All Is Dust" src="https://cards.scryfall.io/large/front/4/2/4210c54e-89fd-4971-ab6a-ca8f4e7fe97a.jpg?1783915459" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.92
              </span>

            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.20</span>
              <span class="text-xs text-grey-text">Credit: $4.16</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:4.8},{&quot;2026-06-14&quot;:4.86},{&quot;2026-06-15&quot;:4.86},{&quot;2026-06-16&quot;:4.81},{&quot;2026-06-17&quot;:4.81},{&quot;2026-06-18&quot;:4.81},{&quot;2026-06-19&quot;:4.83},{&quot;2026-06-20&quot;:4.83},{&quot;2026-06-21&quot;:4.83},{&quot;2026-06-22&quot;:4.86},{&quot;2026-06-23&quot;:4.86},{&quot;2026-06-24&quot;:4.86},{&quot;2026-06-25&quot;:4.83},{&quot;2026-06-26&quot;:4.84},{&quot;2026-06-27&quot;:4.91},{&quot;2026-06-28&quot;:4.86},{&quot;2026-06-29&quot;:4.85},{&quot;2026-06-30&quot;:4.85},{&quot;2026-07-01&quot;:4.82},{&quot;2026-07-02&quot;:4.83},{&quot;2026-07-03&quot;:4.72},{&quot;2026-07-04&quot;:4.71},{&quot;2026-07-05&quot;:4.61},{&quot;2026-07-06&quot;:4.68},{&quot;2026-07-07&quot;:4.74},{&quot;2026-07-08&quot;:4.73},{&quot;2026-07-09&quot;:4.69},{&quot;2026-07-10&quot;:4.85},{&quot;2026-07-11&quot;:5.01},{&quot;2026-07-12&quot;:5.01},{&quot;2026-07-13&quot;:4.95},{&quot;2026-07-14&quot;:5.05},{&quot;2026-07-15&quot;:5.15},{&quot;2026-07-16&quot;:5.25},{&quot;2026-07-17&quot;:5.33},{&quot;2026-07-18&quot;:5.44},{&quot;2026-07-19&quot;:5.41},{&quot;2026-07-20&quot;:5.46},{&quot;2026-07-21&quot;:5.52},{&quot;2026-07-22&quot;:5.48},{&quot;2026-07-23&quot;:5.48},{&quot;2026-07-24&quot;:5.34},{&quot;2026-07-25&quot;:5.34},{&quot;2026-07-26&quot;:5.13},{&quot;2026-07-27&quot;:5.25},{&quot;2026-07-28&quot;:5.22},{&quot;2026-07-29&quot;:5.02},{&quot;2026-07-30&quot;:5.04},{&quot;2026-07-31&quot;:5.0},{&quot;2026-08-01&quot;:5.0},{&quot;2026-08-02&quot;:5.14},{&quot;2026-08-03&quot;:5.26},{&quot;2026-08-04&quot;:5.46},{&quot;2026-08-05&quot;:5.45},{&quot;2026-08-07&quot;:5.41},{&quot;2026-08-08&quot;:5.46},{&quot;2026-08-09&quot;:5.46},{&quot;2026-08-10&quot;:5.46},{&quot;2026-08-11&quot;:5.49},{&quot;2026-08-12&quot;:5.52},{&quot;2026-08-13&quot;:5.58},{&quot;2026-08-14&quot;:5.6},{&quot;2026-08-15&quot;:5.57},{&quot;2026-08-16&quot;:5.57},{&quot;2026-08-17&quot;:5.64},{&quot;2026-08-18&quot;:5.8},{&quot;2026-08-19&quot;:5.8},{&quot;2026-08-20&quot;:5.8},{&quot;2026-08-21&quot;:5.9},{&quot;2026-08-22&quot;:5.94},{&quot;2026-08-23&quot;:5.84},{&quot;2026-08-24&quot;:5.84},{&quot;2026-08-25&quot;:5.84},{&quot;2026-08-26&quot;:5.78},{&quot;2026-08-27&quot;:5.72},{&quot;2026-08-28&quot;:5.76},{&quot;2026-08-29&quot;:5.76},{&quot;2026-08-30&quot;:5.78},{&quot;2026-08-31&quot;:5.85},{&quot;2026-09-01&quot;:5.9},{&quot;2026-09-02&quot;:5.98},{&quot;2026-09-03&quot;:5.92},{&quot;2026-09-04&quot;:5.91},{&quot;2026-09-05&quot;:5.91},{&quot;2026-09-06&quot;:5.92},{&quot;2026-09-07&quot;:5.92},{&quot;2026-09-08&quot;:5.92},{&quot;2026-09-09&quot;:5.92},{&quot;2026-09-10&quot;:5.92},{&quot;2026-09-11&quot;:5.92}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="95349"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fin ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Jenova, Ancient Calamity
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Alien
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              5%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.91
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Jenova, Ancient Calamity" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/9/f/9f80efa6-769f-4205-b69e-9cf0e78b7bcd.jpg?1783906524" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Jenova, Ancient Calamity
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Alien</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Jenova, Ancient Calamity" src="https://cards.scryfall.io/large/front/9/f/9f80efa6-769f-4205-b69e-9cf0e78b7bcd.jpg?1783906524" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.91
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  5%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $9.61
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$1.00</span>
              <span class="text-xs text-grey-text">Credit: $1.30</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-11&quot;:11.1},{&quot;2026-06-12&quot;:11.16},{&quot;2026-06-13&quot;:11.22},{&quot;2026-06-14&quot;:11.58},{&quot;2026-06-15&quot;:11.69},{&quot;2026-06-16&quot;:11.43},{&quot;2026-06-17&quot;:11.53},{&quot;2026-06-18&quot;:11.4},{&quot;2026-06-19&quot;:11.4},{&quot;2026-06-20&quot;:11.42},{&quot;2026-06-21&quot;:11.42},{&quot;2026-06-22&quot;:11.42},{&quot;2026-06-23&quot;:11.49},{&quot;2026-06-24&quot;:11.49},{&quot;2026-06-25&quot;:11.49},{&quot;2026-06-26&quot;:11.49},{&quot;2026-06-27&quot;:11.26},{&quot;2026-06-28&quot;:11.11},{&quot;2026-06-29&quot;:11.11},{&quot;2026-06-30&quot;:10.95},{&quot;2026-07-01&quot;:10.97},{&quot;2026-07-02&quot;:10.6},{&quot;2026-07-03&quot;:10.44},{&quot;2026-07-04&quot;:10.14},{&quot;2026-07-05&quot;:10.16},{&quot;2026-07-06&quot;:10.16},{&quot;2026-07-07&quot;:10.16},{&quot;2026-07-08&quot;:9.91},{&quot;2026-07-09&quot;:9.86},{&quot;2026-07-10&quot;:9.86},{&quot;2026-07-11&quot;:9.97},{&quot;2026-07-12&quot;:9.97},{&quot;2026-07-13&quot;:9.9},{&quot;2026-07-14&quot;:9.83},{&quot;2026-07-15&quot;:9.56},{&quot;2026-07-16&quot;:9.56},{&quot;2026-07-17&quot;:9.56},{&quot;2026-07-18&quot;:9.43},{&quot;2026-07-19&quot;:9.29},{&quot;2026-07-20&quot;:9.21},{&quot;2026-07-21&quot;:9.19},{&quot;2026-07-23&quot;:9.25},{&quot;2026-07-25&quot;:9.31},{&quot;2026-07-26&quot;:9.51},{&quot;2026-07-27&quot;:9.75},{&quot;2026-07-28&quot;:9.68},{&quot;2026-07-29&quot;:9.68},{&quot;2026-07-30&quot;:9.65},{&quot;2026-07-31&quot;:9.37},{&quot;2026-08-01&quot;:9.37},{&quot;2026-08-02&quot;:9.28},{&quot;2026-08-03&quot;:9.36},{&quot;2026-08-04&quot;:9.4},{&quot;2026-08-05&quot;:9.38},{&quot;2026-08-07&quot;:9.4},{&quot;2026-08-08&quot;:9.4},{&quot;2026-08-09&quot;:9.42},{&quot;2026-08-10&quot;:9.38},{&quot;2026-08-11&quot;:9.36},{&quot;2026-08-12&quot;:9.29},{&quot;2026-08-13&quot;:9.29},{&quot;2026-08-14&quot;:9.29},{&quot;2026-08-15&quot;:9.39},{&quot;2026-08-16&quot;:9.39},{&quot;2026-08-17&quot;:9.5},{&quot;2026-08-18&quot;:9.5},{&quot;2026-08-19&quot;:9.45},{&quot;2026-08-20&quot;:9.45},{&quot;2026-08-21&quot;:9.46},{&quot;2026-08-22&quot;:9.3},{&quot;2026-08-23&quot;:9.24},{&quot;2026-08-24&quot;:9.28},{&quot;2026-08-25&quot;:9.28},{&quot;2026-08-26&quot;:9.29},{&quot;2026-08-27&quot;:9.39},{&quot;2026-08-28&quot;:9.35},{&quot;2026-08-29&quot;:9.35},{&quot;2026-08-30&quot;:9.35},{&quot;2026-08-31&quot;:9.36},{&quot;2026-09-01&quot;:9.39},{&quot;2026-09-02&quot;:9.41},{&quot;2026-09-03&quot;:9.41},{&quot;2026-09-04&quot;:9.3},{&quot;2026-09-05&quot;:9.3},{&quot;2026-09-06&quot;:9.44},{&quot;2026-09-07&quot;:9.44},{&quot;2026-09-08&quot;:9.49},{&quot;2026-09-09&quot;:9.49},{&quot;2026-09-10&quot;:9.46},{&quot;2026-09-11&quot;:9.61}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:7.44},{&quot;2026-06-12&quot;:7.36},{&quot;2026-06-13&quot;:7.73},{&quot;2026-06-14&quot;:7.67},{&quot;2026-06-15&quot;:7.78},{&quot;2026-06-16&quot;:7.72},{&quot;2026-06-17&quot;:7.74},{&quot;2026-06-18&quot;:7.66},{&quot;2026-06-19&quot;:7.82},{&quot;2026-06-20&quot;:7.9},{&quot;2026-06-21&quot;:7.74},{&quot;2026-06-22&quot;:7.82},{&quot;2026-06-23&quot;:7.82},{&quot;2026-06-24&quot;:7.82},{&quot;2026-06-25&quot;:7.79},{&quot;2026-06-26&quot;:7.86},{&quot;2026-06-27&quot;:7.85},{&quot;2026-06-28&quot;:8.02},{&quot;2026-06-29&quot;:8.03},{&quot;2026-06-30&quot;:7.84},{&quot;2026-07-01&quot;:7.85},{&quot;2026-07-02&quot;:7.9},{&quot;2026-07-03&quot;:7.9},{&quot;2026-07-04&quot;:7.89},{&quot;2026-07-05&quot;:7.82},{&quot;2026-07-06&quot;:7.51},{&quot;2026-07-07&quot;:7.51},{&quot;2026-07-08&quot;:7.45},{&quot;2026-07-09&quot;:7.41},{&quot;2026-07-10&quot;:7.41},{&quot;2026-07-11&quot;:7.31},{&quot;2026-07-12&quot;:7.04},{&quot;2026-07-13&quot;:6.88},{&quot;2026-07-14&quot;:6.88},{&quot;2026-07-15&quot;:6.83},{&quot;2026-07-16&quot;:6.61},{&quot;2026-07-17&quot;:6.59},{&quot;2026-07-18&quot;:6.59},{&quot;2026-07-19&quot;:6.51},{&quot;2026-07-20&quot;:6.48},{&quot;2026-07-21&quot;:6.47},{&quot;2026-07-23&quot;:6.47},{&quot;2026-07-25&quot;:6.27},{&quot;2026-07-26&quot;:6.24},{&quot;2026-07-27&quot;:6.17},{&quot;2026-07-28&quot;:6.06},{&quot;2026-07-29&quot;:5.99},{&quot;2026-07-30&quot;:6.02},{&quot;2026-07-31&quot;:6.04},{&quot;2026-08-01&quot;:6.1},{&quot;2026-08-02&quot;:5.96},{&quot;2026-08-03&quot;:5.97},{&quot;2026-08-04&quot;:6.0},{&quot;2026-08-05&quot;:6.11},{&quot;2026-08-07&quot;:5.93},{&quot;2026-08-08&quot;:5.98},{&quot;2026-08-09&quot;:6.06},{&quot;2026-08-10&quot;:6.12},{&quot;2026-08-11&quot;:6.14},{&quot;2026-08-12&quot;:6.14},{&quot;2026-08-13&quot;:6.16},{&quot;2026-08-14&quot;:5.99},{&quot;2026-08-15&quot;:6.06},{&quot;2026-08-16&quot;:5.95},{&quot;2026-08-17&quot;:5.91},{&quot;2026-08-18&quot;:5.84},{&quot;2026-08-19&quot;:5.83},{&quot;2026-08-20&quot;:5.83},{&quot;2026-08-21&quot;:5.96},{&quot;2026-08-22&quot;:6.07},{&quot;2026-08-23&quot;:5.92},{&quot;2026-08-24&quot;:5.78},{&quot;2026-08-25&quot;:5.81},{&quot;2026-08-26&quot;:5.91},{&quot;2026-08-27&quot;:5.84},{&quot;2026-08-28&quot;:5.69},{&quot;2026-08-29&quot;:5.69},{&quot;2026-08-30&quot;:5.6},{&quot;2026-08-31&quot;:5.56},{&quot;2026-09-01&quot;:5.86},{&quot;2026-09-02&quot;:5.74},{&quot;2026-09-03&quot;:5.74},{&quot;2026-09-04&quot;:5.8},{&quot;2026-09-05&quot;:5.61},{&quot;2026-09-06&quot;:5.72},{&quot;2026-09-07&quot;:5.86},{&quot;2026-09-08&quot;:5.84},{&quot;2026-09-09&quot;:5.82},{&quot;2026-09-10&quot;:5.9},{&quot;2026-09-11&quot;:5.91}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="78143"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Cabal Therapy
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Sorcery
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.90
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Cabal Therapy" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/2/a/2afc9aa7-eaf2-453d-942c-23bf216a1844.jpg?1783932227" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Cabal Therapy
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Sorcery</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Cabal Therapy" src="https://cards.scryfall.io/large/front/2/a/2afc9aa7-eaf2-453d-942c-23bf216a1844.jpg?1783932227" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.90
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.80</span>
              <span class="text-xs text-grey-text">Credit: $4.94</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:7.36},{&quot;2026-06-14&quot;:7.35},{&quot;2026-06-15&quot;:7.35},{&quot;2026-06-16&quot;:7.35},{&quot;2026-06-17&quot;:7.2},{&quot;2026-06-18&quot;:7.2},{&quot;2026-06-19&quot;:7.2},{&quot;2026-06-20&quot;:7.2},{&quot;2026-06-21&quot;:7.2},{&quot;2026-06-22&quot;:7.2},{&quot;2026-06-23&quot;:7.2},{&quot;2026-06-24&quot;:7.2},{&quot;2026-06-25&quot;:7.2},{&quot;2026-06-26&quot;:7.2},{&quot;2026-06-27&quot;:7.2},{&quot;2026-06-28&quot;:7.12},{&quot;2026-06-29&quot;:7.12},{&quot;2026-06-30&quot;:7.12},{&quot;2026-07-01&quot;:7.12},{&quot;2026-07-02&quot;:7.12},{&quot;2026-07-03&quot;:7.12},{&quot;2026-07-04&quot;:7.01},{&quot;2026-07-05&quot;:7.01},{&quot;2026-07-06&quot;:7.01},{&quot;2026-07-07&quot;:6.99},{&quot;2026-07-08&quot;:6.99},{&quot;2026-07-09&quot;:6.99},{&quot;2026-07-10&quot;:6.99},{&quot;2026-07-11&quot;:6.99},{&quot;2026-07-12&quot;:6.95},{&quot;2026-07-13&quot;:6.95},{&quot;2026-07-14&quot;:6.95},{&quot;2026-07-15&quot;:7.0},{&quot;2026-07-16&quot;:7.0},{&quot;2026-07-17&quot;:6.92},{&quot;2026-07-18&quot;:6.9},{&quot;2026-07-19&quot;:6.9},{&quot;2026-07-20&quot;:6.9},{&quot;2026-07-21&quot;:6.64},{&quot;2026-07-22&quot;:6.64},{&quot;2026-07-23&quot;:6.64},{&quot;2026-07-24&quot;:6.64},{&quot;2026-07-25&quot;:6.65},{&quot;2026-07-26&quot;:6.58},{&quot;2026-07-27&quot;:6.58},{&quot;2026-07-28&quot;:6.53},{&quot;2026-07-29&quot;:6.56},{&quot;2026-07-30&quot;:6.56},{&quot;2026-07-31&quot;:6.59},{&quot;2026-08-01&quot;:6.55},{&quot;2026-08-02&quot;:6.55},{&quot;2026-08-03&quot;:6.55},{&quot;2026-08-04&quot;:6.55},{&quot;2026-08-05&quot;:6.55},{&quot;2026-08-07&quot;:6.55},{&quot;2026-08-08&quot;:6.58},{&quot;2026-08-09&quot;:6.58},{&quot;2026-08-10&quot;:6.58},{&quot;2026-08-11&quot;:6.58},{&quot;2026-08-12&quot;:6.55},{&quot;2026-08-13&quot;:6.55},{&quot;2026-08-14&quot;:6.55},{&quot;2026-08-15&quot;:6.55},{&quot;2026-08-16&quot;:6.55},{&quot;2026-08-17&quot;:6.54},{&quot;2026-08-18&quot;:6.3},{&quot;2026-08-19&quot;:6.3},{&quot;2026-08-20&quot;:6.19},{&quot;2026-08-21&quot;:6.02},{&quot;2026-08-22&quot;:6.02},{&quot;2026-08-23&quot;:6.02},{&quot;2026-08-24&quot;:6.02},{&quot;2026-08-25&quot;:6.02},{&quot;2026-08-26&quot;:5.84},{&quot;2026-08-27&quot;:6.02},{&quot;2026-08-28&quot;:6.02},{&quot;2026-08-29&quot;:6.02},{&quot;2026-08-30&quot;:6.05},{&quot;2026-08-31&quot;:6.05},{&quot;2026-09-01&quot;:6.08},{&quot;2026-09-02&quot;:6.08},{&quot;2026-09-03&quot;:6.08},{&quot;2026-09-04&quot;:6.08},{&quot;2026-09-05&quot;:6.08},{&quot;2026-09-06&quot;:5.94},{&quot;2026-09-07&quot;:5.94},{&quot;2026-09-08&quot;:5.95},{&quot;2026-09-09&quot;:6.0},{&quot;2026-09-10&quot;:5.9},{&quot;2026-09-11&quot;:5.9}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="79500"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tsr ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Stuffy Doll
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact Creature — Construct
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.90
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Stuffy Doll" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/e/ce427213-4ce5-478e-83d8-fe80ec446a58.jpg?1783927755" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Stuffy Doll
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact Creature — Construct</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-5'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Stuffy Doll" src="https://cards.scryfall.io/large/front/c/e/ce427213-4ce5-478e-83d8-fe80ec446a58.jpg?1783927755" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.90
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $9.08
              </span>

            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.00</span>
              <span class="text-xs text-grey-text">Credit: $5.20</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:10.77},{&quot;2026-06-11&quot;:10.77},{&quot;2026-06-12&quot;:10.77},{&quot;2026-06-13&quot;:10.77},{&quot;2026-06-14&quot;:10.77},{&quot;2026-06-15&quot;:10.77},{&quot;2026-06-16&quot;:10.77},{&quot;2026-06-17&quot;:10.77},{&quot;2026-06-18&quot;:10.77},{&quot;2026-06-19&quot;:10.96},{&quot;2026-06-20&quot;:10.96},{&quot;2026-06-21&quot;:10.96},{&quot;2026-06-22&quot;:10.96},{&quot;2026-06-23&quot;:10.96},{&quot;2026-06-24&quot;:10.96},{&quot;2026-06-25&quot;:10.96},{&quot;2026-06-26&quot;:10.74},{&quot;2026-06-27&quot;:10.74},{&quot;2026-06-28&quot;:10.74},{&quot;2026-06-29&quot;:10.74},{&quot;2026-06-30&quot;:9.88},{&quot;2026-07-01&quot;:9.88},{&quot;2026-07-02&quot;:9.88},{&quot;2026-07-03&quot;:9.88},{&quot;2026-07-04&quot;:9.88},{&quot;2026-07-05&quot;:9.88},{&quot;2026-07-06&quot;:9.01},{&quot;2026-07-07&quot;:9.01},{&quot;2026-07-08&quot;:9.01},{&quot;2026-07-09&quot;:8.85},{&quot;2026-07-10&quot;:8.85},{&quot;2026-07-11&quot;:8.85},{&quot;2026-07-12&quot;:8.85},{&quot;2026-07-13&quot;:8.85},{&quot;2026-07-14&quot;:8.85},{&quot;2026-07-15&quot;:8.85},{&quot;2026-07-16&quot;:8.85},{&quot;2026-07-17&quot;:8.93},{&quot;2026-07-18&quot;:8.87},{&quot;2026-07-19&quot;:8.87},{&quot;2026-07-20&quot;:8.87},{&quot;2026-07-21&quot;:8.87},{&quot;2026-07-23&quot;:8.87},{&quot;2026-07-25&quot;:8.99},{&quot;2026-07-26&quot;:8.99},{&quot;2026-07-27&quot;:8.99},{&quot;2026-07-29&quot;:8.99},{&quot;2026-07-30&quot;:8.99},{&quot;2026-07-31&quot;:8.99},{&quot;2026-08-01&quot;:8.99},{&quot;2026-08-02&quot;:8.99},{&quot;2026-08-03&quot;:8.99},{&quot;2026-08-04&quot;:8.99},{&quot;2026-08-05&quot;:8.99},{&quot;2026-08-07&quot;:8.99},{&quot;2026-08-08&quot;:8.99},{&quot;2026-08-09&quot;:8.99},{&quot;2026-08-10&quot;:8.99},{&quot;2026-08-11&quot;:8.99},{&quot;2026-08-12&quot;:8.99},{&quot;2026-08-13&quot;:8.99},{&quot;2026-08-14&quot;:8.99},{&quot;2026-08-15&quot;:8.99},{&quot;2026-08-16&quot;:8.99},{&quot;2026-08-17&quot;:8.99},{&quot;2026-08-18&quot;:8.99},{&quot;2026-08-19&quot;:8.99},{&quot;2026-08-20&quot;:8.99},{&quot;2026-08-21&quot;:9.0},{&quot;2026-08-22&quot;:9.0},{&quot;2026-08-23&quot;:9.08},{&quot;2026-08-24&quot;:9.08},{&quot;2026-08-25&quot;:9.08},{&quot;2026-08-26&quot;:9.08},{&quot;2026-08-27&quot;:9.08},{&quot;2026-08-28&quot;:9.08},{&quot;2026-08-29&quot;:9.08},{&quot;2026-08-30&quot;:9.08},{&quot;2026-08-31&quot;:9.08},{&quot;2026-09-01&quot;:9.08},{&quot;2026-09-02&quot;:9.08},{&quot;2026-09-03&quot;:9.08},{&quot;2026-09-04&quot;:9.08},{&quot;2026-09-05&quot;:9.08},{&quot;2026-09-06&quot;:9.08},{&quot;2026-09-07&quot;:9.08},{&quot;2026-09-08&quot;:9.08},{&quot;2026-09-09&quot;:9.08},{&quot;2026-09-10&quot;:9.08},{&quot;2026-09-11&quot;:9.08}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:5.16},{&quot;2026-06-11&quot;:5.13},{&quot;2026-06-12&quot;:5.17},{&quot;2026-06-13&quot;:5.25},{&quot;2026-06-14&quot;:5.38},{&quot;2026-06-15&quot;:5.5},{&quot;2026-06-16&quot;:5.51},{&quot;2026-06-17&quot;:5.51},{&quot;2026-06-18&quot;:5.61},{&quot;2026-06-19&quot;:5.54},{&quot;2026-06-20&quot;:5.59},{&quot;2026-06-21&quot;:5.74},{&quot;2026-06-22&quot;:5.74},{&quot;2026-06-23&quot;:5.79},{&quot;2026-06-24&quot;:5.78},{&quot;2026-06-25&quot;:5.78},{&quot;2026-06-26&quot;:5.78},{&quot;2026-06-27&quot;:5.73},{&quot;2026-06-28&quot;:5.82},{&quot;2026-06-29&quot;:5.85},{&quot;2026-06-30&quot;:5.87},{&quot;2026-07-01&quot;:5.85},{&quot;2026-07-02&quot;:5.85},{&quot;2026-07-03&quot;:6.12},{&quot;2026-07-04&quot;:6.21},{&quot;2026-07-05&quot;:6.59},{&quot;2026-07-06&quot;:6.45},{&quot;2026-07-07&quot;:6.45},{&quot;2026-07-08&quot;:6.41},{&quot;2026-07-09&quot;:6.42},{&quot;2026-07-10&quot;:6.52},{&quot;2026-07-11&quot;:6.56},{&quot;2026-07-12&quot;:6.62},{&quot;2026-07-13&quot;:6.73},{&quot;2026-07-14&quot;:6.6},{&quot;2026-07-15&quot;:6.45},{&quot;2026-07-16&quot;:6.49},{&quot;2026-07-17&quot;:6.28},{&quot;2026-07-18&quot;:6.28},{&quot;2026-07-19&quot;:6.05},{&quot;2026-07-20&quot;:6.04},{&quot;2026-07-21&quot;:5.9},{&quot;2026-07-23&quot;:5.86},{&quot;2026-07-25&quot;:5.54},{&quot;2026-07-26&quot;:5.54},{&quot;2026-07-27&quot;:5.59},{&quot;2026-07-29&quot;:5.53},{&quot;2026-07-30&quot;:5.51},{&quot;2026-07-31&quot;:5.37},{&quot;2026-08-01&quot;:5.37},{&quot;2026-08-02&quot;:5.41},{&quot;2026-08-03&quot;:5.47},{&quot;2026-08-04&quot;:5.52},{&quot;2026-08-05&quot;:5.41},{&quot;2026-08-07&quot;:5.6},{&quot;2026-08-08&quot;:5.6},{&quot;2026-08-09&quot;:5.61},{&quot;2026-08-10&quot;:5.67},{&quot;2026-08-11&quot;:5.77},{&quot;2026-08-12&quot;:5.84},{&quot;2026-08-13&quot;:5.95},{&quot;2026-08-14&quot;:6.01},{&quot;2026-08-15&quot;:5.97},{&quot;2026-08-16&quot;:6.13},{&quot;2026-08-17&quot;:6.16},{&quot;2026-08-18&quot;:6.03},{&quot;2026-08-19&quot;:6.02},{&quot;2026-08-20&quot;:6.02},{&quot;2026-08-21&quot;:6.14},{&quot;2026-08-22&quot;:6.21},{&quot;2026-08-23&quot;:6.11},{&quot;2026-08-24&quot;:5.95},{&quot;2026-08-25&quot;:5.95},{&quot;2026-08-26&quot;:5.99},{&quot;2026-08-27&quot;:5.94},{&quot;2026-08-28&quot;:5.96},{&quot;2026-08-29&quot;:5.96},{&quot;2026-08-30&quot;:5.95},{&quot;2026-08-31&quot;:5.96},{&quot;2026-09-01&quot;:5.96},{&quot;2026-09-02&quot;:5.62},{&quot;2026-09-03&quot;:5.62},{&quot;2026-09-04&quot;:5.69},{&quot;2026-09-05&quot;:5.73},{&quot;2026-09-06&quot;:5.69},{&quot;2026-09-07&quot;:5.77},{&quot;2026-09-08&quot;:5.68},{&quot;2026-09-09&quot;:5.9},{&quot;2026-09-10&quot;:5.9},{&quot;2026-09-11&quot;:5.9}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="24186"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dsk ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Walk-In Closet 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Enchantment — Room
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $5.88
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Walk-In Closet // Forgotten Cellar" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/a/0adcd4e5-d542-4293-8774-ace2305ef820.jpg?1783909446" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Walk-In Closet 
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Enchantment — Room</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <div data-controller="card-flip" class="flex flex-col items-center">
          <div
            data-action="click->card-flip#flip"
            class="flip-container cursor-pointer w-full max-w-xs mx-auto"
          >
            <div data-card-flip-target="card" class="flip-card">
              <div class="flip-card-front">
                <img class="w-full h-auto rounded-2xl" alt="Walk-In Closet // Forgotten Cellar" src="https://cards.scryfall.io/large/front/0/a/0adcd4e5-d542-4293-8774-ace2305ef820.jpg?1783909446" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Walk-In Closet // Forgotten Cellar" src="https://cards.scryfall.io/large/front/0/a/0adcd4e5-d542-4293-8774-ace2305ef820.jpg?1783909446" />
              </div>
            </div>
          </div>

          <p class="mt-2 text-sm text-grey-text">Tap card to flip</p>
        </div>
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.88
              </span>

            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $8.37
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.80</span>
              <span class="text-xs text-grey-text">Credit: $6.24</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:8.59},{&quot;2026-06-11&quot;:8.59},{&quot;2026-06-12&quot;:8.66},{&quot;2026-06-13&quot;:8.66},{&quot;2026-06-14&quot;:8.66},{&quot;2026-06-15&quot;:8.66},{&quot;2026-06-16&quot;:8.65},{&quot;2026-06-17&quot;:8.65},{&quot;2026-06-18&quot;:8.65},{&quot;2026-06-19&quot;:8.65},{&quot;2026-06-20&quot;:8.65},{&quot;2026-06-21&quot;:8.65},{&quot;2026-06-22&quot;:8.65},{&quot;2026-06-23&quot;:8.65},{&quot;2026-06-24&quot;:8.65},{&quot;2026-06-25&quot;:8.65},{&quot;2026-06-26&quot;:8.65},{&quot;2026-06-27&quot;:8.65},{&quot;2026-06-28&quot;:8.65},{&quot;2026-06-29&quot;:8.65},{&quot;2026-06-30&quot;:8.65},{&quot;2026-07-01&quot;:8.58},{&quot;2026-07-02&quot;:8.58},{&quot;2026-07-03&quot;:8.58},{&quot;2026-07-04&quot;:8.58},{&quot;2026-07-05&quot;:8.58},{&quot;2026-07-06&quot;:8.53},{&quot;2026-07-07&quot;:8.53},{&quot;2026-07-08&quot;:8.61},{&quot;2026-07-09&quot;:8.55},{&quot;2026-07-10&quot;:8.47},{&quot;2026-07-11&quot;:8.53},{&quot;2026-07-12&quot;:8.5},{&quot;2026-07-13&quot;:8.5},{&quot;2026-07-14&quot;:8.52},{&quot;2026-07-15&quot;:8.52},{&quot;2026-07-16&quot;:8.52},{&quot;2026-07-17&quot;:8.54},{&quot;2026-07-18&quot;:8.54},{&quot;2026-07-19&quot;:8.54},{&quot;2026-07-20&quot;:8.54},{&quot;2026-07-21&quot;:8.46},{&quot;2026-07-23&quot;:8.5},{&quot;2026-07-25&quot;:8.5},{&quot;2026-07-26&quot;:8.5},{&quot;2026-07-27&quot;:8.5},{&quot;2026-07-29&quot;:8.5},{&quot;2026-07-30&quot;:8.5},{&quot;2026-07-31&quot;:8.5},{&quot;2026-08-01&quot;:8.5},{&quot;2026-08-02&quot;:8.5},{&quot;2026-08-03&quot;:8.5},{&quot;2026-08-04&quot;:8.5},{&quot;2026-08-05&quot;:8.5},{&quot;2026-08-07&quot;:8.36},{&quot;2026-08-08&quot;:8.36},{&quot;2026-08-09&quot;:8.36},{&quot;2026-08-10&quot;:8.36},{&quot;2026-08-11&quot;:8.39},{&quot;2026-08-12&quot;:8.39},{&quot;2026-08-13&quot;:8.39},{&quot;2026-08-14&quot;:8.39},{&quot;2026-08-15&quot;:8.39},{&quot;2026-08-16&quot;:8.39},{&quot;2026-08-17&quot;:8.39},{&quot;2026-08-18&quot;:8.39},{&quot;2026-08-19&quot;:8.39},{&quot;2026-08-20&quot;:8.39},{&quot;2026-08-21&quot;:8.39},{&quot;2026-08-22&quot;:8.39},{&quot;2026-08-23&quot;:8.39},{&quot;2026-08-24&quot;:8.39},{&quot;2026-08-25&quot;:8.39},{&quot;2026-08-26&quot;:8.31},{&quot;2026-08-27&quot;:8.31},{&quot;2026-08-28&quot;:8.32},{&quot;2026-08-29&quot;:8.32},{&quot;2026-08-30&quot;:8.35},{&quot;2026-08-31&quot;:8.35},{&quot;2026-09-01&quot;:8.35},{&quot;2026-09-02&quot;:8.35},{&quot;2026-09-03&quot;:8.42},{&quot;2026-09-04&quot;:8.42},{&quot;2026-09-05&quot;:8.42},{&quot;2026-09-06&quot;:8.42},{&quot;2026-09-07&quot;:8.42},{&quot;2026-09-08&quot;:8.42},{&quot;2026-09-09&quot;:8.42},{&quot;2026-09-10&quot;:8.37},{&quot;2026-09-11&quot;:8.37}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:7.22},{&quot;2026-06-11&quot;:7.39},{&quot;2026-06-12&quot;:7.54},{&quot;2026-06-13&quot;:7.66},{&quot;2026-06-14&quot;:7.63},{&quot;2026-06-15&quot;:7.73},{&quot;2026-06-16&quot;:7.82},{&quot;2026-06-17&quot;:7.68},{&quot;2026-06-18&quot;:8.0},{&quot;2026-06-19&quot;:7.87},{&quot;2026-06-20&quot;:7.87},{&quot;2026-06-21&quot;:7.72},{&quot;2026-06-22&quot;:7.43},{&quot;2026-06-23&quot;:7.19},{&quot;2026-06-24&quot;:7.18},{&quot;2026-06-25&quot;:7.16},{&quot;2026-06-26&quot;:7.12},{&quot;2026-06-27&quot;:7.25},{&quot;2026-06-28&quot;:7.34},{&quot;2026-06-29&quot;:7.43},{&quot;2026-06-30&quot;:7.4},{&quot;2026-07-01&quot;:7.4},{&quot;2026-07-02&quot;:7.41},{&quot;2026-07-03&quot;:7.14},{&quot;2026-07-04&quot;:7.2},{&quot;2026-07-05&quot;:7.46},{&quot;2026-07-06&quot;:7.49},{&quot;2026-07-07&quot;:7.33},{&quot;2026-07-08&quot;:7.48},{&quot;2026-07-09&quot;:7.43},{&quot;2026-07-10&quot;:7.55},{&quot;2026-07-11&quot;:7.59},{&quot;2026-07-12&quot;:7.59},{&quot;2026-07-13&quot;:7.59},{&quot;2026-07-14&quot;:7.47},{&quot;2026-07-15&quot;:7.18},{&quot;2026-07-16&quot;:7.25},{&quot;2026-07-17&quot;:7.21},{&quot;2026-07-18&quot;:7.0},{&quot;2026-07-19&quot;:7.12},{&quot;2026-07-20&quot;:6.89},{&quot;2026-07-21&quot;:6.83},{&quot;2026-07-23&quot;:6.37},{&quot;2026-07-25&quot;:6.51},{&quot;2026-07-26&quot;:6.63},{&quot;2026-07-27&quot;:6.44},{&quot;2026-07-29&quot;:6.37},{&quot;2026-07-30&quot;:6.46},{&quot;2026-07-31&quot;:6.45},{&quot;2026-08-01&quot;:6.55},{&quot;2026-08-02&quot;:6.44},{&quot;2026-08-03&quot;:6.47},{&quot;2026-08-04&quot;:6.47},{&quot;2026-08-05&quot;:6.37},{&quot;2026-08-07&quot;:6.44},{&quot;2026-08-08&quot;:6.51},{&quot;2026-08-09&quot;:6.45},{&quot;2026-08-10&quot;:6.4},{&quot;2026-08-11&quot;:6.57},{&quot;2026-08-12&quot;:6.53},{&quot;2026-08-13&quot;:6.32},{&quot;2026-08-14&quot;:6.23},{&quot;2026-08-15&quot;:6.32},{&quot;2026-08-16&quot;:6.44},{&quot;2026-08-17&quot;:6.35},{&quot;2026-08-18&quot;:6.44},{&quot;2026-08-19&quot;:6.43},{&quot;2026-08-20&quot;:6.43},{&quot;2026-08-21&quot;:6.31},{&quot;2026-08-22&quot;:6.13},{&quot;2026-08-23&quot;:6.22},{&quot;2026-08-24&quot;:6.07},{&quot;2026-08-25&quot;:6.07},{&quot;2026-08-26&quot;:5.58},{&quot;2026-08-27&quot;:5.32},{&quot;2026-08-28&quot;:5.31},{&quot;2026-08-29&quot;:5.31},{&quot;2026-08-30&quot;:5.47},{&quot;2026-08-31&quot;:5.71},{&quot;2026-09-01&quot;:5.71},{&quot;2026-09-02&quot;:5.86},{&quot;2026-09-03&quot;:5.79},{&quot;2026-09-04&quot;:5.88},{&quot;2026-09-05&quot;:5.88},{&quot;2026-09-06&quot;:5.75},{&quot;2026-09-07&quot;:5.75},{&quot;2026-09-08&quot;:5.92},{&quot;2026-09-09&quot;:6.09},{&quot;2026-09-10&quot;:6.13},{&quot;2026-09-11&quot;:5.88}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="19389"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dmu ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Shivan Devastator
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Dragon Hydra
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.87
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Shivan Devastator" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/e/beaca6ca-58e0-4846-b9b7-5ac9547bcde5.jpg?1783921187" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Shivan Devastator
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Dragon Hydra</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-x'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Shivan Devastator" src="https://cards.scryfall.io/large/front/b/e/beaca6ca-58e0-4846-b9b7-5ac9547bcde5.jpg?1783921187" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.87
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $5.48
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  9%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.40</span>
              <span class="text-xs text-grey-text">Credit: $5.72</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:5.4},{&quot;2026-06-11&quot;:5.4},{&quot;2026-06-12&quot;:5.38},{&quot;2026-06-13&quot;:5.38},{&quot;2026-06-14&quot;:5.39},{&quot;2026-06-15&quot;:5.38},{&quot;2026-06-16&quot;:5.38},{&quot;2026-06-17&quot;:5.38},{&quot;2026-06-18&quot;:5.38},{&quot;2026-06-19&quot;:5.38},{&quot;2026-06-20&quot;:5.38},{&quot;2026-06-21&quot;:5.38},{&quot;2026-06-22&quot;:5.32},{&quot;2026-06-23&quot;:5.32},{&quot;2026-06-24&quot;:5.32},{&quot;2026-06-25&quot;:5.34},{&quot;2026-06-26&quot;:5.34},{&quot;2026-06-27&quot;:5.34},{&quot;2026-06-28&quot;:5.34},{&quot;2026-06-29&quot;:5.34},{&quot;2026-06-30&quot;:5.34},{&quot;2026-07-01&quot;:5.34},{&quot;2026-07-02&quot;:5.34},{&quot;2026-07-03&quot;:5.37},{&quot;2026-07-04&quot;:5.37},{&quot;2026-07-05&quot;:5.37},{&quot;2026-07-06&quot;:5.42},{&quot;2026-07-07&quot;:5.42},{&quot;2026-07-08&quot;:5.42},{&quot;2026-07-09&quot;:5.42},{&quot;2026-07-10&quot;:5.42},{&quot;2026-07-11&quot;:5.42},{&quot;2026-07-12&quot;:5.44},{&quot;2026-07-13&quot;:5.44},{&quot;2026-07-14&quot;:5.44},{&quot;2026-07-15&quot;:5.44},{&quot;2026-07-16&quot;:5.44},{&quot;2026-07-17&quot;:5.38},{&quot;2026-07-18&quot;:5.38},{&quot;2026-07-19&quot;:5.38},{&quot;2026-07-20&quot;:5.38},{&quot;2026-07-21&quot;:5.38},{&quot;2026-07-23&quot;:5.32},{&quot;2026-07-25&quot;:5.44},{&quot;2026-07-26&quot;:5.44},{&quot;2026-07-27&quot;:5.44},{&quot;2026-07-29&quot;:5.34},{&quot;2026-07-30&quot;:5.25},{&quot;2026-07-31&quot;:5.18},{&quot;2026-08-01&quot;:5.1},{&quot;2026-08-02&quot;:5.1},{&quot;2026-08-03&quot;:5.03},{&quot;2026-08-04&quot;:5.01},{&quot;2026-08-05&quot;:5.01},{&quot;2026-08-07&quot;:5.01},{&quot;2026-08-08&quot;:5.01},{&quot;2026-08-09&quot;:5.01},{&quot;2026-08-10&quot;:5.01},{&quot;2026-08-11&quot;:5.01},{&quot;2026-08-12&quot;:5.01},{&quot;2026-08-13&quot;:5.01},{&quot;2026-08-14&quot;:5.01},{&quot;2026-08-15&quot;:4.98},{&quot;2026-08-16&quot;:4.98},{&quot;2026-08-17&quot;:4.98},{&quot;2026-08-18&quot;:4.98},{&quot;2026-08-19&quot;:4.98},{&quot;2026-08-20&quot;:4.98},{&quot;2026-08-21&quot;:4.98},{&quot;2026-08-22&quot;:4.98},{&quot;2026-08-23&quot;:4.98},{&quot;2026-08-24&quot;:4.98},{&quot;2026-08-25&quot;:4.98},{&quot;2026-08-26&quot;:4.98},{&quot;2026-08-27&quot;:4.98},{&quot;2026-08-28&quot;:4.98},{&quot;2026-08-29&quot;:4.98},{&quot;2026-08-30&quot;:4.96},{&quot;2026-08-31&quot;:4.96},{&quot;2026-09-01&quot;:4.96},{&quot;2026-09-02&quot;:4.96},{&quot;2026-09-03&quot;:4.96},{&quot;2026-09-04&quot;:4.96},{&quot;2026-09-05&quot;:5.05},{&quot;2026-09-06&quot;:5.49},{&quot;2026-09-07&quot;:5.49},{&quot;2026-09-08&quot;:5.49},{&quot;2026-09-09&quot;:5.48},{&quot;2026-09-10&quot;:5.48},{&quot;2026-09-11&quot;:5.48}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:5.47},{&quot;2026-06-11&quot;:5.47},{&quot;2026-06-12&quot;:5.47},{&quot;2026-06-13&quot;:5.47},{&quot;2026-06-14&quot;:5.47},{&quot;2026-06-15&quot;:5.47},{&quot;2026-06-16&quot;:5.47},{&quot;2026-06-17&quot;:5.47},{&quot;2026-06-18&quot;:5.46},{&quot;2026-06-19&quot;:5.46},{&quot;2026-06-20&quot;:5.47},{&quot;2026-06-21&quot;:5.47},{&quot;2026-06-22&quot;:5.47},{&quot;2026-06-23&quot;:5.47},{&quot;2026-06-24&quot;:5.47},{&quot;2026-06-25&quot;:5.47},{&quot;2026-06-26&quot;:5.47},{&quot;2026-06-27&quot;:5.47},{&quot;2026-06-28&quot;:5.48},{&quot;2026-06-29&quot;:5.48},{&quot;2026-06-30&quot;:5.5},{&quot;2026-07-01&quot;:5.55},{&quot;2026-07-02&quot;:5.55},{&quot;2026-07-03&quot;:5.57},{&quot;2026-07-04&quot;:5.57},{&quot;2026-07-05&quot;:5.57},{&quot;2026-07-06&quot;:5.58},{&quot;2026-07-07&quot;:5.58},{&quot;2026-07-08&quot;:5.58},{&quot;2026-07-09&quot;:5.58},{&quot;2026-07-10&quot;:5.58},{&quot;2026-07-11&quot;:5.58},{&quot;2026-07-12&quot;:5.6},{&quot;2026-07-13&quot;:5.6},{&quot;2026-07-14&quot;:5.6},{&quot;2026-07-15&quot;:5.6},{&quot;2026-07-16&quot;:5.6},{&quot;2026-07-17&quot;:5.6},{&quot;2026-07-18&quot;:5.6},{&quot;2026-07-19&quot;:5.61},{&quot;2026-07-20&quot;:5.61},{&quot;2026-07-21&quot;:5.61},{&quot;2026-07-23&quot;:5.56},{&quot;2026-07-25&quot;:5.56},{&quot;2026-07-26&quot;:5.56},{&quot;2026-07-27&quot;:5.56},{&quot;2026-07-29&quot;:5.56},{&quot;2026-07-30&quot;:5.56},{&quot;2026-07-31&quot;:5.56},{&quot;2026-08-01&quot;:5.56},{&quot;2026-08-02&quot;:5.56},{&quot;2026-08-03&quot;:5.56},{&quot;2026-08-04&quot;:5.65},{&quot;2026-08-05&quot;:5.68},{&quot;2026-08-07&quot;:5.68},{&quot;2026-08-08&quot;:5.68},{&quot;2026-08-09&quot;:5.7},{&quot;2026-08-10&quot;:5.7},{&quot;2026-08-11&quot;:5.7},{&quot;2026-08-12&quot;:5.7},{&quot;2026-08-13&quot;:5.79},{&quot;2026-08-14&quot;:5.79},{&quot;2026-08-15&quot;:5.82},{&quot;2026-08-16&quot;:5.83},{&quot;2026-08-17&quot;:5.83},{&quot;2026-08-18&quot;:5.83},{&quot;2026-08-19&quot;:5.83},{&quot;2026-08-20&quot;:5.83},{&quot;2026-08-21&quot;:5.88},{&quot;2026-08-22&quot;:5.88},{&quot;2026-08-23&quot;:5.88},{&quot;2026-08-24&quot;:5.89},{&quot;2026-08-25&quot;:5.89},{&quot;2026-08-26&quot;:5.94},{&quot;2026-08-27&quot;:5.94},{&quot;2026-08-28&quot;:5.94},{&quot;2026-08-29&quot;:5.94},{&quot;2026-08-30&quot;:5.98},{&quot;2026-08-31&quot;:5.98},{&quot;2026-09-01&quot;:5.98},{&quot;2026-09-02&quot;:5.93},{&quot;2026-09-03&quot;:5.93},{&quot;2026-09-04&quot;:5.93},{&quot;2026-09-05&quot;:5.93},{&quot;2026-09-06&quot;:5.93},{&quot;2026-09-07&quot;:5.93},{&quot;2026-09-08&quot;:5.87},{&quot;2026-09-09&quot;:5.87},{&quot;2026-09-10&quot;:5.87},{&quot;2026-09-11&quot;:5.87}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="74760"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            All Is Dust
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Kindred Sorcery — Eldrazi
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.87
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="All Is Dust" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/e/1e30c6a4-62c4-444a-8c4c-a73d8f59b276.jpg?1783932381" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            All Is Dust
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Kindred Sorcery — Eldrazi</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-7'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="All Is Dust" src="https://cards.scryfall.io/large/front/1/e/1e30c6a4-62c4-444a-8c4c-a73d8f59b276.jpg?1783932381" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.87
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  2%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$2.00</span>
              <span class="text-xs text-grey-text">Credit: $2.60</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-10&quot;:4.44},{&quot;2026-06-11&quot;:4.39},{&quot;2026-06-12&quot;:4.43},{&quot;2026-06-13&quot;:4.43},{&quot;2026-06-14&quot;:4.48},{&quot;2026-06-15&quot;:4.52},{&quot;2026-06-16&quot;:4.46},{&quot;2026-06-17&quot;:4.45},{&quot;2026-06-18&quot;:4.45},{&quot;2026-06-19&quot;:4.45},{&quot;2026-06-20&quot;:4.52},{&quot;2026-06-21&quot;:4.48},{&quot;2026-06-22&quot;:4.48},{&quot;2026-06-23&quot;:4.29},{&quot;2026-06-24&quot;:4.29},{&quot;2026-06-25&quot;:4.24},{&quot;2026-06-26&quot;:4.18},{&quot;2026-06-27&quot;:4.21},{&quot;2026-06-28&quot;:4.21},{&quot;2026-06-29&quot;:4.15},{&quot;2026-06-30&quot;:4.26},{&quot;2026-07-01&quot;:4.41},{&quot;2026-07-02&quot;:4.72},{&quot;2026-07-03&quot;:4.76},{&quot;2026-07-04&quot;:4.93},{&quot;2026-07-05&quot;:4.93},{&quot;2026-07-06&quot;:5.1},{&quot;2026-07-07&quot;:5.15},{&quot;2026-07-08&quot;:5.23},{&quot;2026-07-09&quot;:5.31},{&quot;2026-07-10&quot;:5.31},{&quot;2026-07-11&quot;:5.31},{&quot;2026-07-12&quot;:5.33},{&quot;2026-07-13&quot;:5.3},{&quot;2026-07-14&quot;:5.3},{&quot;2026-07-15&quot;:5.28},{&quot;2026-07-16&quot;:5.28},{&quot;2026-07-17&quot;:5.32},{&quot;2026-07-18&quot;:5.27},{&quot;2026-07-19&quot;:5.21},{&quot;2026-07-20&quot;:5.25},{&quot;2026-07-21&quot;:5.25},{&quot;2026-07-23&quot;:5.22},{&quot;2026-07-25&quot;:5.22},{&quot;2026-07-26&quot;:5.18},{&quot;2026-07-27&quot;:5.18},{&quot;2026-07-29&quot;:5.19},{&quot;2026-07-30&quot;:5.19},{&quot;2026-07-31&quot;:5.33},{&quot;2026-08-01&quot;:5.37},{&quot;2026-08-02&quot;:5.4},{&quot;2026-08-03&quot;:5.4},{&quot;2026-08-04&quot;:5.4},{&quot;2026-08-05&quot;:5.39},{&quot;2026-08-07&quot;:5.35},{&quot;2026-08-08&quot;:5.33},{&quot;2026-08-09&quot;:5.33},{&quot;2026-08-10&quot;:5.33},{&quot;2026-08-11&quot;:5.38},{&quot;2026-08-12&quot;:5.38},{&quot;2026-08-13&quot;:5.38},{&quot;2026-08-14&quot;:5.38},{&quot;2026-08-15&quot;:5.52},{&quot;2026-08-16&quot;:5.52},{&quot;2026-08-17&quot;:5.6},{&quot;2026-08-18&quot;:5.62},{&quot;2026-08-19&quot;:5.63},{&quot;2026-08-20&quot;:5.63},{&quot;2026-08-21&quot;:5.77},{&quot;2026-08-22&quot;:5.81},{&quot;2026-08-23&quot;:5.81},{&quot;2026-08-24&quot;:5.81},{&quot;2026-08-25&quot;:5.81},{&quot;2026-08-26&quot;:5.82},{&quot;2026-08-27&quot;:5.76},{&quot;2026-08-28&quot;:5.76},{&quot;2026-08-29&quot;:5.76},{&quot;2026-08-30&quot;:5.81},{&quot;2026-08-31&quot;:5.92},{&quot;2026-09-01&quot;:5.92},{&quot;2026-09-02&quot;:6.12},{&quot;2026-09-03&quot;:6.02},{&quot;2026-09-04&quot;:5.97},{&quot;2026-09-05&quot;:6.0},{&quot;2026-09-06&quot;:6.0},{&quot;2026-09-07&quot;:5.99},{&quot;2026-09-08&quot;:5.87},{&quot;2026-09-09&quot;:5.92},{&quot;2026-09-10&quot;:5.87},{&quot;2026-09-11&quot;:5.87}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="29221"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fdn ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Nine-Lives Familiar
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Cat
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              8%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.86
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Nine-Lives Familiar" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/6/c/6cc1623f-370d-42b5-88a2-039f31e9be0b.jpg?1783909026" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Nine-Lives Familiar
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Cat</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Nine-Lives Familiar" src="https://cards.scryfall.io/large/front/6/c/6cc1623f-370d-42b5-88a2-039f31e9be0b.jpg?1783909026" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.86
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  8%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $12.66
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.70</span>
              <span class="text-xs text-grey-text">Credit: $6.11</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-10&quot;:10.68},{&quot;2026-06-11&quot;:10.68},{&quot;2026-06-12&quot;:10.78},{&quot;2026-06-13&quot;:10.78},{&quot;2026-06-14&quot;:10.78},{&quot;2026-06-15&quot;:10.78},{&quot;2026-06-16&quot;:10.93},{&quot;2026-06-17&quot;:10.93},{&quot;2026-06-18&quot;:10.64},{&quot;2026-06-19&quot;:10.88},{&quot;2026-06-20&quot;:10.88},{&quot;2026-06-21&quot;:10.88},{&quot;2026-06-22&quot;:10.88},{&quot;2026-06-23&quot;:10.88},{&quot;2026-06-24&quot;:10.88},{&quot;2026-06-25&quot;:10.91},{&quot;2026-06-26&quot;:10.94},{&quot;2026-06-27&quot;:11.0},{&quot;2026-06-28&quot;:11.09},{&quot;2026-06-29&quot;:11.09},{&quot;2026-06-30&quot;:11.09},{&quot;2026-07-01&quot;:11.13},{&quot;2026-07-02&quot;:11.13},{&quot;2026-07-03&quot;:11.23},{&quot;2026-07-04&quot;:11.23},{&quot;2026-07-05&quot;:11.23},{&quot;2026-07-06&quot;:11.58},{&quot;2026-07-07&quot;:11.61},{&quot;2026-07-08&quot;:11.51},{&quot;2026-07-09&quot;:11.51},{&quot;2026-07-10&quot;:11.51},{&quot;2026-07-11&quot;:11.51},{&quot;2026-07-12&quot;:11.56},{&quot;2026-07-13&quot;:11.71},{&quot;2026-07-14&quot;:11.78},{&quot;2026-07-15&quot;:11.78},{&quot;2026-07-16&quot;:11.78},{&quot;2026-07-17&quot;:11.98},{&quot;2026-07-18&quot;:12.3},{&quot;2026-07-19&quot;:12.3},{&quot;2026-07-20&quot;:12.3},{&quot;2026-07-21&quot;:12.45},{&quot;2026-07-23&quot;:12.57},{&quot;2026-07-25&quot;:12.57},{&quot;2026-07-26&quot;:12.57},{&quot;2026-07-27&quot;:12.58},{&quot;2026-07-29&quot;:12.65},{&quot;2026-07-30&quot;:12.65},{&quot;2026-07-31&quot;:12.65},{&quot;2026-08-01&quot;:12.65},{&quot;2026-08-02&quot;:12.65},{&quot;2026-08-03&quot;:12.65},{&quot;2026-08-04&quot;:12.59},{&quot;2026-08-05&quot;:12.59},{&quot;2026-08-07&quot;:12.59},{&quot;2026-08-08&quot;:12.59},{&quot;2026-08-09&quot;:12.67},{&quot;2026-08-10&quot;:12.67},{&quot;2026-08-11&quot;:12.78},{&quot;2026-08-12&quot;:12.78},{&quot;2026-08-13&quot;:12.78},{&quot;2026-08-14&quot;:12.78},{&quot;2026-08-15&quot;:12.78},{&quot;2026-08-16&quot;:12.56},{&quot;2026-08-17&quot;:12.6},{&quot;2026-08-18&quot;:12.6},{&quot;2026-08-19&quot;:12.6},{&quot;2026-08-20&quot;:12.6},{&quot;2026-08-21&quot;:12.69},{&quot;2026-08-22&quot;:12.69},{&quot;2026-08-23&quot;:12.69},{&quot;2026-08-24&quot;:12.69},{&quot;2026-08-25&quot;:12.69},{&quot;2026-08-26&quot;:12.65},{&quot;2026-08-27&quot;:12.69},{&quot;2026-08-28&quot;:12.69},{&quot;2026-08-29&quot;:12.69},{&quot;2026-08-30&quot;:12.69},{&quot;2026-08-31&quot;:12.69},{&quot;2026-09-01&quot;:12.69},{&quot;2026-09-02&quot;:12.75},{&quot;2026-09-03&quot;:12.75},{&quot;2026-09-04&quot;:12.75},{&quot;2026-09-05&quot;:12.75},{&quot;2026-09-06&quot;:12.82},{&quot;2026-09-07&quot;:12.65},{&quot;2026-09-08&quot;:12.65},{&quot;2026-09-09&quot;:12.73},{&quot;2026-09-10&quot;:12.73},{&quot;2026-09-11&quot;:12.66}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:5.94},{&quot;2026-06-11&quot;:5.89},{&quot;2026-06-12&quot;:5.89},{&quot;2026-06-13&quot;:5.81},{&quot;2026-06-14&quot;:5.81},{&quot;2026-06-15&quot;:5.42},{&quot;2026-06-16&quot;:5.42},{&quot;2026-06-17&quot;:5.46},{&quot;2026-06-18&quot;:5.48},{&quot;2026-06-19&quot;:5.52},{&quot;2026-06-20&quot;:5.5},{&quot;2026-06-21&quot;:5.55},{&quot;2026-06-22&quot;:5.55},{&quot;2026-06-23&quot;:5.59},{&quot;2026-06-24&quot;:5.55},{&quot;2026-06-25&quot;:5.55},{&quot;2026-06-26&quot;:5.53},{&quot;2026-06-27&quot;:5.49},{&quot;2026-06-28&quot;:5.48},{&quot;2026-06-29&quot;:5.54},{&quot;2026-06-30&quot;:5.73},{&quot;2026-07-01&quot;:5.71},{&quot;2026-07-02&quot;:5.71},{&quot;2026-07-03&quot;:5.71},{&quot;2026-07-04&quot;:5.73},{&quot;2026-07-05&quot;:5.77},{&quot;2026-07-06&quot;:5.79},{&quot;2026-07-07&quot;:5.79},{&quot;2026-07-08&quot;:5.79},{&quot;2026-07-09&quot;:5.62},{&quot;2026-07-10&quot;:5.61},{&quot;2026-07-11&quot;:5.63},{&quot;2026-07-12&quot;:5.57},{&quot;2026-07-13&quot;:5.37},{&quot;2026-07-14&quot;:5.39},{&quot;2026-07-15&quot;:5.36},{&quot;2026-07-16&quot;:5.38},{&quot;2026-07-17&quot;:5.42},{&quot;2026-07-18&quot;:5.48},{&quot;2026-07-19&quot;:5.48},{&quot;2026-07-20&quot;:5.54},{&quot;2026-07-21&quot;:5.59},{&quot;2026-07-23&quot;:5.63},{&quot;2026-07-25&quot;:5.68},{&quot;2026-07-26&quot;:5.68},{&quot;2026-07-27&quot;:5.68},{&quot;2026-07-29&quot;:5.57},{&quot;2026-07-30&quot;:5.57},{&quot;2026-07-31&quot;:5.7},{&quot;2026-08-01&quot;:5.7},{&quot;2026-08-02&quot;:5.66},{&quot;2026-08-03&quot;:5.61},{&quot;2026-08-04&quot;:5.65},{&quot;2026-08-05&quot;:5.65},{&quot;2026-08-07&quot;:5.82},{&quot;2026-08-08&quot;:5.73},{&quot;2026-08-09&quot;:5.75},{&quot;2026-08-10&quot;:5.66},{&quot;2026-08-11&quot;:5.56},{&quot;2026-08-12&quot;:5.46},{&quot;2026-08-13&quot;:5.57},{&quot;2026-08-14&quot;:5.03},{&quot;2026-08-15&quot;:5.03},{&quot;2026-08-16&quot;:4.91},{&quot;2026-08-17&quot;:5.06},{&quot;2026-08-18&quot;:5.04},{&quot;2026-08-19&quot;:5.28},{&quot;2026-08-20&quot;:5.28},{&quot;2026-08-21&quot;:5.58},{&quot;2026-08-22&quot;:6.12},{&quot;2026-08-23&quot;:6.36},{&quot;2026-08-24&quot;:6.43},{&quot;2026-08-25&quot;:6.43},{&quot;2026-08-26&quot;:6.67},{&quot;2026-08-27&quot;:6.73},{&quot;2026-08-28&quot;:6.66},{&quot;2026-08-29&quot;:6.66},{&quot;2026-08-30&quot;:6.86},{&quot;2026-08-31&quot;:6.88},{&quot;2026-09-01&quot;:6.88},{&quot;2026-09-02&quot;:6.83},{&quot;2026-09-03&quot;:6.84},{&quot;2026-09-04&quot;:6.6},{&quot;2026-09-05&quot;:6.4},{&quot;2026-09-06&quot;:6.52},{&quot;2026-09-07&quot;:6.36},{&quot;2026-09-08&quot;:6.22},{&quot;2026-09-09&quot;:6.22},{&quot;2026-09-10&quot;:6.17},{&quot;2026-09-11&quot;:5.86}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="14386"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-clb ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Niv-Mizzet, Parun
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Dragon Wizard
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.84
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Niv-Mizzet, Parun" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/0/3035a97f-5104-4b56-84a4-5206e75607fc.jpg?1783922395" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Niv-Mizzet, Parun
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Legendary Creature — Dragon Wizard</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Niv-Mizzet, Parun" src="https://cards.scryfall.io/large/front/3/0/3035a97f-5104-4b56-84a4-5206e75607fc.jpg?1783922395" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.84
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  1%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.20</span>
              <span class="text-xs text-grey-text">Credit: $4.16</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:6.74},{&quot;2026-06-14&quot;:6.78},{&quot;2026-06-15&quot;:6.78},{&quot;2026-06-16&quot;:6.8},{&quot;2026-06-17&quot;:6.79},{&quot;2026-06-18&quot;:6.99},{&quot;2026-06-19&quot;:6.99},{&quot;2026-06-20&quot;:6.99},{&quot;2026-06-21&quot;:6.99},{&quot;2026-06-22&quot;:6.99},{&quot;2026-06-23&quot;:6.86},{&quot;2026-06-24&quot;:6.86},{&quot;2026-06-25&quot;:6.78},{&quot;2026-06-26&quot;:6.78},{&quot;2026-06-27&quot;:6.41},{&quot;2026-06-28&quot;:6.41},{&quot;2026-06-29&quot;:6.41},{&quot;2026-06-30&quot;:6.41},{&quot;2026-07-01&quot;:6.19},{&quot;2026-07-02&quot;:6.19},{&quot;2026-07-03&quot;:6.27},{&quot;2026-07-04&quot;:6.24},{&quot;2026-07-05&quot;:6.22},{&quot;2026-07-06&quot;:6.23},{&quot;2026-07-07&quot;:6.22},{&quot;2026-07-08&quot;:6.3},{&quot;2026-07-09&quot;:6.32},{&quot;2026-07-10&quot;:6.16},{&quot;2026-07-11&quot;:6.06},{&quot;2026-07-12&quot;:6.04},{&quot;2026-07-13&quot;:6.0},{&quot;2026-07-14&quot;:6.17},{&quot;2026-07-15&quot;:6.16},{&quot;2026-07-16&quot;:6.1},{&quot;2026-07-17&quot;:5.92},{&quot;2026-07-18&quot;:5.96},{&quot;2026-07-19&quot;:5.99},{&quot;2026-07-20&quot;:5.98},{&quot;2026-07-21&quot;:5.77},{&quot;2026-07-22&quot;:5.8},{&quot;2026-07-23&quot;:5.8},{&quot;2026-07-24&quot;:5.8},{&quot;2026-07-25&quot;:5.77},{&quot;2026-07-26&quot;:5.69},{&quot;2026-07-27&quot;:5.69},{&quot;2026-07-28&quot;:5.67},{&quot;2026-07-29&quot;:5.65},{&quot;2026-07-30&quot;:5.65},{&quot;2026-07-31&quot;:5.7},{&quot;2026-08-01&quot;:5.7},{&quot;2026-08-02&quot;:5.7},{&quot;2026-08-03&quot;:5.7},{&quot;2026-08-04&quot;:5.8},{&quot;2026-08-05&quot;:5.8},{&quot;2026-08-07&quot;:5.81},{&quot;2026-08-08&quot;:5.73},{&quot;2026-08-09&quot;:5.5},{&quot;2026-08-10&quot;:5.57},{&quot;2026-08-11&quot;:5.69},{&quot;2026-08-12&quot;:5.73},{&quot;2026-08-13&quot;:5.64},{&quot;2026-08-14&quot;:5.65},{&quot;2026-08-15&quot;:5.65},{&quot;2026-08-16&quot;:5.77},{&quot;2026-08-17&quot;:5.79},{&quot;2026-08-18&quot;:5.79},{&quot;2026-08-19&quot;:5.79},{&quot;2026-08-20&quot;:5.73},{&quot;2026-08-21&quot;:5.73},{&quot;2026-08-22&quot;:5.72},{&quot;2026-08-23&quot;:5.72},{&quot;2026-08-24&quot;:5.74},{&quot;2026-08-25&quot;:5.8},{&quot;2026-08-26&quot;:5.8},{&quot;2026-08-27&quot;:5.75},{&quot;2026-08-28&quot;:5.75},{&quot;2026-08-29&quot;:5.75},{&quot;2026-08-30&quot;:5.76},{&quot;2026-08-31&quot;:5.76},{&quot;2026-09-01&quot;:5.76},{&quot;2026-09-02&quot;:5.75},{&quot;2026-09-03&quot;:5.73},{&quot;2026-09-04&quot;:5.76},{&quot;2026-09-05&quot;:5.78},{&quot;2026-09-06&quot;:5.78},{&quot;2026-09-07&quot;:5.74},{&quot;2026-09-08&quot;:5.81},{&quot;2026-09-09&quot;:5.84},{&quot;2026-09-10&quot;:5.84},{&quot;2026-09-11&quot;:5.84}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="10636"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-c21 ss-mythic ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Hellkite Tyrant
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Dragon
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.81
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Hellkite Tyrant" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/6/7/67d15ee6-916f-4ac9-a4d2-4a9bd389d451.jpg?1783927542" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Hellkite Tyrant
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            mythic
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Creature — Dragon</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-4'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Hellkite Tyrant" src="https://cards.scryfall.io/large/front/6/7/67d15ee6-916f-4ac9-a4d2-4a9bd389d451.jpg?1783927542" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.81
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  3%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$1.50</span>
              <span class="text-xs text-grey-text">Credit: $1.95</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-12&quot;:5.19},{&quot;2026-06-13&quot;:5.06},{&quot;2026-06-14&quot;:4.97},{&quot;2026-06-15&quot;:4.97},{&quot;2026-06-16&quot;:4.97},{&quot;2026-06-17&quot;:5.26},{&quot;2026-06-18&quot;:5.26},{&quot;2026-06-19&quot;:5.34},{&quot;2026-06-20&quot;:5.2},{&quot;2026-06-21&quot;:5.35},{&quot;2026-06-22&quot;:5.35},{&quot;2026-06-23&quot;:5.35},{&quot;2026-06-24&quot;:5.35},{&quot;2026-06-25&quot;:5.35},{&quot;2026-06-26&quot;:5.35},{&quot;2026-06-27&quot;:5.35},{&quot;2026-06-28&quot;:5.27},{&quot;2026-06-29&quot;:5.27},{&quot;2026-06-30&quot;:5.27},{&quot;2026-07-01&quot;:5.27},{&quot;2026-07-02&quot;:5.27},{&quot;2026-07-03&quot;:5.13},{&quot;2026-07-04&quot;:4.97},{&quot;2026-07-05&quot;:5.05},{&quot;2026-07-06&quot;:5.05},{&quot;2026-07-07&quot;:5.05},{&quot;2026-07-08&quot;:4.98},{&quot;2026-07-09&quot;:5.11},{&quot;2026-07-10&quot;:5.04},{&quot;2026-07-11&quot;:4.8},{&quot;2026-07-12&quot;:4.8},{&quot;2026-07-13&quot;:4.89},{&quot;2026-07-14&quot;:4.82},{&quot;2026-07-15&quot;:4.76},{&quot;2026-07-16&quot;:4.76},{&quot;2026-07-17&quot;:4.41},{&quot;2026-07-18&quot;:4.31},{&quot;2026-07-19&quot;:4.33},{&quot;2026-07-20&quot;:4.39},{&quot;2026-07-21&quot;:4.39},{&quot;2026-07-23&quot;:4.09},{&quot;2026-07-24&quot;:4.01},{&quot;2026-07-25&quot;:4.0},{&quot;2026-07-26&quot;:4.0},{&quot;2026-07-27&quot;:4.0},{&quot;2026-07-28&quot;:4.0},{&quot;2026-07-29&quot;:4.0},{&quot;2026-07-30&quot;:4.01},{&quot;2026-07-31&quot;:4.01},{&quot;2026-08-01&quot;:3.9},{&quot;2026-08-02&quot;:3.87},{&quot;2026-08-03&quot;:3.87},{&quot;2026-08-04&quot;:4.02},{&quot;2026-08-05&quot;:4.02},{&quot;2026-08-07&quot;:4.02},{&quot;2026-08-08&quot;:3.99},{&quot;2026-08-09&quot;:3.9},{&quot;2026-08-10&quot;:4.02},{&quot;2026-08-11&quot;:4.03},{&quot;2026-08-12&quot;:4.17},{&quot;2026-08-13&quot;:4.43},{&quot;2026-08-14&quot;:4.5},{&quot;2026-08-15&quot;:4.5},{&quot;2026-08-16&quot;:4.44},{&quot;2026-08-17&quot;:4.98},{&quot;2026-08-18&quot;:5.06},{&quot;2026-08-19&quot;:5.26},{&quot;2026-08-20&quot;:5.26},{&quot;2026-08-21&quot;:6.09},{&quot;2026-08-22&quot;:6.09},{&quot;2026-08-23&quot;:6.09},{&quot;2026-08-24&quot;:6.09},{&quot;2026-08-25&quot;:5.96},{&quot;2026-08-26&quot;:5.96},{&quot;2026-08-27&quot;:5.98},{&quot;2026-08-28&quot;:6.02},{&quot;2026-08-29&quot;:6.02},{&quot;2026-08-30&quot;:6.13},{&quot;2026-08-31&quot;:6.13},{&quot;2026-09-01&quot;:6.24},{&quot;2026-09-02&quot;:6.43},{&quot;2026-09-03&quot;:6.33},{&quot;2026-09-04&quot;:5.94},{&quot;2026-09-05&quot;:5.99},{&quot;2026-09-06&quot;:6.01},{&quot;2026-09-07&quot;:5.92},{&quot;2026-09-08&quot;:5.9},{&quot;2026-09-09&quot;:5.87},{&quot;2026-09-10&quot;:5.76},{&quot;2026-09-11&quot;:5.81}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="20079"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2xm ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Wrath of God
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Sorcery
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.81
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Wrath of God" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/6/6/664e6656-36a3-4635-9f33-9f8901afd397.jpg?1783930206" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Wrath of God
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Sorcery</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Wrath of God" src="https://cards.scryfall.io/large/front/6/6/664e6656-36a3-4635-9f33-9f8901afd397.jpg?1783930206" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.81
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Foil</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-purple-400">
                $5.59
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  1%
                </span>
            </div>
          </div>
      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$1.50</span>
              <span class="text-xs text-grey-text">Credit: $1.95</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[{&quot;2026-06-13&quot;:6.26},{&quot;2026-06-14&quot;:6.26},{&quot;2026-06-15&quot;:6.26},{&quot;2026-06-16&quot;:6.26},{&quot;2026-06-17&quot;:6.26},{&quot;2026-06-18&quot;:6.26},{&quot;2026-06-19&quot;:6.26},{&quot;2026-06-20&quot;:6.26},{&quot;2026-06-21&quot;:6.26},{&quot;2026-06-22&quot;:6.26},{&quot;2026-06-23&quot;:6.26},{&quot;2026-06-24&quot;:6.26},{&quot;2026-06-25&quot;:6.26},{&quot;2026-06-26&quot;:6.26},{&quot;2026-06-27&quot;:6.26},{&quot;2026-06-28&quot;:6.26},{&quot;2026-06-29&quot;:6.26},{&quot;2026-06-30&quot;:6.26},{&quot;2026-07-01&quot;:6.26},{&quot;2026-07-02&quot;:6.26},{&quot;2026-07-03&quot;:6.26},{&quot;2026-07-04&quot;:6.26},{&quot;2026-07-05&quot;:6.26},{&quot;2026-07-06&quot;:6.26},{&quot;2026-07-07&quot;:6.26},{&quot;2026-07-08&quot;:6.26},{&quot;2026-07-09&quot;:6.26},{&quot;2026-07-10&quot;:6.26},{&quot;2026-07-11&quot;:6.26},{&quot;2026-07-12&quot;:6.26},{&quot;2026-07-13&quot;:6.26},{&quot;2026-07-14&quot;:6.26},{&quot;2026-07-15&quot;:6.26},{&quot;2026-07-16&quot;:6.26},{&quot;2026-07-17&quot;:6.26},{&quot;2026-07-18&quot;:6.24},{&quot;2026-07-19&quot;:6.24},{&quot;2026-07-20&quot;:6.24},{&quot;2026-07-21&quot;:6.24},{&quot;2026-07-22&quot;:6.06},{&quot;2026-07-23&quot;:6.06},{&quot;2026-07-24&quot;:6.06},{&quot;2026-07-25&quot;:6.06},{&quot;2026-07-26&quot;:6.15},{&quot;2026-07-27&quot;:6.15},{&quot;2026-07-28&quot;:6.15},{&quot;2026-07-29&quot;:6.15},{&quot;2026-07-30&quot;:6.32},{&quot;2026-07-31&quot;:6.32},{&quot;2026-08-01&quot;:6.32},{&quot;2026-08-02&quot;:6.32},{&quot;2026-08-03&quot;:6.32},{&quot;2026-08-04&quot;:6.32},{&quot;2026-08-05&quot;:6.32},{&quot;2026-08-07&quot;:5.77},{&quot;2026-08-08&quot;:6.32},{&quot;2026-08-09&quot;:5.87},{&quot;2026-08-10&quot;:5.87},{&quot;2026-08-11&quot;:5.87},{&quot;2026-08-12&quot;:5.87},{&quot;2026-08-13&quot;:5.87},{&quot;2026-08-14&quot;:5.87},{&quot;2026-08-15&quot;:5.87},{&quot;2026-08-16&quot;:5.87},{&quot;2026-08-17&quot;:5.87},{&quot;2026-08-18&quot;:5.87},{&quot;2026-08-19&quot;:5.87},{&quot;2026-08-20&quot;:5.87},{&quot;2026-08-21&quot;:6.05},{&quot;2026-08-22&quot;:5.55},{&quot;2026-08-23&quot;:5.55},{&quot;2026-08-24&quot;:5.55},{&quot;2026-08-25&quot;:5.55},{&quot;2026-08-26&quot;:5.55},{&quot;2026-08-27&quot;:5.55},{&quot;2026-08-28&quot;:5.55},{&quot;2026-08-29&quot;:5.55},{&quot;2026-08-30&quot;:5.55},{&quot;2026-08-31&quot;:5.55},{&quot;2026-09-01&quot;:5.55},{&quot;2026-09-02&quot;:5.55},{&quot;2026-09-03&quot;:5.55},{&quot;2026-09-04&quot;:5.55},{&quot;2026-09-05&quot;:5.55},{&quot;2026-09-06&quot;:5.55},{&quot;2026-09-07&quot;:5.55},{&quot;2026-09-08&quot;:5.55},{&quot;2026-09-09&quot;:5.55},{&quot;2026-09-10&quot;:5.59},{&quot;2026-09-11&quot;:5.59}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:4.72},{&quot;2026-06-14&quot;:4.81},{&quot;2026-06-15&quot;:4.93},{&quot;2026-06-16&quot;:4.93},{&quot;2026-06-17&quot;:5.01},{&quot;2026-06-18&quot;:4.96},{&quot;2026-06-19&quot;:5.03},{&quot;2026-06-20&quot;:5.11},{&quot;2026-06-21&quot;:5.15},{&quot;2026-06-22&quot;:5.17},{&quot;2026-06-23&quot;:5.17},{&quot;2026-06-24&quot;:5.17},{&quot;2026-06-25&quot;:5.25},{&quot;2026-06-26&quot;:5.15},{&quot;2026-06-27&quot;:5.15},{&quot;2026-06-28&quot;:5.15},{&quot;2026-06-29&quot;:5.12},{&quot;2026-06-30&quot;:5.12},{&quot;2026-07-01&quot;:5.12},{&quot;2026-07-02&quot;:5.12},{&quot;2026-07-03&quot;:5.12},{&quot;2026-07-04&quot;:5.08},{&quot;2026-07-05&quot;:5.08},{&quot;2026-07-06&quot;:5.15},{&quot;2026-07-07&quot;:5.15},{&quot;2026-07-08&quot;:5.17},{&quot;2026-07-09&quot;:5.18},{&quot;2026-07-10&quot;:5.22},{&quot;2026-07-11&quot;:5.22},{&quot;2026-07-12&quot;:5.22},{&quot;2026-07-13&quot;:5.22},{&quot;2026-07-14&quot;:5.07},{&quot;2026-07-15&quot;:5.05},{&quot;2026-07-16&quot;:5.05},{&quot;2026-07-17&quot;:5.05},{&quot;2026-07-18&quot;:5.05},{&quot;2026-07-19&quot;:5.05},{&quot;2026-07-20&quot;:4.77},{&quot;2026-07-21&quot;:4.77},{&quot;2026-07-22&quot;:4.79},{&quot;2026-07-23&quot;:4.77},{&quot;2026-07-24&quot;:4.96},{&quot;2026-07-25&quot;:5.1},{&quot;2026-07-26&quot;:5.07},{&quot;2026-07-27&quot;:5.09},{&quot;2026-07-28&quot;:5.09},{&quot;2026-07-29&quot;:5.11},{&quot;2026-07-30&quot;:5.17},{&quot;2026-07-31&quot;:5.1},{&quot;2026-08-01&quot;:5.1},{&quot;2026-08-02&quot;:5.27},{&quot;2026-08-03&quot;:5.27},{&quot;2026-08-04&quot;:5.48},{&quot;2026-08-05&quot;:5.48},{&quot;2026-08-07&quot;:5.48},{&quot;2026-08-08&quot;:5.48},{&quot;2026-08-09&quot;:5.48},{&quot;2026-08-10&quot;:5.48},{&quot;2026-08-11&quot;:5.56},{&quot;2026-08-12&quot;:5.56},{&quot;2026-08-13&quot;:5.56},{&quot;2026-08-14&quot;:5.56},{&quot;2026-08-15&quot;:5.59},{&quot;2026-08-16&quot;:5.65},{&quot;2026-08-17&quot;:5.65},{&quot;2026-08-18&quot;:5.76},{&quot;2026-08-19&quot;:5.76},{&quot;2026-08-20&quot;:5.76},{&quot;2026-08-21&quot;:5.76},{&quot;2026-08-22&quot;:5.72},{&quot;2026-08-23&quot;:5.67},{&quot;2026-08-24&quot;:5.67},{&quot;2026-08-25&quot;:5.74},{&quot;2026-08-26&quot;:5.74},{&quot;2026-08-27&quot;:5.74},{&quot;2026-08-28&quot;:5.71},{&quot;2026-08-29&quot;:5.71},{&quot;2026-08-30&quot;:5.63},{&quot;2026-08-31&quot;:5.57},{&quot;2026-09-01&quot;:5.57},{&quot;2026-09-02&quot;:5.57},{&quot;2026-09-03&quot;:5.57},{&quot;2026-09-04&quot;:5.54},{&quot;2026-09-05&quot;:5.64},{&quot;2026-09-06&quot;:5.61},{&quot;2026-09-07&quot;:5.53},{&quot;2026-09-08&quot;:5.53},{&quot;2026-09-09&quot;:5.65},{&quot;2026-09-10&quot;:5.81},{&quot;2026-09-11&quot;:5.81}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="15165"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            War Room
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Land
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.80
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="War Room" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/d/dd2f5f65-4ab7-43c8-8a14-422fcfac80df.jpg?1783915369" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            War Room
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Land</span>
        </div>

      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="War Room" src="https://cards.scryfall.io/large/front/d/d/dd2f5f65-4ab7-43c8-8a14-422fcfac80df.jpg?1783915369" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.80
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  3%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$3.70</span>
              <span class="text-xs text-grey-text">Credit: $4.81</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-08&quot;:7.17},{&quot;2026-06-10&quot;:7.1},{&quot;2026-06-11&quot;:7.1},{&quot;2026-06-12&quot;:7.1},{&quot;2026-06-13&quot;:7.1},{&quot;2026-06-14&quot;:7.1},{&quot;2026-06-15&quot;:7.1},{&quot;2026-06-16&quot;:7.1},{&quot;2026-06-17&quot;:7.05},{&quot;2026-06-18&quot;:7.05},{&quot;2026-06-19&quot;:6.89},{&quot;2026-06-20&quot;:6.71},{&quot;2026-06-21&quot;:6.53},{&quot;2026-06-22&quot;:6.53},{&quot;2026-06-24&quot;:6.53},{&quot;2026-06-25&quot;:6.44},{&quot;2026-06-26&quot;:5.95},{&quot;2026-06-27&quot;:5.82},{&quot;2026-06-28&quot;:6.16},{&quot;2026-06-29&quot;:6.16},{&quot;2026-06-30&quot;:6.16},{&quot;2026-07-01&quot;:6.01},{&quot;2026-07-02&quot;:6.01},{&quot;2026-07-03&quot;:6.03},{&quot;2026-07-04&quot;:5.87},{&quot;2026-07-05&quot;:5.91},{&quot;2026-07-06&quot;:5.96},{&quot;2026-07-07&quot;:5.92},{&quot;2026-07-08&quot;:5.75},{&quot;2026-07-09&quot;:5.58},{&quot;2026-07-10&quot;:5.48},{&quot;2026-07-11&quot;:5.34},{&quot;2026-07-12&quot;:5.32},{&quot;2026-07-13&quot;:5.38},{&quot;2026-07-14&quot;:5.3},{&quot;2026-07-15&quot;:5.3},{&quot;2026-07-16&quot;:5.3},{&quot;2026-07-17&quot;:5.1},{&quot;2026-07-18&quot;:5.1},{&quot;2026-07-19&quot;:5.21},{&quot;2026-07-20&quot;:5.22},{&quot;2026-07-21&quot;:5.19},{&quot;2026-07-23&quot;:5.21},{&quot;2026-07-25&quot;:5.24},{&quot;2026-07-26&quot;:5.19},{&quot;2026-07-27&quot;:5.26},{&quot;2026-07-29&quot;:5.46},{&quot;2026-07-30&quot;:5.5},{&quot;2026-07-31&quot;:5.51},{&quot;2026-08-01&quot;:5.59},{&quot;2026-08-02&quot;:5.47},{&quot;2026-08-03&quot;:5.47},{&quot;2026-08-04&quot;:5.45},{&quot;2026-08-05&quot;:5.45},{&quot;2026-08-07&quot;:5.35},{&quot;2026-08-08&quot;:5.42},{&quot;2026-08-09&quot;:5.42},{&quot;2026-08-10&quot;:5.42},{&quot;2026-08-11&quot;:5.33},{&quot;2026-08-12&quot;:5.33},{&quot;2026-08-13&quot;:5.32},{&quot;2026-08-14&quot;:5.2},{&quot;2026-08-15&quot;:5.12},{&quot;2026-08-16&quot;:5.03},{&quot;2026-08-17&quot;:5.02},{&quot;2026-08-18&quot;:5.06},{&quot;2026-08-19&quot;:5.06},{&quot;2026-08-20&quot;:5.06},{&quot;2026-08-21&quot;:4.94},{&quot;2026-08-22&quot;:4.9},{&quot;2026-08-23&quot;:5.04},{&quot;2026-08-24&quot;:5.03},{&quot;2026-08-25&quot;:5.03},{&quot;2026-08-26&quot;:5.15},{&quot;2026-08-27&quot;:5.18},{&quot;2026-08-28&quot;:5.18},{&quot;2026-08-29&quot;:5.18},{&quot;2026-08-30&quot;:5.27},{&quot;2026-08-31&quot;:5.27},{&quot;2026-09-01&quot;:5.27},{&quot;2026-09-02&quot;:5.48},{&quot;2026-09-03&quot;:5.49},{&quot;2026-09-04&quot;:5.65},{&quot;2026-09-05&quot;:5.65},{&quot;2026-09-06&quot;:5.57},{&quot;2026-09-07&quot;:5.67},{&quot;2026-09-08&quot;:5.87},{&quot;2026-09-09&quot;:5.78},{&quot;2026-09-10&quot;:5.78},{&quot;2026-09-11&quot;:5.8}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="16424"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-voc ss-uncommon ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Ghostly Prison
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Enchantment
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">
            <span class="px-1.5 py-0.5 text-xs rounded-full bg-accent-100 text-badge-text">
              ↓
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $5.80
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Ghostly Prison" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/1/8169d44d-b15a-47e0-b417-24f2f4945d0f.jpg?1783924974" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Ghostly Prison
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            uncommon
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Enchantment</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Ghostly Prison" src="https://cards.scryfall.io/large/front/8/1/8169d44d-b15a-47e0-b417-24f2f4945d0f.jpg?1783924974" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.80
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  2%
                </span>
            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$4.20</span>
              <span class="text-xs text-grey-text">Credit: $5.46</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-13&quot;:5.5},{&quot;2026-06-14&quot;:5.54},{&quot;2026-06-15&quot;:5.76},{&quot;2026-06-16&quot;:5.83},{&quot;2026-06-17&quot;:5.83},{&quot;2026-06-18&quot;:5.75},{&quot;2026-06-19&quot;:5.75},{&quot;2026-06-20&quot;:5.75},{&quot;2026-06-21&quot;:5.75},{&quot;2026-06-22&quot;:5.75},{&quot;2026-06-23&quot;:5.63},{&quot;2026-06-24&quot;:5.63},{&quot;2026-06-25&quot;:5.63},{&quot;2026-06-26&quot;:5.52},{&quot;2026-06-27&quot;:5.53},{&quot;2026-06-28&quot;:5.46},{&quot;2026-06-29&quot;:5.48},{&quot;2026-06-30&quot;:5.43},{&quot;2026-07-01&quot;:5.43},{&quot;2026-07-02&quot;:5.52},{&quot;2026-07-03&quot;:5.52},{&quot;2026-07-04&quot;:5.52},{&quot;2026-07-05&quot;:5.52},{&quot;2026-07-06&quot;:5.52},{&quot;2026-07-07&quot;:5.75},{&quot;2026-07-08&quot;:5.8},{&quot;2026-07-09&quot;:5.78},{&quot;2026-07-10&quot;:5.46},{&quot;2026-07-11&quot;:5.44},{&quot;2026-07-12&quot;:5.57},{&quot;2026-07-13&quot;:5.51},{&quot;2026-07-14&quot;:5.62},{&quot;2026-07-15&quot;:5.65},{&quot;2026-07-16&quot;:5.59},{&quot;2026-07-17&quot;:5.57},{&quot;2026-07-18&quot;:5.57},{&quot;2026-07-19&quot;:5.67},{&quot;2026-07-20&quot;:5.61},{&quot;2026-07-21&quot;:6.17},{&quot;2026-07-22&quot;:6.19},{&quot;2026-07-23&quot;:6.19},{&quot;2026-07-24&quot;:6.19},{&quot;2026-07-25&quot;:6.23},{&quot;2026-07-26&quot;:6.1},{&quot;2026-07-27&quot;:6.1},{&quot;2026-07-28&quot;:6.11},{&quot;2026-07-29&quot;:6.05},{&quot;2026-07-30&quot;:6.02},{&quot;2026-07-31&quot;:5.89},{&quot;2026-08-01&quot;:5.89},{&quot;2026-08-02&quot;:5.89},{&quot;2026-08-03&quot;:5.89},{&quot;2026-08-04&quot;:5.89},{&quot;2026-08-05&quot;:5.86},{&quot;2026-08-07&quot;:5.73},{&quot;2026-08-08&quot;:5.73},{&quot;2026-08-09&quot;:5.63},{&quot;2026-08-10&quot;:5.61},{&quot;2026-08-11&quot;:5.59},{&quot;2026-08-12&quot;:5.62},{&quot;2026-08-13&quot;:5.58},{&quot;2026-08-14&quot;:5.58},{&quot;2026-08-15&quot;:5.59},{&quot;2026-08-16&quot;:5.55},{&quot;2026-08-17&quot;:5.75},{&quot;2026-08-18&quot;:5.96},{&quot;2026-08-19&quot;:6.15},{&quot;2026-08-20&quot;:6.19},{&quot;2026-08-21&quot;:6.15},{&quot;2026-08-22&quot;:6.08},{&quot;2026-08-23&quot;:6.09},{&quot;2026-08-24&quot;:6.01},{&quot;2026-08-25&quot;:6.01},{&quot;2026-08-26&quot;:6.01},{&quot;2026-08-27&quot;:5.93},{&quot;2026-08-28&quot;:6.03},{&quot;2026-08-29&quot;:6.03},{&quot;2026-08-30&quot;:6.03},{&quot;2026-08-31&quot;:5.97},{&quot;2026-09-01&quot;:5.98},{&quot;2026-09-02&quot;:5.85},{&quot;2026-09-03&quot;:5.93},{&quot;2026-09-04&quot;:5.93},{&quot;2026-09-05&quot;:5.94},{&quot;2026-09-06&quot;:5.9},{&quot;2026-09-07&quot;:5.94},{&quot;2026-09-08&quot;:5.85},{&quot;2026-09-09&quot;:5.76},{&quot;2026-09-10&quot;:5.8},{&quot;2026-09-11&quot;:5.8}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>

    
<div
  data-controller="mobile-card"
  data-mobile-card-card-id-value="30521"
  class="border rounded-xl border-highlight bg-foreground overflow-hidden mb-2"
>
  <!-- Collapsed State (Card Header - Always Visible) -->
  <div
    data-action="click->mobile-card#toggle"
    class="
      flex items-center gap-3 px-3 py-3 cursor-pointer active:bg-menu
      transition-colors duration-150
    "
  >
    <!-- Rarity Icon -->
    <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-4ed ss-rare ss-fw ss-2x flex-shrink-0"></i>

    <!-- Card Info -->
    <div class="flex-1 min-w-0">
      <!-- Card Name -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-nine-white truncate">
            Howling Mine
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact
      </div>

      <!-- Quantity & Price Row -->
      <div class="flex items-center justify-between mt-1.5">
          <div class="text-xs text-grey-text">
            1 owned
          </div>

        <!-- Primary Price with Trend -->
        <div class="flex items-center gap-1.5 flex-shrink-0 ml-auto">

          <span class="text-sm font-medium text-nine-white">
            $5.80
          </span>
        </div>
      </div>
    </div>

    <!-- Expand/Collapse Indicator -->
    <div
      data-mobile-card-target="chevron"
      class="text-grey-text transition-transform duration-200 flex-shrink-0"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-5 h-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M19 9l-7 7-7-7"
        />
      </svg>
    </div>
  </div>

  <!-- Expanded State -->
  <div
    data-mobile-card-target="content"
    class="hidden border-t border-highlight overflow-hidden"
    style="transition: max-height 250ms ease-out;"
  >
    <!-- Card Header with Thumbnail -->
    <div class="flex items-start gap-4 p-4 bg-menu/50">
      <button
        data-action="click->mobile-card#toggleImage"
        class="flex-shrink-0 focus:outline-none"
      >
        <img alt="Howling Mine" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/a/4/a4df1be4-364e-4582-929a-05f2905f8ce6.jpg?1783947800" />

        <span class="text-xs text-accent-50 mt-1 block">Tap to enlarge</span>
      </button>

      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-nine-white">
            Howling Mine
        </h3>

        <div class="flex items-center gap-2 mt-1">
          <span class="text-xs text-grey-text capitalize">
            rare
          </span>

          <span class="text-grey-text">·</span>
          <span class="text-xs text-grey-text">Artifact</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-2'></i>
          </div>
      </div>
    </div>

    <!-- Full Image (Hidden by default) -->
    <div
      data-mobile-card-target="fullImage"
      class="hidden p-4 bg-menu/50 border-t border-highlight/50"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Howling Mine" src="https://cards.scryfall.io/large/front/a/4/a4df1be4-364e-4582-929a-05f2905f8ce6.jpg?1783947800" />
    </div>

    <!-- Ownership Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Ownership
      </h4>

      <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Regular</span>

          <span class="text-lg font-medium text-nine-white">
            1
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>

        <div class="flex flex-col">
          <span class="text-xs text-grey-text">Proxy Foil</span>

          <span class="text-lg font-medium text-grey-text">
            0
          </span>
        </div>
      </div>
    </div>

    <!-- Price Section -->
    <div class="p-4 border-t border-highlight/50">
      <h4 class="text-xs font-semibold tracking-wider uppercase text-grey-text mb-3">
        Prices
      </h4>

      <div class="grid grid-cols-2 gap-3">
          <div class="flex flex-col">
            <span class="text-xs text-grey-text">Regular</span>

            <div class="flex items-center gap-1.5">
              <span class="text-lg font-medium text-nine-white">
                $5.80
              </span>

            </div>
          </div>

      </div>

        <div class="grid grid-cols-2 gap-3 mt-3">
            <div class="flex flex-col">
              <span class="text-xs text-grey-text">Sell Regular</span>
              <span class="text-lg font-medium text-nine-white">$5.30</span>
              <span class="text-xs text-grey-text">Credit: $6.89</span>
            </div>
        </div>

      <!-- Price History Toggle -->
        <button
          data-action="click->mobile-card#toggleChart"
          data-mobile-card-target="chartToggle"
          class="
            flex items-center gap-2 mt-4 text-sm text-accent-50
            hover:text-nine-white transition-colors
          "
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
            />
          </svg>

          <span data-mobile-card-target="chartToggleText">
            Show price history
          </span>
        </button>
        <div
          data-mobile-card-target="chart"
          class="hidden mt-4 -mx-2 overflow-x-auto"
        >
          <div class="min-w-[300px] px-2">
            <div
  class="
    flex flex-col items-center w-full h-auto px-8 py-4 mt-2 rounded-xl
    bg-background
  "
>
  <div class="flex flex-row w-full h-full md:w-full">
    <div data-controller="card-price-chart" class="w-full p-0 bg-background">
      <canvas
        id="small-users-chart"
        data-card-price-chart-target="cardPriceChart"
        data-card-price-chart-events="{&quot;foil&quot;:[],&quot;normal&quot;:[{&quot;2026-06-08&quot;:5.28},{&quot;2026-06-10&quot;:5.28},{&quot;2026-06-11&quot;:5.28},{&quot;2026-06-12&quot;:5.22},{&quot;2026-06-13&quot;:5.22},{&quot;2026-06-14&quot;:5.22},{&quot;2026-06-15&quot;:5.22},{&quot;2026-06-16&quot;:5.22},{&quot;2026-06-17&quot;:5.22},{&quot;2026-06-18&quot;:5.22},{&quot;2026-06-19&quot;:5.22},{&quot;2026-06-20&quot;:5.22},{&quot;2026-06-21&quot;:5.22},{&quot;2026-06-22&quot;:5.22},{&quot;2026-06-24&quot;:5.22},{&quot;2026-06-25&quot;:5.22},{&quot;2026-06-26&quot;:5.22},{&quot;2026-06-27&quot;:5.22},{&quot;2026-06-28&quot;:5.22},{&quot;2026-06-29&quot;:5.22},{&quot;2026-06-30&quot;:5.22},{&quot;2026-07-01&quot;:5.22},{&quot;2026-07-02&quot;:5.25},{&quot;2026-07-03&quot;:5.25},{&quot;2026-07-04&quot;:5.31},{&quot;2026-07-05&quot;:5.31},{&quot;2026-07-06&quot;:5.31},{&quot;2026-07-07&quot;:5.31},{&quot;2026-07-08&quot;:5.31},{&quot;2026-07-09&quot;:5.31},{&quot;2026-07-10&quot;:5.31},{&quot;2026-07-11&quot;:5.31},{&quot;2026-07-12&quot;:5.31},{&quot;2026-07-13&quot;:5.43},{&quot;2026-07-14&quot;:5.43},{&quot;2026-07-15&quot;:5.43},{&quot;2026-07-16&quot;:5.24},{&quot;2026-07-17&quot;:5.24},{&quot;2026-07-18&quot;:5.24},{&quot;2026-07-19&quot;:5.24},{&quot;2026-07-20&quot;:5.24},{&quot;2026-07-21&quot;:5.24},{&quot;2026-07-23&quot;:5.43},{&quot;2026-07-25&quot;:5.33},{&quot;2026-07-26&quot;:5.33},{&quot;2026-07-27&quot;:5.33},{&quot;2026-07-29&quot;:5.38},{&quot;2026-07-30&quot;:5.38},{&quot;2026-07-31&quot;:5.44},{&quot;2026-08-01&quot;:5.44},{&quot;2026-08-02&quot;:5.44},{&quot;2026-08-03&quot;:5.44},{&quot;2026-08-04&quot;:5.45},{&quot;2026-08-05&quot;:5.45},{&quot;2026-08-07&quot;:5.45},{&quot;2026-08-08&quot;:5.45},{&quot;2026-08-09&quot;:5.45},{&quot;2026-08-10&quot;:5.57},{&quot;2026-08-11&quot;:5.57},{&quot;2026-08-12&quot;:5.57},{&quot;2026-08-13&quot;:5.57},{&quot;2026-08-14&quot;:5.57},{&quot;2026-08-15&quot;:5.57},{&quot;2026-08-16&quot;:5.57},{&quot;2026-08-17&quot;:5.62},{&quot;2026-08-18&quot;:5.62},{&quot;2026-08-19&quot;:5.62},{&quot;2026-08-20&quot;:5.62},{&quot;2026-08-21&quot;:5.62},{&quot;2026-08-22&quot;:5.62},{&quot;2026-08-23&quot;:5.62},{&quot;2026-08-24&quot;:5.62},{&quot;2026-08-25&quot;:5.62},{&quot;2026-08-26&quot;:5.62},{&quot;2026-08-27&quot;:5.69},{&quot;2026-08-28&quot;:5.69},{&quot;2026-08-29&quot;:5.69},{&quot;2026-08-30&quot;:5.69},{&quot;2026-08-31&quot;:5.81},{&quot;2026-09-01&quot;:5.81},{&quot;2026-09-02&quot;:5.81},{&quot;2026-09-03&quot;:5.81},{&quot;2026-09-04&quot;:5.81},{&quot;2026-09-05&quot;:5.81},{&quot;2026-09-06&quot;:5.85},{&quot;2026-09-07&quot;:5.85},{&quot;2026-09-08&quot;:5.85},{&quot;2026-09-09&quot;:5.85},{&quot;2026-09-10&quot;:5.85},{&quot;2026-09-11&quot;:5.8}]}"
        class="w-full"
        style="max-height: 275px;"
      ></canvas>
    </div>
  </div>
</div>

          </div>
        </div>
    </div>

    <!-- Quick Actions -->

    <!-- Destructive Action (Admin Only) -->
  </div>
</div>


    <div
      class="
        flex flex-col gap-2 w-full px-4 py-3 mt-2 bg-foreground text-sm
        rounded-xl
      "
    >
      <div class="text-grey-text"><span class="pagy info">Displaying items 701-750 of 9368 in total</span></div>

      <div class="overflow-x-auto">
        <nav class="pagy series-nav" aria-label="Pages"><a href="/load_collection?direction=asc&amp;page=14&amp;username=denvermullets" rel="prev" aria-label="Previous">&lt;</a><a href="/load_collection?direction=asc&amp;page=1&amp;username=denvermullets">1</a><a role="separator" aria-disabled="true">&hellip;</a><a href="/load_collection?direction=asc&amp;page=14&amp;username=denvermullets" rel="prev">14</a><a role="link" aria-disabled="true" aria-current="page">15</a><a href="/load_collection?direction=asc&amp;page=16&amp;username=denvermullets" rel="next">16</a><a role="separator" aria-disabled="true">&hellip;</a><a href="/load_collection?direction=asc&amp;page=188&amp;username=denvermullets">188</a><a href="/load_collection?direction=asc&amp;page=16&amp;username=denvermullets" rel="next" aria-label="Next">&gt;</a></nav>
      </div>
    </div>
</div>

<!-- Desktop Table View -->
<div class="hidden lg:block mb-24 overflow-x-auto border rounded-3xl border-highlight">
  <table class="min-w-full divide-y table-auto divide-background">
    <thead class="bg-background" data-controller="table-sort">
      <tr>
          <th
            class="
              py-3 pl-4 pr-0 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=card_number&amp;username=denvermullets">
  #

</a>
          </th>

          <th
            class="
              px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=name&amp;username=denvermullets">
  Name

</a>
          </th>

          <th
            class="
              hidden px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text lg:table-cell
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=card_type&amp;username=denvermullets">
  Type

</a>
          </th>

          <th
            class="
              px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=mana_value&amp;username=denvermullets">
  Mana

</a>
          </th>

          <th
            class="
              px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=normal_price&amp;username=denvermullets">
  Regular

</a>
          </th>

          <th
            class="
              px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=foil_price&amp;username=denvermullets">
  Foil

</a>
          </th>

          <th
            class="
              px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=ck_buylist_normal_price&amp;username=denvermullets">
  Sell Regular

</a>
          </th>

          <th
            class="
              px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=ck_buylist_foil_price&amp;username=denvermullets">
  Sell Foil

</a>
          </th>

          <th
            class="
              hidden px-4 py-2 text-xs font-normal tracking-wider text-left
              normal-case lg:table-cell text-grey-text
            "
          >
            <a data-turbo-stream="true" data-action="click-&gt;table-sort#sort" class="flex items-center gap-1 hover:text-white" href="/load_collection?direction=asc&amp;sort=edhrec_saltiness&amp;username=denvermullets">
  Salt

</a>
          </th>
      </tr>
    </thead>

    <tbody class="bg-background" data-controller="expandable-row">

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="23860"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              100
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dsk ss-mythic ss-fw ss-2x mr-4"></i>
              Funeral Room // Awakening Hall


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Enchantment — Room
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.21

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      10%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $5.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.26
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="23860"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_23860" src="/boxset_card/23860?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="79652"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              322
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tsr ss-special ss-fw ss-2x mr-4"></i>
              Dismember


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Instant
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-bp'></i><i class='no-tailwind ms ms-cost ml-0 ms-bp'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.20

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.30
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.35
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="79652"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_79652" src="/boxset_card/79652?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="34493"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              326
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-ice ss-uncommon ss-fw ss-2x mr-4"></i>
              Jeweled Amulet


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-0'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.19

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $5.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.00
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="34493"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_34493" src="/boxset_card/34493?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="80175"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              46
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-uma ss-rare ss-fw ss-2x mr-4"></i>
              Back to Basics


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Enchantment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.19

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                2.23
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="80175"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_80175" src="/boxset_card/80175?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="96770"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              120
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-spg ss-mythic ss-fw ss-2x mr-4"></i>
              Deafening Silence


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Enchantment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.19

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.20
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.48
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="96770"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_96770" src="/boxset_card/96770?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="42229"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              367
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-neo ss-rare ss-fw ss-2x mr-4"></i>
              Light-Paws, Emperor&#39;s Voice


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Fox Advisor
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.17

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      13%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.60
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.17
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="42229"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_42229" src="/boxset_card/42229?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="108393"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              80
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tmc ss-rare ss-fw ss-2x mr-4"></i>
              Undergrowth Stadium


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Land
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.17

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.13
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="108393"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_108393" src="/boxset_card/108393?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="14457"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              875
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-clb ss-rare ss-fw ss-2x mr-4"></i>
              Stuffy Doll


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact Creature — Construct
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-5'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.16

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      5%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.70
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.69
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="14457"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_14457" src="/boxset_card/14457?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="28838"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              161
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fdn ss-mythic ss-fw ss-2x mr-4"></i>
              Omniscience


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Enchantment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-7'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.16

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.80
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.72
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="28838"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_28838" src="/boxset_card/28838?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="76480"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              MBS-50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-rare ss-fw ss-2x mr-4"></i>
              Phyrexian Crusader


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Phyrexian Zombie Knight
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.16

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.75
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="76480"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_76480" src="/boxset_card/76480?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="88007"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              C19-217
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-uncommon ss-fw ss-2x mr-4"></i>
              Lightning Greaves


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact — Equipment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.12

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      14%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.53
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="88007"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_88007" src="/boxset_card/88007?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="5148"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              107
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-blb ss-mythic ss-fw ss-2x mr-4"></i>
              Rottenmouth Viper


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Elemental Snake
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-5'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.10

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.73
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="5148"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_5148" src="/boxset_card/5148?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="17122"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              101
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dst ss-rare ss-fw ss-2x mr-4"></i>
              Arcbound Reclaimer


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact Creature — Golem
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-4'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.10

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $6.90
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.28
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="17122"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_17122" src="/boxset_card/17122?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="11926"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              183
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmr ss-mythic ss-fw ss-2x mr-4"></i>
              Hellkite Courser


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Dragon
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-4'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.09

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      30%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.65
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="11926"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_11926" src="/boxset_card/11926?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="12003"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              2
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-mythic ss-fw ss-2x mr-4"></i>
              Kozilek, the Great Distortion


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Eldrazi
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-8'></i><i class='no-tailwind ms ms-cost ml-0 ms-c'></i><i class='no-tailwind ms ms-cost ml-0 ms-c'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.08

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      2%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.20
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.36
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="12003"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_12003" src="/boxset_card/12003?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="75640"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              180
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-lcc ss-uncommon ss-fw ss-2x mr-4"></i>
              Windfall


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Sorcery
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.08

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      2%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.70
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.84
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="75640"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_75640" src="/boxset_card/75640?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="76997"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              XLN-59
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-rare ss-fw ss-2x mr-4"></i>
              Herald of Secret Streams


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Merfolk Warrior
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.08

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $5.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.57
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="76997"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_76997" src="/boxset_card/76997?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="79527"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              284
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tsr ss-rare ss-fw ss-2x mr-4"></i>
              Swarmyard


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Land
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.08

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      6%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.70
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.24
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="79527"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_79527" src="/boxset_card/79527?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95498"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              402
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fin ss-rare ss-fw ss-2x mr-4"></i>
              Squall, SeeD Mercenary


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Human Knight Mercenary
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.08

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      8%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.34
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="95498"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95498" src="/boxset_card/95498?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21251"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              392
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2x2 ss-rare ss-fw ss-2x mr-4"></i>
              Bloodforged Battle-Axe


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact — Equipment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.07

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      8%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.30
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.24
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21251"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21251" src="/boxset_card/21251?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="109597"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              15
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-sos ss-rare ss-fw ss-2x mr-4"></i>
              Erode


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Instant
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.07

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $7.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.00
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="109597"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_109597" src="/boxset_card/109597?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="41273"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              61
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-neo ss-rare ss-fw ss-2x mr-4"></i>
              March of Swirling Mist


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Instant
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-x'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.06

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      14%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.30
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.27
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="41273"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_41273" src="/boxset_card/41273?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="74033"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              132
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-ltr ss-rare ss-fw ss-2x mr-4"></i>
              Glóin, Dwarf Emissary


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Dwarf Advisor
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.06

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.25
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.26
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="74033"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_74033" src="/boxset_card/74033?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="91115"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              310
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-inr ss-uncommon ss-fw ss-2x mr-4"></i>
              Infernal Grasp


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Instant
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.06

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.30
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.19
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="91115"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_91115" src="/boxset_card/91115?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="108897"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              58
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-soc ss-rare ss-fw ss-2x mr-4"></i>
              Turbulent Steppe


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Land — Mountain Plains
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.06

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.00
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="108897"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_108897" src="/boxset_card/108897?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="74152"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              PLC-12
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-uncommon ss-fw ss-2x mr-4"></i>
              Rebuff the Wicked


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Instant
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.02

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.41
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="74152"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_74152" src="/boxset_card/74152?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21087"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              381
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2xm ss-common ss-fw ss-2x mr-4"></i>
              Forest


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Basic Land — Forest
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $2.12

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      2%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $6.00

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.60
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.40
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.70
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21087"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21087" src="/boxset_card/21087?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20601"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              213
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2xm ss-rare ss-fw ss-2x mr-4"></i>
              Rhys the Redeemed


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Elf Warrior
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-gw'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.99

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      2%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.31
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20601"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20601" src="/boxset_card/20601?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="41156"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              25
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-neo ss-rare ss-fw ss-2x mr-4"></i>
              Light-Paws, Emperor&#39;s Voice


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Fox Advisor
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.98

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      7%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.75
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.17
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="41156"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_41156" src="/boxset_card/41156?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="109224"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              45
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-sos ss-mythic ss-fw ss-2x mr-4"></i>
              Emeritus of Ideation // Ancestral Recall


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Human Wizard
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.98

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      4%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $5.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.00
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="109224"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_109224" src="/boxset_card/109224?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="28957"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              218
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-afc ss-rare ss-fw ss-2x mr-4"></i>
              Sword of the Animist


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Artifact — Equipment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.97

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.40
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.37
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="28957"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_28957" src="/boxset_card/28957?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="14438"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              807
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-uncommon ss-fw ss-2x mr-4"></i>
              Not of This World


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Kindred Instant — Eldrazi
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-7'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.96

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      4%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.10
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.50
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="14438"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_14438" src="/boxset_card/14438?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="34957"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              63
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-vow ss-rare ss-fw ss-2x mr-4"></i>
              Hullbreaker Horror


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Kraken Horror
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-5'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.96

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $5.30
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.74
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="34957"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_34957" src="/boxset_card/34957?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="13761"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              648
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-clb ss-mythic ss-fw ss-2x mr-4"></i>
              Firkraag, Cunning Instigator


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Dragon
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.95

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.60
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.39
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="13761"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_13761" src="/boxset_card/13761?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="57509"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              153s
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-one ss-rare ss-fw ss-2x mr-4"></i>
              Urabrask&#39;s Forge


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.94

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $0.90
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.28
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="57509"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_57509" src="/boxset_card/57509?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="112553"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              119
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-hob ss-mythic ss-fw ss-2x mr-4"></i>
              Beorn the Fierce


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Bear Shapeshifter Warrior
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-3'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.93

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      15%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.00
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="112553"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_112553" src="/boxset_card/112553?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="14418"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              800
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-mythic ss-fw ss-2x mr-4"></i>
              All Is Dust


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Kindred Sorcery — Eldrazi
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-7'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.92

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.20
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.29
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="14418"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_14418" src="/boxset_card/14418?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95349"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              346
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fin ss-rare ss-fw ss-2x mr-4"></i>
              Jenova, Ancient Calamity


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Alien
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.91

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      5%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.33
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="95349"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95349" src="/boxset_card/95349?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="78143"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              EMA-83
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-uncommon ss-fw ss-2x mr-4"></i>
              Cabal Therapy


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Sorcery
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.90

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.80
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.48
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="78143"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_78143" src="/boxset_card/78143?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="79500"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              274
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tsr ss-rare ss-fw ss-2x mr-4"></i>
              Stuffy Doll


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact Creature — Construct
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-5'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.90

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.69
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="79500"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_79500" src="/boxset_card/79500?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="24186"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              205
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dsk ss-mythic ss-fw ss-2x mr-4"></i>
              Walk-In Closet // Forgotten Cellar


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Enchantment — Room
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-g'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.88

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.80
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.29
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="24186"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_24186" src="/boxset_card/24186?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="19389"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              410
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dmu ss-mythic ss-fw ss-2x mr-4"></i>
              Shivan Devastator


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Dragon Hydra
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-x'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.87

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.40
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.21
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="19389"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_19389" src="/boxset_card/19389?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="74760"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              MM2-1
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb1 ss-rare ss-fw ss-2x mr-4"></i>
              All Is Dust


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Kindred Sorcery — Eldrazi
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-7'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.87

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      2%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $2.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.29
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="74760"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_74760" src="/boxset_card/74760?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="29221"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              321
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fdn ss-rare ss-fw ss-2x mr-4"></i>
              Nine-Lives Familiar


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Cat
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-1'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.86

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      8%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.70
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.31
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="29221"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_29221" src="/boxset_card/29221?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="14386"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              851
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-clb ss-rare ss-fw ss-2x mr-4"></i>
              Niv-Mizzet, Parun


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Dragon Wizard
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.84

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      1%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.20
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.27
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="14386"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_14386" src="/boxset_card/14386?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="10636"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              172
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-c21 ss-mythic ss-fw ss-2x mr-4"></i>
              Hellkite Tyrant


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Dragon
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-4'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.81

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.04
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="10636"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_10636" src="/boxset_card/10636?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20079"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              39
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-2xm ss-rare ss-fw ss-2x mr-4"></i>
              Wrath of God


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Sorcery
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.81

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $1.50
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.45
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20079"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20079" src="/boxset_card/20079?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="15165"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              1054
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-cmm ss-rare ss-fw ss-2x mr-4"></i>
              War Room


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Land
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.80

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      3%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $3.70
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.13
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="15165"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_15165" src="/boxset_card/15165?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="16424"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              87
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-voc ss-uncommon ss-fw ss-2x mr-4"></i>
              Ghostly Prison


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Enchantment
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.80

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-100 text-badge-text">
                      ↓
                      2%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $4.20
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.07
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="16424"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_16424" src="/boxset_card/16424?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="30521"
          class="
            border border-background text-grey-text bg-foreground
            hover:bg-menu hover:cursor-pointer
          "
        >
            <td class="pl-4 pr-0 text-sm py-7 whitespace-nowrap">
              325
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-4ed ss-rare ss-fw ss-2x mr-4"></i>
              Howling Mine


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <div class="flex items-center m-0 space-x-1">
                <i class='no-tailwind ms ms-cost ml-0 ms-2'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $5.80

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $5.30
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.29
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="30521"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_30521" src="/boxset_card/30521?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>
    </tbody>
  </table>

    <div class="flex flex-row items-center justify-between w-full p-6 space-x-4">
      <span class="pagy info">Displaying items 701-750 of 9368 in total</span>
      <nav class="pagy series-nav" aria-label="Pages"><a href="/load_collection?direction=asc&amp;page=14&amp;username=denvermullets" rel="prev" aria-label="Previous">&lt;</a><a href="/load_collection?direction=asc&amp;page=1&amp;username=denvermullets">1</a><a role="separator" aria-disabled="true">&hellip;</a><a href="/load_collection?direction=asc&amp;page=14&amp;username=denvermullets" rel="prev">14</a><a role="link" aria-disabled="true" aria-current="page">15</a><a href="/load_collection?direction=asc&amp;page=16&amp;username=denvermullets" rel="next">16</a><a role="separator" aria-disabled="true">&hellip;</a><a href="/load_collection?direction=asc&amp;page=188&amp;username=denvermullets">188</a><a href="/load_collection?direction=asc&amp;page=16&amp;username=denvermullets" rel="next" aria-label="Next">&gt;</a></nav>
    </div>
</div>

</template></turbo-stream>