<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="20781"
  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-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">
            Mox Opal
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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">
            $257.58
          </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="Mox Opal" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/5/6/56001a36-126b-4c08-af98-a6cc4d84210e.jpg?1783930101" />

        <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">
            Mox Opal
        </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 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="Mox Opal" src="https://cards.scryfall.io/large/front/5/6/56001a36-126b-4c08-af98-a6cc4d84210e.jpg?1783930101" />
    </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">
                $240.21
              </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">
                $257.58
              </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">$250.00</span>
              <span class="text-xs text-grey-text">Credit: $325.00</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;:240.66},{&quot;2026-06-14&quot;:240.66},{&quot;2026-06-15&quot;:240.66},{&quot;2026-06-16&quot;:240.66},{&quot;2026-06-17&quot;:240.66},{&quot;2026-06-18&quot;:241.89},{&quot;2026-06-19&quot;:241.89},{&quot;2026-06-20&quot;:241.89},{&quot;2026-06-21&quot;:241.89},{&quot;2026-06-22&quot;:241.89},{&quot;2026-06-23&quot;:241.89},{&quot;2026-06-24&quot;:241.89},{&quot;2026-06-25&quot;:241.89},{&quot;2026-06-26&quot;:241.89},{&quot;2026-06-27&quot;:241.89},{&quot;2026-06-28&quot;:241.89},{&quot;2026-06-29&quot;:241.89},{&quot;2026-06-30&quot;:241.89},{&quot;2026-07-01&quot;:241.89},{&quot;2026-07-02&quot;:241.89},{&quot;2026-07-03&quot;:241.89},{&quot;2026-07-04&quot;:241.89},{&quot;2026-07-05&quot;:241.89},{&quot;2026-07-06&quot;:241.89},{&quot;2026-07-07&quot;:241.89},{&quot;2026-07-08&quot;:241.89},{&quot;2026-07-09&quot;:241.89},{&quot;2026-07-10&quot;:241.89},{&quot;2026-07-11&quot;:241.89},{&quot;2026-07-12&quot;:241.89},{&quot;2026-07-13&quot;:241.89},{&quot;2026-07-14&quot;:241.89},{&quot;2026-07-15&quot;:241.89},{&quot;2026-07-16&quot;:241.89},{&quot;2026-07-17&quot;:241.89},{&quot;2026-07-18&quot;:241.89},{&quot;2026-07-19&quot;:241.89},{&quot;2026-07-20&quot;:241.89},{&quot;2026-07-21&quot;:241.89},{&quot;2026-07-22&quot;:241.89},{&quot;2026-07-23&quot;:241.89},{&quot;2026-07-24&quot;:241.89},{&quot;2026-07-25&quot;:241.89},{&quot;2026-07-26&quot;:241.89},{&quot;2026-07-27&quot;:241.89},{&quot;2026-07-28&quot;:241.89},{&quot;2026-07-29&quot;:241.89},{&quot;2026-07-30&quot;:241.89},{&quot;2026-07-31&quot;:241.89},{&quot;2026-08-01&quot;:241.89},{&quot;2026-08-02&quot;:241.89},{&quot;2026-08-03&quot;:241.89},{&quot;2026-08-04&quot;:241.89},{&quot;2026-08-05&quot;:241.89},{&quot;2026-08-07&quot;:241.89},{&quot;2026-08-08&quot;:241.89},{&quot;2026-08-09&quot;:241.89},{&quot;2026-08-10&quot;:241.89},{&quot;2026-08-11&quot;:241.89},{&quot;2026-08-12&quot;:241.89},{&quot;2026-08-13&quot;:241.89},{&quot;2026-08-14&quot;:241.89},{&quot;2026-08-15&quot;:245.54},{&quot;2026-08-16&quot;:245.54},{&quot;2026-08-17&quot;:245.54},{&quot;2026-08-18&quot;:245.54},{&quot;2026-08-19&quot;:245.54},{&quot;2026-08-20&quot;:245.54},{&quot;2026-08-21&quot;:248.32},{&quot;2026-08-22&quot;:248.32},{&quot;2026-08-23&quot;:248.32},{&quot;2026-08-24&quot;:248.32},{&quot;2026-08-25&quot;:252.02},{&quot;2026-08-26&quot;:252.02},{&quot;2026-08-27&quot;:252.02},{&quot;2026-08-28&quot;:252.02},{&quot;2026-08-29&quot;:252.02},{&quot;2026-08-30&quot;:252.11},{&quot;2026-08-31&quot;:254.42},{&quot;2026-09-01&quot;:256.1},{&quot;2026-09-02&quot;:257.66},{&quot;2026-09-03&quot;:257.66},{&quot;2026-09-04&quot;:257.66},{&quot;2026-09-05&quot;:257.66},{&quot;2026-09-06&quot;:257.58},{&quot;2026-09-07&quot;:257.58},{&quot;2026-09-08&quot;:257.58},{&quot;2026-09-09&quot;:257.58},{&quot;2026-09-10&quot;:257.58},{&quot;2026-09-11&quot;:257.58}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:237.88},{&quot;2026-06-14&quot;:238.5},{&quot;2026-06-15&quot;:242.33},{&quot;2026-06-16&quot;:242.33},{&quot;2026-06-17&quot;:242.33},{&quot;2026-06-18&quot;:242.11},{&quot;2026-06-19&quot;:242.11},{&quot;2026-06-20&quot;:242.11},{&quot;2026-06-21&quot;:242.11},{&quot;2026-06-22&quot;:242.58},{&quot;2026-06-23&quot;:242.58},{&quot;2026-06-24&quot;:242.58},{&quot;2026-06-25&quot;:242.38},{&quot;2026-06-26&quot;:242.38},{&quot;2026-06-27&quot;:242.38},{&quot;2026-06-28&quot;:241.64},{&quot;2026-06-29&quot;:241.64},{&quot;2026-06-30&quot;:242.02},{&quot;2026-07-01&quot;:245.95},{&quot;2026-07-02&quot;:245.31},{&quot;2026-07-03&quot;:245.23},{&quot;2026-07-04&quot;:245.91},{&quot;2026-07-05&quot;:248.05},{&quot;2026-07-06&quot;:248.05},{&quot;2026-07-07&quot;:248.05},{&quot;2026-07-08&quot;:245.19},{&quot;2026-07-09&quot;:245.19},{&quot;2026-07-10&quot;:244.71},{&quot;2026-07-11&quot;:244.71},{&quot;2026-07-12&quot;:243.65},{&quot;2026-07-13&quot;:244.15},{&quot;2026-07-14&quot;:244.15},{&quot;2026-07-15&quot;:244.15},{&quot;2026-07-16&quot;:246.48},{&quot;2026-07-17&quot;:246.48},{&quot;2026-07-18&quot;:247.48},{&quot;2026-07-19&quot;:247.48},{&quot;2026-07-20&quot;:247.48},{&quot;2026-07-21&quot;:247.48},{&quot;2026-07-22&quot;:247.48},{&quot;2026-07-23&quot;:247.48},{&quot;2026-07-24&quot;:247.48},{&quot;2026-07-25&quot;:247.48},{&quot;2026-07-26&quot;:247.48},{&quot;2026-07-27&quot;:247.48},{&quot;2026-07-28&quot;:247.48},{&quot;2026-07-29&quot;:247.48},{&quot;2026-07-30&quot;:247.85},{&quot;2026-07-31&quot;:247.85},{&quot;2026-08-01&quot;:247.85},{&quot;2026-08-02&quot;:247.85},{&quot;2026-08-03&quot;:247.85},{&quot;2026-08-04&quot;:247.92},{&quot;2026-08-05&quot;:246.15},{&quot;2026-08-07&quot;:244.05},{&quot;2026-08-08&quot;:245.13},{&quot;2026-08-09&quot;:245.13},{&quot;2026-08-10&quot;:245.13},{&quot;2026-08-11&quot;:243.5},{&quot;2026-08-12&quot;:243.5},{&quot;2026-08-13&quot;:243.5},{&quot;2026-08-14&quot;:243.5},{&quot;2026-08-15&quot;:243.5},{&quot;2026-08-16&quot;:241.38},{&quot;2026-08-17&quot;:240.8},{&quot;2026-08-18&quot;:240.2},{&quot;2026-08-19&quot;:240.2},{&quot;2026-08-20&quot;:240.2},{&quot;2026-08-21&quot;:238.67},{&quot;2026-08-22&quot;:238.0},{&quot;2026-08-23&quot;:238.0},{&quot;2026-08-24&quot;:238.58},{&quot;2026-08-25&quot;:238.58},{&quot;2026-08-26&quot;:238.58},{&quot;2026-08-27&quot;:237.93},{&quot;2026-08-28&quot;:237.93},{&quot;2026-08-29&quot;:237.93},{&quot;2026-08-30&quot;:241.32},{&quot;2026-08-31&quot;:241.32},{&quot;2026-09-01&quot;:241.32},{&quot;2026-09-02&quot;:241.32},{&quot;2026-09-03&quot;:241.32},{&quot;2026-09-04&quot;:241.32},{&quot;2026-09-05&quot;:241.32},{&quot;2026-09-06&quot;:242.58},{&quot;2026-09-07&quot;:242.34},{&quot;2026-09-08&quot;:240.21},{&quot;2026-09-09&quot;:240.21},{&quot;2026-09-10&quot;:240.21},{&quot;2026-09-11&quot;:240.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="51344"
  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-mm2 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">
            Mox Opal
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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">
            $236.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="Mox Opal" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/6/b/6b3a20ac-1860-4513-bb73-35d23b088b04.jpg?1783938381" />

        <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">
            Mox Opal
        </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 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="Mox Opal" src="https://cards.scryfall.io/large/front/6/b/6b3a20ac-1860-4513-bb73-35d23b088b04.jpg?1783938381" />
    </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">
                $236.08
              </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">
                $246.72
              </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">$195.00</span>
              <span class="text-xs text-grey-text">Credit: $253.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-13&quot;:216.44},{&quot;2026-06-14&quot;:216.44},{&quot;2026-06-15&quot;:220.13},{&quot;2026-06-16&quot;:220.13},{&quot;2026-06-17&quot;:220.13},{&quot;2026-06-18&quot;:220.13},{&quot;2026-06-19&quot;:220.13},{&quot;2026-06-20&quot;:220.13},{&quot;2026-06-21&quot;:220.13},{&quot;2026-06-22&quot;:220.13},{&quot;2026-06-23&quot;:220.13},{&quot;2026-06-24&quot;:220.13},{&quot;2026-06-25&quot;:220.13},{&quot;2026-06-26&quot;:221.71},{&quot;2026-06-27&quot;:221.71},{&quot;2026-06-28&quot;:221.71},{&quot;2026-06-29&quot;:221.71},{&quot;2026-06-30&quot;:221.71},{&quot;2026-07-01&quot;:221.71},{&quot;2026-07-02&quot;:221.71},{&quot;2026-07-03&quot;:221.71},{&quot;2026-07-04&quot;:223.46},{&quot;2026-07-05&quot;:225.12},{&quot;2026-07-06&quot;:225.12},{&quot;2026-07-07&quot;:225.12},{&quot;2026-07-08&quot;:225.12},{&quot;2026-07-09&quot;:225.12},{&quot;2026-07-10&quot;:225.12},{&quot;2026-07-11&quot;:225.12},{&quot;2026-07-12&quot;:225.12},{&quot;2026-07-13&quot;:229.5},{&quot;2026-07-14&quot;:229.5},{&quot;2026-07-15&quot;:229.5},{&quot;2026-07-16&quot;:229.5},{&quot;2026-07-17&quot;:229.5},{&quot;2026-07-18&quot;:229.5},{&quot;2026-07-19&quot;:229.5},{&quot;2026-07-20&quot;:229.5},{&quot;2026-07-21&quot;:229.5},{&quot;2026-07-22&quot;:229.5},{&quot;2026-07-23&quot;:229.5},{&quot;2026-07-24&quot;:229.5},{&quot;2026-07-25&quot;:229.5},{&quot;2026-07-26&quot;:229.5},{&quot;2026-07-27&quot;:229.5},{&quot;2026-07-28&quot;:229.5},{&quot;2026-07-29&quot;:229.5},{&quot;2026-07-30&quot;:229.5},{&quot;2026-07-31&quot;:229.5},{&quot;2026-08-01&quot;:229.5},{&quot;2026-08-02&quot;:233.48},{&quot;2026-08-03&quot;:233.48},{&quot;2026-08-04&quot;:233.48},{&quot;2026-08-05&quot;:233.48},{&quot;2026-08-07&quot;:233.48},{&quot;2026-08-08&quot;:233.48},{&quot;2026-08-09&quot;:233.57},{&quot;2026-08-10&quot;:233.57},{&quot;2026-08-11&quot;:233.57},{&quot;2026-08-12&quot;:233.57},{&quot;2026-08-13&quot;:233.57},{&quot;2026-08-14&quot;:233.57},{&quot;2026-08-15&quot;:235.97},{&quot;2026-08-16&quot;:235.97},{&quot;2026-08-17&quot;:235.97},{&quot;2026-08-18&quot;:239.37},{&quot;2026-08-19&quot;:239.37},{&quot;2026-08-20&quot;:239.37},{&quot;2026-08-21&quot;:243.25},{&quot;2026-08-22&quot;:243.25},{&quot;2026-08-23&quot;:243.25},{&quot;2026-08-24&quot;:243.25},{&quot;2026-08-25&quot;:243.25},{&quot;2026-08-26&quot;:243.25},{&quot;2026-08-27&quot;:243.25},{&quot;2026-08-28&quot;:243.25},{&quot;2026-08-29&quot;:243.25},{&quot;2026-08-30&quot;:243.25},{&quot;2026-08-31&quot;:243.25},{&quot;2026-09-01&quot;:243.25},{&quot;2026-09-02&quot;:243.25},{&quot;2026-09-03&quot;:243.25},{&quot;2026-09-04&quot;:243.25},{&quot;2026-09-05&quot;:243.25},{&quot;2026-09-06&quot;:243.25},{&quot;2026-09-07&quot;:243.25},{&quot;2026-09-08&quot;:243.25},{&quot;2026-09-09&quot;:243.25},{&quot;2026-09-10&quot;:243.25},{&quot;2026-09-11&quot;:246.72}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:218.89},{&quot;2026-06-14&quot;:218.89},{&quot;2026-06-15&quot;:218.89},{&quot;2026-06-16&quot;:218.89},{&quot;2026-06-17&quot;:218.89},{&quot;2026-06-18&quot;:218.89},{&quot;2026-06-19&quot;:218.89},{&quot;2026-06-20&quot;:218.89},{&quot;2026-06-21&quot;:218.89},{&quot;2026-06-22&quot;:218.89},{&quot;2026-06-23&quot;:218.89},{&quot;2026-06-24&quot;:221.34},{&quot;2026-06-25&quot;:221.34},{&quot;2026-06-26&quot;:221.34},{&quot;2026-06-27&quot;:221.34},{&quot;2026-06-28&quot;:223.74},{&quot;2026-06-29&quot;:226.06},{&quot;2026-06-30&quot;:227.54},{&quot;2026-07-01&quot;:227.54},{&quot;2026-07-02&quot;:227.54},{&quot;2026-07-03&quot;:227.54},{&quot;2026-07-04&quot;:229.82},{&quot;2026-07-05&quot;:234.22},{&quot;2026-07-06&quot;:234.22},{&quot;2026-07-07&quot;:236.49},{&quot;2026-07-08&quot;:236.49},{&quot;2026-07-09&quot;:234.22},{&quot;2026-07-10&quot;:234.22},{&quot;2026-07-11&quot;:234.22},{&quot;2026-07-12&quot;:234.22},{&quot;2026-07-13&quot;:234.22},{&quot;2026-07-14&quot;:234.22},{&quot;2026-07-15&quot;:234.22},{&quot;2026-07-16&quot;:234.22},{&quot;2026-07-17&quot;:234.22},{&quot;2026-07-18&quot;:234.22},{&quot;2026-07-19&quot;:234.22},{&quot;2026-07-20&quot;:234.22},{&quot;2026-07-21&quot;:234.22},{&quot;2026-07-22&quot;:234.22},{&quot;2026-07-23&quot;:234.22},{&quot;2026-07-24&quot;:234.22},{&quot;2026-07-25&quot;:234.22},{&quot;2026-07-26&quot;:234.22},{&quot;2026-07-27&quot;:234.22},{&quot;2026-07-28&quot;:234.22},{&quot;2026-07-29&quot;:234.22},{&quot;2026-07-30&quot;:234.22},{&quot;2026-07-31&quot;:234.22},{&quot;2026-08-01&quot;:234.22},{&quot;2026-08-02&quot;:234.22},{&quot;2026-08-03&quot;:234.22},{&quot;2026-08-04&quot;:236.39},{&quot;2026-08-05&quot;:236.39},{&quot;2026-08-07&quot;:236.39},{&quot;2026-08-08&quot;:236.39},{&quot;2026-08-09&quot;:236.39},{&quot;2026-08-10&quot;:236.39},{&quot;2026-08-11&quot;:236.39},{&quot;2026-08-12&quot;:236.39},{&quot;2026-08-13&quot;:236.39},{&quot;2026-08-14&quot;:236.39},{&quot;2026-08-15&quot;:236.39},{&quot;2026-08-16&quot;:236.39},{&quot;2026-08-17&quot;:236.39},{&quot;2026-08-18&quot;:236.39},{&quot;2026-08-19&quot;:236.39},{&quot;2026-08-20&quot;:236.39},{&quot;2026-08-21&quot;:236.39},{&quot;2026-08-22&quot;:236.39},{&quot;2026-08-23&quot;:236.39},{&quot;2026-08-24&quot;:236.39},{&quot;2026-08-25&quot;:236.39},{&quot;2026-08-26&quot;:236.39},{&quot;2026-08-27&quot;:236.39},{&quot;2026-08-28&quot;:236.39},{&quot;2026-08-29&quot;:236.39},{&quot;2026-08-30&quot;:236.07},{&quot;2026-08-31&quot;:236.07},{&quot;2026-09-01&quot;:236.07},{&quot;2026-09-02&quot;:236.07},{&quot;2026-09-03&quot;:236.07},{&quot;2026-09-04&quot;:236.07},{&quot;2026-09-05&quot;:236.08},{&quot;2026-09-06&quot;:236.08},{&quot;2026-09-07&quot;:236.08},{&quot;2026-09-08&quot;:236.08},{&quot;2026-09-09&quot;:236.08},{&quot;2026-09-10&quot;:236.08},{&quot;2026-09-11&quot;:236.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="83586"
  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-usg 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">
            Gilded Drake
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Drake
      </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">
            $208.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="Gilded Drake" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/d/8de3fdae-cc2c-4a14-b15b-4fe1a983dfbf.jpg?1783946361" />

        <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">
            Gilded Drake
        </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 — Drake</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-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="Gilded Drake" src="https://cards.scryfall.io/large/front/8/d/8de3fdae-cc2c-4a14-b15b-4fe1a983dfbf.jpg?1783946361" />
    </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">
                $208.84
              </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">$160.00</span>
              <span class="text-xs text-grey-text">Credit: $208.00</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-11&quot;:189.24},{&quot;2026-06-12&quot;:189.24},{&quot;2026-06-13&quot;:189.24},{&quot;2026-06-14&quot;:189.24},{&quot;2026-06-15&quot;:189.24},{&quot;2026-06-16&quot;:189.24},{&quot;2026-06-17&quot;:189.24},{&quot;2026-06-18&quot;:189.24},{&quot;2026-06-19&quot;:189.64},{&quot;2026-06-20&quot;:189.64},{&quot;2026-06-21&quot;:190.37},{&quot;2026-06-22&quot;:190.37},{&quot;2026-06-23&quot;:190.37},{&quot;2026-06-24&quot;:190.37},{&quot;2026-06-25&quot;:190.37},{&quot;2026-06-26&quot;:190.37},{&quot;2026-06-27&quot;:190.37},{&quot;2026-06-28&quot;:190.37},{&quot;2026-06-29&quot;:195.44},{&quot;2026-06-30&quot;:195.44},{&quot;2026-07-01&quot;:195.25},{&quot;2026-07-02&quot;:195.25},{&quot;2026-07-03&quot;:195.25},{&quot;2026-07-04&quot;:196.2},{&quot;2026-07-05&quot;:196.2},{&quot;2026-07-06&quot;:196.2},{&quot;2026-07-07&quot;:196.2},{&quot;2026-07-08&quot;:196.2},{&quot;2026-07-09&quot;:196.2},{&quot;2026-07-10&quot;:196.36},{&quot;2026-07-11&quot;:196.36},{&quot;2026-07-12&quot;:196.36},{&quot;2026-07-13&quot;:195.77},{&quot;2026-07-14&quot;:195.28},{&quot;2026-07-15&quot;:195.28},{&quot;2026-07-16&quot;:195.59},{&quot;2026-07-17&quot;:195.59},{&quot;2026-07-18&quot;:196.06},{&quot;2026-07-19&quot;:196.06},{&quot;2026-07-20&quot;:196.06},{&quot;2026-07-21&quot;:196.06},{&quot;2026-07-23&quot;:196.06},{&quot;2026-07-25&quot;:196.39},{&quot;2026-07-26&quot;:196.39},{&quot;2026-07-27&quot;:199.68},{&quot;2026-07-28&quot;:198.32},{&quot;2026-07-29&quot;:198.32},{&quot;2026-07-30&quot;:201.19},{&quot;2026-07-31&quot;:201.5},{&quot;2026-08-01&quot;:201.5},{&quot;2026-08-02&quot;:201.5},{&quot;2026-08-03&quot;:201.5},{&quot;2026-08-04&quot;:201.5},{&quot;2026-08-05&quot;:201.5},{&quot;2026-08-07&quot;:201.93},{&quot;2026-08-08&quot;:202.1},{&quot;2026-08-09&quot;:202.1},{&quot;2026-08-10&quot;:202.1},{&quot;2026-08-11&quot;:202.1},{&quot;2026-08-12&quot;:202.1},{&quot;2026-08-13&quot;:202.1},{&quot;2026-08-14&quot;:202.1},{&quot;2026-08-15&quot;:203.76},{&quot;2026-08-16&quot;:206.1},{&quot;2026-08-17&quot;:206.1},{&quot;2026-08-18&quot;:206.1},{&quot;2026-08-19&quot;:206.1},{&quot;2026-08-20&quot;:206.1},{&quot;2026-08-21&quot;:206.48},{&quot;2026-08-22&quot;:206.48},{&quot;2026-08-23&quot;:206.48},{&quot;2026-08-24&quot;:206.48},{&quot;2026-08-25&quot;:206.48},{&quot;2026-08-26&quot;:207.59},{&quot;2026-08-27&quot;:207.59},{&quot;2026-08-28&quot;:207.59},{&quot;2026-08-29&quot;:207.59},{&quot;2026-08-30&quot;:207.59},{&quot;2026-08-31&quot;:207.59},{&quot;2026-09-01&quot;:207.59},{&quot;2026-09-02&quot;:208.84},{&quot;2026-09-03&quot;:208.84},{&quot;2026-09-04&quot;:208.84},{&quot;2026-09-05&quot;:208.84},{&quot;2026-09-06&quot;:208.84},{&quot;2026-09-07&quot;:208.84},{&quot;2026-09-08&quot;:208.84},{&quot;2026-09-09&quot;:208.84},{&quot;2026-09-10&quot;:208.84},{&quot;2026-09-11&quot;:208.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="97914"
  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-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">
            Cloud, Midgar Mercenary
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Human Soldier 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-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $189.35
          </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="Cloud, Midgar Mercenary" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/3/b358dadc-9cc9-4baf-afec-3b50d0822609.jpg?1782684308" />

        <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">
            Cloud, Midgar Mercenary
        </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 — Human Soldier Mercenary</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><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="Cloud, Midgar Mercenary" src="https://cards.scryfall.io/large/front/b/3/b358dadc-9cc9-4baf-afec-3b50d0822609.jpg?1782684308" />
    </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">
                $189.35
              </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">$125.00</span>
              <span class="text-xs text-grey-text">Credit: $162.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-13&quot;:214.64},{&quot;2026-06-14&quot;:216.14},{&quot;2026-06-15&quot;:218.09},{&quot;2026-06-16&quot;:218.67},{&quot;2026-06-17&quot;:219.38},{&quot;2026-06-18&quot;:220.11},{&quot;2026-06-19&quot;:220.11},{&quot;2026-06-20&quot;:220.72},{&quot;2026-06-21&quot;:221.22},{&quot;2026-06-22&quot;:221.22},{&quot;2026-06-23&quot;:221.22},{&quot;2026-06-24&quot;:221.06},{&quot;2026-06-25&quot;:221.06},{&quot;2026-06-26&quot;:218.87},{&quot;2026-06-27&quot;:218.87},{&quot;2026-06-28&quot;:218.87},{&quot;2026-06-29&quot;:214.27},{&quot;2026-06-30&quot;:214.27},{&quot;2026-07-01&quot;:209.94},{&quot;2026-07-02&quot;:202.55},{&quot;2026-07-03&quot;:201.55},{&quot;2026-07-04&quot;:199.57},{&quot;2026-07-05&quot;:197.16},{&quot;2026-07-06&quot;:195.33},{&quot;2026-07-07&quot;:194.43},{&quot;2026-07-08&quot;:192.46},{&quot;2026-07-09&quot;:192.46},{&quot;2026-07-10&quot;:192.46},{&quot;2026-07-11&quot;:186.99},{&quot;2026-07-12&quot;:186.99},{&quot;2026-07-13&quot;:185.85},{&quot;2026-07-14&quot;:186.25},{&quot;2026-07-15&quot;:187.27},{&quot;2026-07-16&quot;:188.82},{&quot;2026-07-17&quot;:189.27},{&quot;2026-07-18&quot;:188.92},{&quot;2026-07-19&quot;:188.92},{&quot;2026-07-20&quot;:188.47},{&quot;2026-07-21&quot;:188.47},{&quot;2026-07-22&quot;:188.11},{&quot;2026-07-23&quot;:188.11},{&quot;2026-07-24&quot;:187.43},{&quot;2026-07-25&quot;:186.99},{&quot;2026-07-26&quot;:186.77},{&quot;2026-07-27&quot;:186.57},{&quot;2026-07-28&quot;:185.8},{&quot;2026-07-29&quot;:185.8},{&quot;2026-07-30&quot;:185.46},{&quot;2026-07-31&quot;:187.78},{&quot;2026-08-01&quot;:187.64},{&quot;2026-08-02&quot;:187.55},{&quot;2026-08-03&quot;:187.39},{&quot;2026-08-04&quot;:187.28},{&quot;2026-08-05&quot;:187.37},{&quot;2026-08-07&quot;:187.6},{&quot;2026-08-08&quot;:188.58},{&quot;2026-08-09&quot;:188.51},{&quot;2026-08-10&quot;:188.07},{&quot;2026-08-11&quot;:188.22},{&quot;2026-08-12&quot;:188.22},{&quot;2026-08-13&quot;:188.29},{&quot;2026-08-14&quot;:188.29},{&quot;2026-08-15&quot;:188.65},{&quot;2026-08-16&quot;:188.59},{&quot;2026-08-17&quot;:188.59},{&quot;2026-08-18&quot;:188.8},{&quot;2026-08-19&quot;:188.8},{&quot;2026-08-20&quot;:188.95},{&quot;2026-08-21&quot;:191.21},{&quot;2026-08-22&quot;:191.42},{&quot;2026-08-23&quot;:191.36},{&quot;2026-08-24&quot;:191.17},{&quot;2026-08-25&quot;:191.11},{&quot;2026-08-26&quot;:191.11},{&quot;2026-08-27&quot;:191.08},{&quot;2026-08-28&quot;:191.4},{&quot;2026-08-29&quot;:191.4},{&quot;2026-08-30&quot;:189.97},{&quot;2026-08-31&quot;:190.53},{&quot;2026-09-01&quot;:190.59},{&quot;2026-09-02&quot;:190.62},{&quot;2026-09-03&quot;:190.73},{&quot;2026-09-04&quot;:190.74},{&quot;2026-09-05&quot;:190.78},{&quot;2026-09-06&quot;:190.98},{&quot;2026-09-07&quot;:190.86},{&quot;2026-09-08&quot;:191.02},{&quot;2026-09-09&quot;:191.37},{&quot;2026-09-10&quot;:190.96},{&quot;2026-09-11&quot;:189.35}],&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="53222"
  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-mb2 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">
            Demonic Consultation
        </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="text-sm font-medium text-nine-white">
            $149.52
          </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="Demonic Consultation" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/d/8dd7eac8-d6df-48b2-8e64-bdf198c53264.jpg?1783910565" />

        <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">
            Demonic Consultation
        </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-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="Demonic Consultation" src="https://cards.scryfall.io/large/front/8/d/8dd7eac8-d6df-48b2-8e64-bdf198c53264.jpg?1783910565" />
    </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">
                $8.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">
                $149.52
              </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">$112.00</span>
              <span class="text-xs text-grey-text">Credit: $145.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;2026-06-13&quot;:145.19},{&quot;2026-06-14&quot;:145.19},{&quot;2026-06-15&quot;:144.11},{&quot;2026-06-16&quot;:144.11},{&quot;2026-06-17&quot;:144.03},{&quot;2026-06-18&quot;:144.03},{&quot;2026-06-19&quot;:144.03},{&quot;2026-06-20&quot;:144.03},{&quot;2026-06-21&quot;:144.03},{&quot;2026-06-22&quot;:144.03},{&quot;2026-06-23&quot;:144.03},{&quot;2026-06-24&quot;:144.03},{&quot;2026-06-25&quot;:144.83},{&quot;2026-06-26&quot;:144.83},{&quot;2026-06-27&quot;:144.83},{&quot;2026-06-28&quot;:144.83},{&quot;2026-06-29&quot;:145.55},{&quot;2026-06-30&quot;:145.55},{&quot;2026-07-01&quot;:144.89},{&quot;2026-07-02&quot;:144.89},{&quot;2026-07-03&quot;:144.89},{&quot;2026-07-04&quot;:144.89},{&quot;2026-07-05&quot;:144.89},{&quot;2026-07-06&quot;:144.89},{&quot;2026-07-07&quot;:144.89},{&quot;2026-07-08&quot;:144.89},{&quot;2026-07-09&quot;:144.89},{&quot;2026-07-10&quot;:144.89},{&quot;2026-07-11&quot;:144.89},{&quot;2026-07-12&quot;:144.89},{&quot;2026-07-13&quot;:144.89},{&quot;2026-07-14&quot;:146.25},{&quot;2026-07-15&quot;:146.25},{&quot;2026-07-16&quot;:146.25},{&quot;2026-07-17&quot;:146.25},{&quot;2026-07-18&quot;:146.25},{&quot;2026-07-19&quot;:146.25},{&quot;2026-07-20&quot;:146.25},{&quot;2026-07-21&quot;:146.25},{&quot;2026-07-22&quot;:146.25},{&quot;2026-07-23&quot;:147.71},{&quot;2026-07-24&quot;:147.71},{&quot;2026-07-25&quot;:149.61},{&quot;2026-07-26&quot;:149.61},{&quot;2026-07-27&quot;:150.45},{&quot;2026-07-28&quot;:150.45},{&quot;2026-07-29&quot;:150.45},{&quot;2026-07-30&quot;:150.72},{&quot;2026-07-31&quot;:150.72},{&quot;2026-08-01&quot;:150.72},{&quot;2026-08-02&quot;:150.72},{&quot;2026-08-03&quot;:150.72},{&quot;2026-08-04&quot;:150.72},{&quot;2026-08-05&quot;:150.72},{&quot;2026-08-07&quot;:150.72},{&quot;2026-08-08&quot;:150.72},{&quot;2026-08-09&quot;:150.72},{&quot;2026-08-10&quot;:150.72},{&quot;2026-08-11&quot;:150.72},{&quot;2026-08-12&quot;:150.72},{&quot;2026-08-13&quot;:150.72},{&quot;2026-08-14&quot;:150.72},{&quot;2026-08-15&quot;:150.72},{&quot;2026-08-16&quot;:150.72},{&quot;2026-08-17&quot;:150.72},{&quot;2026-08-18&quot;:150.72},{&quot;2026-08-19&quot;:150.67},{&quot;2026-08-20&quot;:150.67},{&quot;2026-08-21&quot;:150.67},{&quot;2026-08-22&quot;:150.67},{&quot;2026-08-23&quot;:150.67},{&quot;2026-08-24&quot;:150.67},{&quot;2026-08-25&quot;:150.67},{&quot;2026-08-26&quot;:150.67},{&quot;2026-08-27&quot;:150.08},{&quot;2026-08-28&quot;:150.08},{&quot;2026-08-29&quot;:150.08},{&quot;2026-08-30&quot;:150.77},{&quot;2026-08-31&quot;:150.77},{&quot;2026-09-01&quot;:150.77},{&quot;2026-09-02&quot;:150.77},{&quot;2026-09-03&quot;:150.77},{&quot;2026-09-04&quot;:149.52},{&quot;2026-09-05&quot;:149.52},{&quot;2026-09-06&quot;:149.52},{&quot;2026-09-07&quot;:149.52},{&quot;2026-09-08&quot;:149.52},{&quot;2026-09-09&quot;:149.52},{&quot;2026-09-10&quot;:149.52},{&quot;2026-09-11&quot;:149.52}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:7.06},{&quot;2026-06-14&quot;:7.26},{&quot;2026-06-15&quot;:7.85},{&quot;2026-06-16&quot;:7.86},{&quot;2026-06-17&quot;:7.88},{&quot;2026-06-18&quot;:7.82},{&quot;2026-06-19&quot;:7.85},{&quot;2026-06-20&quot;:7.85},{&quot;2026-06-21&quot;:7.67},{&quot;2026-06-22&quot;:7.83},{&quot;2026-06-23&quot;:8.06},{&quot;2026-06-24&quot;:8.33},{&quot;2026-06-25&quot;:8.13},{&quot;2026-06-26&quot;:8.04},{&quot;2026-06-27&quot;:8.08},{&quot;2026-06-28&quot;:8.08},{&quot;2026-06-29&quot;:8.12},{&quot;2026-06-30&quot;:8.18},{&quot;2026-07-01&quot;:8.18},{&quot;2026-07-02&quot;:8.0},{&quot;2026-07-03&quot;:8.09},{&quot;2026-07-04&quot;:8.21},{&quot;2026-07-05&quot;:7.79},{&quot;2026-07-06&quot;:7.79},{&quot;2026-07-07&quot;:7.8},{&quot;2026-07-08&quot;:7.57},{&quot;2026-07-09&quot;:7.58},{&quot;2026-07-10&quot;:7.54},{&quot;2026-07-11&quot;:7.57},{&quot;2026-07-12&quot;:7.57},{&quot;2026-07-13&quot;:7.6},{&quot;2026-07-14&quot;:7.6},{&quot;2026-07-15&quot;:7.71},{&quot;2026-07-16&quot;:7.6},{&quot;2026-07-17&quot;:7.37},{&quot;2026-07-18&quot;:7.35},{&quot;2026-07-19&quot;:7.38},{&quot;2026-07-20&quot;:7.51},{&quot;2026-07-21&quot;:7.51},{&quot;2026-07-22&quot;:7.45},{&quot;2026-07-23&quot;:7.44},{&quot;2026-07-24&quot;:7.34},{&quot;2026-07-25&quot;:7.49},{&quot;2026-07-26&quot;:7.49},{&quot;2026-07-27&quot;:7.47},{&quot;2026-07-28&quot;:7.47},{&quot;2026-07-29&quot;:7.57},{&quot;2026-07-30&quot;:7.54},{&quot;2026-07-31&quot;:7.28},{&quot;2026-08-01&quot;:7.31},{&quot;2026-08-02&quot;:7.37},{&quot;2026-08-03&quot;:6.93},{&quot;2026-08-04&quot;:6.95},{&quot;2026-08-05&quot;:6.91},{&quot;2026-08-07&quot;:7.25},{&quot;2026-08-08&quot;:7.51},{&quot;2026-08-09&quot;:7.12},{&quot;2026-08-10&quot;:7.18},{&quot;2026-08-11&quot;:7.41},{&quot;2026-08-12&quot;:7.25},{&quot;2026-08-13&quot;:7.81},{&quot;2026-08-14&quot;:7.81},{&quot;2026-08-15&quot;:7.58},{&quot;2026-08-16&quot;:7.34},{&quot;2026-08-17&quot;:6.97},{&quot;2026-08-18&quot;:6.86},{&quot;2026-08-19&quot;:7.05},{&quot;2026-08-20&quot;:7.12},{&quot;2026-08-21&quot;:7.19},{&quot;2026-08-22&quot;:7.13},{&quot;2026-08-23&quot;:7.36},{&quot;2026-08-24&quot;:7.6},{&quot;2026-08-25&quot;:7.61},{&quot;2026-08-26&quot;:7.87},{&quot;2026-08-27&quot;:7.87},{&quot;2026-08-28&quot;:7.68},{&quot;2026-08-29&quot;:7.68},{&quot;2026-08-30&quot;:8.13},{&quot;2026-08-31&quot;:8.42},{&quot;2026-09-01&quot;:8.61},{&quot;2026-09-02&quot;:8.62},{&quot;2026-09-03&quot;:8.71},{&quot;2026-09-04&quot;:8.76},{&quot;2026-09-05&quot;:8.88},{&quot;2026-09-06&quot;:8.9},{&quot;2026-09-07&quot;:8.47},{&quot;2026-09-08&quot;:8.43},{&quot;2026-09-09&quot;:8.43},{&quot;2026-09-10&quot;:8.8},{&quot;2026-09-11&quot;:8.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="80015"
  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-bot 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">
            Goldbug, Humanity&#39;s Ally 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Artifact Creature — Robot
      </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">
            $141.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="Goldbug, Humanity&#39;s Ally // Goldbug, Scrappy Scout" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/6/7/67a29ad8-2cca-4dab-ac71-d3b0b2489d79.jpg?1783919890" />

        <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">
            Goldbug, Humanity&#39;s Ally 
        </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 Artifact Creature — Robot</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><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="Goldbug, Humanity&#39;s Ally // Goldbug, Scrappy Scout" src="https://cards.scryfall.io/large/front/6/7/67a29ad8-2cca-4dab-ac71-d3b0b2489d79.jpg?1783919890" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Goldbug, Humanity&#39;s Ally // Goldbug, Scrappy Scout" src="https://cards.scryfall.io/large/back/6/7/67a29ad8-2cca-4dab-ac71-d3b0b2489d79.jpg?1783919890" />
              </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-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">
                $7.11
              </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">
                $141.94
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$115.00</span>
              <span class="text-xs text-grey-text">Credit: $149.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-13&quot;:137.5},{&quot;2026-06-14&quot;:137.5},{&quot;2026-06-15&quot;:137.5},{&quot;2026-06-16&quot;:137.5},{&quot;2026-06-17&quot;:137.5},{&quot;2026-06-18&quot;:137.5},{&quot;2026-06-19&quot;:137.5},{&quot;2026-06-20&quot;:137.5},{&quot;2026-06-21&quot;:137.5},{&quot;2026-06-22&quot;:137.5},{&quot;2026-06-23&quot;:137.5},{&quot;2026-06-24&quot;:137.5},{&quot;2026-06-25&quot;:137.5},{&quot;2026-06-26&quot;:137.5},{&quot;2026-06-27&quot;:137.5},{&quot;2026-06-28&quot;:137.5},{&quot;2026-06-29&quot;:137.5},{&quot;2026-06-30&quot;:137.5},{&quot;2026-07-01&quot;:137.5},{&quot;2026-07-02&quot;:137.5},{&quot;2026-07-03&quot;:137.8},{&quot;2026-07-04&quot;:137.8},{&quot;2026-07-05&quot;:137.8},{&quot;2026-07-06&quot;:137.8},{&quot;2026-07-07&quot;:137.8},{&quot;2026-07-08&quot;:137.8},{&quot;2026-07-09&quot;:137.8},{&quot;2026-07-10&quot;:137.8},{&quot;2026-07-11&quot;:137.8},{&quot;2026-07-12&quot;:137.8},{&quot;2026-07-13&quot;:137.8},{&quot;2026-07-14&quot;:137.8},{&quot;2026-07-15&quot;:137.8},{&quot;2026-07-16&quot;:138.95},{&quot;2026-07-17&quot;:138.95},{&quot;2026-07-18&quot;:138.95},{&quot;2026-07-19&quot;:138.95},{&quot;2026-07-20&quot;:138.95},{&quot;2026-07-21&quot;:138.95},{&quot;2026-07-22&quot;:138.95},{&quot;2026-07-23&quot;:138.95},{&quot;2026-07-24&quot;:138.95},{&quot;2026-07-25&quot;:138.95},{&quot;2026-07-26&quot;:138.95},{&quot;2026-07-27&quot;:138.95},{&quot;2026-07-28&quot;:138.95},{&quot;2026-07-29&quot;:138.95},{&quot;2026-07-30&quot;:140.78},{&quot;2026-07-31&quot;:140.78},{&quot;2026-08-01&quot;:140.78},{&quot;2026-08-02&quot;:140.78},{&quot;2026-08-03&quot;:140.78},{&quot;2026-08-04&quot;:140.78},{&quot;2026-08-05&quot;:140.78},{&quot;2026-08-07&quot;:140.78},{&quot;2026-08-08&quot;:140.78},{&quot;2026-08-09&quot;:140.78},{&quot;2026-08-10&quot;:140.78},{&quot;2026-08-11&quot;:140.78},{&quot;2026-08-12&quot;:140.78},{&quot;2026-08-13&quot;:140.78},{&quot;2026-08-14&quot;:140.78},{&quot;2026-08-15&quot;:140.78},{&quot;2026-08-16&quot;:140.78},{&quot;2026-08-17&quot;:140.78},{&quot;2026-08-18&quot;:140.78},{&quot;2026-08-19&quot;:140.78},{&quot;2026-08-20&quot;:140.78},{&quot;2026-08-21&quot;:140.78},{&quot;2026-08-22&quot;:140.78},{&quot;2026-08-23&quot;:140.78},{&quot;2026-08-24&quot;:140.78},{&quot;2026-08-25&quot;:140.78},{&quot;2026-08-26&quot;:140.78},{&quot;2026-08-27&quot;:140.78},{&quot;2026-08-28&quot;:140.78},{&quot;2026-08-29&quot;:140.78},{&quot;2026-08-30&quot;:140.78},{&quot;2026-08-31&quot;:140.78},{&quot;2026-09-01&quot;:140.78},{&quot;2026-09-02&quot;:140.78},{&quot;2026-09-03&quot;:140.78},{&quot;2026-09-04&quot;:140.78},{&quot;2026-09-05&quot;:140.78},{&quot;2026-09-06&quot;:140.78},{&quot;2026-09-07&quot;:140.78},{&quot;2026-09-08&quot;:141.94},{&quot;2026-09-09&quot;:141.94},{&quot;2026-09-10&quot;:141.94},{&quot;2026-09-11&quot;:141.94}],&quot;normal&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.79},{&quot;2026-06-20&quot;:7.84},{&quot;2026-06-21&quot;:7.84},{&quot;2026-06-22&quot;:7.84},{&quot;2026-06-23&quot;:7.84},{&quot;2026-06-24&quot;:7.63},{&quot;2026-06-25&quot;:7.62},{&quot;2026-06-26&quot;:7.62},{&quot;2026-06-27&quot;:7.62},{&quot;2026-06-28&quot;:7.62},{&quot;2026-06-29&quot;:7.62},{&quot;2026-06-30&quot;:7.62},{&quot;2026-07-01&quot;:7.62},{&quot;2026-07-02&quot;:7.62},{&quot;2026-07-03&quot;:7.58},{&quot;2026-07-04&quot;:7.59},{&quot;2026-07-05&quot;:7.59},{&quot;2026-07-06&quot;:7.59},{&quot;2026-07-07&quot;:7.59},{&quot;2026-07-08&quot;:7.59},{&quot;2026-07-09&quot;:7.53},{&quot;2026-07-10&quot;:7.53},{&quot;2026-07-11&quot;:7.53},{&quot;2026-07-12&quot;:7.53},{&quot;2026-07-13&quot;:7.53},{&quot;2026-07-14&quot;:7.53},{&quot;2026-07-15&quot;:7.53},{&quot;2026-07-16&quot;:7.53},{&quot;2026-07-17&quot;:7.5},{&quot;2026-07-18&quot;:7.5},{&quot;2026-07-19&quot;:7.45},{&quot;2026-07-20&quot;:7.45},{&quot;2026-07-21&quot;:7.39},{&quot;2026-07-22&quot;:7.39},{&quot;2026-07-23&quot;:7.39},{&quot;2026-07-24&quot;:7.34},{&quot;2026-07-25&quot;:7.34},{&quot;2026-07-26&quot;:7.28},{&quot;2026-07-27&quot;:7.26},{&quot;2026-07-28&quot;:7.26},{&quot;2026-07-29&quot;:7.21},{&quot;2026-07-30&quot;:7.2},{&quot;2026-07-31&quot;:7.2},{&quot;2026-08-01&quot;:7.2},{&quot;2026-08-02&quot;:7.16},{&quot;2026-08-03&quot;:7.16},{&quot;2026-08-04&quot;:7.16},{&quot;2026-08-05&quot;:7.15},{&quot;2026-08-07&quot;:7.15},{&quot;2026-08-08&quot;:7.14},{&quot;2026-08-09&quot;:7.19},{&quot;2026-08-10&quot;:7.19},{&quot;2026-08-11&quot;:7.19},{&quot;2026-08-12&quot;:7.19},{&quot;2026-08-13&quot;:7.18},{&quot;2026-08-14&quot;:7.2},{&quot;2026-08-15&quot;:7.2},{&quot;2026-08-16&quot;:7.2},{&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.07},{&quot;2026-08-23&quot;:7.05},{&quot;2026-08-24&quot;:7.11},{&quot;2026-08-25&quot;:7.11},{&quot;2026-08-26&quot;:7.11},{&quot;2026-08-27&quot;:7.11},{&quot;2026-08-28&quot;:7.11},{&quot;2026-08-29&quot;:7.11},{&quot;2026-08-30&quot;:7.25},{&quot;2026-08-31&quot;:7.25},{&quot;2026-09-01&quot;:7.17},{&quot;2026-09-02&quot;:7.2},{&quot;2026-09-03&quot;:7.15},{&quot;2026-09-04&quot;:7.09},{&quot;2026-09-05&quot;:7.05},{&quot;2026-09-06&quot;:7.06},{&quot;2026-09-07&quot;:7.06},{&quot;2026-09-08&quot;:7.07},{&quot;2026-09-09&quot;:7.07},{&quot;2026-09-10&quot;:7.07},{&quot;2026-09-11&quot;:7.11}]}"
        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="71327"
  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-ltc 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">
            Urborg, Tomb of Yawgmoth
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $132.63
          </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="Urborg, Tomb of Yawgmoth" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/4/1/4116f1c7-9191-4d92-81ca-54d9ae3c8166.jpg?1783915831" />

        <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">
            Urborg, Tomb of Yawgmoth
        </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 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="Urborg, Tomb of Yawgmoth" src="https://cards.scryfall.io/large/front/4/1/4116f1c7-9191-4d92-81ca-54d9ae3c8166.jpg?1783915831" />
    </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">
                $121.70
              </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">
                $132.63
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$90.00</span>
              <span class="text-xs text-grey-text">Credit: $117.00</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;:124.27},{&quot;2026-06-14&quot;:124.51},{&quot;2026-06-15&quot;:124.59},{&quot;2026-06-16&quot;:124.59},{&quot;2026-06-17&quot;:124.59},{&quot;2026-06-18&quot;:124.87},{&quot;2026-06-19&quot;:125.63},{&quot;2026-06-20&quot;:126.19},{&quot;2026-06-21&quot;:126.83},{&quot;2026-06-22&quot;:128.03},{&quot;2026-06-23&quot;:128.03},{&quot;2026-06-24&quot;:128.03},{&quot;2026-06-25&quot;:128.51},{&quot;2026-06-26&quot;:129.31},{&quot;2026-06-27&quot;:129.31},{&quot;2026-06-28&quot;:129.31},{&quot;2026-06-29&quot;:129.31},{&quot;2026-06-30&quot;:130.1},{&quot;2026-07-01&quot;:130.1},{&quot;2026-07-02&quot;:130.1},{&quot;2026-07-03&quot;:130.1},{&quot;2026-07-04&quot;:130.1},{&quot;2026-07-05&quot;:130.1},{&quot;2026-07-06&quot;:130.47},{&quot;2026-07-07&quot;:130.47},{&quot;2026-07-08&quot;:130.47},{&quot;2026-07-09&quot;:130.67},{&quot;2026-07-10&quot;:130.67},{&quot;2026-07-11&quot;:130.67},{&quot;2026-07-12&quot;:130.67},{&quot;2026-07-13&quot;:131.07},{&quot;2026-07-14&quot;:131.07},{&quot;2026-07-15&quot;:131.86},{&quot;2026-07-16&quot;:131.86},{&quot;2026-07-17&quot;:131.86},{&quot;2026-07-18&quot;:132.54},{&quot;2026-07-19&quot;:133.06},{&quot;2026-07-20&quot;:133.06},{&quot;2026-07-21&quot;:133.46},{&quot;2026-07-22&quot;:133.46},{&quot;2026-07-23&quot;:133.46},{&quot;2026-07-24&quot;:132.67},{&quot;2026-07-25&quot;:132.67},{&quot;2026-07-26&quot;:132.67},{&quot;2026-07-27&quot;:132.67},{&quot;2026-07-28&quot;:132.67},{&quot;2026-07-29&quot;:132.67},{&quot;2026-07-30&quot;:132.67},{&quot;2026-07-31&quot;:130.74},{&quot;2026-08-01&quot;:130.74},{&quot;2026-08-02&quot;:130.94},{&quot;2026-08-03&quot;:131.14},{&quot;2026-08-04&quot;:131.14},{&quot;2026-08-05&quot;:130.79},{&quot;2026-08-07&quot;:131.06},{&quot;2026-08-08&quot;:131.06},{&quot;2026-08-09&quot;:131.06},{&quot;2026-08-10&quot;:131.06},{&quot;2026-08-11&quot;:131.06},{&quot;2026-08-12&quot;:131.66},{&quot;2026-08-13&quot;:131.66},{&quot;2026-08-14&quot;:131.26},{&quot;2026-08-15&quot;:131.26},{&quot;2026-08-16&quot;:130.94},{&quot;2026-08-17&quot;:130.9},{&quot;2026-08-18&quot;:130.98},{&quot;2026-08-19&quot;:130.98},{&quot;2026-08-20&quot;:131.38},{&quot;2026-08-21&quot;:131.38},{&quot;2026-08-22&quot;:131.46},{&quot;2026-08-23&quot;:131.42},{&quot;2026-08-24&quot;:131.42},{&quot;2026-08-25&quot;:131.42},{&quot;2026-08-26&quot;:131.42},{&quot;2026-08-27&quot;:131.42},{&quot;2026-08-28&quot;:131.42},{&quot;2026-08-29&quot;:131.42},{&quot;2026-08-30&quot;:131.32},{&quot;2026-08-31&quot;:131.32},{&quot;2026-09-01&quot;:131.32},{&quot;2026-09-02&quot;:131.32},{&quot;2026-09-03&quot;:131.32},{&quot;2026-09-04&quot;:131.17},{&quot;2026-09-05&quot;:131.17},{&quot;2026-09-06&quot;:133.17},{&quot;2026-09-07&quot;:133.62},{&quot;2026-09-08&quot;:133.62},{&quot;2026-09-09&quot;:132.63},{&quot;2026-09-10&quot;:132.63},{&quot;2026-09-11&quot;:132.63}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:125.06},{&quot;2026-06-14&quot;:125.06},{&quot;2026-06-15&quot;:125.66},{&quot;2026-06-16&quot;:125.06},{&quot;2026-06-17&quot;:125.06},{&quot;2026-06-18&quot;:125.06},{&quot;2026-06-19&quot;:125.71},{&quot;2026-06-20&quot;:125.71},{&quot;2026-06-21&quot;:125.31},{&quot;2026-06-22&quot;:124.62},{&quot;2026-06-23&quot;:124.62},{&quot;2026-06-24&quot;:126.16},{&quot;2026-06-25&quot;:126.16},{&quot;2026-06-26&quot;:124.84},{&quot;2026-06-27&quot;:124.84},{&quot;2026-06-28&quot;:124.84},{&quot;2026-06-29&quot;:124.84},{&quot;2026-06-30&quot;:125.08},{&quot;2026-07-01&quot;:124.09},{&quot;2026-07-02&quot;:124.09},{&quot;2026-07-03&quot;:124.09},{&quot;2026-07-04&quot;:124.09},{&quot;2026-07-05&quot;:124.09},{&quot;2026-07-06&quot;:124.09},{&quot;2026-07-07&quot;:124.09},{&quot;2026-07-08&quot;:124.09},{&quot;2026-07-09&quot;:123.41},{&quot;2026-07-10&quot;:124.0},{&quot;2026-07-11&quot;:123.64},{&quot;2026-07-12&quot;:123.6},{&quot;2026-07-13&quot;:123.58},{&quot;2026-07-14&quot;:123.35},{&quot;2026-07-15&quot;:122.86},{&quot;2026-07-16&quot;:122.86},{&quot;2026-07-17&quot;:122.86},{&quot;2026-07-18&quot;:122.86},{&quot;2026-07-19&quot;:122.86},{&quot;2026-07-20&quot;:122.86},{&quot;2026-07-21&quot;:122.86},{&quot;2026-07-22&quot;:122.86},{&quot;2026-07-23&quot;:122.86},{&quot;2026-07-24&quot;:121.95},{&quot;2026-07-25&quot;:121.95},{&quot;2026-07-26&quot;:121.95},{&quot;2026-07-27&quot;:121.51},{&quot;2026-07-28&quot;:121.51},{&quot;2026-07-29&quot;:121.55},{&quot;2026-07-30&quot;:120.95},{&quot;2026-07-31&quot;:120.39},{&quot;2026-08-01&quot;:120.08},{&quot;2026-08-02&quot;:119.68},{&quot;2026-08-03&quot;:119.68},{&quot;2026-08-04&quot;:119.68},{&quot;2026-08-05&quot;:119.13},{&quot;2026-08-07&quot;:119.13},{&quot;2026-08-08&quot;:119.13},{&quot;2026-08-09&quot;:120.12},{&quot;2026-08-10&quot;:120.12},{&quot;2026-08-11&quot;:120.12},{&quot;2026-08-12&quot;:120.0},{&quot;2026-08-13&quot;:120.04},{&quot;2026-08-14&quot;:119.86},{&quot;2026-08-15&quot;:119.86},{&quot;2026-08-16&quot;:120.14},{&quot;2026-08-17&quot;:120.14},{&quot;2026-08-18&quot;:121.77},{&quot;2026-08-19&quot;:121.94},{&quot;2026-08-20&quot;:119.92},{&quot;2026-08-21&quot;:120.45},{&quot;2026-08-22&quot;:119.88},{&quot;2026-08-23&quot;:119.53},{&quot;2026-08-24&quot;:119.53},{&quot;2026-08-25&quot;:120.13},{&quot;2026-08-26&quot;:120.13},{&quot;2026-08-27&quot;:120.13},{&quot;2026-08-28&quot;:119.97},{&quot;2026-08-29&quot;:119.97},{&quot;2026-08-30&quot;:120.89},{&quot;2026-08-31&quot;:121.1},{&quot;2026-09-01&quot;:120.09},{&quot;2026-09-02&quot;:120.09},{&quot;2026-09-03&quot;:120.76},{&quot;2026-09-04&quot;:119.93},{&quot;2026-09-05&quot;:120.35},{&quot;2026-09-06&quot;:120.79},{&quot;2026-09-07&quot;:121.44},{&quot;2026-09-08&quot;:121.13},{&quot;2026-09-09&quot;:121.7},{&quot;2026-09-10&quot;:121.7},{&quot;2026-09-11&quot;:121.7}]}"
        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="74370"
  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-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">
            The One Ring
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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">
            $122.01
          </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="The One Ring" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/5/d5806e68-1054-458e-866d-1f2470f682b2.jpg?1783916239" />

        <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">
            The One Ring
        </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 Artifact</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="The One Ring" src="https://cards.scryfall.io/large/front/d/5/d5806e68-1054-458e-866d-1f2470f682b2.jpg?1783916239" />
    </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">
                $122.01
              </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">
                $137.67
              </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">$85.00</span>
              <span class="text-xs text-grey-text">Credit: $110.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;:124.82},{&quot;2026-06-13&quot;:124.54},{&quot;2026-06-14&quot;:124.54},{&quot;2026-06-15&quot;:124.54},{&quot;2026-06-16&quot;:123.31},{&quot;2026-06-17&quot;:123.31},{&quot;2026-06-18&quot;:123.31},{&quot;2026-06-19&quot;:123.52},{&quot;2026-06-20&quot;:123.98},{&quot;2026-06-21&quot;:123.98},{&quot;2026-06-22&quot;:124.46},{&quot;2026-06-23&quot;:124.46},{&quot;2026-06-24&quot;:123.98},{&quot;2026-06-25&quot;:123.98},{&quot;2026-06-26&quot;:124.46},{&quot;2026-06-27&quot;:124.94},{&quot;2026-06-28&quot;:125.05},{&quot;2026-06-29&quot;:125.05},{&quot;2026-06-30&quot;:124.01},{&quot;2026-07-01&quot;:124.01},{&quot;2026-07-02&quot;:124.55},{&quot;2026-07-03&quot;:124.55},{&quot;2026-07-04&quot;:124.55},{&quot;2026-07-05&quot;:125.14},{&quot;2026-07-06&quot;:125.14},{&quot;2026-07-07&quot;:126.57},{&quot;2026-07-08&quot;:126.57},{&quot;2026-07-09&quot;:126.57},{&quot;2026-07-10&quot;:126.57},{&quot;2026-07-11&quot;:128.81},{&quot;2026-07-12&quot;:130.29},{&quot;2026-07-13&quot;:129.41},{&quot;2026-07-14&quot;:130.2},{&quot;2026-07-15&quot;:130.2},{&quot;2026-07-16&quot;:130.2},{&quot;2026-07-17&quot;:130.2},{&quot;2026-07-18&quot;:130.2},{&quot;2026-07-19&quot;:131.12},{&quot;2026-07-20&quot;:131.12},{&quot;2026-07-21&quot;:131.12},{&quot;2026-07-23&quot;:132.2},{&quot;2026-07-24&quot;:132.2},{&quot;2026-07-25&quot;:132.51},{&quot;2026-07-26&quot;:132.51},{&quot;2026-07-27&quot;:132.51},{&quot;2026-07-28&quot;:132.95},{&quot;2026-07-29&quot;:132.56},{&quot;2026-07-30&quot;:132.56},{&quot;2026-07-31&quot;:132.56},{&quot;2026-08-01&quot;:132.56},{&quot;2026-08-02&quot;:132.56},{&quot;2026-08-03&quot;:133.27},{&quot;2026-08-04&quot;:133.27},{&quot;2026-08-05&quot;:132.48},{&quot;2026-08-07&quot;:131.27},{&quot;2026-08-08&quot;:131.27},{&quot;2026-08-09&quot;:131.11},{&quot;2026-08-10&quot;:131.79},{&quot;2026-08-11&quot;:131.79},{&quot;2026-08-12&quot;:131.79},{&quot;2026-08-13&quot;:131.79},{&quot;2026-08-14&quot;:133.14},{&quot;2026-08-15&quot;:133.14},{&quot;2026-08-16&quot;:133.5},{&quot;2026-08-17&quot;:133.86},{&quot;2026-08-18&quot;:134.21},{&quot;2026-08-19&quot;:134.71},{&quot;2026-08-20&quot;:134.71},{&quot;2026-08-21&quot;:133.74},{&quot;2026-08-22&quot;:133.74},{&quot;2026-08-23&quot;:133.74},{&quot;2026-08-24&quot;:133.74},{&quot;2026-08-25&quot;:134.22},{&quot;2026-08-26&quot;:134.22},{&quot;2026-08-27&quot;:134.03},{&quot;2026-08-28&quot;:134.02},{&quot;2026-08-29&quot;:134.02},{&quot;2026-08-30&quot;:134.11},{&quot;2026-08-31&quot;:135.07},{&quot;2026-09-01&quot;:135.07},{&quot;2026-09-02&quot;:135.07},{&quot;2026-09-03&quot;:135.07},{&quot;2026-09-04&quot;:135.59},{&quot;2026-09-05&quot;:135.59},{&quot;2026-09-06&quot;:135.59},{&quot;2026-09-07&quot;:136.88},{&quot;2026-09-08&quot;:137.81},{&quot;2026-09-09&quot;:137.68},{&quot;2026-09-10&quot;:137.84},{&quot;2026-09-11&quot;:137.67}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:104.98},{&quot;2026-06-13&quot;:104.98},{&quot;2026-06-14&quot;:104.71},{&quot;2026-06-15&quot;:106.73},{&quot;2026-06-16&quot;:108.78},{&quot;2026-06-17&quot;:108.31},{&quot;2026-06-18&quot;:107.08},{&quot;2026-06-19&quot;:106.26},{&quot;2026-06-20&quot;:105.23},{&quot;2026-06-21&quot;:105.71},{&quot;2026-06-22&quot;:105.67},{&quot;2026-06-23&quot;:103.1},{&quot;2026-06-24&quot;:103.04},{&quot;2026-06-25&quot;:102.53},{&quot;2026-06-26&quot;:100.89},{&quot;2026-06-27&quot;:100.62},{&quot;2026-06-28&quot;:101.52},{&quot;2026-06-29&quot;:101.67},{&quot;2026-06-30&quot;:102.47},{&quot;2026-07-01&quot;:104.87},{&quot;2026-07-02&quot;:104.44},{&quot;2026-07-03&quot;:102.74},{&quot;2026-07-04&quot;:103.93},{&quot;2026-07-05&quot;:105.42},{&quot;2026-07-06&quot;:104.74},{&quot;2026-07-07&quot;:105.32},{&quot;2026-07-08&quot;:105.39},{&quot;2026-07-09&quot;:106.41},{&quot;2026-07-10&quot;:103.7},{&quot;2026-07-11&quot;:104.3},{&quot;2026-07-12&quot;:103.22},{&quot;2026-07-13&quot;:100.29},{&quot;2026-07-14&quot;:99.89},{&quot;2026-07-15&quot;:98.86},{&quot;2026-07-16&quot;:100.31},{&quot;2026-07-17&quot;:101.85},{&quot;2026-07-18&quot;:104.97},{&quot;2026-07-19&quot;:105.29},{&quot;2026-07-20&quot;:105.96},{&quot;2026-07-21&quot;:106.16},{&quot;2026-07-23&quot;:103.83},{&quot;2026-07-24&quot;:103.99},{&quot;2026-07-25&quot;:104.44},{&quot;2026-07-26&quot;:104.35},{&quot;2026-07-27&quot;:102.95},{&quot;2026-07-28&quot;:103.11},{&quot;2026-07-29&quot;:103.26},{&quot;2026-07-30&quot;:105.42},{&quot;2026-07-31&quot;:106.21},{&quot;2026-08-01&quot;:106.86},{&quot;2026-08-02&quot;:106.69},{&quot;2026-08-03&quot;:105.88},{&quot;2026-08-04&quot;:105.18},{&quot;2026-08-05&quot;:105.94},{&quot;2026-08-07&quot;:104.22},{&quot;2026-08-08&quot;:104.47},{&quot;2026-08-09&quot;:104.49},{&quot;2026-08-10&quot;:104.75},{&quot;2026-08-11&quot;:106.29},{&quot;2026-08-12&quot;:106.01},{&quot;2026-08-13&quot;:106.97},{&quot;2026-08-14&quot;:107.21},{&quot;2026-08-15&quot;:107.55},{&quot;2026-08-16&quot;:106.45},{&quot;2026-08-17&quot;:109.46},{&quot;2026-08-18&quot;:111.29},{&quot;2026-08-19&quot;:112.47},{&quot;2026-08-20&quot;:112.47},{&quot;2026-08-21&quot;:112.85},{&quot;2026-08-22&quot;:112.92},{&quot;2026-08-23&quot;:113.72},{&quot;2026-08-24&quot;:115.23},{&quot;2026-08-25&quot;:115.88},{&quot;2026-08-26&quot;:115.49},{&quot;2026-08-27&quot;:115.07},{&quot;2026-08-28&quot;:112.11},{&quot;2026-08-29&quot;:112.11},{&quot;2026-08-30&quot;:116.28},{&quot;2026-08-31&quot;:116.88},{&quot;2026-09-01&quot;:118.99},{&quot;2026-09-02&quot;:120.96},{&quot;2026-09-03&quot;:121.86},{&quot;2026-09-04&quot;:122.01},{&quot;2026-09-05&quot;:121.95},{&quot;2026-09-06&quot;:122.7},{&quot;2026-09-07&quot;:122.03},{&quot;2026-09-08&quot;:122.69},{&quot;2026-09-09&quot;:121.91},{&quot;2026-09-10&quot;:121.53},{&quot;2026-09-11&quot;:122.01}]}"
        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="74985"
  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-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">
            The One Ring
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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="px-1.5 py-0.5 text-xs rounded-full bg-accent-50 text-badge-text">
              ↑
              6%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $115.42
          </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="The One Ring" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/2/126ea71a-9a64-4d1e-a8ca-1efce3b8346f.jpg?1783916146" />

        <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">
            The One Ring
        </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 Artifact</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="The One Ring" src="https://cards.scryfall.io/large/front/1/2/126ea71a-9a64-4d1e-a8ca-1efce3b8346f.jpg?1783916146" />
    </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">
                $105.28
              </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">
                $115.42
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$85.00</span>
              <span class="text-xs text-grey-text">Credit: $110.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;:92.57},{&quot;2026-06-13&quot;:92.41},{&quot;2026-06-14&quot;:93.16},{&quot;2026-06-15&quot;:93.31},{&quot;2026-06-16&quot;:93.12},{&quot;2026-06-17&quot;:91.8},{&quot;2026-06-18&quot;:90.94},{&quot;2026-06-19&quot;:91.78},{&quot;2026-06-20&quot;:91.85},{&quot;2026-06-21&quot;:92.57},{&quot;2026-06-22&quot;:91.97},{&quot;2026-06-23&quot;:91.89},{&quot;2026-06-24&quot;:91.81},{&quot;2026-06-25&quot;:91.94},{&quot;2026-06-26&quot;:91.66},{&quot;2026-06-27&quot;:91.24},{&quot;2026-06-28&quot;:91.69},{&quot;2026-06-29&quot;:92.25},{&quot;2026-06-30&quot;:93.63},{&quot;2026-07-01&quot;:94.31},{&quot;2026-07-02&quot;:94.26},{&quot;2026-07-03&quot;:93.05},{&quot;2026-07-04&quot;:93.8},{&quot;2026-07-05&quot;:94.01},{&quot;2026-07-06&quot;:94.15},{&quot;2026-07-07&quot;:94.09},{&quot;2026-07-08&quot;:94.43},{&quot;2026-07-09&quot;:94.69},{&quot;2026-07-10&quot;:93.81},{&quot;2026-07-11&quot;:94.04},{&quot;2026-07-12&quot;:93.58},{&quot;2026-07-13&quot;:93.36},{&quot;2026-07-14&quot;:91.71},{&quot;2026-07-15&quot;:91.13},{&quot;2026-07-16&quot;:91.16},{&quot;2026-07-17&quot;:91.61},{&quot;2026-07-18&quot;:91.94},{&quot;2026-07-19&quot;:93.33},{&quot;2026-07-20&quot;:93.04},{&quot;2026-07-21&quot;:93.12},{&quot;2026-07-23&quot;:92.69},{&quot;2026-07-24&quot;:92.79},{&quot;2026-07-25&quot;:92.79},{&quot;2026-07-26&quot;:91.95},{&quot;2026-07-27&quot;:91.92},{&quot;2026-07-28&quot;:92.37},{&quot;2026-07-29&quot;:92.65},{&quot;2026-07-30&quot;:93.45},{&quot;2026-07-31&quot;:94.99},{&quot;2026-08-01&quot;:94.88},{&quot;2026-08-02&quot;:94.03},{&quot;2026-08-03&quot;:94.88},{&quot;2026-08-04&quot;:94.89},{&quot;2026-08-05&quot;:94.94},{&quot;2026-08-07&quot;:96.31},{&quot;2026-08-08&quot;:95.82},{&quot;2026-08-09&quot;:95.06},{&quot;2026-08-10&quot;:96.12},{&quot;2026-08-11&quot;:95.21},{&quot;2026-08-12&quot;:94.99},{&quot;2026-08-13&quot;:94.85},{&quot;2026-08-14&quot;:95.23},{&quot;2026-08-15&quot;:97.88},{&quot;2026-08-16&quot;:99.84},{&quot;2026-08-17&quot;:102.41},{&quot;2026-08-18&quot;:103.38},{&quot;2026-08-19&quot;:104.49},{&quot;2026-08-20&quot;:104.49},{&quot;2026-08-21&quot;:104.12},{&quot;2026-08-22&quot;:104.2},{&quot;2026-08-23&quot;:103.39},{&quot;2026-08-24&quot;:104.45},{&quot;2026-08-25&quot;:104.39},{&quot;2026-08-26&quot;:103.95},{&quot;2026-08-27&quot;:105.74},{&quot;2026-08-28&quot;:105.7},{&quot;2026-08-29&quot;:105.7},{&quot;2026-08-30&quot;:107.7},{&quot;2026-08-31&quot;:107.08},{&quot;2026-09-01&quot;:106.54},{&quot;2026-09-02&quot;:105.13},{&quot;2026-09-03&quot;:105.53},{&quot;2026-09-04&quot;:107.72},{&quot;2026-09-05&quot;:109.0},{&quot;2026-09-06&quot;:109.11},{&quot;2026-09-07&quot;:112.14},{&quot;2026-09-08&quot;:111.61},{&quot;2026-09-09&quot;:113.14},{&quot;2026-09-10&quot;:113.95},{&quot;2026-09-11&quot;:115.42}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:88.32},{&quot;2026-06-13&quot;:88.38},{&quot;2026-06-14&quot;:88.46},{&quot;2026-06-15&quot;:88.97},{&quot;2026-06-16&quot;:89.13},{&quot;2026-06-17&quot;:88.95},{&quot;2026-06-18&quot;:89.11},{&quot;2026-06-19&quot;:91.09},{&quot;2026-06-20&quot;:91.63},{&quot;2026-06-21&quot;:91.67},{&quot;2026-06-22&quot;:91.61},{&quot;2026-06-23&quot;:91.64},{&quot;2026-06-24&quot;:91.24},{&quot;2026-06-25&quot;:91.24},{&quot;2026-06-26&quot;:91.36},{&quot;2026-06-27&quot;:91.43},{&quot;2026-06-28&quot;:91.43},{&quot;2026-06-29&quot;:91.3},{&quot;2026-06-30&quot;:91.37},{&quot;2026-07-01&quot;:91.13},{&quot;2026-07-02&quot;:89.85},{&quot;2026-07-03&quot;:89.96},{&quot;2026-07-04&quot;:89.08},{&quot;2026-07-05&quot;:89.83},{&quot;2026-07-06&quot;:89.41},{&quot;2026-07-07&quot;:89.48},{&quot;2026-07-08&quot;:89.81},{&quot;2026-07-09&quot;:90.29},{&quot;2026-07-10&quot;:90.29},{&quot;2026-07-11&quot;:90.29},{&quot;2026-07-12&quot;:90.29},{&quot;2026-07-13&quot;:90.18},{&quot;2026-07-14&quot;:90.78},{&quot;2026-07-15&quot;:91.14},{&quot;2026-07-16&quot;:91.14},{&quot;2026-07-17&quot;:90.72},{&quot;2026-07-18&quot;:90.72},{&quot;2026-07-19&quot;:90.43},{&quot;2026-07-20&quot;:90.43},{&quot;2026-07-21&quot;:90.25},{&quot;2026-07-23&quot;:89.74},{&quot;2026-07-24&quot;:89.78},{&quot;2026-07-25&quot;:89.76},{&quot;2026-07-26&quot;:89.87},{&quot;2026-07-27&quot;:89.44},{&quot;2026-07-28&quot;:88.96},{&quot;2026-07-29&quot;:88.93},{&quot;2026-07-30&quot;:88.93},{&quot;2026-07-31&quot;:89.55},{&quot;2026-08-01&quot;:89.81},{&quot;2026-08-02&quot;:89.81},{&quot;2026-08-03&quot;:90.58},{&quot;2026-08-04&quot;:95.31},{&quot;2026-08-05&quot;:95.99},{&quot;2026-08-07&quot;:94.81},{&quot;2026-08-08&quot;:94.79},{&quot;2026-08-09&quot;:95.01},{&quot;2026-08-10&quot;:95.49},{&quot;2026-08-11&quot;:95.85},{&quot;2026-08-12&quot;:95.85},{&quot;2026-08-13&quot;:96.74},{&quot;2026-08-14&quot;:97.0},{&quot;2026-08-15&quot;:97.93},{&quot;2026-08-16&quot;:93.53},{&quot;2026-08-17&quot;:93.81},{&quot;2026-08-18&quot;:95.36},{&quot;2026-08-19&quot;:95.88},{&quot;2026-08-20&quot;:95.88},{&quot;2026-08-21&quot;:97.68},{&quot;2026-08-22&quot;:97.89},{&quot;2026-08-23&quot;:97.89},{&quot;2026-08-24&quot;:98.3},{&quot;2026-08-25&quot;:98.39},{&quot;2026-08-26&quot;:97.79},{&quot;2026-08-27&quot;:98.02},{&quot;2026-08-28&quot;:98.13},{&quot;2026-08-29&quot;:98.13},{&quot;2026-08-30&quot;:98.78},{&quot;2026-08-31&quot;:98.99},{&quot;2026-09-01&quot;:99.35},{&quot;2026-09-02&quot;:100.17},{&quot;2026-09-03&quot;:100.17},{&quot;2026-09-04&quot;:100.08},{&quot;2026-09-05&quot;:100.6},{&quot;2026-09-06&quot;:100.94},{&quot;2026-09-07&quot;:102.8},{&quot;2026-09-08&quot;:103.35},{&quot;2026-09-09&quot;:104.79},{&quot;2026-09-10&quot;:105.33},{&quot;2026-09-11&quot;:105.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="97947"
  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-fic 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">
            Lulu, Stern Guardian
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Human 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="text-sm font-medium text-nine-white">
            $107.89
          </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="Lulu, Stern Guardian" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/9/9/99cb1ba3-e16b-414d-8682-fb3b2f350ea2.jpg?1782684322" />

        <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">
            Lulu, Stern Guardian
        </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 Wizard</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="Lulu, Stern Guardian" src="https://cards.scryfall.io/large/front/9/9/99cb1ba3-e16b-414d-8682-fb3b2f350ea2.jpg?1782684322" />
    </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">
                $107.89
              </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">$75.00</span>
              <span class="text-xs text-grey-text">Credit: $97.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-11&quot;:188.88},{&quot;2026-06-12&quot;:190.29},{&quot;2026-06-13&quot;:184.84},{&quot;2026-06-14&quot;:184.84},{&quot;2026-06-15&quot;:185.06},{&quot;2026-06-16&quot;:185.06},{&quot;2026-06-17&quot;:185.06},{&quot;2026-06-18&quot;:183.9},{&quot;2026-06-19&quot;:177.8},{&quot;2026-06-20&quot;:173.85},{&quot;2026-06-21&quot;:171.57},{&quot;2026-06-22&quot;:171.57},{&quot;2026-06-23&quot;:170.81},{&quot;2026-06-24&quot;:170.37},{&quot;2026-06-25&quot;:170.37},{&quot;2026-06-26&quot;:170.49},{&quot;2026-06-27&quot;:169.58},{&quot;2026-06-28&quot;:169.46},{&quot;2026-06-29&quot;:169.46},{&quot;2026-06-30&quot;:167.43},{&quot;2026-07-01&quot;:165.43},{&quot;2026-07-02&quot;:164.44},{&quot;2026-07-03&quot;:162.6},{&quot;2026-07-04&quot;:160.89},{&quot;2026-07-05&quot;:160.89},{&quot;2026-07-06&quot;:160.89},{&quot;2026-07-07&quot;:162.4},{&quot;2026-07-08&quot;:162.4},{&quot;2026-07-09&quot;:160.06},{&quot;2026-07-10&quot;:162.99},{&quot;2026-07-11&quot;:162.07},{&quot;2026-07-12&quot;:161.48},{&quot;2026-07-13&quot;:157.33},{&quot;2026-07-14&quot;:157.33},{&quot;2026-07-15&quot;:156.59},{&quot;2026-07-16&quot;:155.79},{&quot;2026-07-17&quot;:154.39},{&quot;2026-07-18&quot;:154.39},{&quot;2026-07-19&quot;:154.39},{&quot;2026-07-20&quot;:152.61},{&quot;2026-07-21&quot;:151.72},{&quot;2026-07-23&quot;:150.0},{&quot;2026-07-25&quot;:145.09},{&quot;2026-07-26&quot;:142.24},{&quot;2026-07-27&quot;:140.24},{&quot;2026-07-28&quot;:137.5},{&quot;2026-07-29&quot;:134.61},{&quot;2026-07-30&quot;:130.38},{&quot;2026-07-31&quot;:127.64},{&quot;2026-08-01&quot;:122.79},{&quot;2026-08-02&quot;:120.09},{&quot;2026-08-03&quot;:119.56},{&quot;2026-08-04&quot;:119.38},{&quot;2026-08-05&quot;:117.29},{&quot;2026-08-07&quot;:117.1},{&quot;2026-08-08&quot;:117.68},{&quot;2026-08-09&quot;:117.83},{&quot;2026-08-10&quot;:117.83},{&quot;2026-08-11&quot;:117.79},{&quot;2026-08-12&quot;:117.86},{&quot;2026-08-13&quot;:117.68},{&quot;2026-08-14&quot;:117.85},{&quot;2026-08-15&quot;:118.3},{&quot;2026-08-16&quot;:117.96},{&quot;2026-08-17&quot;:118.39},{&quot;2026-08-18&quot;:118.39},{&quot;2026-08-19&quot;:118.39},{&quot;2026-08-20&quot;:118.39},{&quot;2026-08-21&quot;:119.02},{&quot;2026-08-22&quot;:118.01},{&quot;2026-08-23&quot;:116.45},{&quot;2026-08-24&quot;:115.66},{&quot;2026-08-25&quot;:115.66},{&quot;2026-08-26&quot;:113.08},{&quot;2026-08-27&quot;:113.08},{&quot;2026-08-28&quot;:112.2},{&quot;2026-08-29&quot;:112.2},{&quot;2026-08-30&quot;:111.03},{&quot;2026-08-31&quot;:109.79},{&quot;2026-09-01&quot;:109.79},{&quot;2026-09-02&quot;:110.03},{&quot;2026-09-03&quot;:110.03},{&quot;2026-09-04&quot;:107.25},{&quot;2026-09-05&quot;:107.59},{&quot;2026-09-06&quot;:107.59},{&quot;2026-09-07&quot;:107.39},{&quot;2026-09-08&quot;:106.87},{&quot;2026-09-09&quot;:107.59},{&quot;2026-09-10&quot;:107.89},{&quot;2026-09-11&quot;:107.89}],&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="94867"
  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-fca 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">
            Rhystic Study
        </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">
            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">
              ↓
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $107.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="Rhystic Study" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/d/cd212de7-25f6-4b3b-a35b-df7d87fe205b.jpg?1783906385" />

        <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">
            Rhystic Study
        </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-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="Rhystic Study" src="https://cards.scryfall.io/large/front/c/d/cd212de7-25f6-4b3b-a35b-df7d87fe205b.jpg?1783906385" />
    </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">
                $107.10
              </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">
                $425.27
              </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">$80.00</span>
              <span class="text-xs text-grey-text">Credit: $104.00</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;:391.74},{&quot;2026-06-14&quot;:391.45},{&quot;2026-06-15&quot;:391.21},{&quot;2026-06-16&quot;:391.47},{&quot;2026-06-17&quot;:391.47},{&quot;2026-06-18&quot;:391.47},{&quot;2026-06-19&quot;:391.41},{&quot;2026-06-20&quot;:391.41},{&quot;2026-06-21&quot;:391.34},{&quot;2026-06-22&quot;:392.1},{&quot;2026-06-23&quot;:392.24},{&quot;2026-06-24&quot;:392.6},{&quot;2026-06-25&quot;:392.6},{&quot;2026-06-26&quot;:392.6},{&quot;2026-06-27&quot;:392.6},{&quot;2026-06-28&quot;:392.6},{&quot;2026-06-29&quot;:392.6},{&quot;2026-06-30&quot;:393.65},{&quot;2026-07-01&quot;:393.65},{&quot;2026-07-02&quot;:393.65},{&quot;2026-07-03&quot;:393.65},{&quot;2026-07-04&quot;:393.65},{&quot;2026-07-05&quot;:393.65},{&quot;2026-07-06&quot;:393.65},{&quot;2026-07-07&quot;:393.65},{&quot;2026-07-08&quot;:393.65},{&quot;2026-07-09&quot;:393.15},{&quot;2026-07-10&quot;:393.15},{&quot;2026-07-11&quot;:394.07},{&quot;2026-07-12&quot;:394.38},{&quot;2026-07-13&quot;:395.04},{&quot;2026-07-14&quot;:395.76},{&quot;2026-07-15&quot;:396.48},{&quot;2026-07-16&quot;:396.48},{&quot;2026-07-17&quot;:397.13},{&quot;2026-07-18&quot;:397.13},{&quot;2026-07-19&quot;:396.38},{&quot;2026-07-20&quot;:396.38},{&quot;2026-07-21&quot;:396.38},{&quot;2026-07-22&quot;:395.44},{&quot;2026-07-23&quot;:394.29},{&quot;2026-07-24&quot;:394.29},{&quot;2026-07-25&quot;:393.35},{&quot;2026-07-26&quot;:393.35},{&quot;2026-07-27&quot;:393.35},{&quot;2026-07-28&quot;:393.35},{&quot;2026-07-29&quot;:393.35},{&quot;2026-07-30&quot;:394.29},{&quot;2026-07-31&quot;:394.29},{&quot;2026-08-01&quot;:394.29},{&quot;2026-08-02&quot;:395.59},{&quot;2026-08-03&quot;:395.59},{&quot;2026-08-04&quot;:395.59},{&quot;2026-08-05&quot;:395.59},{&quot;2026-08-07&quot;:396.17},{&quot;2026-08-08&quot;:396.75},{&quot;2026-08-09&quot;:396.75},{&quot;2026-08-10&quot;:396.75},{&quot;2026-08-11&quot;:396.75},{&quot;2026-08-12&quot;:396.75},{&quot;2026-08-13&quot;:397.13},{&quot;2026-08-14&quot;:397.13},{&quot;2026-08-15&quot;:399.15},{&quot;2026-08-16&quot;:399.15},{&quot;2026-08-17&quot;:399.15},{&quot;2026-08-18&quot;:399.15},{&quot;2026-08-19&quot;:399.15},{&quot;2026-08-20&quot;:399.15},{&quot;2026-08-21&quot;:399.15},{&quot;2026-08-22&quot;:403.29},{&quot;2026-08-23&quot;:405.95},{&quot;2026-08-24&quot;:405.95},{&quot;2026-08-25&quot;:409.29},{&quot;2026-08-26&quot;:409.29},{&quot;2026-08-27&quot;:409.29},{&quot;2026-08-28&quot;:409.29},{&quot;2026-08-29&quot;:409.29},{&quot;2026-08-30&quot;:414.92},{&quot;2026-08-31&quot;:414.92},{&quot;2026-09-01&quot;:416.95},{&quot;2026-09-02&quot;:416.95},{&quot;2026-09-03&quot;:415.01},{&quot;2026-09-04&quot;:416.78},{&quot;2026-09-05&quot;:416.78},{&quot;2026-09-06&quot;:417.93},{&quot;2026-09-07&quot;:417.93},{&quot;2026-09-08&quot;:417.93},{&quot;2026-09-09&quot;:419.89},{&quot;2026-09-10&quot;:421.95},{&quot;2026-09-11&quot;:425.27}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:93.57},{&quot;2026-06-14&quot;:93.57},{&quot;2026-06-15&quot;:93.74},{&quot;2026-06-16&quot;:92.8},{&quot;2026-06-17&quot;:94.42},{&quot;2026-06-18&quot;:94.36},{&quot;2026-06-19&quot;:96.76},{&quot;2026-06-20&quot;:104.78},{&quot;2026-06-21&quot;:96.53},{&quot;2026-06-22&quot;:96.53},{&quot;2026-06-23&quot;:97.25},{&quot;2026-06-24&quot;:96.71},{&quot;2026-06-25&quot;:97.42},{&quot;2026-06-26&quot;:97.42},{&quot;2026-06-27&quot;:97.11},{&quot;2026-06-28&quot;:97.11},{&quot;2026-06-29&quot;:99.08},{&quot;2026-06-30&quot;:99.58},{&quot;2026-07-01&quot;:99.33},{&quot;2026-07-02&quot;:99.93},{&quot;2026-07-03&quot;:101.04},{&quot;2026-07-04&quot;:100.54},{&quot;2026-07-05&quot;:100.66},{&quot;2026-07-06&quot;:101.31},{&quot;2026-07-07&quot;:101.58},{&quot;2026-07-08&quot;:103.06},{&quot;2026-07-09&quot;:103.06},{&quot;2026-07-10&quot;:102.61},{&quot;2026-07-11&quot;:102.74},{&quot;2026-07-12&quot;:103.65},{&quot;2026-07-13&quot;:103.89},{&quot;2026-07-14&quot;:103.29},{&quot;2026-07-15&quot;:103.65},{&quot;2026-07-16&quot;:103.77},{&quot;2026-07-17&quot;:104.46},{&quot;2026-07-18&quot;:105.03},{&quot;2026-07-19&quot;:104.36},{&quot;2026-07-20&quot;:104.2},{&quot;2026-07-21&quot;:103.71},{&quot;2026-07-22&quot;:104.05},{&quot;2026-07-23&quot;:105.35},{&quot;2026-07-24&quot;:104.65},{&quot;2026-07-25&quot;:105.37},{&quot;2026-07-26&quot;:106.17},{&quot;2026-07-27&quot;:105.44},{&quot;2026-07-28&quot;:106.12},{&quot;2026-07-29&quot;:108.03},{&quot;2026-07-30&quot;:108.03},{&quot;2026-07-31&quot;:109.31},{&quot;2026-08-01&quot;:109.31},{&quot;2026-08-02&quot;:106.8},{&quot;2026-08-03&quot;:105.18},{&quot;2026-08-04&quot;:105.18},{&quot;2026-08-05&quot;:105.86},{&quot;2026-08-07&quot;:105.18},{&quot;2026-08-08&quot;:105.18},{&quot;2026-08-09&quot;:105.92},{&quot;2026-08-10&quot;:106.56},{&quot;2026-08-11&quot;:106.38},{&quot;2026-08-12&quot;:106.38},{&quot;2026-08-13&quot;:106.38},{&quot;2026-08-14&quot;:105.39},{&quot;2026-08-15&quot;:104.72},{&quot;2026-08-16&quot;:104.68},{&quot;2026-08-17&quot;:105.23},{&quot;2026-08-18&quot;:108.11},{&quot;2026-08-19&quot;:109.44},{&quot;2026-08-20&quot;:109.72},{&quot;2026-08-21&quot;:110.32},{&quot;2026-08-22&quot;:109.99},{&quot;2026-08-23&quot;:110.31},{&quot;2026-08-24&quot;:110.48},{&quot;2026-08-25&quot;:110.89},{&quot;2026-08-26&quot;:111.58},{&quot;2026-08-27&quot;:111.76},{&quot;2026-08-28&quot;:111.96},{&quot;2026-08-29&quot;:111.96},{&quot;2026-08-30&quot;:112.71},{&quot;2026-08-31&quot;:112.82},{&quot;2026-09-01&quot;:111.03},{&quot;2026-09-02&quot;:111.03},{&quot;2026-09-03&quot;:111.03},{&quot;2026-09-04&quot;:110.27},{&quot;2026-09-05&quot;:110.12},{&quot;2026-09-06&quot;:109.7},{&quot;2026-09-07&quot;:109.82},{&quot;2026-09-08&quot;:109.12},{&quot;2026-09-09&quot;:108.49},{&quot;2026-09-10&quot;:107.35},{&quot;2026-09-11&quot;:107.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="97215"
  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-spm 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">
            The Soul Stone
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Artifact — Infinity Stone
      </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">
            $98.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="The Soul Stone" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/9/1982f910-a9bd-4e94-a187-84381b22aacc.jpg?1783905342" />

        <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">
            The Soul Stone
        </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 Artifact — Infinity Stone</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="The Soul Stone" src="https://cards.scryfall.io/large/front/1/9/1982f910-a9bd-4e94-a187-84381b22aacc.jpg?1783905342" />
    </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">
                $98.21
              </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">
                $129.01
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  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">$65.00</span>
              <span class="text-xs text-grey-text">Credit: $84.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;:102.39},{&quot;2026-06-13&quot;:102.79},{&quot;2026-06-14&quot;:102.56},{&quot;2026-06-15&quot;:102.5},{&quot;2026-06-16&quot;:102.5},{&quot;2026-06-17&quot;:103.23},{&quot;2026-06-18&quot;:104.61},{&quot;2026-06-19&quot;:105.78},{&quot;2026-06-20&quot;:106.23},{&quot;2026-06-21&quot;:106.83},{&quot;2026-06-22&quot;:108.65},{&quot;2026-06-23&quot;:109.37},{&quot;2026-06-24&quot;:109.35},{&quot;2026-06-25&quot;:111.15},{&quot;2026-06-26&quot;:113.54},{&quot;2026-06-27&quot;:112.13},{&quot;2026-06-28&quot;:113.16},{&quot;2026-06-29&quot;:117.2},{&quot;2026-06-30&quot;:117.85},{&quot;2026-07-01&quot;:124.18},{&quot;2026-07-02&quot;:125.85},{&quot;2026-07-03&quot;:128.96},{&quot;2026-07-04&quot;:132.82},{&quot;2026-07-05&quot;:137.07},{&quot;2026-07-06&quot;:143.77},{&quot;2026-07-07&quot;:143.77},{&quot;2026-07-08&quot;:144.32},{&quot;2026-07-09&quot;:144.8},{&quot;2026-07-10&quot;:153.79},{&quot;2026-07-11&quot;:163.9},{&quot;2026-07-12&quot;:165.03},{&quot;2026-07-13&quot;:166.7},{&quot;2026-07-14&quot;:165.97},{&quot;2026-07-15&quot;:165.81},{&quot;2026-07-16&quot;:164.4},{&quot;2026-07-17&quot;:164.81},{&quot;2026-07-18&quot;:163.05},{&quot;2026-07-19&quot;:163.05},{&quot;2026-07-20&quot;:162.15},{&quot;2026-07-21&quot;:160.8},{&quot;2026-07-23&quot;:158.29},{&quot;2026-07-24&quot;:159.37},{&quot;2026-07-25&quot;:159.32},{&quot;2026-07-26&quot;:160.79},{&quot;2026-07-27&quot;:161.32},{&quot;2026-07-28&quot;:160.68},{&quot;2026-07-29&quot;:160.3},{&quot;2026-07-30&quot;:160.3},{&quot;2026-07-31&quot;:158.88},{&quot;2026-08-01&quot;:158.88},{&quot;2026-08-02&quot;:158.48},{&quot;2026-08-03&quot;:158.51},{&quot;2026-08-04&quot;:158.13},{&quot;2026-08-05&quot;:157.69},{&quot;2026-08-07&quot;:157.55},{&quot;2026-08-08&quot;:157.19},{&quot;2026-08-09&quot;:157.19},{&quot;2026-08-10&quot;:157.19},{&quot;2026-08-11&quot;:156.75},{&quot;2026-08-12&quot;:156.16},{&quot;2026-08-13&quot;:152.4},{&quot;2026-08-14&quot;:150.43},{&quot;2026-08-15&quot;:149.78},{&quot;2026-08-16&quot;:149.58},{&quot;2026-08-17&quot;:148.28},{&quot;2026-08-18&quot;:147.56},{&quot;2026-08-19&quot;:146.8},{&quot;2026-08-20&quot;:146.8},{&quot;2026-08-21&quot;:146.23},{&quot;2026-08-22&quot;:145.67},{&quot;2026-08-23&quot;:145.47},{&quot;2026-08-24&quot;:143.73},{&quot;2026-08-25&quot;:141.39},{&quot;2026-08-26&quot;:138.36},{&quot;2026-08-27&quot;:140.18},{&quot;2026-08-28&quot;:139.86},{&quot;2026-08-29&quot;:139.86},{&quot;2026-08-30&quot;:137.82},{&quot;2026-08-31&quot;:137.31},{&quot;2026-09-01&quot;:136.01},{&quot;2026-09-02&quot;:136.01},{&quot;2026-09-03&quot;:134.69},{&quot;2026-09-04&quot;:134.69},{&quot;2026-09-05&quot;:134.69},{&quot;2026-09-06&quot;:134.69},{&quot;2026-09-07&quot;:133.69},{&quot;2026-09-08&quot;:130.73},{&quot;2026-09-09&quot;:129.89},{&quot;2026-09-10&quot;:129.36},{&quot;2026-09-11&quot;:129.01}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:85.56},{&quot;2026-06-13&quot;:85.27},{&quot;2026-06-14&quot;:85.15},{&quot;2026-06-15&quot;:86.21},{&quot;2026-06-16&quot;:88.72},{&quot;2026-06-17&quot;:87.77},{&quot;2026-06-18&quot;:87.39},{&quot;2026-06-19&quot;:86.58},{&quot;2026-06-20&quot;:86.46},{&quot;2026-06-21&quot;:87.55},{&quot;2026-06-22&quot;:89.31},{&quot;2026-06-23&quot;:89.61},{&quot;2026-06-24&quot;:88.12},{&quot;2026-06-25&quot;:88.46},{&quot;2026-06-26&quot;:88.58},{&quot;2026-06-27&quot;:92.7},{&quot;2026-06-28&quot;:94.57},{&quot;2026-06-29&quot;:93.5},{&quot;2026-06-30&quot;:93.96},{&quot;2026-07-01&quot;:99.45},{&quot;2026-07-02&quot;:94.3},{&quot;2026-07-03&quot;:95.93},{&quot;2026-07-04&quot;:97.75},{&quot;2026-07-05&quot;:98.77},{&quot;2026-07-06&quot;:102.85},{&quot;2026-07-07&quot;:104.12},{&quot;2026-07-08&quot;:103.46},{&quot;2026-07-09&quot;:108.92},{&quot;2026-07-10&quot;:108.67},{&quot;2026-07-11&quot;:113.39},{&quot;2026-07-12&quot;:115.62},{&quot;2026-07-13&quot;:118.04},{&quot;2026-07-14&quot;:118.13},{&quot;2026-07-15&quot;:117.46},{&quot;2026-07-16&quot;:117.54},{&quot;2026-07-17&quot;:113.9},{&quot;2026-07-18&quot;:113.19},{&quot;2026-07-19&quot;:115.56},{&quot;2026-07-20&quot;:116.05},{&quot;2026-07-21&quot;:120.32},{&quot;2026-07-23&quot;:121.3},{&quot;2026-07-24&quot;:121.57},{&quot;2026-07-25&quot;:122.94},{&quot;2026-07-26&quot;:122.06},{&quot;2026-07-27&quot;:123.97},{&quot;2026-07-28&quot;:120.5},{&quot;2026-07-29&quot;:121.14},{&quot;2026-07-30&quot;:118.63},{&quot;2026-07-31&quot;:116.38},{&quot;2026-08-01&quot;:114.71},{&quot;2026-08-02&quot;:114.07},{&quot;2026-08-03&quot;:116.82},{&quot;2026-08-04&quot;:116.69},{&quot;2026-08-05&quot;:118.92},{&quot;2026-08-07&quot;:115.87},{&quot;2026-08-08&quot;:109.78},{&quot;2026-08-09&quot;:108.64},{&quot;2026-08-10&quot;:105.56},{&quot;2026-08-11&quot;:103.63},{&quot;2026-08-12&quot;:103.81},{&quot;2026-08-13&quot;:103.72},{&quot;2026-08-14&quot;:103.09},{&quot;2026-08-15&quot;:101.86},{&quot;2026-08-16&quot;:100.28},{&quot;2026-08-17&quot;:100.23},{&quot;2026-08-18&quot;:99.94},{&quot;2026-08-19&quot;:100.58},{&quot;2026-08-20&quot;:100.58},{&quot;2026-08-21&quot;:100.8},{&quot;2026-08-22&quot;:101.48},{&quot;2026-08-23&quot;:100.9},{&quot;2026-08-24&quot;:102.68},{&quot;2026-08-25&quot;:101.99},{&quot;2026-08-26&quot;:101.97},{&quot;2026-08-27&quot;:102.2},{&quot;2026-08-28&quot;:100.05},{&quot;2026-08-29&quot;:100.05},{&quot;2026-08-30&quot;:99.84},{&quot;2026-08-31&quot;:101.29},{&quot;2026-09-01&quot;:99.7},{&quot;2026-09-02&quot;:99.65},{&quot;2026-09-03&quot;:100.3},{&quot;2026-09-04&quot;:99.53},{&quot;2026-09-05&quot;:100.92},{&quot;2026-09-06&quot;:101.54},{&quot;2026-09-07&quot;:102.03},{&quot;2026-09-08&quot;:99.81},{&quot;2026-09-09&quot;:99.39},{&quot;2026-09-10&quot;:99.83},{&quot;2026-09-11&quot;:98.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="97919"
  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">
            Choco, Seeker of Paradise
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Bird
      </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">
            $96.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="Choco, Seeker of Paradise" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/c/1ce688fa-1fdb-4acd-b9b0-bf7325a6b8e0.jpg?1782684301" />

        <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">
            Choco, Seeker of Paradise
        </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 — Bird</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-g'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></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="Choco, Seeker of Paradise" src="https://cards.scryfall.io/large/front/1/c/1ce688fa-1fdb-4acd-b9b0-bf7325a6b8e0.jpg?1782684301" />
    </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">
                $96.16
              </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">$44.00</span>
              <span class="text-xs text-grey-text">Credit: $57.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;:97.71},{&quot;2026-06-11&quot;:100.98},{&quot;2026-06-12&quot;:103.43},{&quot;2026-06-13&quot;:103.51},{&quot;2026-06-14&quot;:103.76},{&quot;2026-06-15&quot;:103.76},{&quot;2026-06-16&quot;:103.76},{&quot;2026-06-17&quot;:103.74},{&quot;2026-06-18&quot;:102.01},{&quot;2026-06-19&quot;:102.01},{&quot;2026-06-20&quot;:102.03},{&quot;2026-06-21&quot;:102.91},{&quot;2026-06-22&quot;:103.03},{&quot;2026-06-23&quot;:102.8},{&quot;2026-06-24&quot;:102.8},{&quot;2026-06-25&quot;:102.71},{&quot;2026-06-26&quot;:102.67},{&quot;2026-06-27&quot;:102.74},{&quot;2026-06-28&quot;:102.13},{&quot;2026-06-29&quot;:102.13},{&quot;2026-06-30&quot;:101.58},{&quot;2026-07-01&quot;:101.61},{&quot;2026-07-02&quot;:101.71},{&quot;2026-07-03&quot;:101.85},{&quot;2026-07-04&quot;:102.23},{&quot;2026-07-05&quot;:102.09},{&quot;2026-07-06&quot;:101.93},{&quot;2026-07-07&quot;:101.82},{&quot;2026-07-08&quot;:101.71},{&quot;2026-07-09&quot;:102.11},{&quot;2026-07-10&quot;:102.11},{&quot;2026-07-11&quot;:102.41},{&quot;2026-07-12&quot;:102.25},{&quot;2026-07-13&quot;:102.25},{&quot;2026-07-14&quot;:102.06},{&quot;2026-07-15&quot;:101.99},{&quot;2026-07-16&quot;:103.2},{&quot;2026-07-17&quot;:103.2},{&quot;2026-07-18&quot;:104.52},{&quot;2026-07-19&quot;:104.78},{&quot;2026-07-20&quot;:105.98},{&quot;2026-07-21&quot;:105.94},{&quot;2026-07-23&quot;:104.37},{&quot;2026-07-25&quot;:103.82},{&quot;2026-07-26&quot;:103.82},{&quot;2026-07-27&quot;:103.6},{&quot;2026-07-29&quot;:103.6},{&quot;2026-07-30&quot;:102.64},{&quot;2026-07-31&quot;:101.3},{&quot;2026-08-01&quot;:100.92},{&quot;2026-08-02&quot;:100.53},{&quot;2026-08-03&quot;:100.22},{&quot;2026-08-04&quot;:100.22},{&quot;2026-08-05&quot;:97.21},{&quot;2026-08-07&quot;:96.63},{&quot;2026-08-08&quot;:95.02},{&quot;2026-08-09&quot;:95.02},{&quot;2026-08-10&quot;:94.55},{&quot;2026-08-11&quot;:95.32},{&quot;2026-08-12&quot;:94.92},{&quot;2026-08-13&quot;:95.65},{&quot;2026-08-14&quot;:95.65},{&quot;2026-08-15&quot;:95.67},{&quot;2026-08-16&quot;:95.68},{&quot;2026-08-17&quot;:95.68},{&quot;2026-08-18&quot;:95.93},{&quot;2026-08-19&quot;:96.02},{&quot;2026-08-20&quot;:96.02},{&quot;2026-08-21&quot;:96.68},{&quot;2026-08-22&quot;:97.21},{&quot;2026-08-23&quot;:97.21},{&quot;2026-08-24&quot;:97.21},{&quot;2026-08-25&quot;:97.21},{&quot;2026-08-26&quot;:97.21},{&quot;2026-08-27&quot;:97.21},{&quot;2026-08-28&quot;:97.21},{&quot;2026-08-29&quot;:97.21},{&quot;2026-08-30&quot;:96.59},{&quot;2026-08-31&quot;:96.59},{&quot;2026-09-01&quot;:96.59},{&quot;2026-09-02&quot;:96.6},{&quot;2026-09-03&quot;:96.6},{&quot;2026-09-04&quot;:96.62},{&quot;2026-09-05&quot;:95.94},{&quot;2026-09-06&quot;:96.11},{&quot;2026-09-07&quot;:96.11},{&quot;2026-09-08&quot;:95.7},{&quot;2026-09-09&quot;:95.75},{&quot;2026-09-10&quot;:95.72},{&quot;2026-09-11&quot;:96.16}],&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="19260"
  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">
            Sheoldred, the Apocalypse
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Phyrexian Praetor
      </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">
            $95.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="Sheoldred, the Apocalypse" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/9/5/95ebbb6d-04f8-42ec-a1b7-6ca67994b8d3.jpg?1783921206" />

        <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">
            Sheoldred, the Apocalypse
        </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 — Phyrexian Praetor</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-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="Sheoldred, the Apocalypse" src="https://cards.scryfall.io/large/front/9/5/95ebbb6d-04f8-42ec-a1b7-6ca67994b8d3.jpg?1783921206" />
    </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">
                $77.68
              </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">
                $95.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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$70.00</span>
              <span class="text-xs text-grey-text">Credit: $91.00</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;:82.71},{&quot;2026-06-11&quot;:82.71},{&quot;2026-06-12&quot;:82.71},{&quot;2026-06-13&quot;:82.71},{&quot;2026-06-14&quot;:82.71},{&quot;2026-06-15&quot;:82.71},{&quot;2026-06-16&quot;:82.71},{&quot;2026-06-17&quot;:82.71},{&quot;2026-06-18&quot;:82.71},{&quot;2026-06-19&quot;:82.71},{&quot;2026-06-20&quot;:82.71},{&quot;2026-06-21&quot;:82.71},{&quot;2026-06-22&quot;:82.71},{&quot;2026-06-23&quot;:82.71},{&quot;2026-06-24&quot;:82.71},{&quot;2026-06-25&quot;:82.71},{&quot;2026-06-26&quot;:82.71},{&quot;2026-06-27&quot;:82.71},{&quot;2026-06-28&quot;:82.71},{&quot;2026-06-29&quot;:82.71},{&quot;2026-06-30&quot;:82.71},{&quot;2026-07-01&quot;:83.39},{&quot;2026-07-02&quot;:84.62},{&quot;2026-07-03&quot;:85.25},{&quot;2026-07-04&quot;:85.25},{&quot;2026-07-05&quot;:85.25},{&quot;2026-07-06&quot;:85.25},{&quot;2026-07-07&quot;:85.25},{&quot;2026-07-08&quot;:85.25},{&quot;2026-07-09&quot;:85.25},{&quot;2026-07-10&quot;:85.97},{&quot;2026-07-11&quot;:85.97},{&quot;2026-07-12&quot;:85.97},{&quot;2026-07-13&quot;:86.8},{&quot;2026-07-14&quot;:87.8},{&quot;2026-07-15&quot;:88.14},{&quot;2026-07-16&quot;:89.66},{&quot;2026-07-17&quot;:89.66},{&quot;2026-07-18&quot;:89.66},{&quot;2026-07-19&quot;:89.66},{&quot;2026-07-20&quot;:90.91},{&quot;2026-07-21&quot;:90.91},{&quot;2026-07-23&quot;:90.91},{&quot;2026-07-25&quot;:90.91},{&quot;2026-07-26&quot;:90.91},{&quot;2026-07-27&quot;:90.91},{&quot;2026-07-29&quot;:90.91},{&quot;2026-07-30&quot;:90.91},{&quot;2026-07-31&quot;:91.39},{&quot;2026-08-01&quot;:91.39},{&quot;2026-08-02&quot;:92.04},{&quot;2026-08-03&quot;:92.68},{&quot;2026-08-04&quot;:92.68},{&quot;2026-08-05&quot;:92.68},{&quot;2026-08-07&quot;:92.68},{&quot;2026-08-08&quot;:91.72},{&quot;2026-08-09&quot;:91.72},{&quot;2026-08-10&quot;:91.72},{&quot;2026-08-11&quot;:92.76},{&quot;2026-08-12&quot;:92.76},{&quot;2026-08-13&quot;:92.76},{&quot;2026-08-14&quot;:92.76},{&quot;2026-08-15&quot;:93.29},{&quot;2026-08-16&quot;:93.29},{&quot;2026-08-17&quot;:93.29},{&quot;2026-08-18&quot;:93.29},{&quot;2026-08-19&quot;:93.29},{&quot;2026-08-20&quot;:93.29},{&quot;2026-08-21&quot;:93.29},{&quot;2026-08-22&quot;:93.29},{&quot;2026-08-23&quot;:93.29},{&quot;2026-08-24&quot;:93.29},{&quot;2026-08-25&quot;:93.29},{&quot;2026-08-26&quot;:93.29},{&quot;2026-08-27&quot;:93.29},{&quot;2026-08-28&quot;:93.29},{&quot;2026-08-29&quot;:93.29},{&quot;2026-08-30&quot;:93.29},{&quot;2026-08-31&quot;:93.29},{&quot;2026-09-01&quot;:93.29},{&quot;2026-09-02&quot;:93.29},{&quot;2026-09-03&quot;:93.96},{&quot;2026-09-04&quot;:95.08},{&quot;2026-09-05&quot;:95.08},{&quot;2026-09-06&quot;:95.08},{&quot;2026-09-07&quot;:95.08},{&quot;2026-09-08&quot;:95.08},{&quot;2026-09-09&quot;:95.08},{&quot;2026-09-10&quot;:95.08},{&quot;2026-09-11&quot;:95.08}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:78.85},{&quot;2026-06-11&quot;:78.85},{&quot;2026-06-12&quot;:78.86},{&quot;2026-06-13&quot;:78.68},{&quot;2026-06-14&quot;:78.68},{&quot;2026-06-15&quot;:78.98},{&quot;2026-06-16&quot;:78.98},{&quot;2026-06-17&quot;:78.7},{&quot;2026-06-18&quot;:79.12},{&quot;2026-06-19&quot;:79.03},{&quot;2026-06-20&quot;:79.11},{&quot;2026-06-21&quot;:79.11},{&quot;2026-06-22&quot;:79.11},{&quot;2026-06-23&quot;:79.11},{&quot;2026-06-24&quot;:79.0},{&quot;2026-06-25&quot;:79.13},{&quot;2026-06-26&quot;:79.13},{&quot;2026-06-27&quot;:79.13},{&quot;2026-06-28&quot;:79.13},{&quot;2026-06-29&quot;:79.13},{&quot;2026-06-30&quot;:79.13},{&quot;2026-07-01&quot;:79.13},{&quot;2026-07-02&quot;:79.13},{&quot;2026-07-03&quot;:79.13},{&quot;2026-07-04&quot;:79.33},{&quot;2026-07-05&quot;:79.31},{&quot;2026-07-06&quot;:79.31},{&quot;2026-07-07&quot;:79.31},{&quot;2026-07-08&quot;:79.31},{&quot;2026-07-09&quot;:79.35},{&quot;2026-07-10&quot;:79.45},{&quot;2026-07-11&quot;:79.45},{&quot;2026-07-12&quot;:79.45},{&quot;2026-07-13&quot;:80.38},{&quot;2026-07-14&quot;:80.38},{&quot;2026-07-15&quot;:80.27},{&quot;2026-07-16&quot;:81.04},{&quot;2026-07-17&quot;:81.04},{&quot;2026-07-18&quot;:81.24},{&quot;2026-07-19&quot;:81.71},{&quot;2026-07-20&quot;:81.79},{&quot;2026-07-21&quot;:81.79},{&quot;2026-07-23&quot;:78.32},{&quot;2026-07-25&quot;:75.48},{&quot;2026-07-26&quot;:75.54},{&quot;2026-07-27&quot;:73.78},{&quot;2026-07-29&quot;:73.49},{&quot;2026-07-30&quot;:73.08},{&quot;2026-07-31&quot;:73.13},{&quot;2026-08-01&quot;:73.13},{&quot;2026-08-02&quot;:73.15},{&quot;2026-08-03&quot;:74.62},{&quot;2026-08-04&quot;:74.35},{&quot;2026-08-05&quot;:74.35},{&quot;2026-08-07&quot;:75.78},{&quot;2026-08-08&quot;:76.84},{&quot;2026-08-09&quot;:76.84},{&quot;2026-08-10&quot;:78.14},{&quot;2026-08-11&quot;:78.14},{&quot;2026-08-12&quot;:79.2},{&quot;2026-08-13&quot;:78.92},{&quot;2026-08-14&quot;:79.01},{&quot;2026-08-15&quot;:79.01},{&quot;2026-08-16&quot;:79.13},{&quot;2026-08-17&quot;:79.07},{&quot;2026-08-18&quot;:79.33},{&quot;2026-08-19&quot;:79.55},{&quot;2026-08-20&quot;:79.55},{&quot;2026-08-21&quot;:79.17},{&quot;2026-08-22&quot;:79.17},{&quot;2026-08-23&quot;:79.17},{&quot;2026-08-24&quot;:79.17},{&quot;2026-08-25&quot;:79.17},{&quot;2026-08-26&quot;:79.42},{&quot;2026-08-27&quot;:80.04},{&quot;2026-08-28&quot;:79.39},{&quot;2026-08-29&quot;:79.39},{&quot;2026-08-30&quot;:79.46},{&quot;2026-08-31&quot;:79.46},{&quot;2026-09-01&quot;:79.46},{&quot;2026-09-02&quot;:78.75},{&quot;2026-09-03&quot;:78.75},{&quot;2026-09-04&quot;:78.75},{&quot;2026-09-05&quot;:77.91},{&quot;2026-09-06&quot;:77.21},{&quot;2026-09-07&quot;:77.21},{&quot;2026-09-08&quot;:77.37},{&quot;2026-09-09&quot;:77.34},{&quot;2026-09-10&quot;:77.34},{&quot;2026-09-11&quot;:77.68}]}"
        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="21038"
  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-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">
            Sword of Feast and Famine
        </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="text-sm font-medium text-nine-white">
            $94.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="Sword of Feast and Famine" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/a/0a469d00-1416-48dd-ad91-eb6f3fb4b42b.jpg?1783930066" />

        <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 Feast and Famine
        </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">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-3'></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 Feast and Famine" src="https://cards.scryfall.io/large/front/0/a/0a469d00-1416-48dd-ad91-eb6f3fb4b42b.jpg?1783930066" />
    </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">
                $94.12
              </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">
                $115.01
              </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">$80.00</span>
              <span class="text-xs text-grey-text">Credit: $104.00</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;:110.32},{&quot;2026-06-14&quot;:110.32},{&quot;2026-06-15&quot;:110.32},{&quot;2026-06-16&quot;:110.32},{&quot;2026-06-17&quot;:110.32},{&quot;2026-06-18&quot;:110.47},{&quot;2026-06-19&quot;:110.47},{&quot;2026-06-20&quot;:110.57},{&quot;2026-06-21&quot;:110.57},{&quot;2026-06-22&quot;:110.57},{&quot;2026-06-23&quot;:110.51},{&quot;2026-06-24&quot;:110.51},{&quot;2026-06-25&quot;:110.51},{&quot;2026-06-26&quot;:110.51},{&quot;2026-06-27&quot;:110.51},{&quot;2026-06-28&quot;:110.51},{&quot;2026-06-29&quot;:109.66},{&quot;2026-06-30&quot;:109.33},{&quot;2026-07-01&quot;:109.33},{&quot;2026-07-02&quot;:109.33},{&quot;2026-07-03&quot;:109.33},{&quot;2026-07-04&quot;:109.33},{&quot;2026-07-05&quot;:108.9},{&quot;2026-07-06&quot;:108.9},{&quot;2026-07-07&quot;:108.64},{&quot;2026-07-08&quot;:108.64},{&quot;2026-07-09&quot;:108.64},{&quot;2026-07-10&quot;:108.64},{&quot;2026-07-11&quot;:108.64},{&quot;2026-07-12&quot;:108.64},{&quot;2026-07-13&quot;:108.64},{&quot;2026-07-14&quot;:109.05},{&quot;2026-07-15&quot;:109.05},{&quot;2026-07-16&quot;:109.05},{&quot;2026-07-17&quot;:109.05},{&quot;2026-07-18&quot;:109.05},{&quot;2026-07-19&quot;:109.05},{&quot;2026-07-20&quot;:109.05},{&quot;2026-07-21&quot;:109.05},{&quot;2026-07-22&quot;:108.53},{&quot;2026-07-23&quot;:108.01},{&quot;2026-07-24&quot;:108.01},{&quot;2026-07-25&quot;:108.01},{&quot;2026-07-26&quot;:108.01},{&quot;2026-07-27&quot;:108.65},{&quot;2026-07-28&quot;:108.41},{&quot;2026-07-29&quot;:109.26},{&quot;2026-07-30&quot;:108.06},{&quot;2026-07-31&quot;:109.49},{&quot;2026-08-01&quot;:109.49},{&quot;2026-08-02&quot;:109.49},{&quot;2026-08-03&quot;:109.49},{&quot;2026-08-04&quot;:109.49},{&quot;2026-08-05&quot;:110.86},{&quot;2026-08-07&quot;:110.86},{&quot;2026-08-08&quot;:110.86},{&quot;2026-08-09&quot;:110.86},{&quot;2026-08-10&quot;:111.66},{&quot;2026-08-11&quot;:111.98},{&quot;2026-08-12&quot;:111.98},{&quot;2026-08-13&quot;:111.98},{&quot;2026-08-14&quot;:111.98},{&quot;2026-08-15&quot;:111.98},{&quot;2026-08-16&quot;:112.94},{&quot;2026-08-17&quot;:112.94},{&quot;2026-08-18&quot;:112.94},{&quot;2026-08-19&quot;:112.94},{&quot;2026-08-20&quot;:112.94},{&quot;2026-08-21&quot;:112.94},{&quot;2026-08-22&quot;:112.94},{&quot;2026-08-23&quot;:112.94},{&quot;2026-08-24&quot;:113.35},{&quot;2026-08-25&quot;:113.35},{&quot;2026-08-26&quot;:114.29},{&quot;2026-08-27&quot;:114.29},{&quot;2026-08-28&quot;:114.43},{&quot;2026-08-29&quot;:114.43},{&quot;2026-08-30&quot;:114.43},{&quot;2026-08-31&quot;:114.43},{&quot;2026-09-01&quot;:114.43},{&quot;2026-09-02&quot;:114.73},{&quot;2026-09-03&quot;:114.63},{&quot;2026-09-04&quot;:114.63},{&quot;2026-09-05&quot;:114.63},{&quot;2026-09-06&quot;:115.01},{&quot;2026-09-07&quot;:115.01},{&quot;2026-09-08&quot;:115.01},{&quot;2026-09-09&quot;:115.01},{&quot;2026-09-10&quot;:115.01},{&quot;2026-09-11&quot;:115.01}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:86.06},{&quot;2026-06-14&quot;:86.06},{&quot;2026-06-15&quot;:86.06},{&quot;2026-06-16&quot;:86.06},{&quot;2026-06-17&quot;:85.88},{&quot;2026-06-18&quot;:85.88},{&quot;2026-06-19&quot;:85.88},{&quot;2026-06-20&quot;:85.88},{&quot;2026-06-21&quot;:85.88},{&quot;2026-06-22&quot;:85.88},{&quot;2026-06-23&quot;:85.88},{&quot;2026-06-24&quot;:86.09},{&quot;2026-06-25&quot;:86.09},{&quot;2026-06-26&quot;:86.09},{&quot;2026-06-27&quot;:86.09},{&quot;2026-06-28&quot;:86.09},{&quot;2026-06-29&quot;:86.09},{&quot;2026-06-30&quot;:87.31},{&quot;2026-07-01&quot;:87.31},{&quot;2026-07-02&quot;:87.31},{&quot;2026-07-03&quot;:87.31},{&quot;2026-07-04&quot;:87.31},{&quot;2026-07-05&quot;:87.31},{&quot;2026-07-06&quot;:88.35},{&quot;2026-07-07&quot;:88.35},{&quot;2026-07-08&quot;:87.31},{&quot;2026-07-09&quot;:87.31},{&quot;2026-07-10&quot;:88.45},{&quot;2026-07-11&quot;:88.45},{&quot;2026-07-12&quot;:88.45},{&quot;2026-07-13&quot;:88.45},{&quot;2026-07-14&quot;:88.45},{&quot;2026-07-15&quot;:88.45},{&quot;2026-07-16&quot;:88.45},{&quot;2026-07-17&quot;:90.01},{&quot;2026-07-18&quot;:90.01},{&quot;2026-07-19&quot;:90.01},{&quot;2026-07-20&quot;:90.01},{&quot;2026-07-21&quot;:90.01},{&quot;2026-07-22&quot;:90.86},{&quot;2026-07-23&quot;:91.24},{&quot;2026-07-24&quot;:91.24},{&quot;2026-07-25&quot;:91.24},{&quot;2026-07-26&quot;:91.24},{&quot;2026-07-27&quot;:91.24},{&quot;2026-07-28&quot;:91.24},{&quot;2026-07-29&quot;:91.24},{&quot;2026-07-30&quot;:91.24},{&quot;2026-07-31&quot;:91.24},{&quot;2026-08-01&quot;:91.24},{&quot;2026-08-02&quot;:91.24},{&quot;2026-08-03&quot;:91.24},{&quot;2026-08-04&quot;:91.24},{&quot;2026-08-05&quot;:91.24},{&quot;2026-08-07&quot;:91.24},{&quot;2026-08-08&quot;:91.24},{&quot;2026-08-09&quot;:91.24},{&quot;2026-08-10&quot;:91.24},{&quot;2026-08-11&quot;:91.9},{&quot;2026-08-12&quot;:91.9},{&quot;2026-08-13&quot;:91.9},{&quot;2026-08-14&quot;:91.9},{&quot;2026-08-15&quot;:91.9},{&quot;2026-08-16&quot;:91.9},{&quot;2026-08-17&quot;:91.9},{&quot;2026-08-18&quot;:91.9},{&quot;2026-08-19&quot;:91.9},{&quot;2026-08-20&quot;:91.9},{&quot;2026-08-21&quot;:91.9},{&quot;2026-08-22&quot;:91.9},{&quot;2026-08-23&quot;:91.9},{&quot;2026-08-24&quot;:91.9},{&quot;2026-08-25&quot;:91.87},{&quot;2026-08-26&quot;:91.87},{&quot;2026-08-27&quot;:92.84},{&quot;2026-08-28&quot;:92.84},{&quot;2026-08-29&quot;:92.84},{&quot;2026-08-30&quot;:92.84},{&quot;2026-08-31&quot;:92.84},{&quot;2026-09-01&quot;:92.84},{&quot;2026-09-02&quot;:94.12},{&quot;2026-09-03&quot;:94.12},{&quot;2026-09-04&quot;:94.12},{&quot;2026-09-05&quot;:94.12},{&quot;2026-09-06&quot;:94.12},{&quot;2026-09-07&quot;:94.12},{&quot;2026-09-08&quot;:94.12},{&quot;2026-09-09&quot;:94.12},{&quot;2026-09-10&quot;:94.12},{&quot;2026-09-11&quot;:94.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="73288"
  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-brr 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">
            Mox Amber
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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="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">
            $93.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="Mox Amber" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/8/08c63a42-7969-4e07-ad98-c312156ad0d2.jpg?1783919748" />

        <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">
            Mox Amber
        </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 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="Mox Amber" src="https://cards.scryfall.io/large/front/0/8/08c63a42-7969-4e07-ad98-c312156ad0d2.jpg?1783919748" />
    </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">
                $93.97
              </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">
                $248.98
              </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">$70.00</span>
              <span class="text-xs text-grey-text">Credit: $91.00</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;:222.33},{&quot;2026-06-10&quot;:222.33},{&quot;2026-06-11&quot;:219.21},{&quot;2026-06-12&quot;:219.21},{&quot;2026-06-13&quot;:219.21},{&quot;2026-06-14&quot;:219.21},{&quot;2026-06-15&quot;:219.21},{&quot;2026-06-16&quot;:219.21},{&quot;2026-06-17&quot;:219.21},{&quot;2026-06-18&quot;:219.21},{&quot;2026-06-19&quot;:220.33},{&quot;2026-06-20&quot;:220.33},{&quot;2026-06-21&quot;:220.33},{&quot;2026-06-22&quot;:220.33},{&quot;2026-06-24&quot;:224.33},{&quot;2026-06-25&quot;:224.33},{&quot;2026-06-26&quot;:224.33},{&quot;2026-06-27&quot;:224.33},{&quot;2026-06-28&quot;:224.33},{&quot;2026-06-29&quot;:224.33},{&quot;2026-06-30&quot;:224.33},{&quot;2026-07-01&quot;:224.33},{&quot;2026-07-02&quot;:224.33},{&quot;2026-07-03&quot;:224.33},{&quot;2026-07-04&quot;:224.33},{&quot;2026-07-05&quot;:224.33},{&quot;2026-07-06&quot;:229.38},{&quot;2026-07-07&quot;:229.38},{&quot;2026-07-08&quot;:229.38},{&quot;2026-07-09&quot;:229.38},{&quot;2026-07-10&quot;:228.42},{&quot;2026-07-11&quot;:228.42},{&quot;2026-07-12&quot;:228.42},{&quot;2026-07-13&quot;:228.42},{&quot;2026-07-14&quot;:228.42},{&quot;2026-07-15&quot;:228.42},{&quot;2026-07-16&quot;:228.42},{&quot;2026-07-17&quot;:228.42},{&quot;2026-07-18&quot;:228.42},{&quot;2026-07-19&quot;:228.42},{&quot;2026-07-20&quot;:228.42},{&quot;2026-07-21&quot;:228.42},{&quot;2026-07-23&quot;:228.42},{&quot;2026-07-25&quot;:232.12},{&quot;2026-07-26&quot;:232.12},{&quot;2026-07-27&quot;:232.12},{&quot;2026-07-29&quot;:232.12},{&quot;2026-07-30&quot;:232.12},{&quot;2026-07-31&quot;:232.12},{&quot;2026-08-01&quot;:232.12},{&quot;2026-08-02&quot;:232.12},{&quot;2026-08-03&quot;:232.12},{&quot;2026-08-04&quot;:232.12},{&quot;2026-08-05&quot;:235.4},{&quot;2026-08-07&quot;:235.4},{&quot;2026-08-08&quot;:235.4},{&quot;2026-08-09&quot;:235.4},{&quot;2026-08-10&quot;:235.4},{&quot;2026-08-11&quot;:235.4},{&quot;2026-08-12&quot;:235.4},{&quot;2026-08-13&quot;:235.4},{&quot;2026-08-14&quot;:235.4},{&quot;2026-08-15&quot;:235.4},{&quot;2026-08-16&quot;:235.4},{&quot;2026-08-17&quot;:235.4},{&quot;2026-08-18&quot;:235.4},{&quot;2026-08-19&quot;:235.4},{&quot;2026-08-20&quot;:235.4},{&quot;2026-08-21&quot;:235.4},{&quot;2026-08-22&quot;:239.2},{&quot;2026-08-23&quot;:239.2},{&quot;2026-08-24&quot;:239.2},{&quot;2026-08-25&quot;:239.2},{&quot;2026-08-26&quot;:243.61},{&quot;2026-08-27&quot;:243.61},{&quot;2026-08-28&quot;:246.81},{&quot;2026-08-29&quot;:246.81},{&quot;2026-08-30&quot;:246.81},{&quot;2026-08-31&quot;:246.81},{&quot;2026-09-01&quot;:246.81},{&quot;2026-09-02&quot;:246.81},{&quot;2026-09-03&quot;:246.81},{&quot;2026-09-04&quot;:246.81},{&quot;2026-09-05&quot;:246.81},{&quot;2026-09-06&quot;:246.81},{&quot;2026-09-07&quot;:248.98},{&quot;2026-09-08&quot;:248.98},{&quot;2026-09-09&quot;:248.98},{&quot;2026-09-10&quot;:248.98},{&quot;2026-09-11&quot;:248.98}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:86.92},{&quot;2026-06-10&quot;:87.02},{&quot;2026-06-11&quot;:87.25},{&quot;2026-06-12&quot;:87.31},{&quot;2026-06-13&quot;:87.25},{&quot;2026-06-14&quot;:87.25},{&quot;2026-06-15&quot;:87.25},{&quot;2026-06-16&quot;:87.59},{&quot;2026-06-17&quot;:87.59},{&quot;2026-06-18&quot;:87.59},{&quot;2026-06-19&quot;:87.6},{&quot;2026-06-20&quot;:87.6},{&quot;2026-06-21&quot;:87.76},{&quot;2026-06-22&quot;:87.76},{&quot;2026-06-24&quot;:88.48},{&quot;2026-06-25&quot;:88.64},{&quot;2026-06-26&quot;:88.64},{&quot;2026-06-27&quot;:89.02},{&quot;2026-06-28&quot;:88.54},{&quot;2026-06-29&quot;:88.54},{&quot;2026-06-30&quot;:88.54},{&quot;2026-07-01&quot;:88.49},{&quot;2026-07-02&quot;:88.53},{&quot;2026-07-03&quot;:88.56},{&quot;2026-07-04&quot;:88.74},{&quot;2026-07-05&quot;:88.74},{&quot;2026-07-06&quot;:89.17},{&quot;2026-07-07&quot;:89.25},{&quot;2026-07-08&quot;:88.85},{&quot;2026-07-09&quot;:88.85},{&quot;2026-07-10&quot;:88.85},{&quot;2026-07-11&quot;:89.05},{&quot;2026-07-12&quot;:89.05},{&quot;2026-07-13&quot;:89.05},{&quot;2026-07-14&quot;:89.1},{&quot;2026-07-15&quot;:89.13},{&quot;2026-07-16&quot;:89.13},{&quot;2026-07-17&quot;:89.18},{&quot;2026-07-18&quot;:89.38},{&quot;2026-07-19&quot;:89.38},{&quot;2026-07-20&quot;:89.38},{&quot;2026-07-21&quot;:89.38},{&quot;2026-07-23&quot;:89.38},{&quot;2026-07-25&quot;:89.81},{&quot;2026-07-26&quot;:89.89},{&quot;2026-07-27&quot;:90.05},{&quot;2026-07-29&quot;:90.05},{&quot;2026-07-30&quot;:90.05},{&quot;2026-07-31&quot;:90.14},{&quot;2026-08-01&quot;:90.14},{&quot;2026-08-02&quot;:90.14},{&quot;2026-08-03&quot;:90.14},{&quot;2026-08-04&quot;:90.38},{&quot;2026-08-05&quot;:90.38},{&quot;2026-08-07&quot;:90.56},{&quot;2026-08-08&quot;:91.32},{&quot;2026-08-09&quot;:91.96},{&quot;2026-08-10&quot;:92.24},{&quot;2026-08-11&quot;:93.43},{&quot;2026-08-12&quot;:93.43},{&quot;2026-08-13&quot;:93.43},{&quot;2026-08-14&quot;:93.43},{&quot;2026-08-15&quot;:93.43},{&quot;2026-08-16&quot;:93.43},{&quot;2026-08-17&quot;:93.43},{&quot;2026-08-18&quot;:93.91},{&quot;2026-08-19&quot;:93.91},{&quot;2026-08-20&quot;:93.91},{&quot;2026-08-21&quot;:94.15},{&quot;2026-08-22&quot;:94.07},{&quot;2026-08-23&quot;:93.73},{&quot;2026-08-24&quot;:94.29},{&quot;2026-08-25&quot;:94.29},{&quot;2026-08-26&quot;:94.14},{&quot;2026-08-27&quot;:94.37},{&quot;2026-08-28&quot;:94.17},{&quot;2026-08-29&quot;:94.17},{&quot;2026-08-30&quot;:94.32},{&quot;2026-08-31&quot;:94.32},{&quot;2026-09-01&quot;:94.32},{&quot;2026-09-02&quot;:94.32},{&quot;2026-09-03&quot;:94.79},{&quot;2026-09-04&quot;:94.79},{&quot;2026-09-05&quot;:94.79},{&quot;2026-09-06&quot;:94.79},{&quot;2026-09-07&quot;:94.59},{&quot;2026-09-08&quot;:94.48},{&quot;2026-09-09&quot;:94.48},{&quot;2026-09-10&quot;:93.97},{&quot;2026-09-11&quot;:93.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="95296"
  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-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">
            Kefka, Court Mage 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Human 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-100 text-badge-text">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $91.51
          </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="Kefka, Court Mage // Kefka, Ruler of Ruin" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/c/0cadfe0e-9cdf-4e64-b143-f996c76bf93b.jpg?1783906537" />

        <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">
            Kefka, Court Mage 
        </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 — 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-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></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"
    >
        <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="Kefka, Court Mage // Kefka, Ruler of Ruin" src="https://cards.scryfall.io/large/front/0/c/0cadfe0e-9cdf-4e64-b143-f996c76bf93b.jpg?1783906537" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Kefka, Court Mage // Kefka, Ruler of Ruin" src="https://cards.scryfall.io/large/back/0/c/0cadfe0e-9cdf-4e64-b143-f996c76bf93b.jpg?1783906537" />
              </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-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">
                $37.51
              </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">
                $91.51
              </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">$60.00</span>
              <span class="text-xs text-grey-text">Credit: $78.00</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;:86.59},{&quot;2026-06-14&quot;:86.85},{&quot;2026-06-15&quot;:87.25},{&quot;2026-06-16&quot;:87.57},{&quot;2026-06-17&quot;:88.01},{&quot;2026-06-18&quot;:88.01},{&quot;2026-06-19&quot;:88.79},{&quot;2026-06-20&quot;:88.79},{&quot;2026-06-21&quot;:88.79},{&quot;2026-06-22&quot;:89.74},{&quot;2026-06-23&quot;:89.74},{&quot;2026-06-24&quot;:89.74},{&quot;2026-06-25&quot;:89.74},{&quot;2026-06-26&quot;:89.61},{&quot;2026-06-27&quot;:89.41},{&quot;2026-06-28&quot;:89.74},{&quot;2026-06-29&quot;:89.74},{&quot;2026-06-30&quot;:89.74},{&quot;2026-07-01&quot;:90.35},{&quot;2026-07-02&quot;:90.35},{&quot;2026-07-03&quot;:90.35},{&quot;2026-07-04&quot;:90.62},{&quot;2026-07-05&quot;:91.41},{&quot;2026-07-06&quot;:91.41},{&quot;2026-07-07&quot;:91.8},{&quot;2026-07-08&quot;:91.93},{&quot;2026-07-09&quot;:92.06},{&quot;2026-07-10&quot;:92.06},{&quot;2026-07-11&quot;:92.06},{&quot;2026-07-12&quot;:92.45},{&quot;2026-07-13&quot;:92.45},{&quot;2026-07-14&quot;:92.45},{&quot;2026-07-15&quot;:91.78},{&quot;2026-07-16&quot;:92.72},{&quot;2026-07-17&quot;:92.72},{&quot;2026-07-18&quot;:92.8},{&quot;2026-07-19&quot;:93.23},{&quot;2026-07-20&quot;:93.23},{&quot;2026-07-21&quot;:93.23},{&quot;2026-07-22&quot;:93.42},{&quot;2026-07-23&quot;:93.42},{&quot;2026-07-24&quot;:93.48},{&quot;2026-07-25&quot;:93.42},{&quot;2026-07-26&quot;:93.57},{&quot;2026-07-27&quot;:93.69},{&quot;2026-07-28&quot;:93.92},{&quot;2026-07-29&quot;:93.92},{&quot;2026-07-30&quot;:93.92},{&quot;2026-07-31&quot;:93.9},{&quot;2026-08-01&quot;:93.9},{&quot;2026-08-02&quot;:93.9},{&quot;2026-08-03&quot;:93.96},{&quot;2026-08-04&quot;:93.96},{&quot;2026-08-05&quot;:93.96},{&quot;2026-08-07&quot;:93.33},{&quot;2026-08-08&quot;:93.46},{&quot;2026-08-09&quot;:93.46},{&quot;2026-08-10&quot;:93.46},{&quot;2026-08-11&quot;:94.1},{&quot;2026-08-12&quot;:93.9},{&quot;2026-08-13&quot;:93.9},{&quot;2026-08-14&quot;:93.9},{&quot;2026-08-15&quot;:93.9},{&quot;2026-08-16&quot;:93.5},{&quot;2026-08-17&quot;:93.33},{&quot;2026-08-18&quot;:92.75},{&quot;2026-08-19&quot;:92.75},{&quot;2026-08-20&quot;:92.75},{&quot;2026-08-21&quot;:93.07},{&quot;2026-08-22&quot;:92.78},{&quot;2026-08-23&quot;:92.78},{&quot;2026-08-24&quot;:92.75},{&quot;2026-08-25&quot;:92.75},{&quot;2026-08-26&quot;:92.75},{&quot;2026-08-27&quot;:92.78},{&quot;2026-08-28&quot;:92.78},{&quot;2026-08-29&quot;:92.78},{&quot;2026-08-30&quot;:92.78},{&quot;2026-08-31&quot;:92.78},{&quot;2026-09-01&quot;:92.78},{&quot;2026-09-02&quot;:92.78},{&quot;2026-09-03&quot;:92.57},{&quot;2026-09-04&quot;:92.57},{&quot;2026-09-05&quot;:92.57},{&quot;2026-09-06&quot;:92.57},{&quot;2026-09-07&quot;:92.29},{&quot;2026-09-08&quot;:92.17},{&quot;2026-09-09&quot;:91.51},{&quot;2026-09-10&quot;:91.51},{&quot;2026-09-11&quot;:91.51}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:30.59},{&quot;2026-06-14&quot;:30.75},{&quot;2026-06-15&quot;:31.61},{&quot;2026-06-16&quot;:31.61},{&quot;2026-06-17&quot;:32.25},{&quot;2026-06-18&quot;:31.9},{&quot;2026-06-19&quot;:32.28},{&quot;2026-06-20&quot;:32.36},{&quot;2026-06-21&quot;:32.82},{&quot;2026-06-22&quot;:33.39},{&quot;2026-06-23&quot;:33.9},{&quot;2026-06-24&quot;:33.9},{&quot;2026-06-25&quot;:33.04},{&quot;2026-06-26&quot;:32.92},{&quot;2026-06-27&quot;:32.74},{&quot;2026-06-28&quot;:32.13},{&quot;2026-06-29&quot;:31.55},{&quot;2026-06-30&quot;:31.39},{&quot;2026-07-01&quot;:30.81},{&quot;2026-07-02&quot;:30.69},{&quot;2026-07-03&quot;:30.81},{&quot;2026-07-04&quot;:30.07},{&quot;2026-07-05&quot;:30.16},{&quot;2026-07-06&quot;:30.21},{&quot;2026-07-07&quot;:30.41},{&quot;2026-07-08&quot;:30.41},{&quot;2026-07-09&quot;:31.63},{&quot;2026-07-10&quot;:31.63},{&quot;2026-07-11&quot;:32.1},{&quot;2026-07-12&quot;:32.22},{&quot;2026-07-13&quot;:32.33},{&quot;2026-07-14&quot;:32.53},{&quot;2026-07-15&quot;:32.58},{&quot;2026-07-16&quot;:32.48},{&quot;2026-07-17&quot;:32.55},{&quot;2026-07-18&quot;:32.91},{&quot;2026-07-19&quot;:32.9},{&quot;2026-07-20&quot;:32.9},{&quot;2026-07-21&quot;:32.86},{&quot;2026-07-22&quot;:33.58},{&quot;2026-07-23&quot;:33.58},{&quot;2026-07-24&quot;:33.36},{&quot;2026-07-25&quot;:34.09},{&quot;2026-07-26&quot;:34.51},{&quot;2026-07-27&quot;:35.4},{&quot;2026-07-28&quot;:35.44},{&quot;2026-07-29&quot;:35.44},{&quot;2026-07-30&quot;:35.34},{&quot;2026-07-31&quot;:35.42},{&quot;2026-08-01&quot;:35.52},{&quot;2026-08-02&quot;:35.45},{&quot;2026-08-03&quot;:35.79},{&quot;2026-08-04&quot;:35.58},{&quot;2026-08-05&quot;:35.65},{&quot;2026-08-07&quot;:35.04},{&quot;2026-08-08&quot;:35.1},{&quot;2026-08-09&quot;:33.87},{&quot;2026-08-10&quot;:33.85},{&quot;2026-08-11&quot;:33.71},{&quot;2026-08-12&quot;:33.43},{&quot;2026-08-13&quot;:33.49},{&quot;2026-08-14&quot;:34.0},{&quot;2026-08-15&quot;:34.11},{&quot;2026-08-16&quot;:33.94},{&quot;2026-08-17&quot;:33.72},{&quot;2026-08-18&quot;:33.72},{&quot;2026-08-19&quot;:33.68},{&quot;2026-08-20&quot;:33.9},{&quot;2026-08-21&quot;:34.2},{&quot;2026-08-22&quot;:34.29},{&quot;2026-08-23&quot;:34.96},{&quot;2026-08-24&quot;:34.84},{&quot;2026-08-25&quot;:35.69},{&quot;2026-08-26&quot;:36.39},{&quot;2026-08-27&quot;:36.74},{&quot;2026-08-28&quot;:36.94},{&quot;2026-08-29&quot;:36.94},{&quot;2026-08-30&quot;:36.89},{&quot;2026-08-31&quot;:37.07},{&quot;2026-09-01&quot;:37.16},{&quot;2026-09-02&quot;:37.0},{&quot;2026-09-03&quot;:36.95},{&quot;2026-09-04&quot;:36.95},{&quot;2026-09-05&quot;:37.15},{&quot;2026-09-06&quot;:37.38},{&quot;2026-09-07&quot;:37.34},{&quot;2026-09-08&quot;:37.51},{&quot;2026-09-09&quot;:37.51},{&quot;2026-09-10&quot;:37.51},{&quot;2026-09-11&quot;:37.51}]}"
        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="30546"
  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">
            Mana Vault
        </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">
            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">
            $86.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="Mana Vault" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/b/3be9942c-89b3-422f-bb9d-b55f51a22a37.jpg?1783947798" />

        <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">
            Mana Vault
        </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-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="Mana Vault" src="https://cards.scryfall.io/large/front/3/b/3be9942c-89b3-422f-bb9d-b55f51a22a37.jpg?1783947798" />
    </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">
                $86.84
              </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">$55.00</span>
              <span class="text-xs text-grey-text">Credit: $71.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;:95.69},{&quot;2026-06-14&quot;:97.42},{&quot;2026-06-15&quot;:97.86},{&quot;2026-06-16&quot;:97.86},{&quot;2026-06-17&quot;:98.86},{&quot;2026-06-18&quot;:98.62},{&quot;2026-06-19&quot;:98.62},{&quot;2026-06-20&quot;:98.62},{&quot;2026-06-21&quot;:98.62},{&quot;2026-06-22&quot;:98.62},{&quot;2026-06-23&quot;:98.62},{&quot;2026-06-24&quot;:98.62},{&quot;2026-06-25&quot;:98.62},{&quot;2026-06-26&quot;:98.63},{&quot;2026-06-27&quot;:98.63},{&quot;2026-06-28&quot;:98.63},{&quot;2026-06-29&quot;:98.63},{&quot;2026-06-30&quot;:98.63},{&quot;2026-07-01&quot;:98.63},{&quot;2026-07-02&quot;:98.63},{&quot;2026-07-03&quot;:98.64},{&quot;2026-07-04&quot;:99.19},{&quot;2026-07-05&quot;:99.19},{&quot;2026-07-06&quot;:99.19},{&quot;2026-07-07&quot;:99.19},{&quot;2026-07-08&quot;:99.19},{&quot;2026-07-09&quot;:99.19},{&quot;2026-07-10&quot;:99.19},{&quot;2026-07-11&quot;:99.19},{&quot;2026-07-12&quot;:98.82},{&quot;2026-07-13&quot;:98.82},{&quot;2026-07-14&quot;:98.82},{&quot;2026-07-15&quot;:98.52},{&quot;2026-07-16&quot;:98.52},{&quot;2026-07-17&quot;:96.9},{&quot;2026-07-18&quot;:96.9},{&quot;2026-07-19&quot;:96.9},{&quot;2026-07-20&quot;:96.9},{&quot;2026-07-21&quot;:96.9},{&quot;2026-07-22&quot;:96.9},{&quot;2026-07-23&quot;:96.9},{&quot;2026-07-24&quot;:96.63},{&quot;2026-07-25&quot;:96.63},{&quot;2026-07-26&quot;:96.63},{&quot;2026-07-27&quot;:96.44},{&quot;2026-07-28&quot;:96.19},{&quot;2026-07-29&quot;:96.19},{&quot;2026-07-30&quot;:96.19},{&quot;2026-07-31&quot;:96.19},{&quot;2026-08-01&quot;:96.19},{&quot;2026-08-02&quot;:96.19},{&quot;2026-08-03&quot;:96.33},{&quot;2026-08-04&quot;:95.91},{&quot;2026-08-05&quot;:96.33},{&quot;2026-08-07&quot;:96.33},{&quot;2026-08-08&quot;:96.33},{&quot;2026-08-09&quot;:96.33},{&quot;2026-08-10&quot;:96.41},{&quot;2026-08-11&quot;:96.41},{&quot;2026-08-12&quot;:96.41},{&quot;2026-08-13&quot;:96.41},{&quot;2026-08-14&quot;:96.41},{&quot;2026-08-15&quot;:93.52},{&quot;2026-08-16&quot;:93.52},{&quot;2026-08-17&quot;:93.52},{&quot;2026-08-18&quot;:93.52},{&quot;2026-08-19&quot;:93.52},{&quot;2026-08-20&quot;:93.52},{&quot;2026-08-21&quot;:91.07},{&quot;2026-08-22&quot;:91.07},{&quot;2026-08-23&quot;:91.07},{&quot;2026-08-24&quot;:91.05},{&quot;2026-08-25&quot;:88.06},{&quot;2026-08-26&quot;:88.06},{&quot;2026-08-27&quot;:88.06},{&quot;2026-08-28&quot;:87.81},{&quot;2026-08-29&quot;:87.81},{&quot;2026-08-30&quot;:87.68},{&quot;2026-08-31&quot;:88.07},{&quot;2026-09-01&quot;:88.22},{&quot;2026-09-02&quot;:87.8},{&quot;2026-09-03&quot;:87.31},{&quot;2026-09-04&quot;:87.31},{&quot;2026-09-05&quot;:87.31},{&quot;2026-09-06&quot;:87.31},{&quot;2026-09-07&quot;:86.84},{&quot;2026-09-08&quot;:86.84},{&quot;2026-09-09&quot;:86.84},{&quot;2026-09-10&quot;:86.84},{&quot;2026-09-11&quot;:86.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="21040"
  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-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">
            Sword of Fire and Ice
        </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">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $83.13
          </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 Fire and Ice" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/2/2/22cd80dd-1c57-423c-81e2-9a956901565f.jpg?1783930066" />

        <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 Fire and Ice
        </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">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-3'></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 Fire and Ice" src="https://cards.scryfall.io/large/front/2/2/22cd80dd-1c57-423c-81e2-9a956901565f.jpg?1783930066" />
    </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">
                $83.13
              </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">
                $99.03
              </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">$52.00</span>
              <span class="text-xs text-grey-text">Credit: $67.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;2026-06-13&quot;:84.63},{&quot;2026-06-14&quot;:85.28},{&quot;2026-06-15&quot;:85.28},{&quot;2026-06-16&quot;:85.28},{&quot;2026-06-17&quot;:85.28},{&quot;2026-06-18&quot;:85.28},{&quot;2026-06-19&quot;:85.28},{&quot;2026-06-20&quot;:85.28},{&quot;2026-06-21&quot;:85.28},{&quot;2026-06-22&quot;:85.38},{&quot;2026-06-23&quot;:85.38},{&quot;2026-06-24&quot;:85.38},{&quot;2026-06-25&quot;:85.38},{&quot;2026-06-26&quot;:85.38},{&quot;2026-06-27&quot;:85.38},{&quot;2026-06-28&quot;:85.53},{&quot;2026-06-29&quot;:85.53},{&quot;2026-06-30&quot;:86.72},{&quot;2026-07-01&quot;:87.17},{&quot;2026-07-02&quot;:87.17},{&quot;2026-07-03&quot;:87.81},{&quot;2026-07-04&quot;:87.81},{&quot;2026-07-05&quot;:87.81},{&quot;2026-07-06&quot;:88.89},{&quot;2026-07-07&quot;:88.89},{&quot;2026-07-08&quot;:88.89},{&quot;2026-07-09&quot;:88.89},{&quot;2026-07-10&quot;:88.89},{&quot;2026-07-11&quot;:88.89},{&quot;2026-07-12&quot;:88.89},{&quot;2026-07-13&quot;:88.89},{&quot;2026-07-14&quot;:88.89},{&quot;2026-07-15&quot;:90.29},{&quot;2026-07-16&quot;:90.29},{&quot;2026-07-17&quot;:90.98},{&quot;2026-07-18&quot;:90.98},{&quot;2026-07-19&quot;:90.98},{&quot;2026-07-20&quot;:90.98},{&quot;2026-07-21&quot;:90.98},{&quot;2026-07-22&quot;:90.98},{&quot;2026-07-23&quot;:92.38},{&quot;2026-07-24&quot;:93.34},{&quot;2026-07-25&quot;:93.34},{&quot;2026-07-26&quot;:93.34},{&quot;2026-07-27&quot;:93.34},{&quot;2026-07-28&quot;:93.34},{&quot;2026-07-29&quot;:94.28},{&quot;2026-07-30&quot;:94.28},{&quot;2026-07-31&quot;:94.28},{&quot;2026-08-01&quot;:94.28},{&quot;2026-08-02&quot;:94.28},{&quot;2026-08-03&quot;:94.28},{&quot;2026-08-04&quot;:94.28},{&quot;2026-08-05&quot;:94.87},{&quot;2026-08-07&quot;:94.87},{&quot;2026-08-08&quot;:94.99},{&quot;2026-08-09&quot;:94.99},{&quot;2026-08-10&quot;:94.99},{&quot;2026-08-11&quot;:94.99},{&quot;2026-08-12&quot;:94.99},{&quot;2026-08-13&quot;:94.99},{&quot;2026-08-14&quot;:94.99},{&quot;2026-08-15&quot;:96.38},{&quot;2026-08-16&quot;:96.38},{&quot;2026-08-17&quot;:96.38},{&quot;2026-08-18&quot;:96.38},{&quot;2026-08-19&quot;:96.38},{&quot;2026-08-20&quot;:96.38},{&quot;2026-08-21&quot;:96.38},{&quot;2026-08-22&quot;:96.38},{&quot;2026-08-23&quot;:96.38},{&quot;2026-08-24&quot;:96.38},{&quot;2026-08-25&quot;:96.38},{&quot;2026-08-26&quot;:96.38},{&quot;2026-08-27&quot;:96.72},{&quot;2026-08-28&quot;:96.72},{&quot;2026-08-29&quot;:96.72},{&quot;2026-08-30&quot;:96.72},{&quot;2026-08-31&quot;:96.72},{&quot;2026-09-01&quot;:96.72},{&quot;2026-09-02&quot;:97.87},{&quot;2026-09-03&quot;:98.23},{&quot;2026-09-04&quot;:98.13},{&quot;2026-09-05&quot;:98.13},{&quot;2026-09-06&quot;:98.13},{&quot;2026-09-07&quot;:97.93},{&quot;2026-09-08&quot;:97.93},{&quot;2026-09-09&quot;:99.03},{&quot;2026-09-10&quot;:99.03},{&quot;2026-09-11&quot;:99.03}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:76.66},{&quot;2026-06-14&quot;:76.66},{&quot;2026-06-15&quot;:76.66},{&quot;2026-06-16&quot;:76.66},{&quot;2026-06-17&quot;:76.66},{&quot;2026-06-18&quot;:76.66},{&quot;2026-06-19&quot;:77.46},{&quot;2026-06-20&quot;:77.46},{&quot;2026-06-21&quot;:77.46},{&quot;2026-06-22&quot;:77.46},{&quot;2026-06-23&quot;:77.46},{&quot;2026-06-24&quot;:77.46},{&quot;2026-06-25&quot;:77.46},{&quot;2026-06-26&quot;:77.46},{&quot;2026-06-27&quot;:77.46},{&quot;2026-06-28&quot;:78.28},{&quot;2026-06-29&quot;:78.28},{&quot;2026-06-30&quot;:78.28},{&quot;2026-07-01&quot;:78.28},{&quot;2026-07-02&quot;:78.28},{&quot;2026-07-03&quot;:78.28},{&quot;2026-07-04&quot;:78.28},{&quot;2026-07-05&quot;:78.28},{&quot;2026-07-06&quot;:79.38},{&quot;2026-07-07&quot;:79.38},{&quot;2026-07-08&quot;:79.38},{&quot;2026-07-09&quot;:79.64},{&quot;2026-07-10&quot;:79.64},{&quot;2026-07-11&quot;:79.64},{&quot;2026-07-12&quot;:79.64},{&quot;2026-07-13&quot;:79.64},{&quot;2026-07-14&quot;:79.64},{&quot;2026-07-15&quot;:80.2},{&quot;2026-07-16&quot;:80.2},{&quot;2026-07-17&quot;:80.56},{&quot;2026-07-18&quot;:80.56},{&quot;2026-07-19&quot;:80.56},{&quot;2026-07-20&quot;:80.95},{&quot;2026-07-21&quot;:80.95},{&quot;2026-07-22&quot;:80.95},{&quot;2026-07-23&quot;:80.95},{&quot;2026-07-24&quot;:80.95},{&quot;2026-07-25&quot;:80.95},{&quot;2026-07-26&quot;:80.95},{&quot;2026-07-27&quot;:80.95},{&quot;2026-07-28&quot;:80.95},{&quot;2026-07-29&quot;:80.95},{&quot;2026-07-30&quot;:80.95},{&quot;2026-07-31&quot;:81.34},{&quot;2026-08-01&quot;:81.78},{&quot;2026-08-02&quot;:81.78},{&quot;2026-08-03&quot;:81.78},{&quot;2026-08-04&quot;:81.78},{&quot;2026-08-05&quot;:81.78},{&quot;2026-08-07&quot;:81.78},{&quot;2026-08-08&quot;:81.78},{&quot;2026-08-09&quot;:81.78},{&quot;2026-08-10&quot;:81.78},{&quot;2026-08-11&quot;:81.78},{&quot;2026-08-12&quot;:81.78},{&quot;2026-08-13&quot;:82.42},{&quot;2026-08-14&quot;:82.42},{&quot;2026-08-15&quot;:82.42},{&quot;2026-08-16&quot;:82.42},{&quot;2026-08-17&quot;:82.42},{&quot;2026-08-18&quot;:82.42},{&quot;2026-08-19&quot;:82.42},{&quot;2026-08-20&quot;:82.15},{&quot;2026-08-21&quot;:82.15},{&quot;2026-08-22&quot;:82.15},{&quot;2026-08-23&quot;:82.15},{&quot;2026-08-24&quot;:82.15},{&quot;2026-08-25&quot;:82.15},{&quot;2026-08-26&quot;:82.15},{&quot;2026-08-27&quot;:82.15},{&quot;2026-08-28&quot;:82.15},{&quot;2026-08-29&quot;:82.15},{&quot;2026-08-30&quot;:81.67},{&quot;2026-08-31&quot;:81.67},{&quot;2026-09-01&quot;:81.67},{&quot;2026-09-02&quot;:81.91},{&quot;2026-09-03&quot;:82.23},{&quot;2026-09-04&quot;:82.23},{&quot;2026-09-05&quot;:82.65},{&quot;2026-09-06&quot;:82.65},{&quot;2026-09-07&quot;:82.65},{&quot;2026-09-08&quot;:82.87},{&quot;2026-09-09&quot;:82.87},{&quot;2026-09-10&quot;:82.87},{&quot;2026-09-11&quot;:83.13}]}"
        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="79538"
  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">
            Urborg, Tomb of Yawgmoth
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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">
              ↑
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $57.37
          </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="Urborg, Tomb of Yawgmoth" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/9/e/9e1a9e38-6ffc-490f-b0be-23ba4e8204c6.jpg?1783927747" />

        <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">
            Urborg, Tomb of Yawgmoth
        </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 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="Urborg, Tomb of Yawgmoth" src="https://cards.scryfall.io/large/front/9/e/9e1a9e38-6ffc-490f-b0be-23ba4e8204c6.jpg?1783927747" />
    </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">
                $57.37
              </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">
                $74.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">$42.00</span>
              <span class="text-xs text-grey-text">Credit: $54.60</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">$40.00</span>
              <span class="text-xs text-grey-text">Credit: $52.00</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;:64.73},{&quot;2026-06-14&quot;:64.73},{&quot;2026-06-15&quot;:66.17},{&quot;2026-06-16&quot;:66.17},{&quot;2026-06-17&quot;:66.17},{&quot;2026-06-18&quot;:66.17},{&quot;2026-06-19&quot;:66.17},{&quot;2026-06-20&quot;:66.17},{&quot;2026-06-21&quot;:66.17},{&quot;2026-06-22&quot;:66.17},{&quot;2026-06-23&quot;:66.17},{&quot;2026-06-24&quot;:66.17},{&quot;2026-06-25&quot;:66.17},{&quot;2026-06-26&quot;:66.17},{&quot;2026-06-27&quot;:66.17},{&quot;2026-06-28&quot;:66.17},{&quot;2026-06-29&quot;:66.17},{&quot;2026-06-30&quot;:66.17},{&quot;2026-07-01&quot;:66.17},{&quot;2026-07-02&quot;:66.17},{&quot;2026-07-03&quot;:66.17},{&quot;2026-07-04&quot;:66.47},{&quot;2026-07-05&quot;:66.47},{&quot;2026-07-06&quot;:68.55},{&quot;2026-07-07&quot;:68.55},{&quot;2026-07-08&quot;:68.55},{&quot;2026-07-09&quot;:68.55},{&quot;2026-07-10&quot;:68.96},{&quot;2026-07-11&quot;:68.96},{&quot;2026-07-12&quot;:68.96},{&quot;2026-07-13&quot;:68.96},{&quot;2026-07-14&quot;:68.96},{&quot;2026-07-15&quot;:69.32},{&quot;2026-07-16&quot;:69.32},{&quot;2026-07-17&quot;:69.32},{&quot;2026-07-18&quot;:70.66},{&quot;2026-07-19&quot;:70.66},{&quot;2026-07-20&quot;:71.14},{&quot;2026-07-21&quot;:71.14},{&quot;2026-07-22&quot;:71.14},{&quot;2026-07-23&quot;:71.78},{&quot;2026-07-24&quot;:72.26},{&quot;2026-07-25&quot;:72.26},{&quot;2026-07-26&quot;:72.26},{&quot;2026-07-27&quot;:72.26},{&quot;2026-07-28&quot;:72.26},{&quot;2026-07-29&quot;:72.26},{&quot;2026-07-30&quot;:72.26},{&quot;2026-07-31&quot;:72.79},{&quot;2026-08-01&quot;:72.79},{&quot;2026-08-02&quot;:72.79},{&quot;2026-08-03&quot;:72.79},{&quot;2026-08-04&quot;:72.79},{&quot;2026-08-05&quot;:72.79},{&quot;2026-08-07&quot;:72.79},{&quot;2026-08-08&quot;:72.79},{&quot;2026-08-09&quot;:72.79},{&quot;2026-08-10&quot;:72.9},{&quot;2026-08-11&quot;:72.9},{&quot;2026-08-12&quot;:72.9},{&quot;2026-08-13&quot;:73.74},{&quot;2026-08-14&quot;:74.27},{&quot;2026-08-15&quot;:74.27},{&quot;2026-08-16&quot;:74.27},{&quot;2026-08-17&quot;:74.27},{&quot;2026-08-18&quot;:74.27},{&quot;2026-08-19&quot;:74.27},{&quot;2026-08-20&quot;:74.27},{&quot;2026-08-21&quot;:74.27},{&quot;2026-08-22&quot;:74.27},{&quot;2026-08-23&quot;:74.27},{&quot;2026-08-24&quot;:74.27},{&quot;2026-08-25&quot;:74.87},{&quot;2026-08-26&quot;:74.87},{&quot;2026-08-27&quot;:74.0},{&quot;2026-08-28&quot;:74.0},{&quot;2026-08-29&quot;:74.0},{&quot;2026-08-30&quot;:74.0},{&quot;2026-08-31&quot;:74.0},{&quot;2026-09-01&quot;:74.0},{&quot;2026-09-02&quot;:74.0},{&quot;2026-09-03&quot;:74.0},{&quot;2026-09-04&quot;:74.0},{&quot;2026-09-05&quot;:74.08},{&quot;2026-09-06&quot;:74.08},{&quot;2026-09-07&quot;:74.08},{&quot;2026-09-08&quot;:74.08},{&quot;2026-09-09&quot;:74.08},{&quot;2026-09-10&quot;:74.08},{&quot;2026-09-11&quot;:74.08}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:62.93},{&quot;2026-06-14&quot;:62.93},{&quot;2026-06-15&quot;:63.55},{&quot;2026-06-16&quot;:64.75},{&quot;2026-06-17&quot;:64.23},{&quot;2026-06-18&quot;:64.19},{&quot;2026-06-19&quot;:63.77},{&quot;2026-06-20&quot;:64.27},{&quot;2026-06-21&quot;:63.58},{&quot;2026-06-22&quot;:64.34},{&quot;2026-06-23&quot;:63.99},{&quot;2026-06-24&quot;:64.27},{&quot;2026-06-25&quot;:64.43},{&quot;2026-06-26&quot;:64.0},{&quot;2026-06-27&quot;:62.91},{&quot;2026-06-28&quot;:63.74},{&quot;2026-06-29&quot;:63.19},{&quot;2026-06-30&quot;:63.9},{&quot;2026-07-01&quot;:64.08},{&quot;2026-07-02&quot;:64.16},{&quot;2026-07-03&quot;:63.64},{&quot;2026-07-04&quot;:63.49},{&quot;2026-07-05&quot;:63.33},{&quot;2026-07-06&quot;:63.33},{&quot;2026-07-07&quot;:63.84},{&quot;2026-07-08&quot;:63.85},{&quot;2026-07-09&quot;:63.85},{&quot;2026-07-10&quot;:63.85},{&quot;2026-07-11&quot;:63.9},{&quot;2026-07-12&quot;:63.98},{&quot;2026-07-13&quot;:63.58},{&quot;2026-07-14&quot;:62.99},{&quot;2026-07-15&quot;:63.06},{&quot;2026-07-16&quot;:62.78},{&quot;2026-07-17&quot;:62.29},{&quot;2026-07-18&quot;:62.3},{&quot;2026-07-19&quot;:62.3},{&quot;2026-07-20&quot;:62.3},{&quot;2026-07-21&quot;:61.55},{&quot;2026-07-22&quot;:61.55},{&quot;2026-07-23&quot;:62.32},{&quot;2026-07-24&quot;:61.46},{&quot;2026-07-25&quot;:61.67},{&quot;2026-07-26&quot;:61.67},{&quot;2026-07-27&quot;:61.75},{&quot;2026-07-28&quot;:62.29},{&quot;2026-07-29&quot;:62.74},{&quot;2026-07-30&quot;:63.16},{&quot;2026-07-31&quot;:63.19},{&quot;2026-08-01&quot;:63.19},{&quot;2026-08-02&quot;:63.19},{&quot;2026-08-03&quot;:63.06},{&quot;2026-08-04&quot;:62.65},{&quot;2026-08-05&quot;:63.27},{&quot;2026-08-07&quot;:63.36},{&quot;2026-08-08&quot;:63.36},{&quot;2026-08-09&quot;:62.68},{&quot;2026-08-10&quot;:62.65},{&quot;2026-08-11&quot;:62.98},{&quot;2026-08-12&quot;:62.07},{&quot;2026-08-13&quot;:61.88},{&quot;2026-08-14&quot;:62.16},{&quot;2026-08-15&quot;:61.88},{&quot;2026-08-16&quot;:61.23},{&quot;2026-08-17&quot;:61.76},{&quot;2026-08-18&quot;:61.4},{&quot;2026-08-19&quot;:59.24},{&quot;2026-08-20&quot;:59.24},{&quot;2026-08-21&quot;:58.41},{&quot;2026-08-22&quot;:56.62},{&quot;2026-08-23&quot;:54.84},{&quot;2026-08-24&quot;:54.31},{&quot;2026-08-25&quot;:54.6},{&quot;2026-08-26&quot;:54.44},{&quot;2026-08-27&quot;:54.1},{&quot;2026-08-28&quot;:55.13},{&quot;2026-08-29&quot;:55.13},{&quot;2026-08-30&quot;:55.92},{&quot;2026-08-31&quot;:56.18},{&quot;2026-09-01&quot;:55.87},{&quot;2026-09-02&quot;:55.92},{&quot;2026-09-03&quot;:55.92},{&quot;2026-09-04&quot;:55.78},{&quot;2026-09-05&quot;:56.16},{&quot;2026-09-06&quot;:56.44},{&quot;2026-09-07&quot;:55.92},{&quot;2026-09-08&quot;:56.72},{&quot;2026-09-09&quot;:57.38},{&quot;2026-09-10&quot;:57.38},{&quot;2026-09-11&quot;:57.37}]}"
        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="95282"
  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-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">
            Sephiroth, Fabled SOLDIER 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Human Avatar Soldier
      </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">
            $71.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="Sephiroth, Fabled SOLDIER // Sephiroth, One-Winged Angel" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/3/83c82209-47d5-4c4c-b8ec-96ab907e15d3.jpg?1783906538" />

        <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">
            Sephiroth, Fabled SOLDIER 
        </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 — Human Avatar Soldier</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="Sephiroth, Fabled SOLDIER // Sephiroth, One-Winged Angel" src="https://cards.scryfall.io/large/front/8/3/83c82209-47d5-4c4c-b8ec-96ab907e15d3.jpg?1783906538" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Sephiroth, Fabled SOLDIER // Sephiroth, One-Winged Angel" src="https://cards.scryfall.io/large/back/8/3/83c82209-47d5-4c4c-b8ec-96ab907e15d3.jpg?1783906538" />
              </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">
                $71.91
              </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">
                $176.28
              </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">$53.00</span>
              <span class="text-xs text-grey-text">Credit: $68.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-13&quot;:138.76},{&quot;2026-06-14&quot;:141.44},{&quot;2026-06-15&quot;:143.69},{&quot;2026-06-16&quot;:143.69},{&quot;2026-06-17&quot;:145.62},{&quot;2026-06-18&quot;:147.26},{&quot;2026-06-19&quot;:149.27},{&quot;2026-06-20&quot;:149.27},{&quot;2026-06-21&quot;:149.45},{&quot;2026-06-22&quot;:149.45},{&quot;2026-06-23&quot;:150.0},{&quot;2026-06-24&quot;:150.0},{&quot;2026-06-25&quot;:151.23},{&quot;2026-06-26&quot;:151.23},{&quot;2026-06-27&quot;:151.23},{&quot;2026-06-28&quot;:151.23},{&quot;2026-06-29&quot;:153.08},{&quot;2026-06-30&quot;:153.38},{&quot;2026-07-01&quot;:154.61},{&quot;2026-07-02&quot;:156.67},{&quot;2026-07-03&quot;:156.67},{&quot;2026-07-04&quot;:156.67},{&quot;2026-07-05&quot;:157.16},{&quot;2026-07-06&quot;:158.16},{&quot;2026-07-07&quot;:158.16},{&quot;2026-07-08&quot;:159.36},{&quot;2026-07-09&quot;:159.36},{&quot;2026-07-10&quot;:159.36},{&quot;2026-07-11&quot;:159.56},{&quot;2026-07-12&quot;:159.34},{&quot;2026-07-13&quot;:159.71},{&quot;2026-07-14&quot;:161.01},{&quot;2026-07-15&quot;:161.01},{&quot;2026-07-16&quot;:161.01},{&quot;2026-07-17&quot;:160.64},{&quot;2026-07-18&quot;:162.9},{&quot;2026-07-19&quot;:162.9},{&quot;2026-07-20&quot;:162.9},{&quot;2026-07-21&quot;:162.9},{&quot;2026-07-22&quot;:165.01},{&quot;2026-07-23&quot;:166.36},{&quot;2026-07-24&quot;:166.36},{&quot;2026-07-25&quot;:166.36},{&quot;2026-07-26&quot;:167.76},{&quot;2026-07-27&quot;:170.76},{&quot;2026-07-28&quot;:173.58},{&quot;2026-07-29&quot;:173.58},{&quot;2026-07-30&quot;:173.58},{&quot;2026-07-31&quot;:173.58},{&quot;2026-08-01&quot;:173.58},{&quot;2026-08-02&quot;:173.58},{&quot;2026-08-03&quot;:176.88},{&quot;2026-08-04&quot;:176.88},{&quot;2026-08-05&quot;:176.77},{&quot;2026-08-07&quot;:176.68},{&quot;2026-08-08&quot;:176.68},{&quot;2026-08-09&quot;:177.8},{&quot;2026-08-10&quot;:177.8},{&quot;2026-08-11&quot;:178.37},{&quot;2026-08-12&quot;:178.37},{&quot;2026-08-13&quot;:177.44},{&quot;2026-08-14&quot;:177.44},{&quot;2026-08-15&quot;:177.44},{&quot;2026-08-16&quot;:178.29},{&quot;2026-08-17&quot;:178.48},{&quot;2026-08-18&quot;:177.72},{&quot;2026-08-19&quot;:177.72},{&quot;2026-08-20&quot;:177.72},{&quot;2026-08-21&quot;:177.72},{&quot;2026-08-22&quot;:177.72},{&quot;2026-08-23&quot;:177.72},{&quot;2026-08-24&quot;:178.07},{&quot;2026-08-25&quot;:176.11},{&quot;2026-08-26&quot;:176.11},{&quot;2026-08-27&quot;:176.11},{&quot;2026-08-28&quot;:175.59},{&quot;2026-08-29&quot;:175.59},{&quot;2026-08-30&quot;:175.59},{&quot;2026-08-31&quot;:175.59},{&quot;2026-09-01&quot;:175.59},{&quot;2026-09-02&quot;:175.59},{&quot;2026-09-03&quot;:175.59},{&quot;2026-09-04&quot;:175.59},{&quot;2026-09-05&quot;:175.59},{&quot;2026-09-06&quot;:175.59},{&quot;2026-09-07&quot;:175.59},{&quot;2026-09-08&quot;:175.59},{&quot;2026-09-09&quot;:176.01},{&quot;2026-09-10&quot;:176.61},{&quot;2026-09-11&quot;:176.28}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:73.97},{&quot;2026-06-14&quot;:73.66},{&quot;2026-06-15&quot;:73.66},{&quot;2026-06-16&quot;:73.56},{&quot;2026-06-17&quot;:72.51},{&quot;2026-06-18&quot;:73.21},{&quot;2026-06-19&quot;:71.87},{&quot;2026-06-20&quot;:69.47},{&quot;2026-06-21&quot;:69.47},{&quot;2026-06-22&quot;:69.3},{&quot;2026-06-23&quot;:69.23},{&quot;2026-06-24&quot;:68.83},{&quot;2026-06-25&quot;:68.79},{&quot;2026-06-26&quot;:69.0},{&quot;2026-06-27&quot;:73.21},{&quot;2026-06-28&quot;:74.1},{&quot;2026-06-29&quot;:74.1},{&quot;2026-06-30&quot;:75.41},{&quot;2026-07-01&quot;:74.87},{&quot;2026-07-02&quot;:74.87},{&quot;2026-07-03&quot;:74.85},{&quot;2026-07-04&quot;:74.85},{&quot;2026-07-05&quot;:74.99},{&quot;2026-07-06&quot;:75.04},{&quot;2026-07-07&quot;:75.02},{&quot;2026-07-08&quot;:75.24},{&quot;2026-07-09&quot;:75.4},{&quot;2026-07-10&quot;:75.1},{&quot;2026-07-11&quot;:77.22},{&quot;2026-07-12&quot;:73.11},{&quot;2026-07-13&quot;:73.11},{&quot;2026-07-14&quot;:73.11},{&quot;2026-07-15&quot;:72.35},{&quot;2026-07-16&quot;:72.12},{&quot;2026-07-17&quot;:72.06},{&quot;2026-07-18&quot;:72.71},{&quot;2026-07-19&quot;:73.1},{&quot;2026-07-20&quot;:73.1},{&quot;2026-07-21&quot;:73.06},{&quot;2026-07-22&quot;:72.64},{&quot;2026-07-23&quot;:71.1},{&quot;2026-07-24&quot;:71.06},{&quot;2026-07-25&quot;:70.41},{&quot;2026-07-26&quot;:70.77},{&quot;2026-07-27&quot;:70.99},{&quot;2026-07-28&quot;:70.99},{&quot;2026-07-29&quot;:70.95},{&quot;2026-07-30&quot;:71.28},{&quot;2026-07-31&quot;:67.05},{&quot;2026-08-01&quot;:66.49},{&quot;2026-08-02&quot;:67.05},{&quot;2026-08-03&quot;:66.64},{&quot;2026-08-04&quot;:66.55},{&quot;2026-08-05&quot;:66.35},{&quot;2026-08-07&quot;:66.15},{&quot;2026-08-08&quot;:66.2},{&quot;2026-08-09&quot;:64.68},{&quot;2026-08-10&quot;:64.68},{&quot;2026-08-11&quot;:63.97},{&quot;2026-08-12&quot;:63.71},{&quot;2026-08-13&quot;:65.48},{&quot;2026-08-14&quot;:66.55},{&quot;2026-08-15&quot;:66.51},{&quot;2026-08-16&quot;:66.59},{&quot;2026-08-17&quot;:66.65},{&quot;2026-08-18&quot;:66.48},{&quot;2026-08-19&quot;:68.09},{&quot;2026-08-20&quot;:68.2},{&quot;2026-08-21&quot;:68.11},{&quot;2026-08-22&quot;:68.16},{&quot;2026-08-23&quot;:69.91},{&quot;2026-08-24&quot;:69.91},{&quot;2026-08-25&quot;:69.48},{&quot;2026-08-26&quot;:69.36},{&quot;2026-08-27&quot;:70.19},{&quot;2026-08-28&quot;:70.7},{&quot;2026-08-29&quot;:70.7},{&quot;2026-08-30&quot;:70.12},{&quot;2026-08-31&quot;:69.56},{&quot;2026-09-01&quot;:69.56},{&quot;2026-09-02&quot;:71.25},{&quot;2026-09-03&quot;:71.4},{&quot;2026-09-04&quot;:71.68},{&quot;2026-09-05&quot;:71.68},{&quot;2026-09-06&quot;:70.35},{&quot;2026-09-07&quot;:70.96},{&quot;2026-09-08&quot;:71.13},{&quot;2026-09-09&quot;:70.46},{&quot;2026-09-10&quot;:70.31},{&quot;2026-09-11&quot;:71.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="108812"
  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-soa 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">
            Force of Will
        </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-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $65.39
          </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="Force of Will" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/7/a/7a87f8bc-1b3e-4cb2-9343-5f008e942411.jpg?1782683428" />

        <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">
            Force of Will
        </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">Instant</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"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Force of Will" src="https://cards.scryfall.io/large/front/7/a/7a87f8bc-1b3e-4cb2-9343-5f008e942411.jpg?1782683428" />
    </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">
                $65.39
              </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">
                $82.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">$36.00</span>
              <span class="text-xs text-grey-text">Credit: $46.80</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;:103.41},{&quot;2026-06-14&quot;:101.76},{&quot;2026-06-15&quot;:102.08},{&quot;2026-06-16&quot;:102.08},{&quot;2026-06-17&quot;:102.02},{&quot;2026-06-18&quot;:102.09},{&quot;2026-06-19&quot;:102.09},{&quot;2026-06-20&quot;:101.15},{&quot;2026-06-21&quot;:100.46},{&quot;2026-06-22&quot;:100.46},{&quot;2026-06-23&quot;:99.51},{&quot;2026-06-24&quot;:99.51},{&quot;2026-06-25&quot;:99.22},{&quot;2026-06-26&quot;:99.22},{&quot;2026-06-27&quot;:98.76},{&quot;2026-06-28&quot;:98.76},{&quot;2026-06-29&quot;:98.4},{&quot;2026-06-30&quot;:98.4},{&quot;2026-07-01&quot;:97.04},{&quot;2026-07-02&quot;:96.5},{&quot;2026-07-03&quot;:96.5},{&quot;2026-07-04&quot;:96.5},{&quot;2026-07-05&quot;:92.36},{&quot;2026-07-06&quot;:90.34},{&quot;2026-07-07&quot;:90.2},{&quot;2026-07-08&quot;:89.23},{&quot;2026-07-09&quot;:89.11},{&quot;2026-07-10&quot;:88.15},{&quot;2026-07-11&quot;:86.46},{&quot;2026-07-12&quot;:86.06},{&quot;2026-07-13&quot;:86.33},{&quot;2026-07-14&quot;:87.02},{&quot;2026-07-15&quot;:86.95},{&quot;2026-07-16&quot;:87.19},{&quot;2026-07-17&quot;:87.16},{&quot;2026-07-18&quot;:87.16},{&quot;2026-07-19&quot;:86.01},{&quot;2026-07-20&quot;:86.58},{&quot;2026-07-21&quot;:86.58},{&quot;2026-07-22&quot;:86.58},{&quot;2026-07-23&quot;:86.58},{&quot;2026-07-24&quot;:87.17},{&quot;2026-07-25&quot;:87.17},{&quot;2026-07-26&quot;:87.17},{&quot;2026-07-27&quot;:87.17},{&quot;2026-07-28&quot;:87.17},{&quot;2026-07-29&quot;:86.65},{&quot;2026-07-30&quot;:86.88},{&quot;2026-07-31&quot;:86.71},{&quot;2026-08-01&quot;:86.49},{&quot;2026-08-02&quot;:86.89},{&quot;2026-08-03&quot;:86.74},{&quot;2026-08-04&quot;:87.11},{&quot;2026-08-05&quot;:86.74},{&quot;2026-08-07&quot;:86.57},{&quot;2026-08-08&quot;:86.19},{&quot;2026-08-09&quot;:86.19},{&quot;2026-08-10&quot;:85.57},{&quot;2026-08-11&quot;:85.57},{&quot;2026-08-12&quot;:84.87},{&quot;2026-08-13&quot;:85.6},{&quot;2026-08-14&quot;:86.43},{&quot;2026-08-15&quot;:86.23},{&quot;2026-08-16&quot;:84.56},{&quot;2026-08-17&quot;:83.8},{&quot;2026-08-18&quot;:84.17},{&quot;2026-08-19&quot;:83.86},{&quot;2026-08-20&quot;:83.86},{&quot;2026-08-21&quot;:82.36},{&quot;2026-08-22&quot;:82.61},{&quot;2026-08-23&quot;:82.61},{&quot;2026-08-24&quot;:82.58},{&quot;2026-08-25&quot;:82.49},{&quot;2026-08-26&quot;:82.69},{&quot;2026-08-27&quot;:82.84},{&quot;2026-08-28&quot;:82.99},{&quot;2026-08-29&quot;:82.99},{&quot;2026-08-30&quot;:82.83},{&quot;2026-08-31&quot;:82.79},{&quot;2026-09-01&quot;:82.72},{&quot;2026-09-02&quot;:82.79},{&quot;2026-09-03&quot;:82.62},{&quot;2026-09-04&quot;:82.62},{&quot;2026-09-05&quot;:82.52},{&quot;2026-09-06&quot;:82.49},{&quot;2026-09-07&quot;:82.32},{&quot;2026-09-08&quot;:82.43},{&quot;2026-09-09&quot;:82.92},{&quot;2026-09-10&quot;:82.92},{&quot;2026-09-11&quot;:82.92}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:66.99},{&quot;2026-06-14&quot;:67.8},{&quot;2026-06-15&quot;:67.26},{&quot;2026-06-16&quot;:66.94},{&quot;2026-06-17&quot;:65.52},{&quot;2026-06-18&quot;:64.51},{&quot;2026-06-19&quot;:65.65},{&quot;2026-06-20&quot;:66.18},{&quot;2026-06-21&quot;:66.18},{&quot;2026-06-22&quot;:66.92},{&quot;2026-06-23&quot;:67.36},{&quot;2026-06-24&quot;:66.79},{&quot;2026-06-25&quot;:66.47},{&quot;2026-06-26&quot;:66.09},{&quot;2026-06-27&quot;:66.01},{&quot;2026-06-28&quot;:65.84},{&quot;2026-06-29&quot;:65.49},{&quot;2026-06-30&quot;:64.73},{&quot;2026-07-01&quot;:64.23},{&quot;2026-07-02&quot;:63.73},{&quot;2026-07-03&quot;:64.54},{&quot;2026-07-04&quot;:63.22},{&quot;2026-07-05&quot;:63.0},{&quot;2026-07-06&quot;:63.64},{&quot;2026-07-07&quot;:63.56},{&quot;2026-07-08&quot;:63.01},{&quot;2026-07-09&quot;:62.77},{&quot;2026-07-10&quot;:62.35},{&quot;2026-07-11&quot;:62.3},{&quot;2026-07-12&quot;:63.27},{&quot;2026-07-13&quot;:62.43},{&quot;2026-07-14&quot;:62.44},{&quot;2026-07-15&quot;:62.82},{&quot;2026-07-16&quot;:63.26},{&quot;2026-07-17&quot;:63.84},{&quot;2026-07-18&quot;:63.4},{&quot;2026-07-19&quot;:63.81},{&quot;2026-07-20&quot;:64.29},{&quot;2026-07-21&quot;:64.45},{&quot;2026-07-22&quot;:64.39},{&quot;2026-07-23&quot;:64.72},{&quot;2026-07-24&quot;:64.8},{&quot;2026-07-25&quot;:64.88},{&quot;2026-07-26&quot;:64.63},{&quot;2026-07-27&quot;:63.84},{&quot;2026-07-28&quot;:63.41},{&quot;2026-07-29&quot;:63.5},{&quot;2026-07-30&quot;:64.76},{&quot;2026-07-31&quot;:63.24},{&quot;2026-08-01&quot;:62.55},{&quot;2026-08-02&quot;:62.41},{&quot;2026-08-03&quot;:62.34},{&quot;2026-08-04&quot;:61.43},{&quot;2026-08-05&quot;:61.47},{&quot;2026-08-07&quot;:61.5},{&quot;2026-08-08&quot;:61.42},{&quot;2026-08-09&quot;:61.95},{&quot;2026-08-10&quot;:62.21},{&quot;2026-08-11&quot;:61.54},{&quot;2026-08-12&quot;:61.72},{&quot;2026-08-13&quot;:61.38},{&quot;2026-08-14&quot;:62.07},{&quot;2026-08-15&quot;:62.39},{&quot;2026-08-16&quot;:61.31},{&quot;2026-08-17&quot;:59.68},{&quot;2026-08-18&quot;:60.11},{&quot;2026-08-19&quot;:59.9},{&quot;2026-08-20&quot;:60.26},{&quot;2026-08-21&quot;:60.92},{&quot;2026-08-22&quot;:61.59},{&quot;2026-08-23&quot;:62.01},{&quot;2026-08-24&quot;:62.32},{&quot;2026-08-25&quot;:62.91},{&quot;2026-08-26&quot;:62.74},{&quot;2026-08-27&quot;:63.58},{&quot;2026-08-28&quot;:64.01},{&quot;2026-08-29&quot;:64.01},{&quot;2026-08-30&quot;:64.02},{&quot;2026-08-31&quot;:64.47},{&quot;2026-09-01&quot;:64.89},{&quot;2026-09-02&quot;:64.8},{&quot;2026-09-03&quot;:63.7},{&quot;2026-09-04&quot;:63.64},{&quot;2026-09-05&quot;:63.66},{&quot;2026-09-06&quot;:63.95},{&quot;2026-09-07&quot;:64.7},{&quot;2026-09-08&quot;:64.88},{&quot;2026-09-09&quot;:64.15},{&quot;2026-09-10&quot;:64.96},{&quot;2026-09-11&quot;:65.39}]}"
        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="109756"
  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-soa 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">
            Triumph of the Hordes
        </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="text-sm font-medium text-nine-white">
            $62.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="Triumph of the Hordes" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/2/c236853f-62fa-4bac-bdc0-295c8337fc2d.jpg?1783903870" />

        <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">
            Triumph of the Hordes
        </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">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-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="Triumph of the Hordes" src="https://cards.scryfall.io/large/front/c/2/c236853f-62fa-4bac-bdc0-295c8337fc2d.jpg?1783903870" />
    </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">
                $62.12
              </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">$42.50</span>
              <span class="text-xs text-grey-text">Credit: $55.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;:77.29},{&quot;2026-06-14&quot;:76.71},{&quot;2026-06-15&quot;:75.58},{&quot;2026-06-16&quot;:75.58},{&quot;2026-06-17&quot;:75.58},{&quot;2026-06-18&quot;:75.58},{&quot;2026-06-19&quot;:75.4},{&quot;2026-06-20&quot;:75.22},{&quot;2026-06-21&quot;:75.35},{&quot;2026-06-22&quot;:75.35},{&quot;2026-06-23&quot;:75.35},{&quot;2026-06-24&quot;:75.35},{&quot;2026-06-25&quot;:75.35},{&quot;2026-06-26&quot;:74.98},{&quot;2026-06-27&quot;:74.71},{&quot;2026-06-28&quot;:74.71},{&quot;2026-06-29&quot;:74.71},{&quot;2026-06-30&quot;:74.38},{&quot;2026-07-01&quot;:73.54},{&quot;2026-07-02&quot;:73.54},{&quot;2026-07-03&quot;:73.54},{&quot;2026-07-04&quot;:73.54},{&quot;2026-07-05&quot;:73.54},{&quot;2026-07-06&quot;:73.88},{&quot;2026-07-07&quot;:73.88},{&quot;2026-07-08&quot;:74.49},{&quot;2026-07-09&quot;:74.14},{&quot;2026-07-10&quot;:74.14},{&quot;2026-07-11&quot;:74.14},{&quot;2026-07-12&quot;:74.14},{&quot;2026-07-13&quot;:74.14},{&quot;2026-07-14&quot;:74.14},{&quot;2026-07-15&quot;:74.14},{&quot;2026-07-16&quot;:73.65},{&quot;2026-07-17&quot;:74.15},{&quot;2026-07-18&quot;:74.15},{&quot;2026-07-19&quot;:73.72},{&quot;2026-07-20&quot;:73.59},{&quot;2026-07-21&quot;:73.95},{&quot;2026-07-22&quot;:73.95},{&quot;2026-07-23&quot;:73.95},{&quot;2026-07-24&quot;:73.1},{&quot;2026-07-25&quot;:71.49},{&quot;2026-07-26&quot;:71.05},{&quot;2026-07-27&quot;:71.05},{&quot;2026-07-28&quot;:70.55},{&quot;2026-07-29&quot;:70.55},{&quot;2026-07-30&quot;:70.55},{&quot;2026-07-31&quot;:70.55},{&quot;2026-08-01&quot;:70.55},{&quot;2026-08-02&quot;:70.62},{&quot;2026-08-03&quot;:70.25},{&quot;2026-08-04&quot;:69.49},{&quot;2026-08-05&quot;:69.49},{&quot;2026-08-07&quot;:69.49},{&quot;2026-08-08&quot;:69.49},{&quot;2026-08-09&quot;:69.49},{&quot;2026-08-10&quot;:69.49},{&quot;2026-08-11&quot;:69.49},{&quot;2026-08-12&quot;:69.16},{&quot;2026-08-13&quot;:68.26},{&quot;2026-08-14&quot;:68.11},{&quot;2026-08-15&quot;:68.11},{&quot;2026-08-16&quot;:67.45},{&quot;2026-08-17&quot;:67.13},{&quot;2026-08-18&quot;:66.23},{&quot;2026-08-19&quot;:65.68},{&quot;2026-08-20&quot;:65.68},{&quot;2026-08-21&quot;:65.68},{&quot;2026-08-22&quot;:65.68},{&quot;2026-08-23&quot;:65.68},{&quot;2026-08-24&quot;:65.39},{&quot;2026-08-25&quot;:65.15},{&quot;2026-08-26&quot;:65.33},{&quot;2026-08-27&quot;:63.92},{&quot;2026-08-28&quot;:63.68},{&quot;2026-08-29&quot;:63.68},{&quot;2026-08-30&quot;:63.52},{&quot;2026-08-31&quot;:62.45},{&quot;2026-09-01&quot;:62.29},{&quot;2026-09-02&quot;:62.29},{&quot;2026-09-03&quot;:62.29},{&quot;2026-09-04&quot;:62.12},{&quot;2026-09-05&quot;:62.12},{&quot;2026-09-06&quot;:62.12},{&quot;2026-09-07&quot;:62.12},{&quot;2026-09-08&quot;:62.12},{&quot;2026-09-09&quot;:62.12},{&quot;2026-09-10&quot;:62.12},{&quot;2026-09-11&quot;:62.12}],&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="79460"
  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-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">
            Sliver Legion
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Sliver
      </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">
            $62.05
          </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="Sliver Legion" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/7/87545415-2e27-4841-a3af-7653af2ba6d3.jpg?1783927759" />

        <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">
            Sliver Legion
        </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 — Sliver</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><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></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="Sliver Legion" src="https://cards.scryfall.io/large/front/8/7/87545415-2e27-4841-a3af-7653af2ba6d3.jpg?1783927759" />
    </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">
                $41.72
              </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">
                $62.05
              </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">$30.00</span>
              <span class="text-xs text-grey-text">Credit: $39.00</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;:66.36},{&quot;2026-06-12&quot;:66.36},{&quot;2026-06-13&quot;:66.36},{&quot;2026-06-14&quot;:66.36},{&quot;2026-06-15&quot;:66.05},{&quot;2026-06-16&quot;:66.05},{&quot;2026-06-17&quot;:66.05},{&quot;2026-06-18&quot;:66.05},{&quot;2026-06-19&quot;:66.05},{&quot;2026-06-20&quot;:66.05},{&quot;2026-06-21&quot;:66.05},{&quot;2026-06-22&quot;:66.05},{&quot;2026-06-23&quot;:66.05},{&quot;2026-06-24&quot;:66.05},{&quot;2026-06-25&quot;:66.05},{&quot;2026-06-26&quot;:66.05},{&quot;2026-06-27&quot;:66.05},{&quot;2026-06-28&quot;:66.05},{&quot;2026-06-29&quot;:66.05},{&quot;2026-06-30&quot;:66.05},{&quot;2026-07-01&quot;:66.05},{&quot;2026-07-02&quot;:66.05},{&quot;2026-07-03&quot;:66.05},{&quot;2026-07-04&quot;:66.05},{&quot;2026-07-05&quot;:66.05},{&quot;2026-07-06&quot;:66.05},{&quot;2026-07-07&quot;:66.05},{&quot;2026-07-08&quot;:65.73},{&quot;2026-07-09&quot;:65.73},{&quot;2026-07-10&quot;:65.73},{&quot;2026-07-11&quot;:65.73},{&quot;2026-07-12&quot;:65.73},{&quot;2026-07-13&quot;:65.73},{&quot;2026-07-14&quot;:65.73},{&quot;2026-07-15&quot;:65.73},{&quot;2026-07-16&quot;:65.73},{&quot;2026-07-17&quot;:65.73},{&quot;2026-07-18&quot;:65.05},{&quot;2026-07-19&quot;:65.05},{&quot;2026-07-20&quot;:65.05},{&quot;2026-07-21&quot;:65.05},{&quot;2026-07-23&quot;:65.05},{&quot;2026-07-25&quot;:65.05},{&quot;2026-07-26&quot;:65.05},{&quot;2026-07-27&quot;:65.05},{&quot;2026-07-28&quot;:65.05},{&quot;2026-07-29&quot;:65.05},{&quot;2026-07-30&quot;:65.05},{&quot;2026-07-31&quot;:65.05},{&quot;2026-08-01&quot;:65.05},{&quot;2026-08-02&quot;:65.05},{&quot;2026-08-03&quot;:65.05},{&quot;2026-08-04&quot;:65.05},{&quot;2026-08-05&quot;:65.05},{&quot;2026-08-07&quot;:65.05},{&quot;2026-08-08&quot;:65.05},{&quot;2026-08-09&quot;:65.05},{&quot;2026-08-10&quot;:65.05},{&quot;2026-08-11&quot;:65.05},{&quot;2026-08-12&quot;:65.05},{&quot;2026-08-13&quot;:64.56},{&quot;2026-08-14&quot;:64.56},{&quot;2026-08-15&quot;:64.56},{&quot;2026-08-16&quot;:64.56},{&quot;2026-08-17&quot;:63.68},{&quot;2026-08-18&quot;:63.68},{&quot;2026-08-19&quot;:63.68},{&quot;2026-08-20&quot;:63.68},{&quot;2026-08-21&quot;:63.68},{&quot;2026-08-22&quot;:63.68},{&quot;2026-08-23&quot;:63.68},{&quot;2026-08-24&quot;:63.68},{&quot;2026-08-25&quot;:63.68},{&quot;2026-08-26&quot;:63.68},{&quot;2026-08-27&quot;:63.68},{&quot;2026-08-28&quot;:63.68},{&quot;2026-08-29&quot;:63.68},{&quot;2026-08-30&quot;:63.68},{&quot;2026-08-31&quot;:63.68},{&quot;2026-09-01&quot;:63.68},{&quot;2026-09-02&quot;:63.68},{&quot;2026-09-03&quot;:62.05},{&quot;2026-09-04&quot;:62.05},{&quot;2026-09-05&quot;:62.05},{&quot;2026-09-06&quot;:62.05},{&quot;2026-09-07&quot;:62.05},{&quot;2026-09-08&quot;:62.05},{&quot;2026-09-09&quot;:62.05},{&quot;2026-09-10&quot;:62.05},{&quot;2026-09-11&quot;:62.05}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:39.84},{&quot;2026-06-12&quot;:39.74},{&quot;2026-06-13&quot;:40.25},{&quot;2026-06-14&quot;:40.18},{&quot;2026-06-15&quot;:40.78},{&quot;2026-06-16&quot;:40.62},{&quot;2026-06-17&quot;:41.07},{&quot;2026-06-18&quot;:40.91},{&quot;2026-06-19&quot;:40.91},{&quot;2026-06-20&quot;:40.91},{&quot;2026-06-21&quot;:40.84},{&quot;2026-06-22&quot;:40.87},{&quot;2026-06-23&quot;:41.59},{&quot;2026-06-24&quot;:41.71},{&quot;2026-06-25&quot;:41.99},{&quot;2026-06-26&quot;:42.37},{&quot;2026-06-27&quot;:42.84},{&quot;2026-06-28&quot;:42.35},{&quot;2026-06-29&quot;:42.35},{&quot;2026-06-30&quot;:42.03},{&quot;2026-07-01&quot;:41.93},{&quot;2026-07-02&quot;:41.93},{&quot;2026-07-03&quot;:42.32},{&quot;2026-07-04&quot;:42.56},{&quot;2026-07-05&quot;:42.56},{&quot;2026-07-06&quot;:42.6},{&quot;2026-07-07&quot;:43.14},{&quot;2026-07-08&quot;:43.14},{&quot;2026-07-09&quot;:43.17},{&quot;2026-07-10&quot;:43.13},{&quot;2026-07-11&quot;:43.3},{&quot;2026-07-12&quot;:43.3},{&quot;2026-07-13&quot;:43.37},{&quot;2026-07-14&quot;:43.45},{&quot;2026-07-15&quot;:43.45},{&quot;2026-07-16&quot;:43.35},{&quot;2026-07-17&quot;:43.14},{&quot;2026-07-18&quot;:42.6},{&quot;2026-07-19&quot;:42.6},{&quot;2026-07-20&quot;:42.6},{&quot;2026-07-21&quot;:41.82},{&quot;2026-07-23&quot;:41.82},{&quot;2026-07-25&quot;:41.75},{&quot;2026-07-26&quot;:41.71},{&quot;2026-07-27&quot;:41.49},{&quot;2026-07-28&quot;:41.42},{&quot;2026-07-29&quot;:41.74},{&quot;2026-07-30&quot;:41.12},{&quot;2026-07-31&quot;:41.12},{&quot;2026-08-01&quot;:41.16},{&quot;2026-08-02&quot;:41.07},{&quot;2026-08-03&quot;:41.07},{&quot;2026-08-04&quot;:40.63},{&quot;2026-08-05&quot;:39.8},{&quot;2026-08-07&quot;:38.93},{&quot;2026-08-08&quot;:39.11},{&quot;2026-08-09&quot;:39.11},{&quot;2026-08-10&quot;:38.94},{&quot;2026-08-11&quot;:38.88},{&quot;2026-08-12&quot;:40.29},{&quot;2026-08-13&quot;:40.53},{&quot;2026-08-14&quot;:40.86},{&quot;2026-08-15&quot;:41.45},{&quot;2026-08-16&quot;:41.11},{&quot;2026-08-17&quot;:41.11},{&quot;2026-08-18&quot;:41.11},{&quot;2026-08-19&quot;:40.63},{&quot;2026-08-20&quot;:40.63},{&quot;2026-08-21&quot;:40.63},{&quot;2026-08-22&quot;:40.85},{&quot;2026-08-23&quot;:40.85},{&quot;2026-08-24&quot;:40.57},{&quot;2026-08-25&quot;:40.57},{&quot;2026-08-26&quot;:40.68},{&quot;2026-08-27&quot;:41.16},{&quot;2026-08-28&quot;:41.16},{&quot;2026-08-29&quot;:41.16},{&quot;2026-08-30&quot;:41.24},{&quot;2026-08-31&quot;:41.31},{&quot;2026-09-01&quot;:41.31},{&quot;2026-09-02&quot;:41.4},{&quot;2026-09-03&quot;:41.32},{&quot;2026-09-04&quot;:41.66},{&quot;2026-09-05&quot;:41.66},{&quot;2026-09-06&quot;:41.66},{&quot;2026-09-07&quot;:41.85},{&quot;2026-09-08&quot;:41.85},{&quot;2026-09-09&quot;:41.72},{&quot;2026-09-10&quot;:41.72},{&quot;2026-09-11&quot;:41.72}]}"
        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="87414"
  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-wot 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">
            Smothering Tithe
        </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">
              ↑
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $61.75
          </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="Smothering Tithe" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/f/6/f6c69c2f-729b-49ed-909d-57190a728e11.jpg?1783914931" />

        <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">
            Smothering Tithe
        </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-3'></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="Smothering Tithe" src="https://cards.scryfall.io/large/front/f/6/f6c69c2f-729b-49ed-909d-57190a728e11.jpg?1783914931" />
    </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">
                $61.75
              </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">
                $75.02
              </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">$39.00</span>
              <span class="text-xs text-grey-text">Credit: $50.70</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;:70.04},{&quot;2026-06-11&quot;:70.04},{&quot;2026-06-12&quot;:70.04},{&quot;2026-06-13&quot;:70.04},{&quot;2026-06-14&quot;:70.04},{&quot;2026-06-15&quot;:70.76},{&quot;2026-06-16&quot;:70.76},{&quot;2026-06-17&quot;:70.76},{&quot;2026-06-18&quot;:70.76},{&quot;2026-06-19&quot;:70.76},{&quot;2026-06-20&quot;:70.96},{&quot;2026-06-21&quot;:70.96},{&quot;2026-06-22&quot;:71.03},{&quot;2026-06-23&quot;:70.67},{&quot;2026-06-24&quot;:70.67},{&quot;2026-06-25&quot;:70.67},{&quot;2026-06-26&quot;:70.67},{&quot;2026-06-27&quot;:70.67},{&quot;2026-06-28&quot;:70.67},{&quot;2026-06-29&quot;:70.67},{&quot;2026-06-30&quot;:70.67},{&quot;2026-07-01&quot;:70.67},{&quot;2026-07-02&quot;:70.11},{&quot;2026-07-03&quot;:69.93},{&quot;2026-07-04&quot;:69.93},{&quot;2026-07-05&quot;:69.83},{&quot;2026-07-06&quot;:69.83},{&quot;2026-07-07&quot;:70.3},{&quot;2026-07-08&quot;:70.3},{&quot;2026-07-09&quot;:70.3},{&quot;2026-07-10&quot;:70.3},{&quot;2026-07-11&quot;:70.3},{&quot;2026-07-12&quot;:70.3},{&quot;2026-07-13&quot;:70.3},{&quot;2026-07-14&quot;:70.3},{&quot;2026-07-15&quot;:70.3},{&quot;2026-07-16&quot;:70.3},{&quot;2026-07-17&quot;:70.95},{&quot;2026-07-18&quot;:70.95},{&quot;2026-07-19&quot;:70.95},{&quot;2026-07-20&quot;:71.87},{&quot;2026-07-21&quot;:72.75},{&quot;2026-07-23&quot;:72.75},{&quot;2026-07-25&quot;:73.22},{&quot;2026-07-26&quot;:73.22},{&quot;2026-07-27&quot;:73.22},{&quot;2026-07-29&quot;:73.22},{&quot;2026-07-30&quot;:73.22},{&quot;2026-07-31&quot;:73.22},{&quot;2026-08-01&quot;:73.22},{&quot;2026-08-02&quot;:73.22},{&quot;2026-08-03&quot;:73.22},{&quot;2026-08-04&quot;:73.22},{&quot;2026-08-05&quot;:73.22},{&quot;2026-08-07&quot;:73.69},{&quot;2026-08-08&quot;:73.69},{&quot;2026-08-09&quot;:73.69},{&quot;2026-08-10&quot;:73.69},{&quot;2026-08-11&quot;:73.69},{&quot;2026-08-12&quot;:73.69},{&quot;2026-08-13&quot;:73.92},{&quot;2026-08-14&quot;:73.92},{&quot;2026-08-15&quot;:73.92},{&quot;2026-08-16&quot;:73.92},{&quot;2026-08-17&quot;:73.92},{&quot;2026-08-18&quot;:71.34},{&quot;2026-08-19&quot;:71.34},{&quot;2026-08-20&quot;:71.34},{&quot;2026-08-21&quot;:71.34},{&quot;2026-08-22&quot;:71.77},{&quot;2026-08-23&quot;:71.77},{&quot;2026-08-24&quot;:71.77},{&quot;2026-08-25&quot;:71.77},{&quot;2026-08-26&quot;:71.77},{&quot;2026-08-27&quot;:71.77},{&quot;2026-08-28&quot;:71.77},{&quot;2026-08-29&quot;:71.77},{&quot;2026-08-30&quot;:71.77},{&quot;2026-08-31&quot;:71.77},{&quot;2026-09-01&quot;:71.77},{&quot;2026-09-02&quot;:71.97},{&quot;2026-09-03&quot;:71.97},{&quot;2026-09-04&quot;:72.1},{&quot;2026-09-05&quot;:74.68},{&quot;2026-09-06&quot;:74.68},{&quot;2026-09-07&quot;:74.68},{&quot;2026-09-08&quot;:74.68},{&quot;2026-09-09&quot;:74.68},{&quot;2026-09-10&quot;:74.68},{&quot;2026-09-11&quot;:75.02}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:59.1},{&quot;2026-06-11&quot;:59.34},{&quot;2026-06-12&quot;:59.34},{&quot;2026-06-13&quot;:61.15},{&quot;2026-06-14&quot;:62.09},{&quot;2026-06-15&quot;:62.69},{&quot;2026-06-16&quot;:62.81},{&quot;2026-06-17&quot;:62.88},{&quot;2026-06-18&quot;:62.88},{&quot;2026-06-19&quot;:62.47},{&quot;2026-06-20&quot;:62.47},{&quot;2026-06-21&quot;:62.47},{&quot;2026-06-22&quot;:62.21},{&quot;2026-06-23&quot;:62.21},{&quot;2026-06-24&quot;:62.21},{&quot;2026-06-25&quot;:63.04},{&quot;2026-06-26&quot;:63.04},{&quot;2026-06-27&quot;:63.05},{&quot;2026-06-28&quot;:63.05},{&quot;2026-06-29&quot;:63.46},{&quot;2026-06-30&quot;:63.63},{&quot;2026-07-01&quot;:63.63},{&quot;2026-07-02&quot;:63.56},{&quot;2026-07-03&quot;:63.36},{&quot;2026-07-04&quot;:62.88},{&quot;2026-07-05&quot;:62.71},{&quot;2026-07-06&quot;:62.47},{&quot;2026-07-07&quot;:62.88},{&quot;2026-07-08&quot;:63.16},{&quot;2026-07-09&quot;:63.47},{&quot;2026-07-10&quot;:63.47},{&quot;2026-07-11&quot;:63.49},{&quot;2026-07-12&quot;:63.49},{&quot;2026-07-13&quot;:63.07},{&quot;2026-07-14&quot;:63.28},{&quot;2026-07-15&quot;:63.08},{&quot;2026-07-16&quot;:62.35},{&quot;2026-07-17&quot;:62.23},{&quot;2026-07-18&quot;:62.78},{&quot;2026-07-19&quot;:62.92},{&quot;2026-07-20&quot;:62.53},{&quot;2026-07-21&quot;:62.08},{&quot;2026-07-23&quot;:62.71},{&quot;2026-07-25&quot;:62.71},{&quot;2026-07-26&quot;:62.53},{&quot;2026-07-27&quot;:62.33},{&quot;2026-07-29&quot;:62.59},{&quot;2026-07-30&quot;:62.3},{&quot;2026-07-31&quot;:62.13},{&quot;2026-08-01&quot;:62.28},{&quot;2026-08-02&quot;:62.23},{&quot;2026-08-03&quot;:62.85},{&quot;2026-08-04&quot;:62.45},{&quot;2026-08-05&quot;:61.7},{&quot;2026-08-07&quot;:59.94},{&quot;2026-08-08&quot;:59.7},{&quot;2026-08-09&quot;:59.06},{&quot;2026-08-10&quot;:58.3},{&quot;2026-08-11&quot;:57.58},{&quot;2026-08-12&quot;:56.71},{&quot;2026-08-13&quot;:55.74},{&quot;2026-08-14&quot;:55.62},{&quot;2026-08-15&quot;:55.7},{&quot;2026-08-16&quot;:56.53},{&quot;2026-08-17&quot;:56.55},{&quot;2026-08-18&quot;:57.75},{&quot;2026-08-19&quot;:58.28},{&quot;2026-08-20&quot;:58.28},{&quot;2026-08-21&quot;:58.43},{&quot;2026-08-22&quot;:58.49},{&quot;2026-08-23&quot;:59.07},{&quot;2026-08-24&quot;:59.07},{&quot;2026-08-25&quot;:59.07},{&quot;2026-08-26&quot;:59.48},{&quot;2026-08-27&quot;:59.21},{&quot;2026-08-28&quot;:60.03},{&quot;2026-08-29&quot;:60.03},{&quot;2026-08-30&quot;:59.74},{&quot;2026-08-31&quot;:60.27},{&quot;2026-09-01&quot;:60.27},{&quot;2026-09-02&quot;:60.46},{&quot;2026-09-03&quot;:60.46},{&quot;2026-09-04&quot;:60.63},{&quot;2026-09-05&quot;:60.83},{&quot;2026-09-06&quot;:61.3},{&quot;2026-09-07&quot;:61.83},{&quot;2026-09-08&quot;:61.39},{&quot;2026-09-09&quot;:61.41},{&quot;2026-09-10&quot;:61.55},{&quot;2026-09-11&quot;:61.75}]}"
        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="18279"
  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-dmr 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">
            Vampiric Tutor
        </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="text-sm font-medium text-nine-white">
            $61.56
          </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="Vampiric Tutor" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/4/34a0203f-9cce-43a4-9cb7-8ce6647895cd.jpg?1783918468" />

        <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">
            Vampiric Tutor
        </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">Instant</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="Vampiric Tutor" src="https://cards.scryfall.io/large/front/3/4/34a0203f-9cce-43a4-9cb7-8ce6647895cd.jpg?1783918468" />
    </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">
                $54.59
              </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">
                $61.56
              </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">$28.00</span>
              <span class="text-xs text-grey-text">Credit: $36.40</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;:69.22},{&quot;2026-06-12&quot;:69.22},{&quot;2026-06-13&quot;:69.22},{&quot;2026-06-14&quot;:69.22},{&quot;2026-06-15&quot;:69.22},{&quot;2026-06-16&quot;:69.22},{&quot;2026-06-17&quot;:69.22},{&quot;2026-06-18&quot;:68.89},{&quot;2026-06-19&quot;:68.89},{&quot;2026-06-20&quot;:68.89},{&quot;2026-06-21&quot;:68.89},{&quot;2026-06-22&quot;:68.89},{&quot;2026-06-23&quot;:68.03},{&quot;2026-06-24&quot;:67.61},{&quot;2026-06-25&quot;:67.61},{&quot;2026-06-26&quot;:67.61},{&quot;2026-06-27&quot;:67.61},{&quot;2026-06-28&quot;:67.61},{&quot;2026-06-29&quot;:67.61},{&quot;2026-06-30&quot;:67.61},{&quot;2026-07-01&quot;:67.61},{&quot;2026-07-02&quot;:67.61},{&quot;2026-07-03&quot;:67.61},{&quot;2026-07-04&quot;:67.61},{&quot;2026-07-05&quot;:67.31},{&quot;2026-07-06&quot;:67.31},{&quot;2026-07-07&quot;:67.31},{&quot;2026-07-08&quot;:66.81},{&quot;2026-07-09&quot;:66.81},{&quot;2026-07-10&quot;:66.81},{&quot;2026-07-11&quot;:66.29},{&quot;2026-07-12&quot;:66.29},{&quot;2026-07-13&quot;:66.29},{&quot;2026-07-14&quot;:66.06},{&quot;2026-07-15&quot;:66.06},{&quot;2026-07-16&quot;:66.06},{&quot;2026-07-17&quot;:65.88},{&quot;2026-07-18&quot;:65.88},{&quot;2026-07-19&quot;:65.88},{&quot;2026-07-20&quot;:65.88},{&quot;2026-07-21&quot;:65.88},{&quot;2026-07-23&quot;:65.88},{&quot;2026-07-25&quot;:65.78},{&quot;2026-07-26&quot;:65.78},{&quot;2026-07-27&quot;:65.78},{&quot;2026-07-28&quot;:65.78},{&quot;2026-07-29&quot;:65.78},{&quot;2026-07-30&quot;:65.78},{&quot;2026-07-31&quot;:65.78},{&quot;2026-08-01&quot;:65.78},{&quot;2026-08-02&quot;:65.62},{&quot;2026-08-03&quot;:65.49},{&quot;2026-08-04&quot;:65.49},{&quot;2026-08-05&quot;:65.49},{&quot;2026-08-07&quot;:65.49},{&quot;2026-08-08&quot;:65.49},{&quot;2026-08-09&quot;:65.49},{&quot;2026-08-10&quot;:65.49},{&quot;2026-08-11&quot;:65.49},{&quot;2026-08-12&quot;:65.49},{&quot;2026-08-13&quot;:63.91},{&quot;2026-08-14&quot;:62.97},{&quot;2026-08-15&quot;:62.97},{&quot;2026-08-16&quot;:62.97},{&quot;2026-08-17&quot;:62.97},{&quot;2026-08-18&quot;:62.48},{&quot;2026-08-19&quot;:62.48},{&quot;2026-08-20&quot;:62.48},{&quot;2026-08-21&quot;:61.99},{&quot;2026-08-22&quot;:61.99},{&quot;2026-08-23&quot;:61.99},{&quot;2026-08-24&quot;:61.99},{&quot;2026-08-25&quot;:61.99},{&quot;2026-08-26&quot;:61.84},{&quot;2026-08-27&quot;:61.84},{&quot;2026-08-28&quot;:61.84},{&quot;2026-08-29&quot;:61.84},{&quot;2026-08-30&quot;:61.84},{&quot;2026-08-31&quot;:61.84},{&quot;2026-09-01&quot;:61.84},{&quot;2026-09-02&quot;:61.84},{&quot;2026-09-03&quot;:61.84},{&quot;2026-09-04&quot;:61.84},{&quot;2026-09-05&quot;:61.84},{&quot;2026-09-06&quot;:61.84},{&quot;2026-09-07&quot;:61.84},{&quot;2026-09-08&quot;:61.84},{&quot;2026-09-09&quot;:61.84},{&quot;2026-09-10&quot;:61.56},{&quot;2026-09-11&quot;:61.56}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:60.28},{&quot;2026-06-12&quot;:59.89},{&quot;2026-06-13&quot;:60.66},{&quot;2026-06-14&quot;:60.63},{&quot;2026-06-15&quot;:60.87},{&quot;2026-06-16&quot;:61.79},{&quot;2026-06-17&quot;:62.02},{&quot;2026-06-18&quot;:61.92},{&quot;2026-06-19&quot;:61.92},{&quot;2026-06-20&quot;:62.07},{&quot;2026-06-21&quot;:61.91},{&quot;2026-06-22&quot;:61.87},{&quot;2026-06-23&quot;:61.87},{&quot;2026-06-24&quot;:61.46},{&quot;2026-06-25&quot;:61.06},{&quot;2026-06-26&quot;:60.29},{&quot;2026-06-27&quot;:60.29},{&quot;2026-06-28&quot;:60.29},{&quot;2026-06-29&quot;:60.29},{&quot;2026-06-30&quot;:60.29},{&quot;2026-07-01&quot;:60.29},{&quot;2026-07-02&quot;:60.29},{&quot;2026-07-03&quot;:60.46},{&quot;2026-07-04&quot;:60.3},{&quot;2026-07-05&quot;:60.3},{&quot;2026-07-06&quot;:59.93},{&quot;2026-07-07&quot;:59.93},{&quot;2026-07-08&quot;:59.93},{&quot;2026-07-09&quot;:60.29},{&quot;2026-07-10&quot;:60.01},{&quot;2026-07-11&quot;:60.01},{&quot;2026-07-12&quot;:60.17},{&quot;2026-07-13&quot;:60.17},{&quot;2026-07-14&quot;:60.09},{&quot;2026-07-15&quot;:59.82},{&quot;2026-07-16&quot;:59.82},{&quot;2026-07-17&quot;:59.82},{&quot;2026-07-18&quot;:59.82},{&quot;2026-07-19&quot;:59.99},{&quot;2026-07-20&quot;:60.08},{&quot;2026-07-21&quot;:59.13},{&quot;2026-07-23&quot;:58.52},{&quot;2026-07-25&quot;:58.03},{&quot;2026-07-26&quot;:58.03},{&quot;2026-07-27&quot;:58.03},{&quot;2026-07-28&quot;:58.03},{&quot;2026-07-29&quot;:58.03},{&quot;2026-07-30&quot;:58.03},{&quot;2026-07-31&quot;:57.41},{&quot;2026-08-01&quot;:57.23},{&quot;2026-08-02&quot;:57.23},{&quot;2026-08-03&quot;:57.23},{&quot;2026-08-04&quot;:57.18},{&quot;2026-08-05&quot;:57.18},{&quot;2026-08-07&quot;:56.48},{&quot;2026-08-08&quot;:56.18},{&quot;2026-08-09&quot;:56.18},{&quot;2026-08-10&quot;:56.04},{&quot;2026-08-11&quot;:56.04},{&quot;2026-08-12&quot;:56.04},{&quot;2026-08-13&quot;:55.69},{&quot;2026-08-14&quot;:55.69},{&quot;2026-08-15&quot;:55.69},{&quot;2026-08-16&quot;:55.69},{&quot;2026-08-17&quot;:55.45},{&quot;2026-08-18&quot;:55.11},{&quot;2026-08-19&quot;:55.11},{&quot;2026-08-20&quot;:55.11},{&quot;2026-08-21&quot;:55.11},{&quot;2026-08-22&quot;:55.0},{&quot;2026-08-23&quot;:55.0},{&quot;2026-08-24&quot;:55.0},{&quot;2026-08-25&quot;:55.0},{&quot;2026-08-26&quot;:54.47},{&quot;2026-08-27&quot;:54.47},{&quot;2026-08-28&quot;:54.47},{&quot;2026-08-29&quot;:54.47},{&quot;2026-08-30&quot;:53.67},{&quot;2026-08-31&quot;:53.66},{&quot;2026-09-01&quot;:53.66},{&quot;2026-09-02&quot;:53.64},{&quot;2026-09-03&quot;:53.73},{&quot;2026-09-04&quot;:53.51},{&quot;2026-09-05&quot;:53.51},{&quot;2026-09-06&quot;:53.95},{&quot;2026-09-07&quot;:53.97},{&quot;2026-09-08&quot;:53.95},{&quot;2026-09-09&quot;:53.97},{&quot;2026-09-10&quot;:54.34},{&quot;2026-09-11&quot;:54.59}]}"
        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="48794"
  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-mh2 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">
            Esper Sentinel
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Artifact Creature — Human Soldier
      </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">
            $61.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="Esper Sentinel" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/f/3/f3537373-ef54-4578-9d05-6216420ee349.jpg?1783926893" />

        <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">
            Esper Sentinel
        </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 — Human Soldier</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="Esper Sentinel" src="https://cards.scryfall.io/large/front/f/3/f3537373-ef54-4578-9d05-6216420ee349.jpg?1783926893" />
    </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">
                $61.20
              </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">
                $80.83
              </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">$39.00</span>
              <span class="text-xs text-grey-text">Credit: $50.70</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;:79.45},{&quot;2026-06-10&quot;:79.94},{&quot;2026-06-11&quot;:79.94},{&quot;2026-06-12&quot;:79.94},{&quot;2026-06-13&quot;:79.94},{&quot;2026-06-14&quot;:79.94},{&quot;2026-06-15&quot;:79.94},{&quot;2026-06-16&quot;:79.94},{&quot;2026-06-17&quot;:80.59},{&quot;2026-06-18&quot;:81.01},{&quot;2026-06-19&quot;:81.33},{&quot;2026-06-20&quot;:82.14},{&quot;2026-06-21&quot;:82.14},{&quot;2026-06-22&quot;:82.9},{&quot;2026-06-24&quot;:82.9},{&quot;2026-06-25&quot;:82.9},{&quot;2026-06-26&quot;:82.9},{&quot;2026-06-27&quot;:82.9},{&quot;2026-06-28&quot;:82.9},{&quot;2026-06-29&quot;:82.9},{&quot;2026-06-30&quot;:83.14},{&quot;2026-07-01&quot;:83.14},{&quot;2026-07-02&quot;:83.74},{&quot;2026-07-03&quot;:84.92},{&quot;2026-07-04&quot;:84.92},{&quot;2026-07-05&quot;:84.92},{&quot;2026-07-06&quot;:84.92},{&quot;2026-07-07&quot;:84.92},{&quot;2026-07-08&quot;:84.92},{&quot;2026-07-09&quot;:84.92},{&quot;2026-07-10&quot;:84.92},{&quot;2026-07-11&quot;:84.92},{&quot;2026-07-12&quot;:84.92},{&quot;2026-07-13&quot;:85.61},{&quot;2026-07-14&quot;:85.61},{&quot;2026-07-15&quot;:85.61},{&quot;2026-07-16&quot;:85.61},{&quot;2026-07-17&quot;:85.61},{&quot;2026-07-18&quot;:85.61},{&quot;2026-07-19&quot;:85.61},{&quot;2026-07-20&quot;:85.61},{&quot;2026-07-21&quot;:85.61},{&quot;2026-07-23&quot;:85.61},{&quot;2026-07-25&quot;:85.61},{&quot;2026-07-26&quot;:85.61},{&quot;2026-07-27&quot;:85.61},{&quot;2026-07-29&quot;:85.61},{&quot;2026-07-30&quot;:85.61},{&quot;2026-07-31&quot;:85.61},{&quot;2026-08-01&quot;:85.13},{&quot;2026-08-02&quot;:84.9},{&quot;2026-08-03&quot;:84.33},{&quot;2026-08-04&quot;:84.33},{&quot;2026-08-05&quot;:83.72},{&quot;2026-08-07&quot;:83.72},{&quot;2026-08-08&quot;:83.72},{&quot;2026-08-09&quot;:83.72},{&quot;2026-08-10&quot;:83.19},{&quot;2026-08-11&quot;:83.19},{&quot;2026-08-12&quot;:83.19},{&quot;2026-08-13&quot;:82.93},{&quot;2026-08-14&quot;:82.4},{&quot;2026-08-15&quot;:82.4},{&quot;2026-08-16&quot;:82.4},{&quot;2026-08-17&quot;:82.4},{&quot;2026-08-18&quot;:82.4},{&quot;2026-08-19&quot;:82.1},{&quot;2026-08-20&quot;:82.1},{&quot;2026-08-21&quot;:82.1},{&quot;2026-08-22&quot;:82.1},{&quot;2026-08-23&quot;:81.81},{&quot;2026-08-24&quot;:81.66},{&quot;2026-08-25&quot;:81.66},{&quot;2026-08-26&quot;:80.91},{&quot;2026-08-27&quot;:80.91},{&quot;2026-08-28&quot;:80.91},{&quot;2026-08-29&quot;:80.91},{&quot;2026-08-30&quot;:80.91},{&quot;2026-08-31&quot;:80.91},{&quot;2026-09-01&quot;:80.91},{&quot;2026-09-02&quot;:80.91},{&quot;2026-09-03&quot;:80.91},{&quot;2026-09-04&quot;:81.39},{&quot;2026-09-05&quot;:81.39},{&quot;2026-09-06&quot;:80.73},{&quot;2026-09-07&quot;:80.83},{&quot;2026-09-08&quot;:80.83},{&quot;2026-09-09&quot;:80.83},{&quot;2026-09-10&quot;:80.83},{&quot;2026-09-11&quot;:80.83}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:55.85},{&quot;2026-06-10&quot;:55.33},{&quot;2026-06-11&quot;:55.61},{&quot;2026-06-12&quot;:58.08},{&quot;2026-06-13&quot;:57.78},{&quot;2026-06-14&quot;:58.81},{&quot;2026-06-15&quot;:58.54},{&quot;2026-06-16&quot;:60.48},{&quot;2026-06-17&quot;:60.89},{&quot;2026-06-18&quot;:60.39},{&quot;2026-06-19&quot;:60.07},{&quot;2026-06-20&quot;:58.39},{&quot;2026-06-21&quot;:58.06},{&quot;2026-06-22&quot;:58.0},{&quot;2026-06-24&quot;:58.75},{&quot;2026-06-25&quot;:59.1},{&quot;2026-06-26&quot;:58.4},{&quot;2026-06-27&quot;:56.42},{&quot;2026-06-28&quot;:59.09},{&quot;2026-06-29&quot;:59.53},{&quot;2026-06-30&quot;:62.02},{&quot;2026-07-01&quot;:60.83},{&quot;2026-07-02&quot;:62.35},{&quot;2026-07-03&quot;:62.79},{&quot;2026-07-04&quot;:62.5},{&quot;2026-07-05&quot;:60.05},{&quot;2026-07-06&quot;:58.7},{&quot;2026-07-07&quot;:58.24},{&quot;2026-07-08&quot;:58.01},{&quot;2026-07-09&quot;:57.39},{&quot;2026-07-10&quot;:57.68},{&quot;2026-07-11&quot;:57.84},{&quot;2026-07-12&quot;:58.03},{&quot;2026-07-13&quot;:56.38},{&quot;2026-07-14&quot;:55.56},{&quot;2026-07-15&quot;:54.56},{&quot;2026-07-16&quot;:55.03},{&quot;2026-07-17&quot;:56.22},{&quot;2026-07-18&quot;:57.25},{&quot;2026-07-19&quot;:57.73},{&quot;2026-07-20&quot;:57.11},{&quot;2026-07-21&quot;:58.13},{&quot;2026-07-23&quot;:58.18},{&quot;2026-07-25&quot;:57.5},{&quot;2026-07-26&quot;:57.5},{&quot;2026-07-27&quot;:59.34},{&quot;2026-07-29&quot;:59.23},{&quot;2026-07-30&quot;:60.28},{&quot;2026-07-31&quot;:60.85},{&quot;2026-08-01&quot;:60.85},{&quot;2026-08-02&quot;:61.61},{&quot;2026-08-03&quot;:59.92},{&quot;2026-08-04&quot;:59.85},{&quot;2026-08-05&quot;:59.36},{&quot;2026-08-07&quot;:59.39},{&quot;2026-08-08&quot;:59.84},{&quot;2026-08-09&quot;:59.33},{&quot;2026-08-10&quot;:59.99},{&quot;2026-08-11&quot;:59.68},{&quot;2026-08-12&quot;:60.03},{&quot;2026-08-13&quot;:60.24},{&quot;2026-08-14&quot;:59.5},{&quot;2026-08-15&quot;:58.13},{&quot;2026-08-16&quot;:57.88},{&quot;2026-08-17&quot;:58.76},{&quot;2026-08-18&quot;:59.62},{&quot;2026-08-19&quot;:58.0},{&quot;2026-08-20&quot;:58.0},{&quot;2026-08-21&quot;:58.6},{&quot;2026-08-22&quot;:58.26},{&quot;2026-08-23&quot;:59.17},{&quot;2026-08-24&quot;:57.48},{&quot;2026-08-25&quot;:57.48},{&quot;2026-08-26&quot;:57.96},{&quot;2026-08-27&quot;:58.3},{&quot;2026-08-28&quot;:58.16},{&quot;2026-08-29&quot;:58.16},{&quot;2026-08-30&quot;:59.73},{&quot;2026-08-31&quot;:60.64},{&quot;2026-09-01&quot;:60.64},{&quot;2026-09-02&quot;:62.69},{&quot;2026-09-03&quot;:60.13},{&quot;2026-09-04&quot;:60.37},{&quot;2026-09-05&quot;:59.54},{&quot;2026-09-06&quot;:59.73},{&quot;2026-09-07&quot;:60.12},{&quot;2026-09-08&quot;:62.24},{&quot;2026-09-09&quot;:63.3},{&quot;2026-09-10&quot;:62.21},{&quot;2026-09-11&quot;:61.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="11928"
  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">
            Ancient Silver Dragon
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Elder 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">
            $59.57
          </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="Ancient Silver Dragon" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/e/ced18935-4ce9-466e-a88d-2b14ff8f989f.jpg?1783922795" />

        <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">
            Ancient Silver Dragon
        </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 — Elder Dragon</span>
        </div>

          <div class="flex items-center mt-2 space-x-0.5">
            <i class='no-tailwind ms ms-cost ml-0 ms-6'></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="Ancient Silver Dragon" src="https://cards.scryfall.io/large/front/c/e/ced18935-4ce9-466e-a88d-2b14ff8f989f.jpg?1783922795" />
    </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">
                $54.92
              </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">
                $59.57
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$37.50</span>
              <span class="text-xs text-grey-text">Credit: $48.75</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;:62.52},{&quot;2026-06-14&quot;:62.52},{&quot;2026-06-15&quot;:62.52},{&quot;2026-06-16&quot;:62.52},{&quot;2026-06-17&quot;:62.52},{&quot;2026-06-18&quot;:62.52},{&quot;2026-06-19&quot;:62.52},{&quot;2026-06-20&quot;:62.52},{&quot;2026-06-21&quot;:62.7},{&quot;2026-06-22&quot;:62.7},{&quot;2026-06-23&quot;:62.7},{&quot;2026-06-24&quot;:62.7},{&quot;2026-06-25&quot;:62.7},{&quot;2026-06-26&quot;:62.7},{&quot;2026-06-27&quot;:62.7},{&quot;2026-06-28&quot;:62.7},{&quot;2026-06-29&quot;:62.7},{&quot;2026-06-30&quot;:62.7},{&quot;2026-07-01&quot;:61.63},{&quot;2026-07-02&quot;:61.63},{&quot;2026-07-03&quot;:61.63},{&quot;2026-07-04&quot;:61.63},{&quot;2026-07-05&quot;:61.63},{&quot;2026-07-06&quot;:61.63},{&quot;2026-07-07&quot;:61.63},{&quot;2026-07-08&quot;:61.63},{&quot;2026-07-09&quot;:61.63},{&quot;2026-07-10&quot;:61.63},{&quot;2026-07-11&quot;:61.63},{&quot;2026-07-12&quot;:61.63},{&quot;2026-07-13&quot;:61.63},{&quot;2026-07-14&quot;:62.01},{&quot;2026-07-15&quot;:62.01},{&quot;2026-07-16&quot;:62.01},{&quot;2026-07-17&quot;:62.01},{&quot;2026-07-18&quot;:62.01},{&quot;2026-07-19&quot;:62.01},{&quot;2026-07-20&quot;:62.01},{&quot;2026-07-21&quot;:62.01},{&quot;2026-07-22&quot;:62.01},{&quot;2026-07-23&quot;:62.01},{&quot;2026-07-24&quot;:62.01},{&quot;2026-07-25&quot;:62.01},{&quot;2026-07-26&quot;:62.81},{&quot;2026-07-27&quot;:62.81},{&quot;2026-07-28&quot;:62.81},{&quot;2026-07-29&quot;:62.5},{&quot;2026-07-30&quot;:62.5},{&quot;2026-07-31&quot;:62.54},{&quot;2026-08-01&quot;:62.54},{&quot;2026-08-02&quot;:62.16},{&quot;2026-08-03&quot;:62.16},{&quot;2026-08-04&quot;:62.16},{&quot;2026-08-05&quot;:62.16},{&quot;2026-08-07&quot;:62.16},{&quot;2026-08-08&quot;:62.16},{&quot;2026-08-09&quot;:62.16},{&quot;2026-08-10&quot;:62.16},{&quot;2026-08-11&quot;:62.16},{&quot;2026-08-12&quot;:62.16},{&quot;2026-08-13&quot;:62.16},{&quot;2026-08-14&quot;:61.8},{&quot;2026-08-15&quot;:61.8},{&quot;2026-08-16&quot;:61.8},{&quot;2026-08-17&quot;:61.8},{&quot;2026-08-18&quot;:61.33},{&quot;2026-08-19&quot;:60.89},{&quot;2026-08-20&quot;:60.89},{&quot;2026-08-21&quot;:60.89},{&quot;2026-08-22&quot;:60.89},{&quot;2026-08-23&quot;:60.89},{&quot;2026-08-24&quot;:60.89},{&quot;2026-08-25&quot;:60.93},{&quot;2026-08-26&quot;:60.93},{&quot;2026-08-27&quot;:60.84},{&quot;2026-08-28&quot;:60.84},{&quot;2026-08-29&quot;:60.84},{&quot;2026-08-30&quot;:60.84},{&quot;2026-08-31&quot;:60.17},{&quot;2026-09-01&quot;:60.1},{&quot;2026-09-02&quot;:60.1},{&quot;2026-09-03&quot;:60.59},{&quot;2026-09-04&quot;:61.11},{&quot;2026-09-05&quot;:61.11},{&quot;2026-09-06&quot;:61.11},{&quot;2026-09-07&quot;:61.09},{&quot;2026-09-08&quot;:61.09},{&quot;2026-09-09&quot;:60.55},{&quot;2026-09-10&quot;:59.57},{&quot;2026-09-11&quot;:59.57}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:54.49},{&quot;2026-06-14&quot;:54.69},{&quot;2026-06-15&quot;:54.66},{&quot;2026-06-16&quot;:54.97},{&quot;2026-06-17&quot;:55.22},{&quot;2026-06-18&quot;:55.29},{&quot;2026-06-19&quot;:55.63},{&quot;2026-06-20&quot;:55.84},{&quot;2026-06-21&quot;:55.84},{&quot;2026-06-22&quot;:56.05},{&quot;2026-06-23&quot;:56.05},{&quot;2026-06-24&quot;:56.05},{&quot;2026-06-25&quot;:56.13},{&quot;2026-06-26&quot;:55.93},{&quot;2026-06-27&quot;:55.81},{&quot;2026-06-28&quot;:55.83},{&quot;2026-06-29&quot;:55.83},{&quot;2026-06-30&quot;:55.83},{&quot;2026-07-01&quot;:56.37},{&quot;2026-07-02&quot;:56.37},{&quot;2026-07-03&quot;:56.51},{&quot;2026-07-04&quot;:56.66},{&quot;2026-07-05&quot;:56.64},{&quot;2026-07-06&quot;:57.0},{&quot;2026-07-07&quot;:57.3},{&quot;2026-07-08&quot;:57.29},{&quot;2026-07-09&quot;:57.29},{&quot;2026-07-10&quot;:57.29},{&quot;2026-07-11&quot;:57.31},{&quot;2026-07-12&quot;:57.08},{&quot;2026-07-13&quot;:56.58},{&quot;2026-07-14&quot;:56.58},{&quot;2026-07-15&quot;:56.58},{&quot;2026-07-16&quot;:56.58},{&quot;2026-07-17&quot;:56.4},{&quot;2026-07-18&quot;:56.48},{&quot;2026-07-19&quot;:56.85},{&quot;2026-07-20&quot;:57.23},{&quot;2026-07-21&quot;:57.51},{&quot;2026-07-22&quot;:56.65},{&quot;2026-07-23&quot;:56.65},{&quot;2026-07-24&quot;:56.77},{&quot;2026-07-25&quot;:56.77},{&quot;2026-07-26&quot;:56.77},{&quot;2026-07-27&quot;:56.74},{&quot;2026-07-28&quot;:56.78},{&quot;2026-07-29&quot;:57.14},{&quot;2026-07-30&quot;:57.11},{&quot;2026-07-31&quot;:56.7},{&quot;2026-08-01&quot;:55.64},{&quot;2026-08-02&quot;:55.47},{&quot;2026-08-03&quot;:55.41},{&quot;2026-08-04&quot;:54.99},{&quot;2026-08-05&quot;:55.31},{&quot;2026-08-07&quot;:55.31},{&quot;2026-08-08&quot;:55.31},{&quot;2026-08-09&quot;:55.16},{&quot;2026-08-10&quot;:54.81},{&quot;2026-08-11&quot;:54.81},{&quot;2026-08-12&quot;:54.81},{&quot;2026-08-13&quot;:54.56},{&quot;2026-08-14&quot;:55.03},{&quot;2026-08-15&quot;:54.59},{&quot;2026-08-16&quot;:55.31},{&quot;2026-08-17&quot;:56.31},{&quot;2026-08-18&quot;:56.97},{&quot;2026-08-19&quot;:57.09},{&quot;2026-08-20&quot;:57.62},{&quot;2026-08-21&quot;:58.38},{&quot;2026-08-22&quot;:58.38},{&quot;2026-08-23&quot;:57.91},{&quot;2026-08-24&quot;:57.91},{&quot;2026-08-25&quot;:57.81},{&quot;2026-08-26&quot;:57.19},{&quot;2026-08-27&quot;:57.19},{&quot;2026-08-28&quot;:57.19},{&quot;2026-08-29&quot;:57.19},{&quot;2026-08-30&quot;:56.69},{&quot;2026-08-31&quot;:56.61},{&quot;2026-09-01&quot;:56.32},{&quot;2026-09-02&quot;:56.6},{&quot;2026-09-03&quot;:56.66},{&quot;2026-09-04&quot;:56.18},{&quot;2026-09-05&quot;:56.18},{&quot;2026-09-06&quot;:56.18},{&quot;2026-09-07&quot;:56.0},{&quot;2026-09-08&quot;:55.5},{&quot;2026-09-09&quot;:55.5},{&quot;2026-09-10&quot;:54.92},{&quot;2026-09-11&quot;:54.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="21109"
  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">
            Force of Negation
        </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="text-sm font-medium text-nine-white">
            $59.41
          </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="Force of Negation" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/5/3/5396b405-6fa0-43d7-a8f6-f64154e95e98.jpg?1783921774" />

        <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">
            Force of Negation
        </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-1'></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="Force of Negation" src="https://cards.scryfall.io/large/front/5/3/5396b405-6fa0-43d7-a8f6-f64154e95e98.jpg?1783921774" />
    </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">
                $59.41
              </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">
                $70.21
              </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">$51.00</span>
              <span class="text-xs text-grey-text">Credit: $66.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-08&quot;:68.05},{&quot;2026-06-10&quot;:68.23},{&quot;2026-06-11&quot;:68.37},{&quot;2026-06-12&quot;:68.37},{&quot;2026-06-13&quot;:68.37},{&quot;2026-06-14&quot;:68.77},{&quot;2026-06-15&quot;:68.77},{&quot;2026-06-16&quot;:69.77},{&quot;2026-06-17&quot;:69.39},{&quot;2026-06-18&quot;:69.39},{&quot;2026-06-19&quot;:69.39},{&quot;2026-06-20&quot;:69.72},{&quot;2026-06-21&quot;:69.72},{&quot;2026-06-22&quot;:69.72},{&quot;2026-06-24&quot;:69.72},{&quot;2026-06-25&quot;:69.86},{&quot;2026-06-26&quot;:69.86},{&quot;2026-06-27&quot;:69.86},{&quot;2026-06-28&quot;:70.08},{&quot;2026-06-29&quot;:70.31},{&quot;2026-06-30&quot;:70.77},{&quot;2026-07-01&quot;:70.77},{&quot;2026-07-02&quot;:70.77},{&quot;2026-07-03&quot;:70.77},{&quot;2026-07-04&quot;:70.9},{&quot;2026-07-05&quot;:71.23},{&quot;2026-07-06&quot;:71.23},{&quot;2026-07-07&quot;:71.23},{&quot;2026-07-08&quot;:71.56},{&quot;2026-07-09&quot;:71.56},{&quot;2026-07-10&quot;:71.56},{&quot;2026-07-11&quot;:71.56},{&quot;2026-07-12&quot;:71.62},{&quot;2026-07-13&quot;:71.62},{&quot;2026-07-14&quot;:71.62},{&quot;2026-07-15&quot;:71.65},{&quot;2026-07-16&quot;:72.03},{&quot;2026-07-17&quot;:72.31},{&quot;2026-07-18&quot;:72.08},{&quot;2026-07-19&quot;:72.08},{&quot;2026-07-20&quot;:71.74},{&quot;2026-07-21&quot;:71.74},{&quot;2026-07-23&quot;:71.86},{&quot;2026-07-25&quot;:71.86},{&quot;2026-07-26&quot;:71.86},{&quot;2026-07-27&quot;:71.86},{&quot;2026-07-29&quot;:71.63},{&quot;2026-07-30&quot;:71.64},{&quot;2026-07-31&quot;:71.72},{&quot;2026-08-01&quot;:71.72},{&quot;2026-08-02&quot;:71.72},{&quot;2026-08-03&quot;:71.19},{&quot;2026-08-04&quot;:71.18},{&quot;2026-08-05&quot;:71.18},{&quot;2026-08-07&quot;:71.18},{&quot;2026-08-08&quot;:71.18},{&quot;2026-08-09&quot;:71.18},{&quot;2026-08-10&quot;:71.18},{&quot;2026-08-11&quot;:71.03},{&quot;2026-08-12&quot;:71.03},{&quot;2026-08-13&quot;:71.08},{&quot;2026-08-14&quot;:71.08},{&quot;2026-08-15&quot;:71.08},{&quot;2026-08-16&quot;:71.05},{&quot;2026-08-17&quot;:71.05},{&quot;2026-08-18&quot;:71.05},{&quot;2026-08-19&quot;:71.05},{&quot;2026-08-20&quot;:71.05},{&quot;2026-08-21&quot;:70.82},{&quot;2026-08-22&quot;:70.82},{&quot;2026-08-23&quot;:70.72},{&quot;2026-08-24&quot;:70.72},{&quot;2026-08-25&quot;:70.72},{&quot;2026-08-26&quot;:70.79},{&quot;2026-08-27&quot;:70.79},{&quot;2026-08-28&quot;:70.79},{&quot;2026-08-29&quot;:70.79},{&quot;2026-08-30&quot;:70.67},{&quot;2026-08-31&quot;:70.67},{&quot;2026-09-01&quot;:70.67},{&quot;2026-09-02&quot;:70.5},{&quot;2026-09-03&quot;:70.5},{&quot;2026-09-04&quot;:70.5},{&quot;2026-09-05&quot;:70.5},{&quot;2026-09-06&quot;:70.5},{&quot;2026-09-07&quot;:70.5},{&quot;2026-09-08&quot;:70.5},{&quot;2026-09-09&quot;:70.5},{&quot;2026-09-10&quot;:70.5},{&quot;2026-09-11&quot;:70.21}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:55.77},{&quot;2026-06-10&quot;:55.77},{&quot;2026-06-11&quot;:57.97},{&quot;2026-06-12&quot;:58.31},{&quot;2026-06-13&quot;:58.31},{&quot;2026-06-14&quot;:58.65},{&quot;2026-06-15&quot;:58.98},{&quot;2026-06-16&quot;:58.96},{&quot;2026-06-17&quot;:58.96},{&quot;2026-06-18&quot;:58.83},{&quot;2026-06-19&quot;:58.83},{&quot;2026-06-20&quot;:58.83},{&quot;2026-06-21&quot;:58.63},{&quot;2026-06-22&quot;:58.69},{&quot;2026-06-24&quot;:58.64},{&quot;2026-06-25&quot;:58.35},{&quot;2026-06-26&quot;:58.45},{&quot;2026-06-27&quot;:58.45},{&quot;2026-06-28&quot;:57.85},{&quot;2026-06-29&quot;:57.87},{&quot;2026-06-30&quot;:57.54},{&quot;2026-07-01&quot;:57.42},{&quot;2026-07-02&quot;:57.42},{&quot;2026-07-03&quot;:57.42},{&quot;2026-07-04&quot;:57.57},{&quot;2026-07-05&quot;:57.57},{&quot;2026-07-06&quot;:57.57},{&quot;2026-07-07&quot;:57.77},{&quot;2026-07-08&quot;:57.77},{&quot;2026-07-09&quot;:57.88},{&quot;2026-07-10&quot;:57.88},{&quot;2026-07-11&quot;:58.0},{&quot;2026-07-12&quot;:58.0},{&quot;2026-07-13&quot;:57.46},{&quot;2026-07-14&quot;:57.28},{&quot;2026-07-15&quot;:57.28},{&quot;2026-07-16&quot;:57.28},{&quot;2026-07-17&quot;:57.28},{&quot;2026-07-18&quot;:57.32},{&quot;2026-07-19&quot;:57.32},{&quot;2026-07-20&quot;:57.32},{&quot;2026-07-21&quot;:57.58},{&quot;2026-07-23&quot;:57.6},{&quot;2026-07-25&quot;:57.65},{&quot;2026-07-26&quot;:57.65},{&quot;2026-07-27&quot;:57.65},{&quot;2026-07-29&quot;:58.29},{&quot;2026-07-30&quot;:58.26},{&quot;2026-07-31&quot;:58.26},{&quot;2026-08-01&quot;:58.26},{&quot;2026-08-02&quot;:57.87},{&quot;2026-08-03&quot;:58.02},{&quot;2026-08-04&quot;:58.05},{&quot;2026-08-05&quot;:58.1},{&quot;2026-08-07&quot;:57.78},{&quot;2026-08-08&quot;:58.22},{&quot;2026-08-09&quot;:58.31},{&quot;2026-08-10&quot;:58.31},{&quot;2026-08-11&quot;:58.31},{&quot;2026-08-12&quot;:58.31},{&quot;2026-08-13&quot;:58.51},{&quot;2026-08-14&quot;:58.43},{&quot;2026-08-15&quot;:58.45},{&quot;2026-08-16&quot;:58.48},{&quot;2026-08-17&quot;:58.6},{&quot;2026-08-18&quot;:58.6},{&quot;2026-08-19&quot;:58.6},{&quot;2026-08-20&quot;:58.6},{&quot;2026-08-21&quot;:58.66},{&quot;2026-08-22&quot;:59.22},{&quot;2026-08-23&quot;:59.4},{&quot;2026-08-24&quot;:59.66},{&quot;2026-08-25&quot;:59.66},{&quot;2026-08-26&quot;:59.85},{&quot;2026-08-27&quot;:59.73},{&quot;2026-08-28&quot;:59.72},{&quot;2026-08-29&quot;:59.72},{&quot;2026-08-30&quot;:59.74},{&quot;2026-08-31&quot;:59.78},{&quot;2026-09-01&quot;:59.78},{&quot;2026-09-02&quot;:59.7},{&quot;2026-09-03&quot;:59.26},{&quot;2026-09-04&quot;:59.53},{&quot;2026-09-05&quot;:59.53},{&quot;2026-09-06&quot;:59.57},{&quot;2026-09-07&quot;:59.38},{&quot;2026-09-08&quot;:59.38},{&quot;2026-09-09&quot;:59.39},{&quot;2026-09-10&quot;:59.41},{&quot;2026-09-11&quot;:59.41}]}"
        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="21004"
  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">
            Phyrexian Altar
        </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="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">
            $58.83
          </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 Altar" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/9/5/95d9f93c-50a8-41a9-be98-d1900bf1c12f.jpg?1783921789" />

        <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 Altar
        </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-3'></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 Altar" src="https://cards.scryfall.io/large/front/9/5/95d9f93c-50a8-41a9-be98-d1900bf1c12f.jpg?1783921789" />
    </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">
                $58.83
              </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">
                $59.67
              </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">$42.00</span>
              <span class="text-xs text-grey-text">Credit: $54.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;2026-06-13&quot;:54.04},{&quot;2026-06-14&quot;:54.49},{&quot;2026-06-15&quot;:54.81},{&quot;2026-06-16&quot;:54.81},{&quot;2026-06-17&quot;:54.81},{&quot;2026-06-18&quot;:54.81},{&quot;2026-06-19&quot;:54.93},{&quot;2026-06-20&quot;:54.93},{&quot;2026-06-21&quot;:54.93},{&quot;2026-06-22&quot;:54.93},{&quot;2026-06-23&quot;:54.93},{&quot;2026-06-24&quot;:55.26},{&quot;2026-06-25&quot;:55.26},{&quot;2026-06-26&quot;:55.51},{&quot;2026-06-27&quot;:55.51},{&quot;2026-06-28&quot;:55.51},{&quot;2026-06-29&quot;:55.51},{&quot;2026-06-30&quot;:55.51},{&quot;2026-07-01&quot;:55.74},{&quot;2026-07-02&quot;:55.74},{&quot;2026-07-03&quot;:55.74},{&quot;2026-07-04&quot;:55.74},{&quot;2026-07-05&quot;:55.74},{&quot;2026-07-06&quot;:55.74},{&quot;2026-07-07&quot;:55.74},{&quot;2026-07-08&quot;:55.96},{&quot;2026-07-09&quot;:55.96},{&quot;2026-07-10&quot;:55.96},{&quot;2026-07-11&quot;:55.65},{&quot;2026-07-12&quot;:55.65},{&quot;2026-07-13&quot;:55.65},{&quot;2026-07-14&quot;:55.65},{&quot;2026-07-15&quot;:55.65},{&quot;2026-07-16&quot;:55.65},{&quot;2026-07-17&quot;:55.57},{&quot;2026-07-18&quot;:55.57},{&quot;2026-07-19&quot;:55.57},{&quot;2026-07-20&quot;:55.57},{&quot;2026-07-21&quot;:55.57},{&quot;2026-07-22&quot;:55.41},{&quot;2026-07-23&quot;:55.41},{&quot;2026-07-24&quot;:55.41},{&quot;2026-07-25&quot;:56.02},{&quot;2026-07-26&quot;:56.02},{&quot;2026-07-27&quot;:56.02},{&quot;2026-07-28&quot;:56.02},{&quot;2026-07-29&quot;:56.02},{&quot;2026-07-30&quot;:56.1},{&quot;2026-07-31&quot;:56.1},{&quot;2026-08-01&quot;:56.1},{&quot;2026-08-02&quot;:57.4},{&quot;2026-08-03&quot;:57.89},{&quot;2026-08-04&quot;:57.89},{&quot;2026-08-05&quot;:57.89},{&quot;2026-08-07&quot;:59.27},{&quot;2026-08-08&quot;:59.27},{&quot;2026-08-09&quot;:59.27},{&quot;2026-08-10&quot;:59.36},{&quot;2026-08-11&quot;:59.36},{&quot;2026-08-12&quot;:59.53},{&quot;2026-08-13&quot;:59.52},{&quot;2026-08-14&quot;:59.52},{&quot;2026-08-15&quot;:59.52},{&quot;2026-08-16&quot;:59.51},{&quot;2026-08-17&quot;:59.51},{&quot;2026-08-18&quot;:59.32},{&quot;2026-08-19&quot;:59.32},{&quot;2026-08-20&quot;:59.32},{&quot;2026-08-21&quot;:59.32},{&quot;2026-08-22&quot;:59.32},{&quot;2026-08-23&quot;:59.32},{&quot;2026-08-24&quot;:59.32},{&quot;2026-08-25&quot;:59.28},{&quot;2026-08-26&quot;:59.28},{&quot;2026-08-27&quot;:59.28},{&quot;2026-08-28&quot;:59.28},{&quot;2026-08-29&quot;:59.28},{&quot;2026-08-30&quot;:59.21},{&quot;2026-08-31&quot;:59.39},{&quot;2026-09-01&quot;:59.39},{&quot;2026-09-02&quot;:59.61},{&quot;2026-09-03&quot;:59.61},{&quot;2026-09-04&quot;:59.61},{&quot;2026-09-05&quot;:59.67},{&quot;2026-09-06&quot;:59.67},{&quot;2026-09-07&quot;:59.67},{&quot;2026-09-08&quot;:59.67},{&quot;2026-09-09&quot;:59.67},{&quot;2026-09-10&quot;:59.67},{&quot;2026-09-11&quot;:59.67}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:55.26},{&quot;2026-06-14&quot;:55.58},{&quot;2026-06-15&quot;:55.53},{&quot;2026-06-16&quot;:55.51},{&quot;2026-06-17&quot;:55.38},{&quot;2026-06-18&quot;:56.16},{&quot;2026-06-19&quot;:55.81},{&quot;2026-06-20&quot;:55.89},{&quot;2026-06-21&quot;:56.28},{&quot;2026-06-22&quot;:56.27},{&quot;2026-06-23&quot;:56.03},{&quot;2026-06-24&quot;:56.72},{&quot;2026-06-25&quot;:57.02},{&quot;2026-06-26&quot;:57.47},{&quot;2026-06-27&quot;:57.24},{&quot;2026-06-28&quot;:57.21},{&quot;2026-06-29&quot;:57.21},{&quot;2026-06-30&quot;:57.38},{&quot;2026-07-01&quot;:57.11},{&quot;2026-07-02&quot;:56.71},{&quot;2026-07-03&quot;:56.79},{&quot;2026-07-04&quot;:56.79},{&quot;2026-07-05&quot;:56.75},{&quot;2026-07-06&quot;:56.75},{&quot;2026-07-07&quot;:56.91},{&quot;2026-07-08&quot;:56.91},{&quot;2026-07-09&quot;:56.91},{&quot;2026-07-10&quot;:56.91},{&quot;2026-07-11&quot;:56.83},{&quot;2026-07-12&quot;:56.83},{&quot;2026-07-13&quot;:56.86},{&quot;2026-07-14&quot;:57.5},{&quot;2026-07-15&quot;:57.09},{&quot;2026-07-16&quot;:57.09},{&quot;2026-07-17&quot;:57.33},{&quot;2026-07-18&quot;:57.17},{&quot;2026-07-19&quot;:57.05},{&quot;2026-07-20&quot;:56.92},{&quot;2026-07-21&quot;:56.88},{&quot;2026-07-22&quot;:56.74},{&quot;2026-07-23&quot;:56.98},{&quot;2026-07-24&quot;:56.98},{&quot;2026-07-25&quot;:56.98},{&quot;2026-07-26&quot;:56.67},{&quot;2026-07-27&quot;:57.03},{&quot;2026-07-28&quot;:56.51},{&quot;2026-07-29&quot;:56.51},{&quot;2026-07-30&quot;:56.5},{&quot;2026-07-31&quot;:56.35},{&quot;2026-08-01&quot;:56.2},{&quot;2026-08-02&quot;:56.24},{&quot;2026-08-03&quot;:56.24},{&quot;2026-08-04&quot;:56.24},{&quot;2026-08-05&quot;:56.2},{&quot;2026-08-07&quot;:56.59},{&quot;2026-08-08&quot;:56.07},{&quot;2026-08-09&quot;:55.67},{&quot;2026-08-10&quot;:55.78},{&quot;2026-08-11&quot;:55.68},{&quot;2026-08-12&quot;:55.39},{&quot;2026-08-13&quot;:55.75},{&quot;2026-08-14&quot;:55.71},{&quot;2026-08-15&quot;:55.22},{&quot;2026-08-16&quot;:55.48},{&quot;2026-08-17&quot;:55.54},{&quot;2026-08-18&quot;:55.77},{&quot;2026-08-19&quot;:55.68},{&quot;2026-08-20&quot;:56.16},{&quot;2026-08-21&quot;:56.15},{&quot;2026-08-22&quot;:56.03},{&quot;2026-08-23&quot;:55.54},{&quot;2026-08-24&quot;:55.81},{&quot;2026-08-25&quot;:56.15},{&quot;2026-08-26&quot;:56.15},{&quot;2026-08-27&quot;:55.99},{&quot;2026-08-28&quot;:55.86},{&quot;2026-08-29&quot;:55.86},{&quot;2026-08-30&quot;:56.1},{&quot;2026-08-31&quot;:56.31},{&quot;2026-09-01&quot;:56.33},{&quot;2026-09-02&quot;:56.33},{&quot;2026-09-03&quot;:56.76},{&quot;2026-09-04&quot;:56.76},{&quot;2026-09-05&quot;:56.88},{&quot;2026-09-06&quot;:56.68},{&quot;2026-09-07&quot;:56.96},{&quot;2026-09-08&quot;:57.61},{&quot;2026-09-09&quot;:57.61},{&quot;2026-09-10&quot;:58.83},{&quot;2026-09-11&quot;:58.83}]}"
        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="18833"
  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-dmr 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">
            Force of Will
        </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">
              ↓
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $58.78
          </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="Force of Will" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/8/3/83240eaa-edb4-4bd3-b193-29470cf46828.jpg?1783918388" />

        <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">
            Force of Will
        </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">Instant</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"
    >
        <img class="w-full max-w-xs mx-auto h-auto rounded-2xl" alt="Force of Will" src="https://cards.scryfall.io/large/front/8/3/83240eaa-edb4-4bd3-b193-29470cf46828.jpg?1783918388" />
    </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">
                $58.78
              </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">
                $108.70
              </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">$49.00</span>
              <span class="text-xs text-grey-text">Credit: $63.70</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;:116.81},{&quot;2026-06-11&quot;:116.81},{&quot;2026-06-12&quot;:116.81},{&quot;2026-06-13&quot;:116.81},{&quot;2026-06-14&quot;:116.81},{&quot;2026-06-15&quot;:116.81},{&quot;2026-06-16&quot;:117.12},{&quot;2026-06-17&quot;:117.12},{&quot;2026-06-18&quot;:116.96},{&quot;2026-06-19&quot;:116.96},{&quot;2026-06-20&quot;:116.96},{&quot;2026-06-21&quot;:116.96},{&quot;2026-06-22&quot;:116.96},{&quot;2026-06-23&quot;:116.96},{&quot;2026-06-24&quot;:116.96},{&quot;2026-06-25&quot;:116.96},{&quot;2026-06-26&quot;:116.96},{&quot;2026-06-27&quot;:116.96},{&quot;2026-06-28&quot;:116.96},{&quot;2026-06-29&quot;:116.96},{&quot;2026-06-30&quot;:116.24},{&quot;2026-07-01&quot;:116.55},{&quot;2026-07-02&quot;:116.55},{&quot;2026-07-03&quot;:116.55},{&quot;2026-07-04&quot;:116.55},{&quot;2026-07-05&quot;:116.43},{&quot;2026-07-06&quot;:116.27},{&quot;2026-07-07&quot;:115.92},{&quot;2026-07-08&quot;:115.92},{&quot;2026-07-09&quot;:115.92},{&quot;2026-07-10&quot;:115.92},{&quot;2026-07-11&quot;:115.92},{&quot;2026-07-12&quot;:115.92},{&quot;2026-07-13&quot;:115.56},{&quot;2026-07-14&quot;:115.56},{&quot;2026-07-15&quot;:115.56},{&quot;2026-07-16&quot;:115.56},{&quot;2026-07-17&quot;:114.76},{&quot;2026-07-18&quot;:114.76},{&quot;2026-07-19&quot;:114.76},{&quot;2026-07-20&quot;:114.84},{&quot;2026-07-21&quot;:114.84},{&quot;2026-07-23&quot;:114.84},{&quot;2026-07-25&quot;:114.86},{&quot;2026-07-26&quot;:114.86},{&quot;2026-07-27&quot;:114.43},{&quot;2026-07-29&quot;:114.43},{&quot;2026-07-30&quot;:114.54},{&quot;2026-07-31&quot;:114.54},{&quot;2026-08-01&quot;:114.54},{&quot;2026-08-02&quot;:114.54},{&quot;2026-08-03&quot;:114.54},{&quot;2026-08-04&quot;:114.54},{&quot;2026-08-05&quot;:114.54},{&quot;2026-08-07&quot;:114.54},{&quot;2026-08-08&quot;:114.54},{&quot;2026-08-09&quot;:114.54},{&quot;2026-08-10&quot;:114.54},{&quot;2026-08-11&quot;:113.46},{&quot;2026-08-12&quot;:113.46},{&quot;2026-08-13&quot;:113.46},{&quot;2026-08-14&quot;:113.46},{&quot;2026-08-15&quot;:113.46},{&quot;2026-08-16&quot;:113.46},{&quot;2026-08-17&quot;:112.9},{&quot;2026-08-18&quot;:112.9},{&quot;2026-08-19&quot;:112.9},{&quot;2026-08-20&quot;:112.9},{&quot;2026-08-21&quot;:112.9},{&quot;2026-08-22&quot;:112.9},{&quot;2026-08-23&quot;:111.34},{&quot;2026-08-24&quot;:110.57},{&quot;2026-08-25&quot;:110.57},{&quot;2026-08-26&quot;:110.51},{&quot;2026-08-27&quot;:110.51},{&quot;2026-08-28&quot;:110.51},{&quot;2026-08-29&quot;:110.51},{&quot;2026-08-30&quot;:110.51},{&quot;2026-08-31&quot;:110.51},{&quot;2026-09-01&quot;:110.51},{&quot;2026-09-02&quot;:110.13},{&quot;2026-09-03&quot;:109.9},{&quot;2026-09-04&quot;:109.9},{&quot;2026-09-05&quot;:109.9},{&quot;2026-09-06&quot;:109.9},{&quot;2026-09-07&quot;:109.9},{&quot;2026-09-08&quot;:109.9},{&quot;2026-09-09&quot;:109.9},{&quot;2026-09-10&quot;:108.7},{&quot;2026-09-11&quot;:108.7}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:63.32},{&quot;2026-06-11&quot;:63.32},{&quot;2026-06-12&quot;:63.32},{&quot;2026-06-13&quot;:63.32},{&quot;2026-06-14&quot;:63.47},{&quot;2026-06-15&quot;:63.47},{&quot;2026-06-16&quot;:63.43},{&quot;2026-06-17&quot;:63.51},{&quot;2026-06-18&quot;:63.51},{&quot;2026-06-19&quot;:63.51},{&quot;2026-06-20&quot;:63.51},{&quot;2026-06-21&quot;:63.54},{&quot;2026-06-22&quot;:63.54},{&quot;2026-06-23&quot;:63.24},{&quot;2026-06-24&quot;:63.24},{&quot;2026-06-25&quot;:63.24},{&quot;2026-06-26&quot;:63.24},{&quot;2026-06-27&quot;:63.24},{&quot;2026-06-28&quot;:63.24},{&quot;2026-06-29&quot;:63.24},{&quot;2026-06-30&quot;:63.24},{&quot;2026-07-01&quot;:63.24},{&quot;2026-07-02&quot;:63.14},{&quot;2026-07-03&quot;:63.14},{&quot;2026-07-04&quot;:63.14},{&quot;2026-07-05&quot;:63.05},{&quot;2026-07-06&quot;:63.05},{&quot;2026-07-07&quot;:63.05},{&quot;2026-07-08&quot;:62.8},{&quot;2026-07-09&quot;:62.8},{&quot;2026-07-10&quot;:62.8},{&quot;2026-07-11&quot;:62.8},{&quot;2026-07-12&quot;:62.59},{&quot;2026-07-13&quot;:62.7},{&quot;2026-07-14&quot;:62.7},{&quot;2026-07-15&quot;:62.7},{&quot;2026-07-16&quot;:62.7},{&quot;2026-07-17&quot;:62.7},{&quot;2026-07-18&quot;:62.44},{&quot;2026-07-19&quot;:62.36},{&quot;2026-07-20&quot;:62.26},{&quot;2026-07-21&quot;:62.26},{&quot;2026-07-23&quot;:62.02},{&quot;2026-07-25&quot;:62.02},{&quot;2026-07-26&quot;:61.83},{&quot;2026-07-27&quot;:61.83},{&quot;2026-07-29&quot;:60.9},{&quot;2026-07-30&quot;:60.9},{&quot;2026-07-31&quot;:61.08},{&quot;2026-08-01&quot;:60.95},{&quot;2026-08-02&quot;:60.2},{&quot;2026-08-03&quot;:60.2},{&quot;2026-08-04&quot;:60.2},{&quot;2026-08-05&quot;:60.2},{&quot;2026-08-07&quot;:60.03},{&quot;2026-08-08&quot;:59.91},{&quot;2026-08-09&quot;:59.91},{&quot;2026-08-10&quot;:59.83},{&quot;2026-08-11&quot;:59.83},{&quot;2026-08-12&quot;:59.83},{&quot;2026-08-13&quot;:59.83},{&quot;2026-08-14&quot;:59.83},{&quot;2026-08-15&quot;:59.83},{&quot;2026-08-16&quot;:59.83},{&quot;2026-08-17&quot;:59.17},{&quot;2026-08-18&quot;:59.3},{&quot;2026-08-19&quot;:59.3},{&quot;2026-08-20&quot;:59.3},{&quot;2026-08-21&quot;:58.32},{&quot;2026-08-22&quot;:58.48},{&quot;2026-08-23&quot;:58.8},{&quot;2026-08-24&quot;:58.8},{&quot;2026-08-25&quot;:58.8},{&quot;2026-08-26&quot;:59.23},{&quot;2026-08-27&quot;:59.23},{&quot;2026-08-28&quot;:59.21},{&quot;2026-08-29&quot;:59.21},{&quot;2026-08-30&quot;:59.21},{&quot;2026-08-31&quot;:59.05},{&quot;2026-09-01&quot;:59.05},{&quot;2026-09-02&quot;:59.41},{&quot;2026-09-03&quot;:59.72},{&quot;2026-09-04&quot;:59.72},{&quot;2026-09-05&quot;:59.72},{&quot;2026-09-06&quot;:59.72},{&quot;2026-09-07&quot;:59.72},{&quot;2026-09-08&quot;:59.72},{&quot;2026-09-09&quot;:59.57},{&quot;2026-09-10&quot;:59.47},{&quot;2026-09-11&quot;:58.78}]}"
        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="20842"
  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-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">
            Sword of Feast and Famine
        </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">
            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">
            $40.56
          </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 Feast and Famine" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/c/7/c7710eb5-c56a-437b-8847-2a829c404d47.jpg?1783930094" />

        <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 Feast and Famine
        </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">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-3'></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 Feast and Famine" src="https://cards.scryfall.io/large/front/c/7/c7710eb5-c56a-437b-8847-2a829c404d47.jpg?1783930094" />
    </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">
                $40.56
              </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">
                $56.41
              </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">$30.00</span>
              <span class="text-xs text-grey-text">Credit: $39.00</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">$40.00</span>
              <span class="text-xs text-grey-text">Credit: $52.00</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;:54.82},{&quot;2026-06-14&quot;:54.82},{&quot;2026-06-15&quot;:54.82},{&quot;2026-06-16&quot;:54.82},{&quot;2026-06-17&quot;:54.82},{&quot;2026-06-18&quot;:54.82},{&quot;2026-06-19&quot;:54.82},{&quot;2026-06-20&quot;:54.47},{&quot;2026-06-21&quot;:54.47},{&quot;2026-06-22&quot;:54.47},{&quot;2026-06-23&quot;:54.47},{&quot;2026-06-24&quot;:54.47},{&quot;2026-06-25&quot;:54.47},{&quot;2026-06-26&quot;:54.47},{&quot;2026-06-27&quot;:54.47},{&quot;2026-06-28&quot;:54.47},{&quot;2026-06-29&quot;:54.47},{&quot;2026-06-30&quot;:54.19},{&quot;2026-07-01&quot;:54.19},{&quot;2026-07-02&quot;:54.19},{&quot;2026-07-03&quot;:54.19},{&quot;2026-07-04&quot;:52.87},{&quot;2026-07-05&quot;:52.87},{&quot;2026-07-06&quot;:52.87},{&quot;2026-07-07&quot;:53.47},{&quot;2026-07-08&quot;:53.47},{&quot;2026-07-09&quot;:53.47},{&quot;2026-07-10&quot;:53.34},{&quot;2026-07-11&quot;:53.34},{&quot;2026-07-12&quot;:53.34},{&quot;2026-07-13&quot;:53.34},{&quot;2026-07-14&quot;:53.34},{&quot;2026-07-15&quot;:53.34},{&quot;2026-07-16&quot;:53.34},{&quot;2026-07-17&quot;:54.02},{&quot;2026-07-18&quot;:54.02},{&quot;2026-07-19&quot;:54.02},{&quot;2026-07-20&quot;:54.02},{&quot;2026-07-21&quot;:54.02},{&quot;2026-07-22&quot;:54.02},{&quot;2026-07-23&quot;:54.02},{&quot;2026-07-24&quot;:54.02},{&quot;2026-07-25&quot;:54.02},{&quot;2026-07-26&quot;:54.02},{&quot;2026-07-27&quot;:54.02},{&quot;2026-07-28&quot;:54.02},{&quot;2026-07-29&quot;:54.02},{&quot;2026-07-30&quot;:54.0},{&quot;2026-07-31&quot;:54.0},{&quot;2026-08-01&quot;:54.0},{&quot;2026-08-02&quot;:54.0},{&quot;2026-08-03&quot;:54.0},{&quot;2026-08-04&quot;:54.65},{&quot;2026-08-05&quot;:54.65},{&quot;2026-08-07&quot;:54.65},{&quot;2026-08-08&quot;:54.65},{&quot;2026-08-09&quot;:54.65},{&quot;2026-08-10&quot;:55.12},{&quot;2026-08-11&quot;:55.12},{&quot;2026-08-12&quot;:55.21},{&quot;2026-08-13&quot;:55.21},{&quot;2026-08-14&quot;:55.21},{&quot;2026-08-15&quot;:55.21},{&quot;2026-08-16&quot;:55.21},{&quot;2026-08-17&quot;:55.81},{&quot;2026-08-18&quot;:55.81},{&quot;2026-08-19&quot;:55.81},{&quot;2026-08-20&quot;:55.81},{&quot;2026-08-21&quot;:56.02},{&quot;2026-08-22&quot;:56.02},{&quot;2026-08-23&quot;:56.02},{&quot;2026-08-24&quot;:56.02},{&quot;2026-08-25&quot;:56.02},{&quot;2026-08-26&quot;:56.22},{&quot;2026-08-27&quot;:56.22},{&quot;2026-08-28&quot;:56.22},{&quot;2026-08-29&quot;:56.22},{&quot;2026-08-30&quot;:56.22},{&quot;2026-08-31&quot;:56.22},{&quot;2026-09-01&quot;:56.21},{&quot;2026-09-02&quot;:56.21},{&quot;2026-09-03&quot;:56.21},{&quot;2026-09-04&quot;:56.21},{&quot;2026-09-05&quot;:56.21},{&quot;2026-09-06&quot;:56.41},{&quot;2026-09-07&quot;:56.41},{&quot;2026-09-08&quot;:56.41},{&quot;2026-09-09&quot;:56.41},{&quot;2026-09-10&quot;:56.41},{&quot;2026-09-11&quot;:56.41}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:39.57},{&quot;2026-06-14&quot;:39.52},{&quot;2026-06-15&quot;:39.4},{&quot;2026-06-16&quot;:39.4},{&quot;2026-06-17&quot;:39.2},{&quot;2026-06-18&quot;:39.21},{&quot;2026-06-19&quot;:39.21},{&quot;2026-06-20&quot;:39.21},{&quot;2026-06-21&quot;:39.21},{&quot;2026-06-22&quot;:39.21},{&quot;2026-06-23&quot;:39.21},{&quot;2026-06-24&quot;:39.21},{&quot;2026-06-25&quot;:39.21},{&quot;2026-06-26&quot;:39.21},{&quot;2026-06-27&quot;:39.21},{&quot;2026-06-28&quot;:39.21},{&quot;2026-06-29&quot;:39.19},{&quot;2026-06-30&quot;:39.19},{&quot;2026-07-01&quot;:39.19},{&quot;2026-07-02&quot;:38.64},{&quot;2026-07-03&quot;:38.68},{&quot;2026-07-04&quot;:38.68},{&quot;2026-07-05&quot;:38.94},{&quot;2026-07-06&quot;:38.94},{&quot;2026-07-07&quot;:38.85},{&quot;2026-07-08&quot;:38.85},{&quot;2026-07-09&quot;:38.87},{&quot;2026-07-10&quot;:38.87},{&quot;2026-07-11&quot;:38.81},{&quot;2026-07-12&quot;:38.81},{&quot;2026-07-13&quot;:39.02},{&quot;2026-07-14&quot;:38.76},{&quot;2026-07-15&quot;:38.72},{&quot;2026-07-16&quot;:38.72},{&quot;2026-07-17&quot;:38.74},{&quot;2026-07-18&quot;:38.74},{&quot;2026-07-19&quot;:38.79},{&quot;2026-07-20&quot;:38.78},{&quot;2026-07-21&quot;:38.83},{&quot;2026-07-22&quot;:38.75},{&quot;2026-07-23&quot;:38.87},{&quot;2026-07-24&quot;:38.87},{&quot;2026-07-25&quot;:38.99},{&quot;2026-07-26&quot;:39.18},{&quot;2026-07-27&quot;:39.18},{&quot;2026-07-28&quot;:39.18},{&quot;2026-07-29&quot;:39.18},{&quot;2026-07-30&quot;:39.81},{&quot;2026-07-31&quot;:39.74},{&quot;2026-08-01&quot;:39.66},{&quot;2026-08-02&quot;:39.9},{&quot;2026-08-03&quot;:39.76},{&quot;2026-08-04&quot;:39.76},{&quot;2026-08-05&quot;:39.74},{&quot;2026-08-07&quot;:40.11},{&quot;2026-08-08&quot;:40.1},{&quot;2026-08-09&quot;:40.1},{&quot;2026-08-10&quot;:40.21},{&quot;2026-08-11&quot;:40.21},{&quot;2026-08-12&quot;:40.13},{&quot;2026-08-13&quot;:39.88},{&quot;2026-08-14&quot;:40.32},{&quot;2026-08-15&quot;:40.32},{&quot;2026-08-16&quot;:40.09},{&quot;2026-08-17&quot;:40.22},{&quot;2026-08-18&quot;:40.22},{&quot;2026-08-19&quot;:40.08},{&quot;2026-08-20&quot;:40.08},{&quot;2026-08-21&quot;:40.18},{&quot;2026-08-22&quot;:40.82},{&quot;2026-08-23&quot;:40.82},{&quot;2026-08-24&quot;:40.84},{&quot;2026-08-25&quot;:40.84},{&quot;2026-08-26&quot;:40.84},{&quot;2026-08-27&quot;:40.86},{&quot;2026-08-28&quot;:40.89},{&quot;2026-08-29&quot;:40.89},{&quot;2026-08-30&quot;:40.96},{&quot;2026-08-31&quot;:41.07},{&quot;2026-09-01&quot;:41.07},{&quot;2026-09-02&quot;:41.07},{&quot;2026-09-03&quot;:41.07},{&quot;2026-09-04&quot;:41.07},{&quot;2026-09-05&quot;:40.81},{&quot;2026-09-06&quot;:40.81},{&quot;2026-09-07&quot;:40.81},{&quot;2026-09-08&quot;:40.74},{&quot;2026-09-09&quot;:40.74},{&quot;2026-09-10&quot;:40.89},{&quot;2026-09-11&quot;:40.56}]}"
        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="80040"
  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-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">
            Ulamog, the Infinite Gyre
        </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="text-sm font-medium text-nine-white">
            $55.76
          </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="Ulamog, the Infinite Gyre" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/d/8/d8705c3e-d620-43fb-8773-65b412f555ef.jpg?1783933749" />

        <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">
            Ulamog, the Infinite Gyre
        </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-11'></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="Ulamog, the Infinite Gyre" src="https://cards.scryfall.io/large/front/d/8/d8705c3e-d620-43fb-8773-65b412f555ef.jpg?1783933749" />
    </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">
                $55.76
              </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">$28.00</span>
              <span class="text-xs text-grey-text">Credit: $36.40</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;:55.09},{&quot;2026-06-14&quot;:55.38},{&quot;2026-06-15&quot;:55.38},{&quot;2026-06-16&quot;:55.38},{&quot;2026-06-17&quot;:55.57},{&quot;2026-06-18&quot;:55.57},{&quot;2026-06-19&quot;:55.57},{&quot;2026-06-20&quot;:55.49},{&quot;2026-06-21&quot;:55.62},{&quot;2026-06-22&quot;:55.62},{&quot;2026-06-23&quot;:55.62},{&quot;2026-06-24&quot;:55.53},{&quot;2026-06-25&quot;:55.53},{&quot;2026-06-26&quot;:55.53},{&quot;2026-06-27&quot;:55.53},{&quot;2026-06-28&quot;:55.53},{&quot;2026-06-29&quot;:55.53},{&quot;2026-06-30&quot;:55.53},{&quot;2026-07-01&quot;:55.53},{&quot;2026-07-02&quot;:55.53},{&quot;2026-07-03&quot;:55.65},{&quot;2026-07-04&quot;:55.65},{&quot;2026-07-05&quot;:55.65},{&quot;2026-07-06&quot;:55.65},{&quot;2026-07-07&quot;:55.65},{&quot;2026-07-08&quot;:55.65},{&quot;2026-07-09&quot;:55.65},{&quot;2026-07-10&quot;:55.65},{&quot;2026-07-11&quot;:55.65},{&quot;2026-07-12&quot;:55.65},{&quot;2026-07-13&quot;:55.64},{&quot;2026-07-14&quot;:55.64},{&quot;2026-07-15&quot;:55.64},{&quot;2026-07-16&quot;:55.64},{&quot;2026-07-17&quot;:55.64},{&quot;2026-07-18&quot;:55.64},{&quot;2026-07-19&quot;:55.64},{&quot;2026-07-20&quot;:55.64},{&quot;2026-07-21&quot;:55.64},{&quot;2026-07-22&quot;:55.62},{&quot;2026-07-23&quot;:55.62},{&quot;2026-07-24&quot;:55.62},{&quot;2026-07-25&quot;:55.56},{&quot;2026-07-26&quot;:55.56},{&quot;2026-07-27&quot;:55.56},{&quot;2026-07-28&quot;:55.56},{&quot;2026-07-29&quot;:55.56},{&quot;2026-07-30&quot;:55.56},{&quot;2026-07-31&quot;:55.33},{&quot;2026-08-01&quot;:55.33},{&quot;2026-08-02&quot;:55.39},{&quot;2026-08-03&quot;:55.39},{&quot;2026-08-04&quot;:55.39},{&quot;2026-08-05&quot;:55.39},{&quot;2026-08-07&quot;:55.39},{&quot;2026-08-08&quot;:55.39},{&quot;2026-08-09&quot;:55.39},{&quot;2026-08-10&quot;:55.39},{&quot;2026-08-11&quot;:55.39},{&quot;2026-08-12&quot;:55.39},{&quot;2026-08-13&quot;:55.39},{&quot;2026-08-14&quot;:55.46},{&quot;2026-08-15&quot;:55.46},{&quot;2026-08-16&quot;:55.46},{&quot;2026-08-17&quot;:55.46},{&quot;2026-08-18&quot;:55.46},{&quot;2026-08-19&quot;:55.62},{&quot;2026-08-20&quot;:55.62},{&quot;2026-08-21&quot;:55.62},{&quot;2026-08-22&quot;:55.62},{&quot;2026-08-23&quot;:55.62},{&quot;2026-08-24&quot;:55.62},{&quot;2026-08-25&quot;:55.62},{&quot;2026-08-26&quot;:55.62},{&quot;2026-08-27&quot;:55.97},{&quot;2026-08-28&quot;:55.97},{&quot;2026-08-29&quot;:55.97},{&quot;2026-08-30&quot;:56.02},{&quot;2026-08-31&quot;:56.02},{&quot;2026-09-01&quot;:56.02},{&quot;2026-09-02&quot;:56.02},{&quot;2026-09-03&quot;:56.02},{&quot;2026-09-04&quot;:56.02},{&quot;2026-09-05&quot;:56.02},{&quot;2026-09-06&quot;:56.02},{&quot;2026-09-07&quot;:56.22},{&quot;2026-09-08&quot;:56.22},{&quot;2026-09-09&quot;:56.22},{&quot;2026-09-10&quot;:55.76},{&quot;2026-09-11&quot;:55.76}],&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="20168"
  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">
            Smothering Tithe
        </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">
              ↓
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $55.71
          </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="Smothering Tithe" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/f/2/f25a4bbe-2af0-4d4a-95d4-d52c5937c747.jpg?1783921927" />

        <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">
            Smothering Tithe
        </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-3'></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="Smothering Tithe" src="https://cards.scryfall.io/large/front/f/2/f25a4bbe-2af0-4d4a-95d4-d52c5937c747.jpg?1783921927" />
    </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">
                $55.71
              </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">
                $57.91
              </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">$42.00</span>
              <span class="text-xs text-grey-text">Credit: $54.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;2026-06-12&quot;:48.78},{&quot;2026-06-13&quot;:50.87},{&quot;2026-06-14&quot;:51.54},{&quot;2026-06-15&quot;:51.54},{&quot;2026-06-16&quot;:51.54},{&quot;2026-06-17&quot;:51.54},{&quot;2026-06-18&quot;:52.01},{&quot;2026-06-19&quot;:52.01},{&quot;2026-06-20&quot;:52.01},{&quot;2026-06-21&quot;:52.01},{&quot;2026-06-22&quot;:52.01},{&quot;2026-06-23&quot;:52.01},{&quot;2026-06-24&quot;:52.01},{&quot;2026-06-25&quot;:52.01},{&quot;2026-06-26&quot;:52.52},{&quot;2026-06-27&quot;:53.29},{&quot;2026-06-28&quot;:53.29},{&quot;2026-06-29&quot;:53.29},{&quot;2026-06-30&quot;:53.29},{&quot;2026-07-01&quot;:53.29},{&quot;2026-07-02&quot;:53.29},{&quot;2026-07-03&quot;:53.29},{&quot;2026-07-04&quot;:53.29},{&quot;2026-07-05&quot;:53.29},{&quot;2026-07-06&quot;:53.72},{&quot;2026-07-07&quot;:53.72},{&quot;2026-07-08&quot;:53.72},{&quot;2026-07-09&quot;:53.72},{&quot;2026-07-10&quot;:53.72},{&quot;2026-07-11&quot;:53.72},{&quot;2026-07-12&quot;:54.12},{&quot;2026-07-13&quot;:54.12},{&quot;2026-07-14&quot;:54.12},{&quot;2026-07-15&quot;:54.12},{&quot;2026-07-16&quot;:54.12},{&quot;2026-07-17&quot;:54.12},{&quot;2026-07-18&quot;:54.12},{&quot;2026-07-19&quot;:54.12},{&quot;2026-07-20&quot;:54.12},{&quot;2026-07-21&quot;:54.12},{&quot;2026-07-23&quot;:54.12},{&quot;2026-07-24&quot;:54.12},{&quot;2026-07-25&quot;:54.12},{&quot;2026-07-26&quot;:54.12},{&quot;2026-07-27&quot;:54.12},{&quot;2026-07-28&quot;:54.12},{&quot;2026-07-29&quot;:54.12},{&quot;2026-07-30&quot;:54.48},{&quot;2026-07-31&quot;:54.48},{&quot;2026-08-01&quot;:54.48},{&quot;2026-08-02&quot;:54.48},{&quot;2026-08-03&quot;:54.48},{&quot;2026-08-04&quot;:54.48},{&quot;2026-08-05&quot;:54.48},{&quot;2026-08-07&quot;:54.48},{&quot;2026-08-08&quot;:54.48},{&quot;2026-08-09&quot;:54.48},{&quot;2026-08-10&quot;:54.48},{&quot;2026-08-11&quot;:55.17},{&quot;2026-08-12&quot;:55.17},{&quot;2026-08-13&quot;:55.17},{&quot;2026-08-14&quot;:55.86},{&quot;2026-08-15&quot;:55.86},{&quot;2026-08-16&quot;:55.86},{&quot;2026-08-17&quot;:55.86},{&quot;2026-08-18&quot;:56.32},{&quot;2026-08-19&quot;:56.81},{&quot;2026-08-20&quot;:56.81},{&quot;2026-08-21&quot;:57.51},{&quot;2026-08-22&quot;:57.51},{&quot;2026-08-23&quot;:57.51},{&quot;2026-08-24&quot;:57.51},{&quot;2026-08-25&quot;:57.47},{&quot;2026-08-26&quot;:57.47},{&quot;2026-08-27&quot;:57.64},{&quot;2026-08-28&quot;:57.64},{&quot;2026-08-29&quot;:57.64},{&quot;2026-08-30&quot;:57.9},{&quot;2026-08-31&quot;:57.9},{&quot;2026-09-01&quot;:57.9},{&quot;2026-09-02&quot;:58.23},{&quot;2026-09-03&quot;:58.23},{&quot;2026-09-04&quot;:58.23},{&quot;2026-09-05&quot;:58.23},{&quot;2026-09-06&quot;:58.21},{&quot;2026-09-07&quot;:58.21},{&quot;2026-09-08&quot;:58.21},{&quot;2026-09-09&quot;:58.21},{&quot;2026-09-10&quot;:57.91},{&quot;2026-09-11&quot;:57.91}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:56.96},{&quot;2026-06-13&quot;:57.06},{&quot;2026-06-14&quot;:57.06},{&quot;2026-06-15&quot;:57.06},{&quot;2026-06-16&quot;:57.14},{&quot;2026-06-17&quot;:57.14},{&quot;2026-06-18&quot;:57.14},{&quot;2026-06-19&quot;:58.02},{&quot;2026-06-20&quot;:58.4},{&quot;2026-06-21&quot;:58.44},{&quot;2026-06-22&quot;:58.44},{&quot;2026-06-23&quot;:58.77},{&quot;2026-06-24&quot;:59.25},{&quot;2026-06-25&quot;:60.15},{&quot;2026-06-26&quot;:59.87},{&quot;2026-06-27&quot;:60.41},{&quot;2026-06-28&quot;:58.35},{&quot;2026-06-29&quot;:60.78},{&quot;2026-06-30&quot;:60.78},{&quot;2026-07-01&quot;:60.78},{&quot;2026-07-02&quot;:61.1},{&quot;2026-07-03&quot;:61.1},{&quot;2026-07-04&quot;:62.29},{&quot;2026-07-05&quot;:62.29},{&quot;2026-07-06&quot;:62.13},{&quot;2026-07-07&quot;:62.13},{&quot;2026-07-08&quot;:62.13},{&quot;2026-07-09&quot;:62.09},{&quot;2026-07-10&quot;:61.5},{&quot;2026-07-11&quot;:61.5},{&quot;2026-07-12&quot;:61.6},{&quot;2026-07-13&quot;:60.63},{&quot;2026-07-14&quot;:59.64},{&quot;2026-07-15&quot;:60.51},{&quot;2026-07-16&quot;:59.44},{&quot;2026-07-17&quot;:58.51},{&quot;2026-07-18&quot;:58.12},{&quot;2026-07-19&quot;:57.7},{&quot;2026-07-20&quot;:56.59},{&quot;2026-07-21&quot;:56.2},{&quot;2026-07-23&quot;:55.8},{&quot;2026-07-24&quot;:55.04},{&quot;2026-07-25&quot;:55.6},{&quot;2026-07-26&quot;:55.6},{&quot;2026-07-27&quot;:55.6},{&quot;2026-07-28&quot;:55.99},{&quot;2026-07-29&quot;:56.01},{&quot;2026-07-30&quot;:56.01},{&quot;2026-07-31&quot;:58.23},{&quot;2026-08-01&quot;:57.97},{&quot;2026-08-02&quot;:58.36},{&quot;2026-08-03&quot;:57.88},{&quot;2026-08-04&quot;:57.6},{&quot;2026-08-05&quot;:58.1},{&quot;2026-08-07&quot;:58.3},{&quot;2026-08-08&quot;:59.04},{&quot;2026-08-09&quot;:59.02},{&quot;2026-08-10&quot;:58.73},{&quot;2026-08-11&quot;:58.17},{&quot;2026-08-12&quot;:58.05},{&quot;2026-08-13&quot;:58.02},{&quot;2026-08-14&quot;:58.02},{&quot;2026-08-15&quot;:57.0},{&quot;2026-08-16&quot;:56.53},{&quot;2026-08-17&quot;:56.55},{&quot;2026-08-18&quot;:56.55},{&quot;2026-08-19&quot;:56.52},{&quot;2026-08-20&quot;:56.52},{&quot;2026-08-21&quot;:54.85},{&quot;2026-08-22&quot;:54.65},{&quot;2026-08-23&quot;:54.34},{&quot;2026-08-24&quot;:54.38},{&quot;2026-08-25&quot;:54.92},{&quot;2026-08-26&quot;:53.86},{&quot;2026-08-27&quot;:54.55},{&quot;2026-08-28&quot;:55.82},{&quot;2026-08-29&quot;:55.82},{&quot;2026-08-30&quot;:56.55},{&quot;2026-08-31&quot;:56.55},{&quot;2026-09-01&quot;:56.43},{&quot;2026-09-02&quot;:56.84},{&quot;2026-09-03&quot;:56.59},{&quot;2026-09-04&quot;:56.59},{&quot;2026-09-05&quot;:56.13},{&quot;2026-09-06&quot;:56.95},{&quot;2026-09-07&quot;:57.18},{&quot;2026-09-08&quot;:56.99},{&quot;2026-09-09&quot;:56.35},{&quot;2026-09-10&quot;:55.83},{&quot;2026-09-11&quot;:55.71}]}"
        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="20224"
  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">
            Force of Negation
        </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-50 text-badge-text">
              ↑
              2%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $52.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="Force of Negation" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/8/1825a719-1b2a-4af9-9cd2-7cb497cd0317.jpg?1783921916" />

        <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">
            Force of Negation
        </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-1'></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="Force of Negation" src="https://cards.scryfall.io/large/front/1/8/1825a719-1b2a-4af9-9cd2-7cb497cd0317.jpg?1783921916" />
    </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">
                $52.98
              </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">
                $58.27
              </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">$36.00</span>
              <span class="text-xs text-grey-text">Credit: $46.80</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;:55.63},{&quot;2026-06-14&quot;:56.3},{&quot;2026-06-15&quot;:56.45},{&quot;2026-06-16&quot;:56.45},{&quot;2026-06-17&quot;:56.45},{&quot;2026-06-18&quot;:56.94},{&quot;2026-06-19&quot;:56.94},{&quot;2026-06-20&quot;:56.94},{&quot;2026-06-21&quot;:56.94},{&quot;2026-06-22&quot;:56.94},{&quot;2026-06-23&quot;:56.94},{&quot;2026-06-24&quot;:56.94},{&quot;2026-06-25&quot;:56.94},{&quot;2026-06-26&quot;:56.97},{&quot;2026-06-27&quot;:57.06},{&quot;2026-06-28&quot;:56.9},{&quot;2026-06-29&quot;:56.9},{&quot;2026-06-30&quot;:56.9},{&quot;2026-07-01&quot;:56.9},{&quot;2026-07-02&quot;:57.04},{&quot;2026-07-03&quot;:57.04},{&quot;2026-07-04&quot;:57.04},{&quot;2026-07-05&quot;:57.04},{&quot;2026-07-06&quot;:57.04},{&quot;2026-07-07&quot;:57.33},{&quot;2026-07-08&quot;:57.33},{&quot;2026-07-09&quot;:57.33},{&quot;2026-07-10&quot;:57.33},{&quot;2026-07-11&quot;:57.33},{&quot;2026-07-12&quot;:57.33},{&quot;2026-07-13&quot;:57.33},{&quot;2026-07-14&quot;:57.33},{&quot;2026-07-15&quot;:57.33},{&quot;2026-07-16&quot;:57.26},{&quot;2026-07-17&quot;:57.32},{&quot;2026-07-18&quot;:57.16},{&quot;2026-07-19&quot;:57.16},{&quot;2026-07-20&quot;:57.16},{&quot;2026-07-21&quot;:57.24},{&quot;2026-07-22&quot;:57.16},{&quot;2026-07-23&quot;:57.16},{&quot;2026-07-24&quot;:57.16},{&quot;2026-07-25&quot;:57.16},{&quot;2026-07-26&quot;:57.16},{&quot;2026-07-27&quot;:57.16},{&quot;2026-07-28&quot;:57.16},{&quot;2026-07-29&quot;:57.16},{&quot;2026-07-30&quot;:57.16},{&quot;2026-07-31&quot;:57.16},{&quot;2026-08-01&quot;:57.16},{&quot;2026-08-02&quot;:57.31},{&quot;2026-08-03&quot;:57.31},{&quot;2026-08-04&quot;:57.31},{&quot;2026-08-05&quot;:57.31},{&quot;2026-08-07&quot;:57.31},{&quot;2026-08-08&quot;:57.31},{&quot;2026-08-09&quot;:57.31},{&quot;2026-08-10&quot;:57.15},{&quot;2026-08-11&quot;:57.15},{&quot;2026-08-12&quot;:57.42},{&quot;2026-08-13&quot;:57.42},{&quot;2026-08-14&quot;:57.42},{&quot;2026-08-15&quot;:57.42},{&quot;2026-08-16&quot;:57.42},{&quot;2026-08-17&quot;:57.42},{&quot;2026-08-18&quot;:57.42},{&quot;2026-08-19&quot;:57.42},{&quot;2026-08-20&quot;:57.42},{&quot;2026-08-21&quot;:57.86},{&quot;2026-08-22&quot;:58.16},{&quot;2026-08-23&quot;:58.34},{&quot;2026-08-24&quot;:58.34},{&quot;2026-08-25&quot;:58.34},{&quot;2026-08-26&quot;:58.34},{&quot;2026-08-27&quot;:58.34},{&quot;2026-08-28&quot;:58.34},{&quot;2026-08-29&quot;:58.34},{&quot;2026-08-30&quot;:58.27},{&quot;2026-08-31&quot;:58.27},{&quot;2026-09-01&quot;:58.27},{&quot;2026-09-02&quot;:58.27},{&quot;2026-09-03&quot;:58.27},{&quot;2026-09-04&quot;:58.27},{&quot;2026-09-05&quot;:58.27},{&quot;2026-09-06&quot;:58.27},{&quot;2026-09-07&quot;:58.27},{&quot;2026-09-08&quot;:58.27},{&quot;2026-09-09&quot;:58.27},{&quot;2026-09-10&quot;:58.27},{&quot;2026-09-11&quot;:58.27}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:50.18},{&quot;2026-06-14&quot;:50.22},{&quot;2026-06-15&quot;:50.7},{&quot;2026-06-16&quot;:50.79},{&quot;2026-06-17&quot;:50.52},{&quot;2026-06-18&quot;:50.3},{&quot;2026-06-19&quot;:50.3},{&quot;2026-06-20&quot;:49.92},{&quot;2026-06-21&quot;:49.87},{&quot;2026-06-22&quot;:50.43},{&quot;2026-06-23&quot;:51.07},{&quot;2026-06-24&quot;:50.96},{&quot;2026-06-25&quot;:51.35},{&quot;2026-06-26&quot;:50.98},{&quot;2026-06-27&quot;:51.25},{&quot;2026-06-28&quot;:51.75},{&quot;2026-06-29&quot;:51.75},{&quot;2026-06-30&quot;:51.56},{&quot;2026-07-01&quot;:51.61},{&quot;2026-07-02&quot;:51.7},{&quot;2026-07-03&quot;:51.77},{&quot;2026-07-04&quot;:52.0},{&quot;2026-07-05&quot;:52.98},{&quot;2026-07-06&quot;:52.82},{&quot;2026-07-07&quot;:52.82},{&quot;2026-07-08&quot;:52.82},{&quot;2026-07-09&quot;:52.6},{&quot;2026-07-10&quot;:52.62},{&quot;2026-07-11&quot;:52.96},{&quot;2026-07-12&quot;:52.32},{&quot;2026-07-13&quot;:52.53},{&quot;2026-07-14&quot;:52.53},{&quot;2026-07-15&quot;:54.1},{&quot;2026-07-16&quot;:54.1},{&quot;2026-07-17&quot;:54.18},{&quot;2026-07-18&quot;:54.18},{&quot;2026-07-19&quot;:54.23},{&quot;2026-07-20&quot;:54.4},{&quot;2026-07-21&quot;:54.43},{&quot;2026-07-22&quot;:54.41},{&quot;2026-07-23&quot;:54.53},{&quot;2026-07-24&quot;:55.34},{&quot;2026-07-25&quot;:55.34},{&quot;2026-07-26&quot;:55.34},{&quot;2026-07-27&quot;:55.34},{&quot;2026-07-28&quot;:55.94},{&quot;2026-07-29&quot;:55.94},{&quot;2026-07-30&quot;:55.94},{&quot;2026-07-31&quot;:56.6},{&quot;2026-08-01&quot;:56.6},{&quot;2026-08-02&quot;:56.54},{&quot;2026-08-03&quot;:56.78},{&quot;2026-08-04&quot;:56.97},{&quot;2026-08-05&quot;:56.23},{&quot;2026-08-07&quot;:53.0},{&quot;2026-08-08&quot;:53.0},{&quot;2026-08-09&quot;:52.5},{&quot;2026-08-10&quot;:52.78},{&quot;2026-08-11&quot;:52.78},{&quot;2026-08-12&quot;:52.33},{&quot;2026-08-13&quot;:52.33},{&quot;2026-08-14&quot;:52.33},{&quot;2026-08-15&quot;:51.93},{&quot;2026-08-16&quot;:51.87},{&quot;2026-08-17&quot;:51.23},{&quot;2026-08-18&quot;:51.23},{&quot;2026-08-19&quot;:51.99},{&quot;2026-08-20&quot;:51.27},{&quot;2026-08-21&quot;:50.13},{&quot;2026-08-22&quot;:50.38},{&quot;2026-08-23&quot;:50.38},{&quot;2026-08-24&quot;:50.0},{&quot;2026-08-25&quot;:49.89},{&quot;2026-08-26&quot;:51.0},{&quot;2026-08-27&quot;:51.85},{&quot;2026-08-28&quot;:51.85},{&quot;2026-08-29&quot;:51.85},{&quot;2026-08-30&quot;:50.95},{&quot;2026-08-31&quot;:50.81},{&quot;2026-09-01&quot;:51.08},{&quot;2026-09-02&quot;:51.37},{&quot;2026-09-03&quot;:51.8},{&quot;2026-09-04&quot;:51.8},{&quot;2026-09-05&quot;:51.8},{&quot;2026-09-06&quot;:52.28},{&quot;2026-09-07&quot;:52.28},{&quot;2026-09-08&quot;:52.71},{&quot;2026-09-09&quot;:52.71},{&quot;2026-09-10&quot;:52.98},{&quot;2026-09-11&quot;:52.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="97938"
  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-fic 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">
            Vivi&#39;s Persistence
        </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-50 text-badge-text">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $52.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="Vivi&#39;s Persistence" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/b/e/be6ba2e4-e657-4a2d-8f5f-255376d861b3.jpg?1782684331" />

        <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">
            Vivi&#39;s Persistence
        </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-1'></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="Vivi&#39;s Persistence" src="https://cards.scryfall.io/large/front/b/e/be6ba2e4-e657-4a2d-8f5f-255376d861b3.jpg?1782684331" />
    </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">
                $52.86
              </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">
                $55.72
              </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">$48.00</span>
              <span class="text-xs text-grey-text">Credit: $62.40</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;:40.03},{&quot;2026-06-13&quot;:39.73},{&quot;2026-06-14&quot;:39.78},{&quot;2026-06-15&quot;:39.85},{&quot;2026-06-16&quot;:39.86},{&quot;2026-06-17&quot;:39.44},{&quot;2026-06-18&quot;:39.6},{&quot;2026-06-19&quot;:41.36},{&quot;2026-06-20&quot;:41.42},{&quot;2026-06-21&quot;:41.37},{&quot;2026-06-22&quot;:41.42},{&quot;2026-06-23&quot;:41.42},{&quot;2026-06-24&quot;:41.1},{&quot;2026-06-25&quot;:41.35},{&quot;2026-06-26&quot;:41.42},{&quot;2026-06-27&quot;:42.1},{&quot;2026-06-28&quot;:43.2},{&quot;2026-06-29&quot;:43.65},{&quot;2026-06-30&quot;:43.58},{&quot;2026-07-01&quot;:43.84},{&quot;2026-07-02&quot;:43.9},{&quot;2026-07-03&quot;:43.9},{&quot;2026-07-04&quot;:43.75},{&quot;2026-07-05&quot;:43.75},{&quot;2026-07-06&quot;:42.95},{&quot;2026-07-07&quot;:43.07},{&quot;2026-07-08&quot;:42.2},{&quot;2026-07-09&quot;:42.52},{&quot;2026-07-10&quot;:43.27},{&quot;2026-07-11&quot;:43.23},{&quot;2026-07-12&quot;:43.28},{&quot;2026-07-13&quot;:43.16},{&quot;2026-07-14&quot;:43.8},{&quot;2026-07-15&quot;:44.68},{&quot;2026-07-16&quot;:44.58},{&quot;2026-07-17&quot;:44.94},{&quot;2026-07-18&quot;:45.37},{&quot;2026-07-19&quot;:48.2},{&quot;2026-07-20&quot;:48.11},{&quot;2026-07-21&quot;:48.28},{&quot;2026-07-23&quot;:49.75},{&quot;2026-07-24&quot;:50.47},{&quot;2026-07-25&quot;:50.59},{&quot;2026-07-26&quot;:50.46},{&quot;2026-07-27&quot;:50.15},{&quot;2026-07-28&quot;:50.11},{&quot;2026-07-29&quot;:49.31},{&quot;2026-07-30&quot;:50.07},{&quot;2026-07-31&quot;:50.36},{&quot;2026-08-01&quot;:50.59},{&quot;2026-08-02&quot;:50.59},{&quot;2026-08-03&quot;:51.67},{&quot;2026-08-04&quot;:51.64},{&quot;2026-08-05&quot;:49.18},{&quot;2026-08-07&quot;:49.89},{&quot;2026-08-08&quot;:50.7},{&quot;2026-08-09&quot;:50.2},{&quot;2026-08-10&quot;:50.16},{&quot;2026-08-11&quot;:50.16},{&quot;2026-08-12&quot;:49.79},{&quot;2026-08-13&quot;:50.99},{&quot;2026-08-14&quot;:51.43},{&quot;2026-08-15&quot;:51.43},{&quot;2026-08-16&quot;:50.95},{&quot;2026-08-17&quot;:51.29},{&quot;2026-08-18&quot;:51.6},{&quot;2026-08-19&quot;:52.18},{&quot;2026-08-20&quot;:52.18},{&quot;2026-08-21&quot;:51.05},{&quot;2026-08-22&quot;:50.81},{&quot;2026-08-23&quot;:51.93},{&quot;2026-08-24&quot;:52.13},{&quot;2026-08-25&quot;:51.73},{&quot;2026-08-26&quot;:52.32},{&quot;2026-08-27&quot;:53.11},{&quot;2026-08-28&quot;:53.04},{&quot;2026-08-29&quot;:53.04},{&quot;2026-08-30&quot;:54.24},{&quot;2026-08-31&quot;:54.14},{&quot;2026-09-01&quot;:53.26},{&quot;2026-09-02&quot;:54.18},{&quot;2026-09-03&quot;:54.31},{&quot;2026-09-04&quot;:53.46},{&quot;2026-09-05&quot;:52.08},{&quot;2026-09-06&quot;:51.63},{&quot;2026-09-07&quot;:52.59},{&quot;2026-09-08&quot;:54.21},{&quot;2026-09-09&quot;:53.91},{&quot;2026-09-10&quot;:54.42},{&quot;2026-09-11&quot;:55.72}],&quot;normal&quot;:[{&quot;2026-06-12&quot;:42.41},{&quot;2026-06-13&quot;:42.78},{&quot;2026-06-14&quot;:42.4},{&quot;2026-06-15&quot;:42.38},{&quot;2026-06-16&quot;:42.4},{&quot;2026-06-17&quot;:42.4},{&quot;2026-06-18&quot;:42.36},{&quot;2026-06-19&quot;:42.36},{&quot;2026-06-20&quot;:42.35},{&quot;2026-06-21&quot;:42.35},{&quot;2026-06-22&quot;:42.35},{&quot;2026-06-23&quot;:42.35},{&quot;2026-06-24&quot;:42.35},{&quot;2026-06-25&quot;:42.4},{&quot;2026-06-26&quot;:42.67},{&quot;2026-06-27&quot;:43.0},{&quot;2026-06-28&quot;:43.0},{&quot;2026-06-29&quot;:43.0},{&quot;2026-06-30&quot;:43.0},{&quot;2026-07-01&quot;:42.97},{&quot;2026-07-02&quot;:42.97},{&quot;2026-07-03&quot;:43.09},{&quot;2026-07-04&quot;:43.22},{&quot;2026-07-05&quot;:43.02},{&quot;2026-07-06&quot;:43.02},{&quot;2026-07-07&quot;:43.18},{&quot;2026-07-08&quot;:43.18},{&quot;2026-07-09&quot;:43.18},{&quot;2026-07-10&quot;:43.18},{&quot;2026-07-11&quot;:42.84},{&quot;2026-07-12&quot;:42.84},{&quot;2026-07-13&quot;:42.84},{&quot;2026-07-14&quot;:42.86},{&quot;2026-07-15&quot;:42.87},{&quot;2026-07-16&quot;:42.82},{&quot;2026-07-17&quot;:42.82},{&quot;2026-07-18&quot;:42.82},{&quot;2026-07-19&quot;:42.78},{&quot;2026-07-20&quot;:42.88},{&quot;2026-07-21&quot;:42.88},{&quot;2026-07-23&quot;:42.95},{&quot;2026-07-24&quot;:43.05},{&quot;2026-07-25&quot;:43.05},{&quot;2026-07-26&quot;:43.05},{&quot;2026-07-27&quot;:43.26},{&quot;2026-07-28&quot;:43.26},{&quot;2026-07-29&quot;:43.59},{&quot;2026-07-30&quot;:43.69},{&quot;2026-07-31&quot;:44.0},{&quot;2026-08-01&quot;:44.0},{&quot;2026-08-02&quot;:44.0},{&quot;2026-08-03&quot;:44.0},{&quot;2026-08-04&quot;:44.0},{&quot;2026-08-05&quot;:44.0},{&quot;2026-08-07&quot;:44.05},{&quot;2026-08-08&quot;:44.05},{&quot;2026-08-09&quot;:44.05},{&quot;2026-08-10&quot;:44.19},{&quot;2026-08-11&quot;:45.44},{&quot;2026-08-12&quot;:45.44},{&quot;2026-08-13&quot;:46.0},{&quot;2026-08-14&quot;:46.32},{&quot;2026-08-15&quot;:46.32},{&quot;2026-08-16&quot;:46.32},{&quot;2026-08-17&quot;:46.95},{&quot;2026-08-18&quot;:46.95},{&quot;2026-08-19&quot;:47.19},{&quot;2026-08-20&quot;:47.19},{&quot;2026-08-21&quot;:47.51},{&quot;2026-08-22&quot;:48.65},{&quot;2026-08-23&quot;:49.34},{&quot;2026-08-24&quot;:49.34},{&quot;2026-08-25&quot;:49.98},{&quot;2026-08-26&quot;:49.98},{&quot;2026-08-27&quot;:50.46},{&quot;2026-08-28&quot;:50.93},{&quot;2026-08-29&quot;:50.93},{&quot;2026-08-30&quot;:50.93},{&quot;2026-08-31&quot;:50.93},{&quot;2026-09-01&quot;:51.09},{&quot;2026-09-02&quot;:51.53},{&quot;2026-09-03&quot;:51.31},{&quot;2026-09-04&quot;:51.46},{&quot;2026-09-05&quot;:52.5},{&quot;2026-09-06&quot;:52.64},{&quot;2026-09-07&quot;:52.64},{&quot;2026-09-08&quot;:52.64},{&quot;2026-09-09&quot;:52.86},{&quot;2026-09-10&quot;:52.86},{&quot;2026-09-11&quot;:52.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="19976"
  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-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">
            Archangel of Thune
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Creature — Angel
      </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">
            $52.76
          </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="Archangel of Thune" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/5/15c34447-b0f4-4fcc-b557-23c92850b31b.jpg?1783930222" />

        <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">
            Archangel of Thune
        </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 — Angel</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-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="Archangel of Thune" src="https://cards.scryfall.io/large/front/1/5/15c34447-b0f4-4fcc-b557-23c92850b31b.jpg?1783930222" />
    </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">
                $52.76
              </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">
                $74.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">$29.00</span>
              <span class="text-xs text-grey-text">Credit: $37.70</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;:66.69},{&quot;2026-06-10&quot;:66.69},{&quot;2026-06-11&quot;:66.69},{&quot;2026-06-12&quot;:66.69},{&quot;2026-06-13&quot;:66.69},{&quot;2026-06-14&quot;:66.95},{&quot;2026-06-15&quot;:66.95},{&quot;2026-06-16&quot;:66.95},{&quot;2026-06-17&quot;:66.95},{&quot;2026-06-18&quot;:66.95},{&quot;2026-06-19&quot;:66.77},{&quot;2026-06-20&quot;:66.77},{&quot;2026-06-21&quot;:66.77},{&quot;2026-06-22&quot;:66.77},{&quot;2026-06-24&quot;:67.05},{&quot;2026-06-25&quot;:66.77},{&quot;2026-06-26&quot;:66.77},{&quot;2026-06-27&quot;:66.77},{&quot;2026-06-28&quot;:66.77},{&quot;2026-06-29&quot;:66.77},{&quot;2026-06-30&quot;:66.77},{&quot;2026-07-01&quot;:66.77},{&quot;2026-07-02&quot;:66.77},{&quot;2026-07-03&quot;:66.54},{&quot;2026-07-04&quot;:66.54},{&quot;2026-07-05&quot;:67.04},{&quot;2026-07-06&quot;:67.04},{&quot;2026-07-07&quot;:67.04},{&quot;2026-07-08&quot;:67.04},{&quot;2026-07-09&quot;:67.04},{&quot;2026-07-10&quot;:67.04},{&quot;2026-07-11&quot;:67.04},{&quot;2026-07-12&quot;:67.04},{&quot;2026-07-13&quot;:67.04},{&quot;2026-07-14&quot;:67.6},{&quot;2026-07-15&quot;:67.6},{&quot;2026-07-16&quot;:67.53},{&quot;2026-07-17&quot;:67.53},{&quot;2026-07-18&quot;:67.53},{&quot;2026-07-19&quot;:67.53},{&quot;2026-07-20&quot;:67.53},{&quot;2026-07-21&quot;:67.53},{&quot;2026-07-23&quot;:67.53},{&quot;2026-07-25&quot;:69.57},{&quot;2026-07-26&quot;:69.57},{&quot;2026-07-27&quot;:69.57},{&quot;2026-07-29&quot;:69.57},{&quot;2026-07-30&quot;:69.57},{&quot;2026-07-31&quot;:69.42},{&quot;2026-08-01&quot;:69.42},{&quot;2026-08-02&quot;:69.42},{&quot;2026-08-03&quot;:69.42},{&quot;2026-08-04&quot;:69.42},{&quot;2026-08-05&quot;:69.42},{&quot;2026-08-07&quot;:69.42},{&quot;2026-08-08&quot;:69.42},{&quot;2026-08-09&quot;:72.28},{&quot;2026-08-10&quot;:72.28},{&quot;2026-08-11&quot;:72.28},{&quot;2026-08-12&quot;:72.28},{&quot;2026-08-13&quot;:72.28},{&quot;2026-08-14&quot;:72.28},{&quot;2026-08-15&quot;:72.28},{&quot;2026-08-16&quot;:72.99},{&quot;2026-08-17&quot;:72.99},{&quot;2026-08-18&quot;:73.7},{&quot;2026-08-19&quot;:73.7},{&quot;2026-08-20&quot;:73.7},{&quot;2026-08-21&quot;:73.7},{&quot;2026-08-22&quot;:73.7},{&quot;2026-08-23&quot;:73.7},{&quot;2026-08-24&quot;:73.7},{&quot;2026-08-25&quot;:73.7},{&quot;2026-08-26&quot;:74.34},{&quot;2026-08-27&quot;:74.34},{&quot;2026-08-28&quot;:74.34},{&quot;2026-08-29&quot;:74.34},{&quot;2026-08-30&quot;:74.34},{&quot;2026-08-31&quot;:74.34},{&quot;2026-09-01&quot;:74.34},{&quot;2026-09-02&quot;:74.89},{&quot;2026-09-03&quot;:74.89},{&quot;2026-09-04&quot;:74.89},{&quot;2026-09-05&quot;:74.61},{&quot;2026-09-06&quot;:74.61},{&quot;2026-09-07&quot;:73.71},{&quot;2026-09-08&quot;:73.71},{&quot;2026-09-09&quot;:74.59},{&quot;2026-09-10&quot;:74.59},{&quot;2026-09-11&quot;:74.59}],&quot;normal&quot;:[{&quot;2026-06-08&quot;:63.95},{&quot;2026-06-10&quot;:63.48},{&quot;2026-06-11&quot;:63.3},{&quot;2026-06-12&quot;:63.3},{&quot;2026-06-13&quot;:63.34},{&quot;2026-06-14&quot;:63.86},{&quot;2026-06-15&quot;:64.01},{&quot;2026-06-16&quot;:64.48},{&quot;2026-06-17&quot;:64.48},{&quot;2026-06-18&quot;:64.48},{&quot;2026-06-19&quot;:64.48},{&quot;2026-06-20&quot;:64.48},{&quot;2026-06-21&quot;:64.48},{&quot;2026-06-22&quot;:64.48},{&quot;2026-06-24&quot;:64.48},{&quot;2026-06-25&quot;:64.48},{&quot;2026-06-26&quot;:64.48},{&quot;2026-06-27&quot;:64.63},{&quot;2026-06-28&quot;:65.15},{&quot;2026-06-29&quot;:65.15},{&quot;2026-06-30&quot;:65.15},{&quot;2026-07-01&quot;:65.15},{&quot;2026-07-02&quot;:65.15},{&quot;2026-07-03&quot;:65.15},{&quot;2026-07-04&quot;:65.15},{&quot;2026-07-05&quot;:65.15},{&quot;2026-07-06&quot;:65.15},{&quot;2026-07-07&quot;:65.15},{&quot;2026-07-08&quot;:65.15},{&quot;2026-07-09&quot;:65.15},{&quot;2026-07-10&quot;:65.15},{&quot;2026-07-11&quot;:65.15},{&quot;2026-07-12&quot;:64.82},{&quot;2026-07-13&quot;:64.82},{&quot;2026-07-14&quot;:64.94},{&quot;2026-07-15&quot;:64.94},{&quot;2026-07-16&quot;:64.94},{&quot;2026-07-17&quot;:64.94},{&quot;2026-07-18&quot;:64.94},{&quot;2026-07-19&quot;:64.94},{&quot;2026-07-20&quot;:65.05},{&quot;2026-07-21&quot;:65.05},{&quot;2026-07-23&quot;:65.05},{&quot;2026-07-25&quot;:64.61},{&quot;2026-07-26&quot;:64.61},{&quot;2026-07-27&quot;:64.61},{&quot;2026-07-29&quot;:63.6},{&quot;2026-07-30&quot;:63.6},{&quot;2026-07-31&quot;:62.9},{&quot;2026-08-01&quot;:62.75},{&quot;2026-08-02&quot;:62.75},{&quot;2026-08-03&quot;:62.75},{&quot;2026-08-04&quot;:62.75},{&quot;2026-08-05&quot;:62.75},{&quot;2026-08-07&quot;:62.75},{&quot;2026-08-08&quot;:62.75},{&quot;2026-08-09&quot;:62.75},{&quot;2026-08-10&quot;:62.75},{&quot;2026-08-11&quot;:62.75},{&quot;2026-08-12&quot;:62.55},{&quot;2026-08-13&quot;:62.55},{&quot;2026-08-14&quot;:62.55},{&quot;2026-08-15&quot;:62.55},{&quot;2026-08-16&quot;:62.38},{&quot;2026-08-17&quot;:62.38},{&quot;2026-08-18&quot;:62.46},{&quot;2026-08-19&quot;:62.26},{&quot;2026-08-20&quot;:62.26},{&quot;2026-08-21&quot;:62.26},{&quot;2026-08-22&quot;:62.26},{&quot;2026-08-23&quot;:60.82},{&quot;2026-08-24&quot;:60.13},{&quot;2026-08-25&quot;:60.13},{&quot;2026-08-26&quot;:59.2},{&quot;2026-08-27&quot;:59.18},{&quot;2026-08-28&quot;:58.64},{&quot;2026-08-29&quot;:58.64},{&quot;2026-08-30&quot;:58.14},{&quot;2026-08-31&quot;:58.14},{&quot;2026-09-01&quot;:58.14},{&quot;2026-09-02&quot;:58.14},{&quot;2026-09-03&quot;:55.95},{&quot;2026-09-04&quot;:54.39},{&quot;2026-09-05&quot;:54.15},{&quot;2026-09-06&quot;:53.84},{&quot;2026-09-07&quot;:53.84},{&quot;2026-09-08&quot;:53.84},{&quot;2026-09-09&quot;:53.48},{&quot;2026-09-10&quot;:52.76},{&quot;2026-09-11&quot;:52.76}]}"
        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="95138"
  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-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">
            Buster Sword
        </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="text-sm font-medium text-nine-white">
            $52.39
          </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="Buster Sword" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/7/374d7383-a1a7-4eea-91f7-290180e14cc9.jpg?1783906560" />

        <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">
            Buster Sword
        </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">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-3'></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="Buster Sword" src="https://cards.scryfall.io/large/front/3/7/374d7383-a1a7-4eea-91f7-290180e14cc9.jpg?1783906560" />
    </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">
                $52.39
              </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">
                $56.25
              </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">$39.00</span>
              <span class="text-xs text-grey-text">Credit: $50.70</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;:46.42},{&quot;2026-06-12&quot;:46.92},{&quot;2026-06-13&quot;:46.74},{&quot;2026-06-14&quot;:46.78},{&quot;2026-06-15&quot;:46.78},{&quot;2026-06-16&quot;:46.55},{&quot;2026-06-17&quot;:46.67},{&quot;2026-06-18&quot;:46.67},{&quot;2026-06-19&quot;:47.3},{&quot;2026-06-20&quot;:47.12},{&quot;2026-06-21&quot;:47.12},{&quot;2026-06-22&quot;:47.16},{&quot;2026-06-23&quot;:47.31},{&quot;2026-06-24&quot;:46.89},{&quot;2026-06-25&quot;:47.04},{&quot;2026-06-26&quot;:47.04},{&quot;2026-06-27&quot;:45.71},{&quot;2026-06-28&quot;:45.81},{&quot;2026-06-29&quot;:45.32},{&quot;2026-06-30&quot;:45.51},{&quot;2026-07-01&quot;:45.69},{&quot;2026-07-02&quot;:44.75},{&quot;2026-07-03&quot;:44.85},{&quot;2026-07-04&quot;:45.21},{&quot;2026-07-05&quot;:45.26},{&quot;2026-07-06&quot;:45.66},{&quot;2026-07-07&quot;:46.11},{&quot;2026-07-08&quot;:46.24},{&quot;2026-07-09&quot;:46.28},{&quot;2026-07-10&quot;:46.31},{&quot;2026-07-11&quot;:46.31},{&quot;2026-07-12&quot;:46.31},{&quot;2026-07-13&quot;:46.54},{&quot;2026-07-14&quot;:46.21},{&quot;2026-07-15&quot;:46.27},{&quot;2026-07-16&quot;:46.3},{&quot;2026-07-17&quot;:46.4},{&quot;2026-07-18&quot;:46.57},{&quot;2026-07-19&quot;:47.5},{&quot;2026-07-20&quot;:47.75},{&quot;2026-07-21&quot;:47.55},{&quot;2026-07-23&quot;:48.22},{&quot;2026-07-25&quot;:48.8},{&quot;2026-07-26&quot;:49.2},{&quot;2026-07-27&quot;:50.26},{&quot;2026-07-28&quot;:51.81},{&quot;2026-07-29&quot;:52.08},{&quot;2026-07-30&quot;:52.14},{&quot;2026-07-31&quot;:52.47},{&quot;2026-08-01&quot;:52.47},{&quot;2026-08-02&quot;:51.71},{&quot;2026-08-03&quot;:51.71},{&quot;2026-08-04&quot;:51.99},{&quot;2026-08-05&quot;:52.21},{&quot;2026-08-07&quot;:52.31},{&quot;2026-08-08&quot;:52.82},{&quot;2026-08-09&quot;:52.6},{&quot;2026-08-10&quot;:52.36},{&quot;2026-08-11&quot;:52.07},{&quot;2026-08-12&quot;:52.07},{&quot;2026-08-13&quot;:52.13},{&quot;2026-08-14&quot;:52.83},{&quot;2026-08-15&quot;:52.83},{&quot;2026-08-16&quot;:51.72},{&quot;2026-08-17&quot;:52.23},{&quot;2026-08-18&quot;:52.25},{&quot;2026-08-19&quot;:52.36},{&quot;2026-08-20&quot;:52.36},{&quot;2026-08-21&quot;:52.59},{&quot;2026-08-22&quot;:53.19},{&quot;2026-08-23&quot;:53.4},{&quot;2026-08-24&quot;:53.33},{&quot;2026-08-25&quot;:53.33},{&quot;2026-08-26&quot;:53.35},{&quot;2026-08-27&quot;:53.38},{&quot;2026-08-28&quot;:53.46},{&quot;2026-08-29&quot;:53.46},{&quot;2026-08-30&quot;:53.38},{&quot;2026-08-31&quot;:53.38},{&quot;2026-09-01&quot;:53.38},{&quot;2026-09-02&quot;:53.72},{&quot;2026-09-03&quot;:52.93},{&quot;2026-09-04&quot;:53.03},{&quot;2026-09-05&quot;:53.29},{&quot;2026-09-06&quot;:53.29},{&quot;2026-09-07&quot;:53.21},{&quot;2026-09-08&quot;:55.37},{&quot;2026-09-09&quot;:55.52},{&quot;2026-09-10&quot;:56.09},{&quot;2026-09-11&quot;:56.25}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:43.69},{&quot;2026-06-12&quot;:42.99},{&quot;2026-06-13&quot;:41.09},{&quot;2026-06-14&quot;:40.24},{&quot;2026-06-15&quot;:40.94},{&quot;2026-06-16&quot;:41.15},{&quot;2026-06-17&quot;:40.83},{&quot;2026-06-18&quot;:41.49},{&quot;2026-06-19&quot;:41.95},{&quot;2026-06-20&quot;:40.46},{&quot;2026-06-21&quot;:39.87},{&quot;2026-06-22&quot;:41.86},{&quot;2026-06-23&quot;:43.04},{&quot;2026-06-24&quot;:43.48},{&quot;2026-06-25&quot;:42.43},{&quot;2026-06-26&quot;:41.7},{&quot;2026-06-27&quot;:41.5},{&quot;2026-06-28&quot;:41.63},{&quot;2026-06-29&quot;:41.82},{&quot;2026-06-30&quot;:43.09},{&quot;2026-07-01&quot;:43.83},{&quot;2026-07-02&quot;:44.35},{&quot;2026-07-03&quot;:44.1},{&quot;2026-07-04&quot;:44.32},{&quot;2026-07-05&quot;:43.05},{&quot;2026-07-06&quot;:45.19},{&quot;2026-07-07&quot;:44.44},{&quot;2026-07-08&quot;:43.8},{&quot;2026-07-09&quot;:44.5},{&quot;2026-07-10&quot;:42.87},{&quot;2026-07-11&quot;:42.53},{&quot;2026-07-12&quot;:41.69},{&quot;2026-07-13&quot;:43.29},{&quot;2026-07-14&quot;:43.75},{&quot;2026-07-15&quot;:44.27},{&quot;2026-07-16&quot;:43.51},{&quot;2026-07-17&quot;:45.48},{&quot;2026-07-18&quot;:47.31},{&quot;2026-07-19&quot;:47.87},{&quot;2026-07-20&quot;:47.1},{&quot;2026-07-21&quot;:46.86},{&quot;2026-07-23&quot;:46.94},{&quot;2026-07-25&quot;:47.88},{&quot;2026-07-26&quot;:47.77},{&quot;2026-07-27&quot;:48.34},{&quot;2026-07-28&quot;:49.49},{&quot;2026-07-29&quot;:51.86},{&quot;2026-07-30&quot;:51.22},{&quot;2026-07-31&quot;:50.85},{&quot;2026-08-01&quot;:50.19},{&quot;2026-08-02&quot;:47.98},{&quot;2026-08-03&quot;:45.82},{&quot;2026-08-04&quot;:46.21},{&quot;2026-08-05&quot;:44.59},{&quot;2026-08-07&quot;:46.24},{&quot;2026-08-08&quot;:47.5},{&quot;2026-08-09&quot;:48.21},{&quot;2026-08-10&quot;:48.11},{&quot;2026-08-11&quot;:48.05},{&quot;2026-08-12&quot;:47.82},{&quot;2026-08-13&quot;:47.95},{&quot;2026-08-14&quot;:46.69},{&quot;2026-08-15&quot;:47.75},{&quot;2026-08-16&quot;:48.8},{&quot;2026-08-17&quot;:48.8},{&quot;2026-08-18&quot;:49.09},{&quot;2026-08-19&quot;:50.54},{&quot;2026-08-20&quot;:50.54},{&quot;2026-08-21&quot;:52.74},{&quot;2026-08-22&quot;:51.31},{&quot;2026-08-23&quot;:50.48},{&quot;2026-08-24&quot;:51.82},{&quot;2026-08-25&quot;:51.82},{&quot;2026-08-26&quot;:50.41},{&quot;2026-08-27&quot;:49.23},{&quot;2026-08-28&quot;:47.65},{&quot;2026-08-29&quot;:47.65},{&quot;2026-08-30&quot;:49.46},{&quot;2026-08-31&quot;:51.35},{&quot;2026-09-01&quot;:51.35},{&quot;2026-09-02&quot;:53.92},{&quot;2026-09-03&quot;:52.54},{&quot;2026-09-04&quot;:52.7},{&quot;2026-09-05&quot;:52.28},{&quot;2026-09-06&quot;:52.89},{&quot;2026-09-07&quot;:53.52},{&quot;2026-09-08&quot;:54.65},{&quot;2026-09-09&quot;:54.33},{&quot;2026-09-10&quot;:51.68},{&quot;2026-09-11&quot;:52.39}]}"
        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="41909"
  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">
            Boseiju, Who Endures
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary 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-100 text-badge-text">
              ↓
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $49.78
          </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="Boseiju, Who Endures" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/2/1/2135ac5a-187b-4dc9-8f82-34e8d1603416.jpg?1783923818" />

        <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">
            Boseiju, Who Endures
        </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 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="Boseiju, Who Endures" src="https://cards.scryfall.io/large/front/2/1/2135ac5a-187b-4dc9-8f82-34e8d1603416.jpg?1783923818" />
    </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">
                $49.78
              </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">
                $52.38
              </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">$36.00</span>
              <span class="text-xs text-grey-text">Credit: $46.80</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">$37.50</span>
              <span class="text-xs text-grey-text">Credit: $48.75</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;:54.23},{&quot;2026-06-12&quot;:54.23},{&quot;2026-06-13&quot;:54.04},{&quot;2026-06-14&quot;:54.04},{&quot;2026-06-15&quot;:54.32},{&quot;2026-06-16&quot;:54.12},{&quot;2026-06-17&quot;:54.02},{&quot;2026-06-18&quot;:53.92},{&quot;2026-06-19&quot;:53.88},{&quot;2026-06-20&quot;:53.88},{&quot;2026-06-21&quot;:53.88},{&quot;2026-06-22&quot;:53.82},{&quot;2026-06-23&quot;:53.82},{&quot;2026-06-24&quot;:53.82},{&quot;2026-06-25&quot;:53.96},{&quot;2026-06-26&quot;:53.96},{&quot;2026-06-27&quot;:53.96},{&quot;2026-06-28&quot;:53.96},{&quot;2026-06-29&quot;:54.24},{&quot;2026-06-30&quot;:54.24},{&quot;2026-07-01&quot;:54.24},{&quot;2026-07-02&quot;:54.25},{&quot;2026-07-03&quot;:54.21},{&quot;2026-07-04&quot;:54.16},{&quot;2026-07-05&quot;:54.16},{&quot;2026-07-06&quot;:54.16},{&quot;2026-07-07&quot;:54.16},{&quot;2026-07-08&quot;:54.23},{&quot;2026-07-09&quot;:54.23},{&quot;2026-07-10&quot;:54.23},{&quot;2026-07-11&quot;:53.95},{&quot;2026-07-12&quot;:53.95},{&quot;2026-07-13&quot;:53.95},{&quot;2026-07-14&quot;:54.02},{&quot;2026-07-15&quot;:54.02},{&quot;2026-07-16&quot;:54.02},{&quot;2026-07-17&quot;:54.02},{&quot;2026-07-18&quot;:54.02},{&quot;2026-07-19&quot;:53.57},{&quot;2026-07-20&quot;:53.86},{&quot;2026-07-21&quot;:53.86},{&quot;2026-07-23&quot;:53.88},{&quot;2026-07-25&quot;:53.88},{&quot;2026-07-26&quot;:53.98},{&quot;2026-07-27&quot;:53.98},{&quot;2026-07-28&quot;:54.01},{&quot;2026-07-29&quot;:53.93},{&quot;2026-07-30&quot;:53.93},{&quot;2026-07-31&quot;:53.93},{&quot;2026-08-01&quot;:53.61},{&quot;2026-08-02&quot;:53.61},{&quot;2026-08-03&quot;:53.07},{&quot;2026-08-04&quot;:52.85},{&quot;2026-08-05&quot;:52.85},{&quot;2026-08-07&quot;:52.8},{&quot;2026-08-08&quot;:52.8},{&quot;2026-08-09&quot;:52.83},{&quot;2026-08-10&quot;:52.81},{&quot;2026-08-11&quot;:53.07},{&quot;2026-08-12&quot;:52.98},{&quot;2026-08-13&quot;:52.98},{&quot;2026-08-14&quot;:52.84},{&quot;2026-08-15&quot;:52.84},{&quot;2026-08-16&quot;:53.67},{&quot;2026-08-17&quot;:53.18},{&quot;2026-08-18&quot;:53.13},{&quot;2026-08-19&quot;:53.51},{&quot;2026-08-20&quot;:53.51},{&quot;2026-08-21&quot;:53.85},{&quot;2026-08-22&quot;:54.14},{&quot;2026-08-23&quot;:54.11},{&quot;2026-08-24&quot;:54.03},{&quot;2026-08-25&quot;:54.03},{&quot;2026-08-26&quot;:53.77},{&quot;2026-08-27&quot;:53.77},{&quot;2026-08-28&quot;:53.75},{&quot;2026-08-29&quot;:53.75},{&quot;2026-08-30&quot;:53.75},{&quot;2026-08-31&quot;:53.83},{&quot;2026-09-01&quot;:53.83},{&quot;2026-09-02&quot;:53.83},{&quot;2026-09-03&quot;:53.75},{&quot;2026-09-04&quot;:53.75},{&quot;2026-09-05&quot;:54.1},{&quot;2026-09-06&quot;:53.9},{&quot;2026-09-07&quot;:53.16},{&quot;2026-09-08&quot;:53.16},{&quot;2026-09-09&quot;:52.63},{&quot;2026-09-10&quot;:52.63},{&quot;2026-09-11&quot;:52.38}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:53.17},{&quot;2026-06-12&quot;:53.58},{&quot;2026-06-13&quot;:53.56},{&quot;2026-06-14&quot;:52.17},{&quot;2026-06-15&quot;:50.77},{&quot;2026-06-16&quot;:51.21},{&quot;2026-06-17&quot;:50.74},{&quot;2026-06-18&quot;:50.35},{&quot;2026-06-19&quot;:49.58},{&quot;2026-06-20&quot;:49.96},{&quot;2026-06-21&quot;:49.94},{&quot;2026-06-22&quot;:50.51},{&quot;2026-06-23&quot;:50.41},{&quot;2026-06-24&quot;:49.92},{&quot;2026-06-25&quot;:50.94},{&quot;2026-06-26&quot;:50.67},{&quot;2026-06-27&quot;:49.97},{&quot;2026-06-28&quot;:49.79},{&quot;2026-06-29&quot;:49.54},{&quot;2026-06-30&quot;:46.06},{&quot;2026-07-01&quot;:45.91},{&quot;2026-07-02&quot;:46.66},{&quot;2026-07-03&quot;:48.52},{&quot;2026-07-04&quot;:48.78},{&quot;2026-07-05&quot;:48.52},{&quot;2026-07-06&quot;:49.15},{&quot;2026-07-07&quot;:48.39},{&quot;2026-07-08&quot;:48.68},{&quot;2026-07-09&quot;:48.98},{&quot;2026-07-10&quot;:49.11},{&quot;2026-07-11&quot;:48.82},{&quot;2026-07-12&quot;:47.78},{&quot;2026-07-13&quot;:47.71},{&quot;2026-07-14&quot;:47.99},{&quot;2026-07-15&quot;:49.04},{&quot;2026-07-16&quot;:49.67},{&quot;2026-07-17&quot;:49.61},{&quot;2026-07-18&quot;:49.28},{&quot;2026-07-19&quot;:48.56},{&quot;2026-07-20&quot;:49.88},{&quot;2026-07-21&quot;:49.8},{&quot;2026-07-23&quot;:50.72},{&quot;2026-07-25&quot;:50.0},{&quot;2026-07-26&quot;:49.28},{&quot;2026-07-27&quot;:49.17},{&quot;2026-07-28&quot;:49.47},{&quot;2026-07-29&quot;:49.94},{&quot;2026-07-30&quot;:49.85},{&quot;2026-07-31&quot;:50.17},{&quot;2026-08-01&quot;:50.29},{&quot;2026-08-02&quot;:50.82},{&quot;2026-08-03&quot;:50.58},{&quot;2026-08-04&quot;:51.16},{&quot;2026-08-05&quot;:51.66},{&quot;2026-08-07&quot;:51.54},{&quot;2026-08-08&quot;:51.82},{&quot;2026-08-09&quot;:51.38},{&quot;2026-08-10&quot;:50.96},{&quot;2026-08-11&quot;:50.11},{&quot;2026-08-12&quot;:49.75},{&quot;2026-08-13&quot;:50.12},{&quot;2026-08-14&quot;:49.12},{&quot;2026-08-15&quot;:49.94},{&quot;2026-08-16&quot;:49.28},{&quot;2026-08-17&quot;:49.1},{&quot;2026-08-18&quot;:49.73},{&quot;2026-08-19&quot;:50.0},{&quot;2026-08-20&quot;:50.0},{&quot;2026-08-21&quot;:50.17},{&quot;2026-08-22&quot;:50.79},{&quot;2026-08-23&quot;:51.15},{&quot;2026-08-24&quot;:50.51},{&quot;2026-08-25&quot;:50.41},{&quot;2026-08-26&quot;:50.29},{&quot;2026-08-27&quot;:49.88},{&quot;2026-08-28&quot;:49.28},{&quot;2026-08-29&quot;:49.28},{&quot;2026-08-30&quot;:49.43},{&quot;2026-08-31&quot;:48.93},{&quot;2026-09-01&quot;:48.99},{&quot;2026-09-02&quot;:49.89},{&quot;2026-09-03&quot;:51.46},{&quot;2026-09-04&quot;:51.65},{&quot;2026-09-05&quot;:51.21},{&quot;2026-09-06&quot;:50.2},{&quot;2026-09-07&quot;:49.3},{&quot;2026-09-08&quot;:49.71},{&quot;2026-09-09&quot;:49.59},{&quot;2026-09-10&quot;:49.85},{&quot;2026-09-11&quot;:49.78}]}"
        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="74583"
  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-lci 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">
            Roaming Throne
        </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-50 text-badge-text">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $52.33
          </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="Roaming Throne" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/3/2/32fd8b7c-baf3-4d3d-be6f-044a917b11a0.jpg?1783913723" />

        <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">
            Roaming Throne
        </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="Roaming Throne" src="https://cards.scryfall.io/large/front/3/2/32fd8b7c-baf3-4d3d-be6f-044a917b11a0.jpg?1783913723" />
    </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">
                $51.28
              </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">
                $52.33
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$28.00</span>
              <span class="text-xs text-grey-text">Credit: $36.40</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;:54.19},{&quot;2026-06-14&quot;:54.62},{&quot;2026-06-15&quot;:55.06},{&quot;2026-06-16&quot;:55.06},{&quot;2026-06-17&quot;:55.06},{&quot;2026-06-18&quot;:55.06},{&quot;2026-06-19&quot;:55.37},{&quot;2026-06-20&quot;:55.37},{&quot;2026-06-21&quot;:55.05},{&quot;2026-06-22&quot;:55.05},{&quot;2026-06-23&quot;:55.05},{&quot;2026-06-24&quot;:54.49},{&quot;2026-06-25&quot;:54.01},{&quot;2026-06-26&quot;:54.01},{&quot;2026-06-27&quot;:53.69},{&quot;2026-06-28&quot;:53.59},{&quot;2026-06-29&quot;:53.17},{&quot;2026-06-30&quot;:53.17},{&quot;2026-07-01&quot;:52.93},{&quot;2026-07-02&quot;:52.19},{&quot;2026-07-03&quot;:52.15},{&quot;2026-07-04&quot;:51.42},{&quot;2026-07-05&quot;:50.14},{&quot;2026-07-06&quot;:49.93},{&quot;2026-07-07&quot;:49.72},{&quot;2026-07-08&quot;:49.59},{&quot;2026-07-09&quot;:47.75},{&quot;2026-07-10&quot;:47.63},{&quot;2026-07-11&quot;:47.66},{&quot;2026-07-12&quot;:47.63},{&quot;2026-07-13&quot;:49.12},{&quot;2026-07-14&quot;:49.83},{&quot;2026-07-15&quot;:50.54},{&quot;2026-07-16&quot;:50.54},{&quot;2026-07-17&quot;:50.54},{&quot;2026-07-18&quot;:50.54},{&quot;2026-07-19&quot;:50.54},{&quot;2026-07-20&quot;:50.54},{&quot;2026-07-21&quot;:50.54},{&quot;2026-07-22&quot;:50.88},{&quot;2026-07-23&quot;:51.99},{&quot;2026-07-24&quot;:51.99},{&quot;2026-07-25&quot;:53.23},{&quot;2026-07-26&quot;:53.23},{&quot;2026-07-27&quot;:53.23},{&quot;2026-07-28&quot;:53.27},{&quot;2026-07-29&quot;:53.99},{&quot;2026-07-30&quot;:55.71},{&quot;2026-07-31&quot;:56.07},{&quot;2026-08-01&quot;:56.06},{&quot;2026-08-02&quot;:56.29},{&quot;2026-08-03&quot;:56.29},{&quot;2026-08-04&quot;:56.29},{&quot;2026-08-05&quot;:55.84},{&quot;2026-08-07&quot;:55.33},{&quot;2026-08-08&quot;:55.33},{&quot;2026-08-09&quot;:55.33},{&quot;2026-08-10&quot;:55.33},{&quot;2026-08-11&quot;:55.33},{&quot;2026-08-12&quot;:55.0},{&quot;2026-08-13&quot;:56.38},{&quot;2026-08-14&quot;:55.86},{&quot;2026-08-15&quot;:55.98},{&quot;2026-08-16&quot;:55.98},{&quot;2026-08-17&quot;:55.98},{&quot;2026-08-18&quot;:54.64},{&quot;2026-08-19&quot;:54.08},{&quot;2026-08-20&quot;:54.09},{&quot;2026-08-21&quot;:54.2},{&quot;2026-08-22&quot;:53.48},{&quot;2026-08-23&quot;:52.06},{&quot;2026-08-24&quot;:52.48},{&quot;2026-08-25&quot;:51.86},{&quot;2026-08-26&quot;:51.86},{&quot;2026-08-27&quot;:52.12},{&quot;2026-08-28&quot;:52.12},{&quot;2026-08-29&quot;:52.12},{&quot;2026-08-30&quot;:52.4},{&quot;2026-08-31&quot;:51.88},{&quot;2026-09-01&quot;:51.62},{&quot;2026-09-02&quot;:51.62},{&quot;2026-09-03&quot;:51.62},{&quot;2026-09-04&quot;:51.62},{&quot;2026-09-05&quot;:51.59},{&quot;2026-09-06&quot;:51.74},{&quot;2026-09-07&quot;:51.71},{&quot;2026-09-08&quot;:51.71},{&quot;2026-09-09&quot;:52.37},{&quot;2026-09-10&quot;:52.33},{&quot;2026-09-11&quot;:52.33}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:47.46},{&quot;2026-06-14&quot;:46.08},{&quot;2026-06-15&quot;:45.89},{&quot;2026-06-16&quot;:47.89},{&quot;2026-06-17&quot;:49.85},{&quot;2026-06-18&quot;:50.85},{&quot;2026-06-19&quot;:48.66},{&quot;2026-06-20&quot;:49.02},{&quot;2026-06-21&quot;:48.53},{&quot;2026-06-22&quot;:45.8},{&quot;2026-06-23&quot;:46.7},{&quot;2026-06-24&quot;:48.38},{&quot;2026-06-25&quot;:48.36},{&quot;2026-06-26&quot;:48.58},{&quot;2026-06-27&quot;:47.29},{&quot;2026-06-28&quot;:47.58},{&quot;2026-06-29&quot;:47.16},{&quot;2026-06-30&quot;:47.87},{&quot;2026-07-01&quot;:47.54},{&quot;2026-07-02&quot;:47.77},{&quot;2026-07-03&quot;:47.48},{&quot;2026-07-04&quot;:47.04},{&quot;2026-07-05&quot;:47.55},{&quot;2026-07-06&quot;:47.08},{&quot;2026-07-07&quot;:47.42},{&quot;2026-07-08&quot;:48.8},{&quot;2026-07-09&quot;:48.66},{&quot;2026-07-10&quot;:48.74},{&quot;2026-07-11&quot;:48.49},{&quot;2026-07-12&quot;:48.57},{&quot;2026-07-13&quot;:50.41},{&quot;2026-07-14&quot;:50.91},{&quot;2026-07-15&quot;:50.89},{&quot;2026-07-16&quot;:50.15},{&quot;2026-07-17&quot;:50.61},{&quot;2026-07-18&quot;:49.7},{&quot;2026-07-19&quot;:49.29},{&quot;2026-07-20&quot;:51.01},{&quot;2026-07-21&quot;:50.64},{&quot;2026-07-22&quot;:49.83},{&quot;2026-07-23&quot;:49.81},{&quot;2026-07-24&quot;:53.19},{&quot;2026-07-25&quot;:53.16},{&quot;2026-07-26&quot;:51.95},{&quot;2026-07-27&quot;:53.61},{&quot;2026-07-28&quot;:51.72},{&quot;2026-07-29&quot;:50.16},{&quot;2026-07-30&quot;:51.53},{&quot;2026-07-31&quot;:52.01},{&quot;2026-08-01&quot;:52.96},{&quot;2026-08-02&quot;:52.8},{&quot;2026-08-03&quot;:52.43},{&quot;2026-08-04&quot;:50.68},{&quot;2026-08-05&quot;:49.44},{&quot;2026-08-07&quot;:49.26},{&quot;2026-08-08&quot;:49.85},{&quot;2026-08-09&quot;:49.57},{&quot;2026-08-10&quot;:50.17},{&quot;2026-08-11&quot;:50.15},{&quot;2026-08-12&quot;:50.16},{&quot;2026-08-13&quot;:50.18},{&quot;2026-08-14&quot;:50.1},{&quot;2026-08-15&quot;:48.63},{&quot;2026-08-16&quot;:48.06},{&quot;2026-08-17&quot;:48.84},{&quot;2026-08-18&quot;:50.24},{&quot;2026-08-19&quot;:50.1},{&quot;2026-08-20&quot;:49.62},{&quot;2026-08-21&quot;:47.89},{&quot;2026-08-22&quot;:48.02},{&quot;2026-08-23&quot;:48.17},{&quot;2026-08-24&quot;:49.07},{&quot;2026-08-25&quot;:48.86},{&quot;2026-08-26&quot;:49.61},{&quot;2026-08-27&quot;:51.79},{&quot;2026-08-28&quot;:51.08},{&quot;2026-08-29&quot;:51.08},{&quot;2026-08-30&quot;:49.79},{&quot;2026-08-31&quot;:50.3},{&quot;2026-09-01&quot;:51.0},{&quot;2026-09-02&quot;:50.51},{&quot;2026-09-03&quot;:49.98},{&quot;2026-09-04&quot;:49.92},{&quot;2026-09-05&quot;:50.08},{&quot;2026-09-06&quot;:50.25},{&quot;2026-09-07&quot;:50.59},{&quot;2026-09-08&quot;:52.86},{&quot;2026-09-09&quot;:53.84},{&quot;2026-09-10&quot;:53.57},{&quot;2026-09-11&quot;:51.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="95816"
  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-fic 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">
            Y&#39;shtola, Night&#39;s Blessed
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Cat Warlock
      </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">
              ↑
              12%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $50.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="Y&#39;shtola, Night&#39;s Blessed" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/0/b/0bda4de9-d0ec-4d27-b92b-8a76779747cf.jpg?1748704892" />

        <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">
            Y&#39;shtola, Night&#39;s Blessed
        </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 — Cat Warlock</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><i class='no-tailwind ms ms-cost ml-0 ms-u'></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="Y&#39;shtola, Night&#39;s Blessed" src="https://cards.scryfall.io/large/front/0/b/0bda4de9-d0ec-4d27-b92b-8a76779747cf.jpg?1748704892" />
    </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">
                $18.26
              </span>

                <span class="text-xs text-accent-100">
                  ↓
                  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">
                $50.87
              </span>

                <span class="text-xs text-accent-50">
                  ↑
                  12%
                </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">$35.00</span>
              <span class="text-xs text-grey-text">Credit: $45.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-13&quot;:27.67},{&quot;2026-06-14&quot;:28.05},{&quot;2026-06-15&quot;:28.88},{&quot;2026-06-16&quot;:29.05},{&quot;2026-06-17&quot;:29.05},{&quot;2026-06-18&quot;:29.05},{&quot;2026-06-19&quot;:29.12},{&quot;2026-06-20&quot;:29.12},{&quot;2026-06-21&quot;:29.12},{&quot;2026-06-22&quot;:29.12},{&quot;2026-06-23&quot;:29.12},{&quot;2026-06-24&quot;:29.37},{&quot;2026-06-25&quot;:29.37},{&quot;2026-06-26&quot;:29.38},{&quot;2026-06-27&quot;:29.52},{&quot;2026-06-28&quot;:29.52},{&quot;2026-06-29&quot;:29.52},{&quot;2026-06-30&quot;:29.52},{&quot;2026-07-01&quot;:29.52},{&quot;2026-07-02&quot;:29.52},{&quot;2026-07-03&quot;:29.54},{&quot;2026-07-04&quot;:29.38},{&quot;2026-07-05&quot;:29.38},{&quot;2026-07-06&quot;:29.4},{&quot;2026-07-07&quot;:29.4},{&quot;2026-07-08&quot;:29.4},{&quot;2026-07-09&quot;:29.69},{&quot;2026-07-10&quot;:29.69},{&quot;2026-07-11&quot;:29.72},{&quot;2026-07-12&quot;:29.72},{&quot;2026-07-13&quot;:29.72},{&quot;2026-07-14&quot;:29.72},{&quot;2026-07-15&quot;:29.92},{&quot;2026-07-16&quot;:30.21},{&quot;2026-07-17&quot;:30.86},{&quot;2026-07-18&quot;:30.86},{&quot;2026-07-19&quot;:30.57},{&quot;2026-07-20&quot;:30.57},{&quot;2026-07-21&quot;:30.72},{&quot;2026-07-22&quot;:30.72},{&quot;2026-07-23&quot;:30.23},{&quot;2026-07-24&quot;:30.37},{&quot;2026-07-25&quot;:30.37},{&quot;2026-07-26&quot;:30.5},{&quot;2026-07-27&quot;:30.5},{&quot;2026-07-28&quot;:30.72},{&quot;2026-07-29&quot;:30.72},{&quot;2026-07-30&quot;:30.59},{&quot;2026-07-31&quot;:30.91},{&quot;2026-08-01&quot;:31.27},{&quot;2026-08-02&quot;:31.27},{&quot;2026-08-03&quot;:31.27},{&quot;2026-08-04&quot;:31.27},{&quot;2026-08-05&quot;:31.27},{&quot;2026-08-07&quot;:31.27},{&quot;2026-08-08&quot;:31.8},{&quot;2026-08-09&quot;:31.8},{&quot;2026-08-10&quot;:32.37},{&quot;2026-08-11&quot;:31.8},{&quot;2026-08-12&quot;:32.7},{&quot;2026-08-13&quot;:32.7},{&quot;2026-08-14&quot;:32.7},{&quot;2026-08-15&quot;:32.7},{&quot;2026-08-16&quot;:32.7},{&quot;2026-08-17&quot;:33.31},{&quot;2026-08-18&quot;:33.99},{&quot;2026-08-19&quot;:33.99},{&quot;2026-08-20&quot;:34.39},{&quot;2026-08-21&quot;:35.44},{&quot;2026-08-22&quot;:39.7},{&quot;2026-08-23&quot;:39.7},{&quot;2026-08-24&quot;:39.7},{&quot;2026-08-25&quot;:39.7},{&quot;2026-08-26&quot;:41.72},{&quot;2026-08-27&quot;:42.2},{&quot;2026-08-28&quot;:43.25},{&quot;2026-08-29&quot;:43.25},{&quot;2026-08-30&quot;:44.24},{&quot;2026-08-31&quot;:44.24},{&quot;2026-09-01&quot;:45.58},{&quot;2026-09-02&quot;:45.58},{&quot;2026-09-03&quot;:46.54},{&quot;2026-09-04&quot;:46.92},{&quot;2026-09-05&quot;:45.61},{&quot;2026-09-06&quot;:47.31},{&quot;2026-09-07&quot;:49.32},{&quot;2026-09-08&quot;:50.87},{&quot;2026-09-09&quot;:50.87},{&quot;2026-09-10&quot;:50.87},{&quot;2026-09-11&quot;:50.87}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:10.43},{&quot;2026-06-14&quot;:10.32},{&quot;2026-06-15&quot;:10.41},{&quot;2026-06-16&quot;:10.62},{&quot;2026-06-17&quot;:10.57},{&quot;2026-06-18&quot;:10.55},{&quot;2026-06-19&quot;:10.58},{&quot;2026-06-20&quot;:10.57},{&quot;2026-06-21&quot;:10.57},{&quot;2026-06-22&quot;:10.53},{&quot;2026-06-23&quot;:10.56},{&quot;2026-06-24&quot;:10.54},{&quot;2026-06-25&quot;:10.6},{&quot;2026-06-26&quot;:10.77},{&quot;2026-06-27&quot;:10.93},{&quot;2026-06-28&quot;:11.06},{&quot;2026-06-29&quot;:11.25},{&quot;2026-06-30&quot;:11.16},{&quot;2026-07-01&quot;:11.61},{&quot;2026-07-02&quot;:11.61},{&quot;2026-07-03&quot;:11.98},{&quot;2026-07-04&quot;:12.28},{&quot;2026-07-05&quot;:12.63},{&quot;2026-07-06&quot;:12.68},{&quot;2026-07-07&quot;:13.22},{&quot;2026-07-08&quot;:12.99},{&quot;2026-07-09&quot;:12.99},{&quot;2026-07-10&quot;:12.97},{&quot;2026-07-11&quot;:12.97},{&quot;2026-07-12&quot;:13.05},{&quot;2026-07-13&quot;:13.05},{&quot;2026-07-14&quot;:13.05},{&quot;2026-07-15&quot;:12.92},{&quot;2026-07-16&quot;:12.92},{&quot;2026-07-17&quot;:12.92},{&quot;2026-07-18&quot;:12.98},{&quot;2026-07-19&quot;:12.99},{&quot;2026-07-20&quot;:12.71},{&quot;2026-07-21&quot;:12.71},{&quot;2026-07-22&quot;:12.41},{&quot;2026-07-23&quot;:12.33},{&quot;2026-07-24&quot;:12.09},{&quot;2026-07-25&quot;:11.99},{&quot;2026-07-26&quot;:12.03},{&quot;2026-07-27&quot;:11.75},{&quot;2026-07-28&quot;:11.87},{&quot;2026-07-29&quot;:11.91},{&quot;2026-07-30&quot;:11.91},{&quot;2026-07-31&quot;:11.65},{&quot;2026-08-01&quot;:11.56},{&quot;2026-08-02&quot;:11.63},{&quot;2026-08-03&quot;:11.69},{&quot;2026-08-04&quot;:11.56},{&quot;2026-08-05&quot;:11.62},{&quot;2026-08-07&quot;:11.79},{&quot;2026-08-08&quot;:11.79},{&quot;2026-08-09&quot;:11.76},{&quot;2026-08-10&quot;:11.82},{&quot;2026-08-11&quot;:12.5},{&quot;2026-08-12&quot;:12.46},{&quot;2026-08-13&quot;:13.94},{&quot;2026-08-14&quot;:14.85},{&quot;2026-08-15&quot;:14.99},{&quot;2026-08-16&quot;:15.73},{&quot;2026-08-17&quot;:15.81},{&quot;2026-08-18&quot;:15.88},{&quot;2026-08-19&quot;:16.31},{&quot;2026-08-20&quot;:15.56},{&quot;2026-08-21&quot;:15.75},{&quot;2026-08-22&quot;:16.62},{&quot;2026-08-23&quot;:17.55},{&quot;2026-08-24&quot;:17.55},{&quot;2026-08-25&quot;:17.6},{&quot;2026-08-26&quot;:17.57},{&quot;2026-08-27&quot;:17.57},{&quot;2026-08-28&quot;:17.22},{&quot;2026-08-29&quot;:17.22},{&quot;2026-08-30&quot;:18.26},{&quot;2026-08-31&quot;:18.31},{&quot;2026-09-01&quot;:18.31},{&quot;2026-09-02&quot;:18.19},{&quot;2026-09-03&quot;:19.02},{&quot;2026-09-04&quot;:19.02},{&quot;2026-09-05&quot;:19.14},{&quot;2026-09-06&quot;:19.37},{&quot;2026-09-07&quot;:19.37},{&quot;2026-09-08&quot;:18.08},{&quot;2026-09-09&quot;:18.26},{&quot;2026-09-10&quot;:18.26},{&quot;2026-09-11&quot;:18.26}]}"
        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="21034"
  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-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">
            Cavern of Souls
        </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">
              ↑
              1%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $50.85
          </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="Cavern of Souls" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/e/6/e697ea72-e10e-4fed-be8f-8c6455cc3fc8.jpg?1783921785" />

        <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">
            Cavern of Souls
        </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">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="Cavern of Souls" src="https://cards.scryfall.io/large/front/e/6/e697ea72-e10e-4fed-be8f-8c6455cc3fc8.jpg?1783921785" />
    </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">
                $50.85
              </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">
                $54.61
              </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">$38.00</span>
              <span class="text-xs text-grey-text">Credit: $49.40</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;:51.56},{&quot;2026-06-14&quot;:51.56},{&quot;2026-06-15&quot;:51.56},{&quot;2026-06-16&quot;:51.56},{&quot;2026-06-17&quot;:51.56},{&quot;2026-06-18&quot;:51.56},{&quot;2026-06-19&quot;:51.56},{&quot;2026-06-20&quot;:51.56},{&quot;2026-06-21&quot;:52.34},{&quot;2026-06-22&quot;:52.34},{&quot;2026-06-23&quot;:52.34},{&quot;2026-06-24&quot;:52.34},{&quot;2026-06-25&quot;:52.34},{&quot;2026-06-26&quot;:52.34},{&quot;2026-06-27&quot;:52.34},{&quot;2026-06-28&quot;:52.34},{&quot;2026-06-29&quot;:52.34},{&quot;2026-06-30&quot;:52.34},{&quot;2026-07-01&quot;:52.34},{&quot;2026-07-02&quot;:52.34},{&quot;2026-07-03&quot;:52.34},{&quot;2026-07-04&quot;:52.34},{&quot;2026-07-05&quot;:52.34},{&quot;2026-07-06&quot;:52.34},{&quot;2026-07-07&quot;:52.34},{&quot;2026-07-08&quot;:52.34},{&quot;2026-07-09&quot;:52.76},{&quot;2026-07-10&quot;:53.06},{&quot;2026-07-11&quot;:53.06},{&quot;2026-07-12&quot;:53.06},{&quot;2026-07-13&quot;:53.06},{&quot;2026-07-14&quot;:53.78},{&quot;2026-07-15&quot;:53.78},{&quot;2026-07-16&quot;:53.78},{&quot;2026-07-17&quot;:53.78},{&quot;2026-07-18&quot;:53.78},{&quot;2026-07-19&quot;:53.78},{&quot;2026-07-20&quot;:53.78},{&quot;2026-07-21&quot;:53.78},{&quot;2026-07-22&quot;:53.78},{&quot;2026-07-23&quot;:53.78},{&quot;2026-07-24&quot;:53.78},{&quot;2026-07-25&quot;:54.17},{&quot;2026-07-26&quot;:54.17},{&quot;2026-07-27&quot;:54.17},{&quot;2026-07-28&quot;:54.17},{&quot;2026-07-29&quot;:54.17},{&quot;2026-07-30&quot;:54.69},{&quot;2026-07-31&quot;:54.69},{&quot;2026-08-01&quot;:54.69},{&quot;2026-08-02&quot;:54.69},{&quot;2026-08-03&quot;:54.69},{&quot;2026-08-04&quot;:54.69},{&quot;2026-08-05&quot;:54.68},{&quot;2026-08-07&quot;:54.68},{&quot;2026-08-08&quot;:54.68},{&quot;2026-08-09&quot;:54.68},{&quot;2026-08-10&quot;:54.68},{&quot;2026-08-11&quot;:54.68},{&quot;2026-08-12&quot;:54.68},{&quot;2026-08-13&quot;:54.68},{&quot;2026-08-14&quot;:54.68},{&quot;2026-08-15&quot;:54.68},{&quot;2026-08-16&quot;:54.68},{&quot;2026-08-17&quot;:54.68},{&quot;2026-08-18&quot;:54.68},{&quot;2026-08-19&quot;:55.12},{&quot;2026-08-20&quot;:55.12},{&quot;2026-08-21&quot;:55.12},{&quot;2026-08-22&quot;:55.12},{&quot;2026-08-23&quot;:55.12},{&quot;2026-08-24&quot;:55.12},{&quot;2026-08-25&quot;:55.12},{&quot;2026-08-26&quot;:55.12},{&quot;2026-08-27&quot;:55.12},{&quot;2026-08-28&quot;:55.12},{&quot;2026-08-29&quot;:55.12},{&quot;2026-08-30&quot;:54.61},{&quot;2026-08-31&quot;:54.61},{&quot;2026-09-01&quot;:54.61},{&quot;2026-09-02&quot;:54.61},{&quot;2026-09-03&quot;:54.61},{&quot;2026-09-04&quot;:54.61},{&quot;2026-09-05&quot;:54.61},{&quot;2026-09-06&quot;:54.61},{&quot;2026-09-07&quot;:54.61},{&quot;2026-09-08&quot;:54.61},{&quot;2026-09-09&quot;:54.61},{&quot;2026-09-10&quot;:54.61},{&quot;2026-09-11&quot;:54.61}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:52.99},{&quot;2026-06-14&quot;:52.99},{&quot;2026-06-15&quot;:53.43},{&quot;2026-06-16&quot;:53.43},{&quot;2026-06-17&quot;:53.43},{&quot;2026-06-18&quot;:53.43},{&quot;2026-06-19&quot;:53.43},{&quot;2026-06-20&quot;:53.43},{&quot;2026-06-21&quot;:53.43},{&quot;2026-06-22&quot;:53.43},{&quot;2026-06-23&quot;:53.43},{&quot;2026-06-24&quot;:53.43},{&quot;2026-06-25&quot;:53.43},{&quot;2026-06-26&quot;:53.89},{&quot;2026-06-27&quot;:54.52},{&quot;2026-06-28&quot;:54.52},{&quot;2026-06-29&quot;:54.51},{&quot;2026-06-30&quot;:54.59},{&quot;2026-07-01&quot;:54.59},{&quot;2026-07-02&quot;:54.59},{&quot;2026-07-03&quot;:54.88},{&quot;2026-07-04&quot;:54.88},{&quot;2026-07-05&quot;:54.39},{&quot;2026-07-06&quot;:54.58},{&quot;2026-07-07&quot;:54.72},{&quot;2026-07-08&quot;:54.33},{&quot;2026-07-09&quot;:54.33},{&quot;2026-07-10&quot;:54.33},{&quot;2026-07-11&quot;:53.93},{&quot;2026-07-12&quot;:53.68},{&quot;2026-07-13&quot;:53.64},{&quot;2026-07-14&quot;:53.64},{&quot;2026-07-15&quot;:53.64},{&quot;2026-07-16&quot;:53.64},{&quot;2026-07-17&quot;:53.64},{&quot;2026-07-18&quot;:53.64},{&quot;2026-07-19&quot;:52.68},{&quot;2026-07-20&quot;:52.71},{&quot;2026-07-21&quot;:52.71},{&quot;2026-07-22&quot;:52.71},{&quot;2026-07-23&quot;:52.84},{&quot;2026-07-24&quot;:52.84},{&quot;2026-07-25&quot;:52.84},{&quot;2026-07-26&quot;:52.84},{&quot;2026-07-27&quot;:52.84},{&quot;2026-07-28&quot;:52.96},{&quot;2026-07-29&quot;:52.81},{&quot;2026-07-30&quot;:52.81},{&quot;2026-07-31&quot;:52.49},{&quot;2026-08-01&quot;:52.49},{&quot;2026-08-02&quot;:52.49},{&quot;2026-08-03&quot;:51.55},{&quot;2026-08-04&quot;:51.99},{&quot;2026-08-05&quot;:52.26},{&quot;2026-08-07&quot;:52.4},{&quot;2026-08-08&quot;:52.4},{&quot;2026-08-09&quot;:52.4},{&quot;2026-08-10&quot;:52.48},{&quot;2026-08-11&quot;:52.89},{&quot;2026-08-12&quot;:52.89},{&quot;2026-08-13&quot;:52.89},{&quot;2026-08-14&quot;:52.89},{&quot;2026-08-15&quot;:52.8},{&quot;2026-08-16&quot;:53.04},{&quot;2026-08-17&quot;:53.12},{&quot;2026-08-18&quot;:52.99},{&quot;2026-08-19&quot;:52.02},{&quot;2026-08-20&quot;:52.02},{&quot;2026-08-21&quot;:51.35},{&quot;2026-08-22&quot;:51.09},{&quot;2026-08-23&quot;:50.84},{&quot;2026-08-24&quot;:50.87},{&quot;2026-08-25&quot;:50.69},{&quot;2026-08-26&quot;:50.69},{&quot;2026-08-27&quot;:50.69},{&quot;2026-08-28&quot;:50.87},{&quot;2026-08-29&quot;:50.87},{&quot;2026-08-30&quot;:50.69},{&quot;2026-08-31&quot;:50.69},{&quot;2026-09-01&quot;:50.69},{&quot;2026-09-02&quot;:50.54},{&quot;2026-09-03&quot;:50.22},{&quot;2026-09-04&quot;:50.09},{&quot;2026-09-05&quot;:50.13},{&quot;2026-09-06&quot;:50.13},{&quot;2026-09-07&quot;:50.13},{&quot;2026-09-08&quot;:50.71},{&quot;2026-09-09&quot;:50.71},{&quot;2026-09-10&quot;:50.85},{&quot;2026-09-11&quot;:50.85}]}"
        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="95676"
  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">
            Vincent Valentine 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Assassin
      </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">
            $50.44
          </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="Vincent Valentine // Galian Beast" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/5/15ea1113-7360-462d-91b8-22d5110cbf5a.jpg?1783906452" />

        <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">
            Vincent Valentine 
        </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 — Assassin</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-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="Vincent Valentine // Galian Beast" src="https://cards.scryfall.io/large/front/1/5/15ea1113-7360-462d-91b8-22d5110cbf5a.jpg?1783906452" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Vincent Valentine // Galian Beast" src="https://cards.scryfall.io/large/back/1/5/15ea1113-7360-462d-91b8-22d5110cbf5a.jpg?1783906452" />
              </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-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">
                $50.44
              </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">$20.00</span>
              <span class="text-xs text-grey-text">Credit: $26.00</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;:40.42},{&quot;2026-06-10&quot;:39.91},{&quot;2026-06-11&quot;:40.32},{&quot;2026-06-12&quot;:40.18},{&quot;2026-06-13&quot;:40.29},{&quot;2026-06-14&quot;:40.29},{&quot;2026-06-15&quot;:40.03},{&quot;2026-06-16&quot;:40.03},{&quot;2026-06-17&quot;:40.06},{&quot;2026-06-18&quot;:39.54},{&quot;2026-06-19&quot;:39.86},{&quot;2026-06-20&quot;:40.2},{&quot;2026-06-21&quot;:40.2},{&quot;2026-06-22&quot;:40.2},{&quot;2026-06-24&quot;:41.28},{&quot;2026-06-25&quot;:41.75},{&quot;2026-06-26&quot;:41.75},{&quot;2026-06-27&quot;:41.75},{&quot;2026-06-28&quot;:41.75},{&quot;2026-06-29&quot;:41.75},{&quot;2026-06-30&quot;:41.74},{&quot;2026-07-01&quot;:41.98},{&quot;2026-07-02&quot;:41.98},{&quot;2026-07-03&quot;:41.57},{&quot;2026-07-04&quot;:41.69},{&quot;2026-07-05&quot;:41.78},{&quot;2026-07-06&quot;:41.87},{&quot;2026-07-07&quot;:41.88},{&quot;2026-07-08&quot;:42.47},{&quot;2026-07-09&quot;:42.47},{&quot;2026-07-10&quot;:43.01},{&quot;2026-07-11&quot;:44.18},{&quot;2026-07-12&quot;:44.89},{&quot;2026-07-13&quot;:44.85},{&quot;2026-07-14&quot;:44.68},{&quot;2026-07-15&quot;:44.9},{&quot;2026-07-16&quot;:44.9},{&quot;2026-07-17&quot;:45.44},{&quot;2026-07-18&quot;:45.5},{&quot;2026-07-19&quot;:45.87},{&quot;2026-07-20&quot;:46.83},{&quot;2026-07-21&quot;:46.81},{&quot;2026-07-23&quot;:46.62},{&quot;2026-07-25&quot;:46.66},{&quot;2026-07-26&quot;:46.67},{&quot;2026-07-27&quot;:46.27},{&quot;2026-07-29&quot;:46.27},{&quot;2026-07-30&quot;:46.26},{&quot;2026-07-31&quot;:46.05},{&quot;2026-08-01&quot;:46.05},{&quot;2026-08-02&quot;:46.05},{&quot;2026-08-03&quot;:46.07},{&quot;2026-08-04&quot;:45.95},{&quot;2026-08-05&quot;:46.62},{&quot;2026-08-07&quot;:46.3},{&quot;2026-08-08&quot;:45.81},{&quot;2026-08-09&quot;:45.79},{&quot;2026-08-10&quot;:45.79},{&quot;2026-08-11&quot;:45.69},{&quot;2026-08-12&quot;:46.05},{&quot;2026-08-13&quot;:46.04},{&quot;2026-08-14&quot;:46.19},{&quot;2026-08-15&quot;:46.24},{&quot;2026-08-16&quot;:46.66},{&quot;2026-08-17&quot;:46.89},{&quot;2026-08-18&quot;:47.39},{&quot;2026-08-19&quot;:47.39},{&quot;2026-08-20&quot;:47.39},{&quot;2026-08-21&quot;:47.46},{&quot;2026-08-22&quot;:47.55},{&quot;2026-08-23&quot;:47.55},{&quot;2026-08-24&quot;:47.59},{&quot;2026-08-25&quot;:47.59},{&quot;2026-08-26&quot;:48.0},{&quot;2026-08-27&quot;:48.94},{&quot;2026-08-28&quot;:48.94},{&quot;2026-08-29&quot;:48.94},{&quot;2026-08-30&quot;:49.18},{&quot;2026-08-31&quot;:49.15},{&quot;2026-09-01&quot;:49.15},{&quot;2026-09-02&quot;:49.15},{&quot;2026-09-03&quot;:49.78},{&quot;2026-09-04&quot;:50.87},{&quot;2026-09-05&quot;:50.87},{&quot;2026-09-06&quot;:50.62},{&quot;2026-09-07&quot;:50.62},{&quot;2026-09-08&quot;:50.7},{&quot;2026-09-09&quot;:50.44},{&quot;2026-09-10&quot;:50.44},{&quot;2026-09-11&quot;:50.44}],&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="12291"
  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">
            Commander&#39;s Plate
        </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">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $49.73
          </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="Commander&#39;s Plate" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/9/19992dbd-7a6a-43d3-b1db-01716b2eed27.jpg?1783928762" />

        <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">
            Commander&#39;s Plate
        </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">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="Commander&#39;s Plate" src="https://cards.scryfall.io/large/front/1/9/19992dbd-7a6a-43d3-b1db-01716b2eed27.jpg?1783928762" />
    </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">
                $49.73
              </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">
                $48.74
              </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">$32.00</span>
              <span class="text-xs text-grey-text">Credit: $41.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;2026-06-10&quot;:49.06},{&quot;2026-06-11&quot;:49.06},{&quot;2026-06-12&quot;:49.06},{&quot;2026-06-13&quot;:49.06},{&quot;2026-06-14&quot;:49.34},{&quot;2026-06-15&quot;:49.34},{&quot;2026-06-16&quot;:49.34},{&quot;2026-06-17&quot;:49.34},{&quot;2026-06-18&quot;:49.34},{&quot;2026-06-19&quot;:49.34},{&quot;2026-06-20&quot;:49.34},{&quot;2026-06-21&quot;:49.34},{&quot;2026-06-22&quot;:49.34},{&quot;2026-06-23&quot;:49.34},{&quot;2026-06-24&quot;:49.34},{&quot;2026-06-25&quot;:49.34},{&quot;2026-06-26&quot;:49.34},{&quot;2026-06-27&quot;:49.34},{&quot;2026-06-28&quot;:46.06},{&quot;2026-06-29&quot;:49.34},{&quot;2026-06-30&quot;:49.4},{&quot;2026-07-01&quot;:49.41},{&quot;2026-07-02&quot;:49.41},{&quot;2026-07-03&quot;:49.41},{&quot;2026-07-04&quot;:49.41},{&quot;2026-07-05&quot;:50.01},{&quot;2026-07-06&quot;:50.01},{&quot;2026-07-07&quot;:50.01},{&quot;2026-07-08&quot;:50.01},{&quot;2026-07-09&quot;:50.25},{&quot;2026-07-10&quot;:50.25},{&quot;2026-07-11&quot;:50.25},{&quot;2026-07-12&quot;:50.25},{&quot;2026-07-13&quot;:50.25},{&quot;2026-07-14&quot;:50.25},{&quot;2026-07-15&quot;:50.58},{&quot;2026-07-16&quot;:50.75},{&quot;2026-07-17&quot;:50.75},{&quot;2026-07-18&quot;:50.75},{&quot;2026-07-19&quot;:50.75},{&quot;2026-07-20&quot;:50.75},{&quot;2026-07-21&quot;:50.75},{&quot;2026-07-23&quot;:50.75},{&quot;2026-07-25&quot;:50.49},{&quot;2026-07-26&quot;:50.49},{&quot;2026-07-27&quot;:50.49},{&quot;2026-07-29&quot;:50.09},{&quot;2026-07-30&quot;:50.09},{&quot;2026-07-31&quot;:49.55},{&quot;2026-08-01&quot;:49.55},{&quot;2026-08-02&quot;:49.55},{&quot;2026-08-03&quot;:47.97},{&quot;2026-08-04&quot;:47.99},{&quot;2026-08-05&quot;:47.99},{&quot;2026-08-07&quot;:47.97},{&quot;2026-08-08&quot;:47.97},{&quot;2026-08-09&quot;:47.97},{&quot;2026-08-10&quot;:47.97},{&quot;2026-08-11&quot;:47.97},{&quot;2026-08-12&quot;:48.03},{&quot;2026-08-13&quot;:48.17},{&quot;2026-08-14&quot;:48.17},{&quot;2026-08-15&quot;:48.17},{&quot;2026-08-16&quot;:48.17},{&quot;2026-08-17&quot;:48.17},{&quot;2026-08-18&quot;:47.98},{&quot;2026-08-19&quot;:47.98},{&quot;2026-08-20&quot;:47.98},{&quot;2026-08-21&quot;:47.98},{&quot;2026-08-22&quot;:47.98},{&quot;2026-08-23&quot;:48.09},{&quot;2026-08-24&quot;:48.09},{&quot;2026-08-25&quot;:48.09},{&quot;2026-08-26&quot;:48.09},{&quot;2026-08-27&quot;:48.09},{&quot;2026-08-28&quot;:48.09},{&quot;2026-08-29&quot;:48.09},{&quot;2026-08-30&quot;:48.09},{&quot;2026-08-31&quot;:48.09},{&quot;2026-09-01&quot;:48.09},{&quot;2026-09-02&quot;:48.09},{&quot;2026-09-03&quot;:48.09},{&quot;2026-09-04&quot;:48.74},{&quot;2026-09-05&quot;:48.74},{&quot;2026-09-06&quot;:48.74},{&quot;2026-09-07&quot;:48.74},{&quot;2026-09-08&quot;:48.74},{&quot;2026-09-09&quot;:48.74},{&quot;2026-09-10&quot;:48.74},{&quot;2026-09-11&quot;:48.74}],&quot;normal&quot;:[{&quot;2026-06-10&quot;:44.68},{&quot;2026-06-11&quot;:45.05},{&quot;2026-06-12&quot;:45.05},{&quot;2026-06-13&quot;:44.61},{&quot;2026-06-14&quot;:44.72},{&quot;2026-06-15&quot;:45.3},{&quot;2026-06-16&quot;:45.96},{&quot;2026-06-17&quot;:45.96},{&quot;2026-06-18&quot;:45.95},{&quot;2026-06-19&quot;:46.08},{&quot;2026-06-20&quot;:45.41},{&quot;2026-06-21&quot;:45.41},{&quot;2026-06-22&quot;:45.67},{&quot;2026-06-23&quot;:45.78},{&quot;2026-06-24&quot;:45.24},{&quot;2026-06-25&quot;:45.58},{&quot;2026-06-26&quot;:45.17},{&quot;2026-06-27&quot;:45.11},{&quot;2026-06-28&quot;:45.11},{&quot;2026-06-29&quot;:45.19},{&quot;2026-06-30&quot;:44.89},{&quot;2026-07-01&quot;:44.53},{&quot;2026-07-02&quot;:44.86},{&quot;2026-07-03&quot;:44.85},{&quot;2026-07-04&quot;:44.72},{&quot;2026-07-05&quot;:45.09},{&quot;2026-07-06&quot;:44.99},{&quot;2026-07-07&quot;:44.59},{&quot;2026-07-08&quot;:44.59},{&quot;2026-07-09&quot;:44.59},{&quot;2026-07-10&quot;:45.13},{&quot;2026-07-11&quot;:44.69},{&quot;2026-07-12&quot;:44.83},{&quot;2026-07-13&quot;:44.93},{&quot;2026-07-14&quot;:45.04},{&quot;2026-07-15&quot;:45.39},{&quot;2026-07-16&quot;:45.65},{&quot;2026-07-17&quot;:45.52},{&quot;2026-07-18&quot;:45.34},{&quot;2026-07-19&quot;:47.81},{&quot;2026-07-20&quot;:47.46},{&quot;2026-07-21&quot;:47.06},{&quot;2026-07-23&quot;:47.23},{&quot;2026-07-25&quot;:45.66},{&quot;2026-07-26&quot;:45.97},{&quot;2026-07-27&quot;:45.87},{&quot;2026-07-29&quot;:44.22},{&quot;2026-07-30&quot;:43.25},{&quot;2026-07-31&quot;:42.54},{&quot;2026-08-01&quot;:42.54},{&quot;2026-08-02&quot;:42.54},{&quot;2026-08-03&quot;:43.53},{&quot;2026-08-04&quot;:43.86},{&quot;2026-08-05&quot;:44.38},{&quot;2026-08-07&quot;:45.6},{&quot;2026-08-08&quot;:45.26},{&quot;2026-08-09&quot;:45.59},{&quot;2026-08-10&quot;:45.65},{&quot;2026-08-11&quot;:45.81},{&quot;2026-08-12&quot;:46.25},{&quot;2026-08-13&quot;:47.07},{&quot;2026-08-14&quot;:46.62},{&quot;2026-08-15&quot;:46.62},{&quot;2026-08-16&quot;:46.9},{&quot;2026-08-17&quot;:46.4},{&quot;2026-08-18&quot;:45.52},{&quot;2026-08-19&quot;:44.92},{&quot;2026-08-20&quot;:44.92},{&quot;2026-08-21&quot;:46.08},{&quot;2026-08-22&quot;:47.27},{&quot;2026-08-23&quot;:47.13},{&quot;2026-08-24&quot;:45.71},{&quot;2026-08-25&quot;:45.71},{&quot;2026-08-26&quot;:45.63},{&quot;2026-08-27&quot;:45.06},{&quot;2026-08-28&quot;:45.14},{&quot;2026-08-29&quot;:45.14},{&quot;2026-08-30&quot;:46.28},{&quot;2026-08-31&quot;:46.39},{&quot;2026-09-01&quot;:46.39},{&quot;2026-09-02&quot;:47.33},{&quot;2026-09-03&quot;:47.74},{&quot;2026-09-04&quot;:48.41},{&quot;2026-09-05&quot;:48.33},{&quot;2026-09-06&quot;:49.75},{&quot;2026-09-07&quot;:49.79},{&quot;2026-09-08&quot;:49.48},{&quot;2026-09-09&quot;:49.54},{&quot;2026-09-10&quot;:49.78},{&quot;2026-09-11&quot;:49.73}]}"
        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="20171"
  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">
            Teferi&#39;s Protection
        </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-50 text-badge-text">
              ↑
              3%
            </span>

          <span class="text-sm font-medium text-nine-white">
            $49.54
          </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="Teferi&#39;s Protection" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/4/8/483fa1cb-1e35-44f2-a143-98c0f107f5ca.jpg?1783921926" />

        <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">
            Teferi&#39;s Protection
        </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-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="Teferi&#39;s Protection" src="https://cards.scryfall.io/large/front/4/8/483fa1cb-1e35-44f2-a143-98c0f107f5ca.jpg?1783921926" />
    </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">
                $49.54
              </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">
                $60.31
              </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">$33.00</span>
              <span class="text-xs text-grey-text">Credit: $42.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;:58.57},{&quot;2026-06-12&quot;:58.67},{&quot;2026-06-13&quot;:58.67},{&quot;2026-06-14&quot;:58.67},{&quot;2026-06-15&quot;:58.67},{&quot;2026-06-16&quot;:58.67},{&quot;2026-06-17&quot;:58.67},{&quot;2026-06-18&quot;:58.67},{&quot;2026-06-19&quot;:58.92},{&quot;2026-06-20&quot;:58.92},{&quot;2026-06-21&quot;:58.92},{&quot;2026-06-22&quot;:58.92},{&quot;2026-06-23&quot;:58.92},{&quot;2026-06-24&quot;:58.92},{&quot;2026-06-25&quot;:58.92},{&quot;2026-06-26&quot;:58.92},{&quot;2026-06-27&quot;:58.92},{&quot;2026-06-28&quot;:58.97},{&quot;2026-06-29&quot;:58.97},{&quot;2026-06-30&quot;:58.97},{&quot;2026-07-01&quot;:58.97},{&quot;2026-07-02&quot;:58.97},{&quot;2026-07-03&quot;:58.97},{&quot;2026-07-04&quot;:58.97},{&quot;2026-07-05&quot;:58.97},{&quot;2026-07-06&quot;:58.97},{&quot;2026-07-07&quot;:58.97},{&quot;2026-07-08&quot;:58.97},{&quot;2026-07-09&quot;:58.97},{&quot;2026-07-10&quot;:58.97},{&quot;2026-07-11&quot;:58.97},{&quot;2026-07-12&quot;:58.97},{&quot;2026-07-13&quot;:58.97},{&quot;2026-07-14&quot;:58.97},{&quot;2026-07-15&quot;:59.14},{&quot;2026-07-16&quot;:59.14},{&quot;2026-07-17&quot;:59.14},{&quot;2026-07-18&quot;:59.14},{&quot;2026-07-19&quot;:59.14},{&quot;2026-07-20&quot;:59.35},{&quot;2026-07-21&quot;:59.35},{&quot;2026-07-23&quot;:59.9},{&quot;2026-07-25&quot;:59.9},{&quot;2026-07-26&quot;:59.94},{&quot;2026-07-27&quot;:60.37},{&quot;2026-07-28&quot;:60.37},{&quot;2026-07-29&quot;:60.37},{&quot;2026-07-30&quot;:60.37},{&quot;2026-07-31&quot;:60.37},{&quot;2026-08-01&quot;:60.37},{&quot;2026-08-02&quot;:60.87},{&quot;2026-08-03&quot;:60.87},{&quot;2026-08-04&quot;:61.51},{&quot;2026-08-05&quot;:61.51},{&quot;2026-08-07&quot;:61.51},{&quot;2026-08-08&quot;:61.51},{&quot;2026-08-09&quot;:61.3},{&quot;2026-08-10&quot;:61.5},{&quot;2026-08-11&quot;:61.5},{&quot;2026-08-12&quot;:61.5},{&quot;2026-08-13&quot;:61.5},{&quot;2026-08-14&quot;:60.52},{&quot;2026-08-15&quot;:60.52},{&quot;2026-08-16&quot;:61.19},{&quot;2026-08-17&quot;:61.19},{&quot;2026-08-18&quot;:61.19},{&quot;2026-08-19&quot;:61.19},{&quot;2026-08-20&quot;:61.19},{&quot;2026-08-21&quot;:61.19},{&quot;2026-08-22&quot;:61.19},{&quot;2026-08-23&quot;:61.19},{&quot;2026-08-24&quot;:61.19},{&quot;2026-08-25&quot;:61.19},{&quot;2026-08-26&quot;:61.19},{&quot;2026-08-27&quot;:61.19},{&quot;2026-08-28&quot;:61.19},{&quot;2026-08-29&quot;:61.19},{&quot;2026-08-30&quot;:61.19},{&quot;2026-08-31&quot;:60.31},{&quot;2026-09-01&quot;:60.31},{&quot;2026-09-02&quot;:60.31},{&quot;2026-09-03&quot;:60.31},{&quot;2026-09-04&quot;:60.31},{&quot;2026-09-05&quot;:60.31},{&quot;2026-09-06&quot;:60.31},{&quot;2026-09-07&quot;:60.31},{&quot;2026-09-08&quot;:60.31},{&quot;2026-09-09&quot;:60.31},{&quot;2026-09-10&quot;:60.31},{&quot;2026-09-11&quot;:60.31}],&quot;normal&quot;:[{&quot;2026-06-11&quot;:52.93},{&quot;2026-06-12&quot;:53.05},{&quot;2026-06-13&quot;:53.05},{&quot;2026-06-14&quot;:53.05},{&quot;2026-06-15&quot;:53.21},{&quot;2026-06-16&quot;:53.21},{&quot;2026-06-17&quot;:53.1},{&quot;2026-06-18&quot;:53.66},{&quot;2026-06-19&quot;:53.3},{&quot;2026-06-20&quot;:53.86},{&quot;2026-06-21&quot;:53.86},{&quot;2026-06-22&quot;:53.86},{&quot;2026-06-23&quot;:54.49},{&quot;2026-06-24&quot;:54.61},{&quot;2026-06-25&quot;:54.62},{&quot;2026-06-26&quot;:52.59},{&quot;2026-06-27&quot;:54.62},{&quot;2026-06-28&quot;:54.62},{&quot;2026-06-29&quot;:54.53},{&quot;2026-06-30&quot;:54.76},{&quot;2026-07-01&quot;:54.76},{&quot;2026-07-02&quot;:54.76},{&quot;2026-07-03&quot;:54.76},{&quot;2026-07-04&quot;:54.8},{&quot;2026-07-05&quot;:54.8},{&quot;2026-07-06&quot;:54.8},{&quot;2026-07-07&quot;:54.75},{&quot;2026-07-08&quot;:55.11},{&quot;2026-07-09&quot;:54.5},{&quot;2026-07-10&quot;:54.5},{&quot;2026-07-11&quot;:54.5},{&quot;2026-07-12&quot;:54.46},{&quot;2026-07-13&quot;:54.78},{&quot;2026-07-14&quot;:54.78},{&quot;2026-07-15&quot;:54.78},{&quot;2026-07-16&quot;:54.74},{&quot;2026-07-17&quot;:54.74},{&quot;2026-07-18&quot;:55.03},{&quot;2026-07-19&quot;:55.28},{&quot;2026-07-20&quot;:55.28},{&quot;2026-07-21&quot;:54.21},{&quot;2026-07-23&quot;:53.04},{&quot;2026-07-25&quot;:52.6},{&quot;2026-07-26&quot;:52.6},{&quot;2026-07-27&quot;:52.06},{&quot;2026-07-28&quot;:51.76},{&quot;2026-07-29&quot;:51.95},{&quot;2026-07-30&quot;:51.51},{&quot;2026-07-31&quot;:50.96},{&quot;2026-08-01&quot;:51.28},{&quot;2026-08-02&quot;:51.0},{&quot;2026-08-03&quot;:50.35},{&quot;2026-08-04&quot;:50.21},{&quot;2026-08-05&quot;:50.21},{&quot;2026-08-07&quot;:48.73},{&quot;2026-08-08&quot;:48.59},{&quot;2026-08-09&quot;:47.91},{&quot;2026-08-10&quot;:48.1},{&quot;2026-08-11&quot;:48.65},{&quot;2026-08-12&quot;:48.67},{&quot;2026-08-13&quot;:48.73},{&quot;2026-08-14&quot;:47.71},{&quot;2026-08-15&quot;:47.32},{&quot;2026-08-16&quot;:47.0},{&quot;2026-08-17&quot;:47.46},{&quot;2026-08-18&quot;:47.46},{&quot;2026-08-19&quot;:47.46},{&quot;2026-08-20&quot;:47.46},{&quot;2026-08-21&quot;:48.11},{&quot;2026-08-22&quot;:47.49},{&quot;2026-08-23&quot;:47.92},{&quot;2026-08-24&quot;:47.96},{&quot;2026-08-25&quot;:48.03},{&quot;2026-08-26&quot;:48.13},{&quot;2026-08-27&quot;:48.42},{&quot;2026-08-28&quot;:48.42},{&quot;2026-08-29&quot;:48.42},{&quot;2026-08-30&quot;:48.47},{&quot;2026-08-31&quot;:49.02},{&quot;2026-09-01&quot;:49.02},{&quot;2026-09-02&quot;:48.48},{&quot;2026-09-03&quot;:48.33},{&quot;2026-09-04&quot;:48.11},{&quot;2026-09-05&quot;:48.11},{&quot;2026-09-06&quot;:48.11},{&quot;2026-09-07&quot;:49.03},{&quot;2026-09-08&quot;:49.52},{&quot;2026-09-09&quot;:49.55},{&quot;2026-09-10&quot;:49.54},{&quot;2026-09-11&quot;:49.54}]}"
        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="20844"
  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-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">
            Sword of Fire and Ice
        </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="text-sm font-medium text-nine-white">
            $48.75
          </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 Fire and Ice" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/2/6/2626d4c9-fcef-4057-a154-7d987a4a4b84.jpg?1783930092" />

        <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 Fire and Ice
        </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">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-3'></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 Fire and Ice" src="https://cards.scryfall.io/large/front/2/6/2626d4c9-fcef-4057-a154-7d987a4a4b84.jpg?1783930092" />
    </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">
                $48.75
              </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">
                $57.99
              </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">$25.00</span>
              <span class="text-xs text-grey-text">Credit: $32.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-13&quot;:53.89},{&quot;2026-06-14&quot;:53.89},{&quot;2026-06-15&quot;:53.89},{&quot;2026-06-16&quot;:54.16},{&quot;2026-06-17&quot;:54.16},{&quot;2026-06-18&quot;:54.16},{&quot;2026-06-19&quot;:54.16},{&quot;2026-06-20&quot;:54.16},{&quot;2026-06-21&quot;:54.16},{&quot;2026-06-22&quot;:54.47},{&quot;2026-06-23&quot;:54.75},{&quot;2026-06-24&quot;:54.75},{&quot;2026-06-25&quot;:54.75},{&quot;2026-06-26&quot;:54.75},{&quot;2026-06-27&quot;:54.75},{&quot;2026-06-28&quot;:54.75},{&quot;2026-06-29&quot;:54.75},{&quot;2026-06-30&quot;:54.75},{&quot;2026-07-01&quot;:54.75},{&quot;2026-07-02&quot;:54.75},{&quot;2026-07-03&quot;:54.75},{&quot;2026-07-04&quot;:54.75},{&quot;2026-07-05&quot;:54.75},{&quot;2026-07-06&quot;:55.23},{&quot;2026-07-07&quot;:55.23},{&quot;2026-07-08&quot;:55.23},{&quot;2026-07-09&quot;:55.23},{&quot;2026-07-10&quot;:55.23},{&quot;2026-07-11&quot;:55.23},{&quot;2026-07-12&quot;:55.23},{&quot;2026-07-13&quot;:55.23},{&quot;2026-07-14&quot;:55.23},{&quot;2026-07-15&quot;:55.83},{&quot;2026-07-16&quot;:55.83},{&quot;2026-07-17&quot;:55.83},{&quot;2026-07-18&quot;:55.83},{&quot;2026-07-19&quot;:55.83},{&quot;2026-07-20&quot;:55.83},{&quot;2026-07-21&quot;:55.83},{&quot;2026-07-22&quot;:55.83},{&quot;2026-07-23&quot;:55.83},{&quot;2026-07-24&quot;:55.83},{&quot;2026-07-25&quot;:55.83},{&quot;2026-07-26&quot;:55.83},{&quot;2026-07-27&quot;:55.83},{&quot;2026-07-28&quot;:55.83},{&quot;2026-07-29&quot;:55.83},{&quot;2026-07-30&quot;:55.83},{&quot;2026-07-31&quot;:55.83},{&quot;2026-08-01&quot;:55.83},{&quot;2026-08-02&quot;:55.83},{&quot;2026-08-03&quot;:55.83},{&quot;2026-08-04&quot;:55.83},{&quot;2026-08-05&quot;:55.83},{&quot;2026-08-07&quot;:56.45},{&quot;2026-08-08&quot;:56.45},{&quot;2026-08-09&quot;:57.04},{&quot;2026-08-10&quot;:57.04},{&quot;2026-08-11&quot;:57.04},{&quot;2026-08-12&quot;:57.12},{&quot;2026-08-13&quot;:57.12},{&quot;2026-08-14&quot;:57.29},{&quot;2026-08-15&quot;:57.29},{&quot;2026-08-16&quot;:57.29},{&quot;2026-08-17&quot;:57.29},{&quot;2026-08-18&quot;:57.29},{&quot;2026-08-19&quot;:57.29},{&quot;2026-08-20&quot;:57.29},{&quot;2026-08-21&quot;:57.29},{&quot;2026-08-22&quot;:57.29},{&quot;2026-08-23&quot;:57.29},{&quot;2026-08-24&quot;:57.29},{&quot;2026-08-25&quot;:57.29},{&quot;2026-08-26&quot;:57.29},{&quot;2026-08-27&quot;:57.24},{&quot;2026-08-28&quot;:57.24},{&quot;2026-08-29&quot;:57.24},{&quot;2026-08-30&quot;:57.24},{&quot;2026-08-31&quot;:57.24},{&quot;2026-09-01&quot;:57.24},{&quot;2026-09-02&quot;:57.18},{&quot;2026-09-03&quot;:57.18},{&quot;2026-09-04&quot;:57.18},{&quot;2026-09-05&quot;:57.18},{&quot;2026-09-06&quot;:57.91},{&quot;2026-09-07&quot;:57.91},{&quot;2026-09-08&quot;:57.91},{&quot;2026-09-09&quot;:57.91},{&quot;2026-09-10&quot;:57.91},{&quot;2026-09-11&quot;:57.99}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:46.53},{&quot;2026-06-14&quot;:46.53},{&quot;2026-06-15&quot;:46.47},{&quot;2026-06-16&quot;:46.47},{&quot;2026-06-17&quot;:46.31},{&quot;2026-06-18&quot;:46.31},{&quot;2026-06-19&quot;:46.8},{&quot;2026-06-20&quot;:46.5},{&quot;2026-06-21&quot;:46.65},{&quot;2026-06-22&quot;:46.64},{&quot;2026-06-23&quot;:46.58},{&quot;2026-06-24&quot;:46.58},{&quot;2026-06-25&quot;:46.58},{&quot;2026-06-26&quot;:46.58},{&quot;2026-06-27&quot;:46.58},{&quot;2026-06-28&quot;:46.58},{&quot;2026-06-29&quot;:46.58},{&quot;2026-06-30&quot;:47.45},{&quot;2026-07-01&quot;:48.28},{&quot;2026-07-02&quot;:48.28},{&quot;2026-07-03&quot;:48.28},{&quot;2026-07-04&quot;:48.2},{&quot;2026-07-05&quot;:48.2},{&quot;2026-07-06&quot;:48.63},{&quot;2026-07-07&quot;:48.63},{&quot;2026-07-08&quot;:48.63},{&quot;2026-07-09&quot;:48.63},{&quot;2026-07-10&quot;:49.3},{&quot;2026-07-11&quot;:49.07},{&quot;2026-07-12&quot;:49.07},{&quot;2026-07-13&quot;:49.11},{&quot;2026-07-14&quot;:49.11},{&quot;2026-07-15&quot;:49.29},{&quot;2026-07-16&quot;:49.29},{&quot;2026-07-17&quot;:49.29},{&quot;2026-07-18&quot;:49.29},{&quot;2026-07-19&quot;:49.29},{&quot;2026-07-20&quot;:49.19},{&quot;2026-07-21&quot;:49.19},{&quot;2026-07-22&quot;:49.19},{&quot;2026-07-23&quot;:49.17},{&quot;2026-07-24&quot;:49.19},{&quot;2026-07-25&quot;:49.49},{&quot;2026-07-26&quot;:49.49},{&quot;2026-07-27&quot;:48.98},{&quot;2026-07-28&quot;:48.89},{&quot;2026-07-29&quot;:48.89},{&quot;2026-07-30&quot;:49.37},{&quot;2026-07-31&quot;:49.37},{&quot;2026-08-01&quot;:49.36},{&quot;2026-08-02&quot;:49.4},{&quot;2026-08-03&quot;:49.94},{&quot;2026-08-04&quot;:50.2},{&quot;2026-08-05&quot;:50.2},{&quot;2026-08-07&quot;:50.2},{&quot;2026-08-08&quot;:50.2},{&quot;2026-08-09&quot;:50.2},{&quot;2026-08-10&quot;:49.91},{&quot;2026-08-11&quot;:49.91},{&quot;2026-08-12&quot;:49.91},{&quot;2026-08-13&quot;:49.91},{&quot;2026-08-14&quot;:49.91},{&quot;2026-08-15&quot;:49.58},{&quot;2026-08-16&quot;:49.2},{&quot;2026-08-17&quot;:49.2},{&quot;2026-08-18&quot;:49.05},{&quot;2026-08-19&quot;:49.05},{&quot;2026-08-20&quot;:49.05},{&quot;2026-08-21&quot;:49.47},{&quot;2026-08-22&quot;:48.52},{&quot;2026-08-23&quot;:48.74},{&quot;2026-08-24&quot;:48.66},{&quot;2026-08-25&quot;:48.66},{&quot;2026-08-26&quot;:48.9},{&quot;2026-08-27&quot;:48.9},{&quot;2026-08-28&quot;:48.9},{&quot;2026-08-29&quot;:48.9},{&quot;2026-08-30&quot;:48.9},{&quot;2026-08-31&quot;:48.9},{&quot;2026-09-01&quot;:48.82},{&quot;2026-09-02&quot;:48.82},{&quot;2026-09-03&quot;:48.98},{&quot;2026-09-04&quot;:48.98},{&quot;2026-09-05&quot;:48.65},{&quot;2026-09-06&quot;:48.51},{&quot;2026-09-07&quot;:48.72},{&quot;2026-09-08&quot;:48.72},{&quot;2026-09-09&quot;:48.75},{&quot;2026-09-10&quot;:48.75},{&quot;2026-09-11&quot;:48.75}]}"
        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="14126"
  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">
            Zhulodok, Void Gorger
        </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">
            $48.39
          </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="Zhulodok, Void Gorger" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/a/0/a015461d-4214-4feb-8b04-519c537759eb.jpg?1783915492" />

        <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">
            Zhulodok, Void Gorger
        </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-5'></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="Zhulodok, Void Gorger" src="https://cards.scryfall.io/large/front/a/0/a015461d-4214-4feb-8b04-519c537759eb.jpg?1783915492" />
    </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">
                $48.39
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$16.00</span>
              <span class="text-xs text-grey-text">Credit: $20.80</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;:45.9},{&quot;2026-06-14&quot;:45.77},{&quot;2026-06-15&quot;:45.84},{&quot;2026-06-16&quot;:46.18},{&quot;2026-06-17&quot;:46.08},{&quot;2026-06-18&quot;:46.32},{&quot;2026-06-19&quot;:46.14},{&quot;2026-06-20&quot;:46.72},{&quot;2026-06-21&quot;:46.45},{&quot;2026-06-22&quot;:46.12},{&quot;2026-06-23&quot;:46.49},{&quot;2026-06-24&quot;:48.61},{&quot;2026-06-25&quot;:49.35},{&quot;2026-06-26&quot;:49.64},{&quot;2026-06-27&quot;:49.81},{&quot;2026-06-28&quot;:50.69},{&quot;2026-06-29&quot;:50.29},{&quot;2026-06-30&quot;:50.69},{&quot;2026-07-01&quot;:50.57},{&quot;2026-07-02&quot;:50.57},{&quot;2026-07-03&quot;:50.21},{&quot;2026-07-04&quot;:50.09},{&quot;2026-07-05&quot;:50.19},{&quot;2026-07-06&quot;:50.38},{&quot;2026-07-07&quot;:49.81},{&quot;2026-07-08&quot;:48.56},{&quot;2026-07-09&quot;:47.67},{&quot;2026-07-10&quot;:47.58},{&quot;2026-07-11&quot;:47.58},{&quot;2026-07-12&quot;:46.71},{&quot;2026-07-13&quot;:46.26},{&quot;2026-07-14&quot;:46.3},{&quot;2026-07-15&quot;:46.69},{&quot;2026-07-16&quot;:46.82},{&quot;2026-07-17&quot;:47.25},{&quot;2026-07-18&quot;:46.79},{&quot;2026-07-19&quot;:46.63},{&quot;2026-07-20&quot;:46.63},{&quot;2026-07-21&quot;:46.71},{&quot;2026-07-22&quot;:46.71},{&quot;2026-07-23&quot;:47.09},{&quot;2026-07-24&quot;:47.02},{&quot;2026-07-25&quot;:47.16},{&quot;2026-07-26&quot;:47.21},{&quot;2026-07-27&quot;:47.15},{&quot;2026-07-28&quot;:46.82},{&quot;2026-07-29&quot;:46.82},{&quot;2026-07-30&quot;:46.75},{&quot;2026-07-31&quot;:46.46},{&quot;2026-08-01&quot;:46.84},{&quot;2026-08-02&quot;:46.32},{&quot;2026-08-03&quot;:46.51},{&quot;2026-08-04&quot;:46.79},{&quot;2026-08-05&quot;:47.1},{&quot;2026-08-07&quot;:47.1},{&quot;2026-08-08&quot;:47.06},{&quot;2026-08-09&quot;:47.06},{&quot;2026-08-10&quot;:47.06},{&quot;2026-08-11&quot;:47.03},{&quot;2026-08-12&quot;:47.34},{&quot;2026-08-13&quot;:48.0},{&quot;2026-08-14&quot;:48.0},{&quot;2026-08-15&quot;:47.93},{&quot;2026-08-16&quot;:47.93},{&quot;2026-08-17&quot;:47.86},{&quot;2026-08-18&quot;:48.28},{&quot;2026-08-19&quot;:48.28},{&quot;2026-08-20&quot;:48.1},{&quot;2026-08-21&quot;:48.63},{&quot;2026-08-22&quot;:48.99},{&quot;2026-08-23&quot;:48.99},{&quot;2026-08-24&quot;:48.87},{&quot;2026-08-25&quot;:48.87},{&quot;2026-08-26&quot;:48.8},{&quot;2026-08-27&quot;:48.76},{&quot;2026-08-28&quot;:48.64},{&quot;2026-08-29&quot;:48.64},{&quot;2026-08-30&quot;:48.13},{&quot;2026-08-31&quot;:48.72},{&quot;2026-09-01&quot;:49.05},{&quot;2026-09-02&quot;:49.9},{&quot;2026-09-03&quot;:49.34},{&quot;2026-09-04&quot;:49.78},{&quot;2026-09-05&quot;:49.5},{&quot;2026-09-06&quot;:49.5},{&quot;2026-09-07&quot;:49.47},{&quot;2026-09-08&quot;:49.47},{&quot;2026-09-09&quot;:48.67},{&quot;2026-09-10&quot;:48.59},{&quot;2026-09-11&quot;:48.39}],&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="94262"
  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-tdm 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">
            Ugin, Eye of the Storms 
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Planeswalker — Ugin
      </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">
            $47.73
          </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="Ugin, Eye of the Storms // Ugin, Eye of the Storms" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/5/3/53b11c30-1c4e-4238-9d42-2e1480df60c1.jpg?1782686988" />

        <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">
            Ugin, Eye of the Storms 
        </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 Planeswalker — Ugin</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"
    >
        <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="Ugin, Eye of the Storms // Ugin, Eye of the Storms" src="https://cards.scryfall.io/large/front/5/3/53b11c30-1c4e-4238-9d42-2e1480df60c1.jpg?1782686988" />
              </div>

              <div class="flip-card-back">
                <img class="w-full h-auto rounded-2xl" alt="Ugin, Eye of the Storms // Ugin, Eye of the Storms" src="https://cards.scryfall.io/large/back/5/3/53b11c30-1c4e-4238-9d42-2e1480df60c1.jpg?1782686988" />
              </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">
                $47.73
              </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">
                $46.22
              </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">$38.00</span>
              <span class="text-xs text-grey-text">Credit: $49.40</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;:48.24},{&quot;2026-06-14&quot;:48.24},{&quot;2026-06-15&quot;:48.24},{&quot;2026-06-16&quot;:47.79},{&quot;2026-06-17&quot;:48.26},{&quot;2026-06-18&quot;:48.26},{&quot;2026-06-19&quot;:48.26},{&quot;2026-06-20&quot;:48.26},{&quot;2026-06-21&quot;:48.41},{&quot;2026-06-22&quot;:48.41},{&quot;2026-06-23&quot;:48.41},{&quot;2026-06-24&quot;:48.39},{&quot;2026-06-25&quot;:48.39},{&quot;2026-06-26&quot;:48.13},{&quot;2026-06-27&quot;:48.13},{&quot;2026-06-28&quot;:48.74},{&quot;2026-06-29&quot;:48.74},{&quot;2026-06-30&quot;:48.7},{&quot;2026-07-01&quot;:48.42},{&quot;2026-07-02&quot;:48.96},{&quot;2026-07-03&quot;:49.1},{&quot;2026-07-04&quot;:48.66},{&quot;2026-07-05&quot;:48.66},{&quot;2026-07-06&quot;:48.55},{&quot;2026-07-07&quot;:48.28},{&quot;2026-07-08&quot;:48.19},{&quot;2026-07-09&quot;:47.98},{&quot;2026-07-10&quot;:48.53},{&quot;2026-07-11&quot;:48.53},{&quot;2026-07-12&quot;:48.43},{&quot;2026-07-13&quot;:48.09},{&quot;2026-07-14&quot;:46.35},{&quot;2026-07-15&quot;:46.26},{&quot;2026-07-16&quot;:46.25},{&quot;2026-07-17&quot;:46.21},{&quot;2026-07-18&quot;:46.25},{&quot;2026-07-19&quot;:46.07},{&quot;2026-07-20&quot;:45.91},{&quot;2026-07-21&quot;:45.91},{&quot;2026-07-22&quot;:46.12},{&quot;2026-07-23&quot;:46.61},{&quot;2026-07-24&quot;:47.16},{&quot;2026-07-25&quot;:47.15},{&quot;2026-07-26&quot;:45.65},{&quot;2026-07-27&quot;:46.17},{&quot;2026-07-28&quot;:46.17},{&quot;2026-07-29&quot;:46.07},{&quot;2026-07-30&quot;:46.07},{&quot;2026-07-31&quot;:46.77},{&quot;2026-08-01&quot;:46.77},{&quot;2026-08-02&quot;:46.49},{&quot;2026-08-03&quot;:46.38},{&quot;2026-08-04&quot;:46.38},{&quot;2026-08-05&quot;:46.38},{&quot;2026-08-07&quot;:46.46},{&quot;2026-08-08&quot;:46.46},{&quot;2026-08-09&quot;:45.57},{&quot;2026-08-10&quot;:45.57},{&quot;2026-08-11&quot;:45.57},{&quot;2026-08-12&quot;:46.12},{&quot;2026-08-13&quot;:46.17},{&quot;2026-08-14&quot;:46.62},{&quot;2026-08-15&quot;:46.62},{&quot;2026-08-16&quot;:46.62},{&quot;2026-08-17&quot;:46.62},{&quot;2026-08-18&quot;:46.62},{&quot;2026-08-19&quot;:46.57},{&quot;2026-08-20&quot;:46.57},{&quot;2026-08-21&quot;:46.48},{&quot;2026-08-22&quot;:46.48},{&quot;2026-08-23&quot;:46.48},{&quot;2026-08-24&quot;:46.2},{&quot;2026-08-25&quot;:45.91},{&quot;2026-08-26&quot;:45.84},{&quot;2026-08-27&quot;:45.73},{&quot;2026-08-28&quot;:45.47},{&quot;2026-08-29&quot;:45.47},{&quot;2026-08-30&quot;:45.35},{&quot;2026-08-31&quot;:44.83},{&quot;2026-09-01&quot;:45.46},{&quot;2026-09-02&quot;:44.64},{&quot;2026-09-03&quot;:45.55},{&quot;2026-09-04&quot;:45.55},{&quot;2026-09-05&quot;:45.55},{&quot;2026-09-06&quot;:45.55},{&quot;2026-09-07&quot;:45.67},{&quot;2026-09-08&quot;:46.2},{&quot;2026-09-09&quot;:46.2},{&quot;2026-09-10&quot;:46.28},{&quot;2026-09-11&quot;:46.22}],&quot;normal&quot;:[{&quot;2026-06-13&quot;:46.47},{&quot;2026-06-14&quot;:46.37},{&quot;2026-06-15&quot;:46.33},{&quot;2026-06-16&quot;:46.33},{&quot;2026-06-17&quot;:46.24},{&quot;2026-06-18&quot;:46.24},{&quot;2026-06-19&quot;:45.89},{&quot;2026-06-20&quot;:46.15},{&quot;2026-06-21&quot;:46.15},{&quot;2026-06-22&quot;:44.73},{&quot;2026-06-23&quot;:46.16},{&quot;2026-06-24&quot;:45.8},{&quot;2026-06-25&quot;:45.8},{&quot;2026-06-26&quot;:45.79},{&quot;2026-06-27&quot;:45.74},{&quot;2026-06-28&quot;:43.78},{&quot;2026-06-29&quot;:44.0},{&quot;2026-06-30&quot;:44.61},{&quot;2026-07-01&quot;:44.28},{&quot;2026-07-02&quot;:44.28},{&quot;2026-07-03&quot;:44.43},{&quot;2026-07-04&quot;:44.51},{&quot;2026-07-05&quot;:44.6},{&quot;2026-07-06&quot;:43.93},{&quot;2026-07-07&quot;:42.7},{&quot;2026-07-08&quot;:42.9},{&quot;2026-07-09&quot;:42.9},{&quot;2026-07-10&quot;:42.95},{&quot;2026-07-11&quot;:42.89},{&quot;2026-07-12&quot;:43.42},{&quot;2026-07-13&quot;:43.42},{&quot;2026-07-14&quot;:43.3},{&quot;2026-07-15&quot;:43.01},{&quot;2026-07-16&quot;:43.14},{&quot;2026-07-17&quot;:43.44},{&quot;2026-07-18&quot;:43.94},{&quot;2026-07-19&quot;:43.94},{&quot;2026-07-20&quot;:43.72},{&quot;2026-07-21&quot;:43.96},{&quot;2026-07-22&quot;:44.61},{&quot;2026-07-23&quot;:44.04},{&quot;2026-07-24&quot;:43.87},{&quot;2026-07-25&quot;:43.77},{&quot;2026-07-26&quot;:43.99},{&quot;2026-07-27&quot;:43.72},{&quot;2026-07-28&quot;:43.72},{&quot;2026-07-29&quot;:43.68},{&quot;2026-07-30&quot;:43.68},{&quot;2026-07-31&quot;:44.24},{&quot;2026-08-01&quot;:44.22},{&quot;2026-08-02&quot;:44.34},{&quot;2026-08-03&quot;:44.73},{&quot;2026-08-04&quot;:44.73},{&quot;2026-08-05&quot;:44.73},{&quot;2026-08-07&quot;:45.03},{&quot;2026-08-08&quot;:45.04},{&quot;2026-08-09&quot;:44.79},{&quot;2026-08-10&quot;:45.33},{&quot;2026-08-11&quot;:45.12},{&quot;2026-08-12&quot;:45.12},{&quot;2026-08-13&quot;:44.74},{&quot;2026-08-14&quot;:44.9},{&quot;2026-08-15&quot;:44.86},{&quot;2026-08-16&quot;:44.75},{&quot;2026-08-17&quot;:44.65},{&quot;2026-08-18&quot;:44.29},{&quot;2026-08-19&quot;:44.2},{&quot;2026-08-20&quot;:44.2},{&quot;2026-08-21&quot;:43.77},{&quot;2026-08-22&quot;:43.5},{&quot;2026-08-23&quot;:43.5},{&quot;2026-08-24&quot;:44.15},{&quot;2026-08-25&quot;:44.21},{&quot;2026-08-26&quot;:44.78},{&quot;2026-08-27&quot;:45.3},{&quot;2026-08-28&quot;:45.3},{&quot;2026-08-29&quot;:45.3},{&quot;2026-08-30&quot;:45.5},{&quot;2026-08-31&quot;:45.63},{&quot;2026-09-01&quot;:45.57},{&quot;2026-09-02&quot;:45.68},{&quot;2026-09-03&quot;:45.68},{&quot;2026-09-04&quot;:46.16},{&quot;2026-09-05&quot;:46.61},{&quot;2026-09-06&quot;:47.15},{&quot;2026-09-07&quot;:47.12},{&quot;2026-09-08&quot;:47.57},{&quot;2026-09-09&quot;:47.01},{&quot;2026-09-10&quot;:47.84},{&quot;2026-09-11&quot;:47.73}]}"
        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="33969"
  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-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">
            Necropotence
        </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">
            $47.40
          </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="Necropotence" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/5/4/54d7a0c1-efb4-4a8d-ad92-a96d43835052.jpg?1783947497" />

        <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">
            Necropotence
        </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-b'></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="Necropotence" src="https://cards.scryfall.io/large/front/5/4/54d7a0c1-efb4-4a8d-ad92-a96d43835052.jpg?1783947497" />
    </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">
                $47.40
              </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">$35.00</span>
              <span class="text-xs text-grey-text">Credit: $45.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;:51.9},{&quot;2026-06-14&quot;:51.8},{&quot;2026-06-15&quot;:50.64},{&quot;2026-06-16&quot;:50.64},{&quot;2026-06-17&quot;:50.64},{&quot;2026-06-18&quot;:51.32},{&quot;2026-06-19&quot;:51.32},{&quot;2026-06-20&quot;:51.32},{&quot;2026-06-21&quot;:50.11},{&quot;2026-06-22&quot;:50.11},{&quot;2026-06-23&quot;:50.99},{&quot;2026-06-24&quot;:50.99},{&quot;2026-06-25&quot;:50.99},{&quot;2026-06-26&quot;:50.99},{&quot;2026-06-27&quot;:50.99},{&quot;2026-06-28&quot;:50.99},{&quot;2026-06-29&quot;:50.84},{&quot;2026-06-30&quot;:50.94},{&quot;2026-07-01&quot;:50.94},{&quot;2026-07-02&quot;:50.94},{&quot;2026-07-03&quot;:50.94},{&quot;2026-07-04&quot;:50.94},{&quot;2026-07-05&quot;:50.94},{&quot;2026-07-06&quot;:50.94},{&quot;2026-07-07&quot;:50.94},{&quot;2026-07-08&quot;:50.94},{&quot;2026-07-09&quot;:50.94},{&quot;2026-07-10&quot;:50.94},{&quot;2026-07-11&quot;:50.94},{&quot;2026-07-12&quot;:50.94},{&quot;2026-07-13&quot;:50.94},{&quot;2026-07-14&quot;:50.94},{&quot;2026-07-15&quot;:50.76},{&quot;2026-07-16&quot;:50.76},{&quot;2026-07-17&quot;:50.76},{&quot;2026-07-18&quot;:50.76},{&quot;2026-07-19&quot;:50.76},{&quot;2026-07-20&quot;:50.54},{&quot;2026-07-21&quot;:50.54},{&quot;2026-07-22&quot;:50.17},{&quot;2026-07-23&quot;:50.41},{&quot;2026-07-24&quot;:50.41},{&quot;2026-07-25&quot;:50.41},{&quot;2026-07-26&quot;:50.41},{&quot;2026-07-27&quot;:50.41},{&quot;2026-07-28&quot;:50.41},{&quot;2026-07-29&quot;:50.41},{&quot;2026-07-30&quot;:50.41},{&quot;2026-07-31&quot;:50.41},{&quot;2026-08-01&quot;:50.09},{&quot;2026-08-02&quot;:50.09},{&quot;2026-08-03&quot;:49.85},{&quot;2026-08-04&quot;:50.5},{&quot;2026-08-05&quot;:50.5},{&quot;2026-08-07&quot;:50.5},{&quot;2026-08-08&quot;:50.5},{&quot;2026-08-09&quot;:50.5},{&quot;2026-08-10&quot;:50.5},{&quot;2026-08-11&quot;:50.5},{&quot;2026-08-12&quot;:49.85},{&quot;2026-08-13&quot;:50.53},{&quot;2026-08-14&quot;:50.47},{&quot;2026-08-15&quot;:50.47},{&quot;2026-08-16&quot;:50.47},{&quot;2026-08-17&quot;:50.34},{&quot;2026-08-18&quot;:50.34},{&quot;2026-08-19&quot;:50.34},{&quot;2026-08-20&quot;:50.34},{&quot;2026-08-21&quot;:49.74},{&quot;2026-08-22&quot;:49.71},{&quot;2026-08-23&quot;:49.71},{&quot;2026-08-24&quot;:49.71},{&quot;2026-08-25&quot;:49.71},{&quot;2026-08-26&quot;:49.77},{&quot;2026-08-27&quot;:49.67},{&quot;2026-08-28&quot;:49.67},{&quot;2026-08-29&quot;:49.67},{&quot;2026-08-30&quot;:49.42},{&quot;2026-08-31&quot;:49.1},{&quot;2026-09-01&quot;:49.1},{&quot;2026-09-02&quot;:49.1},{&quot;2026-09-03&quot;:48.34},{&quot;2026-09-04&quot;:48.34},{&quot;2026-09-05&quot;:47.38},{&quot;2026-09-06&quot;:47.38},{&quot;2026-09-07&quot;:47.38},{&quot;2026-09-08&quot;:47.38},{&quot;2026-09-09&quot;:47.38},{&quot;2026-09-10&quot;:47.38},{&quot;2026-09-11&quot;:47.4}]}"
        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="58286"
  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-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">
            Solphim, Mayhem Dominus
        </span>


      </div>

      <!-- Card Type -->
      <div class="text-xs text-grey-text truncate mt-0.5">
        Legendary Creature — Phyrexian 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="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">
            $46.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="Solphim, Mayhem Dominus" class="w-16 h-auto rounded-lg" loading="lazy" src="https://cards.scryfall.io/small/front/1/b/1b6ac6a1-d792-473a-a189-5282ae7559a7.jpg?1783917900" />

        <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">
            Solphim, Mayhem Dominus
        </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 — Phyrexian Horror</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><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="Solphim, Mayhem Dominus" src="https://cards.scryfall.io/large/front/1/b/1b6ac6a1-d792-473a-a189-5282ae7559a7.jpg?1783917900" />
    </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">
                $46.80
              </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 Foil</span>
              <span class="text-lg font-medium text-nine-white">$22.00</span>
              <span class="text-xs text-grey-text">Credit: $28.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;2026-06-10&quot;:44.87},{&quot;2026-06-11&quot;:44.87},{&quot;2026-06-12&quot;:44.87},{&quot;2026-06-13&quot;:44.8},{&quot;2026-06-14&quot;:44.8},{&quot;2026-06-15&quot;:45.04},{&quot;2026-06-16&quot;:45.04},{&quot;2026-06-17&quot;:45.76},{&quot;2026-06-18&quot;:45.76},{&quot;2026-06-19&quot;:45.76},{&quot;2026-06-20&quot;:45.76},{&quot;2026-06-21&quot;:45.89},{&quot;2026-06-22&quot;:45.89},{&quot;2026-06-23&quot;:46.53},{&quot;2026-06-24&quot;:46.53},{&quot;2026-06-25&quot;:46.53},{&quot;2026-06-26&quot;:46.53},{&quot;2026-06-27&quot;:46.53},{&quot;2026-06-28&quot;:46.53},{&quot;2026-06-29&quot;:46.53},{&quot;2026-06-30&quot;:46.53},{&quot;2026-07-01&quot;:46.53},{&quot;2026-07-02&quot;:46.53},{&quot;2026-07-03&quot;:46.78},{&quot;2026-07-04&quot;:46.78},{&quot;2026-07-05&quot;:46.78},{&quot;2026-07-06&quot;:46.78},{&quot;2026-07-07&quot;:46.78},{&quot;2026-07-08&quot;:46.78},{&quot;2026-07-09&quot;:46.78},{&quot;2026-07-10&quot;:46.78},{&quot;2026-07-11&quot;:46.83},{&quot;2026-07-12&quot;:46.83},{&quot;2026-07-13&quot;:46.83},{&quot;2026-07-14&quot;:46.83},{&quot;2026-07-15&quot;:46.83},{&quot;2026-07-16&quot;:46.83},{&quot;2026-07-17&quot;:47.19},{&quot;2026-07-18&quot;:47.19},{&quot;2026-07-19&quot;:47.49},{&quot;2026-07-20&quot;:47.49},{&quot;2026-07-21&quot;:47.49},{&quot;2026-07-23&quot;:47.49},{&quot;2026-07-25&quot;:47.49},{&quot;2026-07-26&quot;:47.49},{&quot;2026-07-27&quot;:47.49},{&quot;2026-07-29&quot;:47.49},{&quot;2026-07-30&quot;:47.49},{&quot;2026-07-31&quot;:47.49},{&quot;2026-08-01&quot;:47.49},{&quot;2026-08-02&quot;:48.12},{&quot;2026-08-03&quot;:48.12},{&quot;2026-08-04&quot;:48.87},{&quot;2026-08-05&quot;:48.87},{&quot;2026-08-07&quot;:48.24},{&quot;2026-08-08&quot;:48.37},{&quot;2026-08-09&quot;:48.37},{&quot;2026-08-10&quot;:48.37},{&quot;2026-08-11&quot;:48.37},{&quot;2026-08-12&quot;:48.66},{&quot;2026-08-13&quot;:49.0},{&quot;2026-08-14&quot;:49.0},{&quot;2026-08-15&quot;:49.0},{&quot;2026-08-16&quot;:49.0},{&quot;2026-08-17&quot;:49.0},{&quot;2026-08-18&quot;:49.0},{&quot;2026-08-19&quot;:49.0},{&quot;2026-08-20&quot;:49.0},{&quot;2026-08-21&quot;:47.45},{&quot;2026-08-22&quot;:47.45},{&quot;2026-08-23&quot;:47.45},{&quot;2026-08-24&quot;:47.45},{&quot;2026-08-25&quot;:47.45},{&quot;2026-08-26&quot;:47.45},{&quot;2026-08-27&quot;:47.45},{&quot;2026-08-28&quot;:47.45},{&quot;2026-08-29&quot;:47.45},{&quot;2026-08-30&quot;:47.45},{&quot;2026-08-31&quot;:46.75},{&quot;2026-09-01&quot;:46.75},{&quot;2026-09-02&quot;:46.95},{&quot;2026-09-03&quot;:46.46},{&quot;2026-09-04&quot;:46.57},{&quot;2026-09-05&quot;:46.22},{&quot;2026-09-06&quot;:45.69},{&quot;2026-09-07&quot;:46.29},{&quot;2026-09-08&quot;:46.29},{&quot;2026-09-09&quot;:46.39},{&quot;2026-09-10&quot;:46.39},{&quot;2026-09-11&quot;:46.8}],&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
      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 1-50 of 9368 in total</span></div>

      <div class="overflow-x-auto">
        <nav class="pagy series-nav" aria-label="Pages"><a role="link" aria-disabled="true" aria-label="Previous">&lt;</a><a role="link" aria-disabled="true" aria-current="page">1</a><a href="/load_collection?direction=asc&amp;page=2&amp;username=denvermullets" rel="next">2</a><a href="/load_collection?direction=asc&amp;page=3&amp;username=denvermullets">3</a><a href="/load_collection?direction=asc&amp;page=4&amp;username=denvermullets">4</a><a href="/load_collection?direction=asc&amp;page=5&amp;username=denvermullets">5</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=2&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="20781"
          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">
              275
            </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-mythic ss-fw ss-2x mr-4"></i>
              Mox Opal


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $257.58

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $250.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.18
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20781"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20781" src="/boxset_card/20781?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="51344"
          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">
              223
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mm2 ss-mythic ss-fw ss-2x mr-4"></i>
              Mox Opal


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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">
                  $236.08

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $195.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.18
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="51344"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_51344" src="/boxset_card/51344?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="83586"
          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">
              76
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-usg ss-rare ss-fw ss-2x mr-4"></i>
              Gilded Drake


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Drake
            </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-u'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $208.84

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $160.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.48
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="83586"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_83586" src="/boxset_card/83586?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="97914"
          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">
              564
            </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-mythic ss-fw ss-2x mr-4"></i>
              Cloud, Midgar Mercenary


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Human Soldier 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-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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $189.35

                    <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">
                $125.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.85
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="97914"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_97914" src="/boxset_card/97914?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="53222"
          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">
              181
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-mb2 ss-uncommon ss-fw ss-2x mr-4"></i>
              Demonic Consultation


            </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-b'></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">
                  $149.52

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $112.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.82
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="53222"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_53222" src="/boxset_card/53222?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="80015"
          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-bot ss-mythic ss-fw ss-2x mr-4"></i>
              Goldbug, Humanity&#39;s Ally // Goldbug, Scrappy Scout


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Artifact Creature — Robot
            </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><i class='no-tailwind ms ms-cost ml-0 ms-u'></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">
                  $141.94

                    <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">
                $115.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.62
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="80015"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_80015" src="/boxset_card/80015?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="71327"
          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">
              375
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-ltc ss-mythic ss-fw ss-2x mr-4"></i>
              Urborg, Tomb of Yawgmoth


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $132.63

                    <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">
                $90.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.49
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="71327"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_71327" src="/boxset_card/71327?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="74370"
          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">
              246
            </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-mythic ss-fw ss-2x mr-4"></i>
              The One Ring


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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-4'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $122.01

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $85.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">
                2.55
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="74370"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_74370" src="/boxset_card/74370?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="74985"
          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">
              451
            </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-mythic ss-fw ss-2x mr-4"></i>
              The One Ring


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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-4'></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">
                  $115.42

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 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">
                $85.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                2.55
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="74985"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_74985" src="/boxset_card/74985?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="97947"
          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">
              467
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fic ss-rare ss-fw ss-2x mr-4"></i>
              Lulu, Stern Guardian


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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-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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $107.89

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $75.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.20
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="97947"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_97947" src="/boxset_card/97947?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="94867"
          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">
              31
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fca ss-mythic ss-fw ss-2x mr-4"></i>
              Rhystic Study


            </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">
                  $107.10

                    <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">
                $80.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">
                2.73
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="94867"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_94867" src="/boxset_card/94867?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="97215"
          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">
              66
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-spm ss-mythic ss-fw ss-2x mr-4"></i>
              The Soul Stone


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Artifact — Infinity Stone
            </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">
                  $98.21

                    <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">
                $65.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.58
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="97215"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_97215" src="/boxset_card/97215?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="97919"
          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">
              569
            </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>
              Choco, Seeker of Paradise


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Bird
            </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-g'></i><i class='no-tailwind ms ms-cost ml-0 ms-w'></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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $96.16

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $44.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.43
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="97919"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_97919" src="/boxset_card/97919?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="19260"
          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">
              369
            </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>
              Sheoldred, the Apocalypse


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Phyrexian Praetor
            </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-b'></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">
                  $95.08

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $70.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                2.03
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="19260"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_19260" src="/boxset_card/19260?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21038"
          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">
              364
            </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-mythic ss-fw ss-2x mr-4"></i>
              Sword of Feast and Famine


            </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-3'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $94.12

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $80.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.06
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21038"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21038" src="/boxset_card/21038?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="73288"
          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">
              98
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-brr ss-mythic ss-fw ss-2x mr-4"></i>
              Mox Amber


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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">
                  $93.97

                    <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">
                $70.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.50
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="73288"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_73288" src="/boxset_card/73288?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95296"
          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-fin ss-mythic ss-fw ss-2x mr-4"></i>
              Kefka, Court Mage // Kefka, Ruler of Ruin


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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-2'></i><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></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">
                  $91.51

                    <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">
                $60.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.22
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="95296"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95296" src="/boxset_card/95296?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="30546"
          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">
              334
            </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>
              Mana Vault


            </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-1'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $86.84

                    <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">
                $55.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.63
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="30546"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_30546" src="/boxset_card/30546?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21040"
          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">
              365
            </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-mythic ss-fw ss-2x mr-4"></i>
              Sword of Fire and Ice


            </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-3'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $83.13

                    <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">
                $52.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.76
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21040"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21040" src="/boxset_card/21040?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="79538"
          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">
              287
            </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>
              Urborg, Tomb of Yawgmoth


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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">
                  $57.37

                    <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">
                  $74.08

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $42.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $40.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.49
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="79538"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_79538" src="/boxset_card/79538?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95282"
          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">
              317
            </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-mythic ss-fw ss-2x mr-4"></i>
              Sephiroth, Fabled SOLDIER // Sephiroth, One-Winged Angel


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Human Avatar Soldier
            </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">
                  $71.91

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $53.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.43
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="95282"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95282" src="/boxset_card/95282?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="108812"
          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">
              19
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-soa ss-mythic ss-fw ss-2x mr-4"></i>
              Force of Will


            </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-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">
                  $65.39

                    <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">
                $36.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">
                2.01
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="108812"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_108812" src="/boxset_card/108812?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="109756"
          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">
              189
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-soa ss-mythic ss-fw ss-2x mr-4"></i>
              Triumph of the Hordes


            </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-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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $62.12

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $42.50
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.52
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="109756"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_109756" src="/boxset_card/109756?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="79460"
          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">
              261
            </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-mythic ss-fw ss-2x mr-4"></i>
              Sliver Legion


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Sliver
            </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><i class='no-tailwind ms ms-cost ml-0 ms-u'></i><i class='no-tailwind ms ms-cost ml-0 ms-b'></i><i class='no-tailwind ms ms-cost ml-0 ms-r'></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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $62.05

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $30.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.15
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="79460"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_79460" src="/boxset_card/79460?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="87414"
          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">
              13
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-wot ss-mythic ss-fw ss-2x mr-4"></i>
              Smothering Tithe


            </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-3'></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">
                  $61.75

                    <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">
                $39.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">
                2.58
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="87414"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_87414" src="/boxset_card/87414?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="18279"
          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">
              108
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-dmr ss-mythic ss-fw ss-2x mr-4"></i>
              Vampiric Tutor


            </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-b'></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">
                  $61.56

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $28.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.60
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="18279"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_18279" src="/boxset_card/18279?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="48794"
          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">
              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-mh2 ss-rare ss-fw ss-2x mr-4"></i>
              Esper Sentinel


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Artifact Creature — Human Soldier
            </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">
                  $61.20

                    <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">
                $39.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.67
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="48794"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_48794" src="/boxset_card/48794?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="11928"
          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">
              56
            </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>
              Ancient Silver Dragon


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Elder 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-6'></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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $59.57

                    <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">
                $37.50
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.86
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="11928"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_11928" src="/boxset_card/11928?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21109"
          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-2x2 ss-rare ss-fw ss-2x mr-4"></i>
              Force of Negation


            </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-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">
                  $59.41

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $51.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.91
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21109"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21109" src="/boxset_card/21109?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21004"
          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">
              311
            </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>
              Phyrexian Altar


            </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-3'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $58.83

                    <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">
                $42.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.26
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21004"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21004" src="/boxset_card/21004?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="18833"
          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-dmr ss-mythic ss-fw ss-2x mr-4"></i>
              Force of Will


            </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-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">
                  $58.78

                    <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">
                $49.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">
                2.01
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="18833"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_18833" src="/boxset_card/18833?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20842"
          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">
              296
            </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-mythic ss-fw ss-2x mr-4"></i>
              Sword of Feast and Famine


            </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-3'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $40.56

                    <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">
                <div class="flex items-center gap-2">
                  $56.41

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $30.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $40.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.06
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20842"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20842" src="/boxset_card/20842?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="80040"
          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">
              U4
            </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-mythic ss-fw ss-2x mr-4"></i>
              Ulamog, the Infinite Gyre


            </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-11'></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">
                  $55.76

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $28.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.69
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="80040"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_80040" src="/boxset_card/80040?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20168"
          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">
              31
            </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>
              Smothering Tithe


            </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-3'></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">
                  $55.71

                    <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">
                $42.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">
                2.58
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20168"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20168" src="/boxset_card/20168?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20224"
          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">
              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-2x2 ss-rare ss-fw ss-2x mr-4"></i>
              Force of Negation


            </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-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">
                  $52.98

                    <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">
                $36.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.91
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20224"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20224" src="/boxset_card/20224?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="97938"
          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">
              458
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fic ss-rare ss-fw ss-2x mr-4"></i>
              Vivi&#39;s Persistence


            </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-r'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $52.86

                    <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">
                $48.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="97938"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_97938" src="/boxset_card/97938?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="19976"
          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">
              5
            </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-mythic ss-fw ss-2x mr-4"></i>
              Archangel of Thune


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Creature — Angel
            </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-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">
                  $52.76

                    <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">
                $29.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.59
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="19976"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_19976" src="/boxset_card/19976?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95138"
          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">
              255
            </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-mythic ss-fw ss-2x mr-4"></i>
              Buster Sword


            </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-3'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $52.39

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $39.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.96
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="95138"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95138" src="/boxset_card/95138?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="41909"
          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">
              266
            </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>
              Boseiju, Who Endures


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary 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">
                  $49.78

                    <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">
                <div class="flex items-center gap-2">
                  $52.38

                    <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">
                $36.00
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $37.50
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.88
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="41909"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_41909" src="/boxset_card/41909?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="74583"
          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">
              258
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-lci ss-rare ss-fw ss-2x mr-4"></i>
              Roaming Throne


            </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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $52.33

                    <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">
                $28.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.45
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="74583"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_74583" src="/boxset_card/74583?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95816"
          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">
              191
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-fic ss-mythic ss-fw ss-2x mr-4"></i>
              Y&#39;shtola, Night&#39;s Blessed


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Cat Warlock
            </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><i class='no-tailwind ms ms-cost ml-0 ms-u'></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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $50.87

                    <span class="px-2 py-1 text-xs rounded-full bg-accent-50 text-badge-text">
                      ↑
                      12%
                    </span>
                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $35.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                0.92
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="95816"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95816" src="/boxset_card/95816?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="21034"
          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">
              320
            </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-mythic ss-fw ss-2x mr-4"></i>
              Cavern of Souls


            </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">
                  $50.85

                    <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">
                $38.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.67
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="21034"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_21034" src="/boxset_card/21034?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="95676"
          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">
              528
            </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>
              Vincent Valentine // Galian Beast


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Assassin
            </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-b'></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">
                  $50.44

                    <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">
                $20.00
            </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="95676"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_95676" src="/boxset_card/95676?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="12291"
          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">
              305
            </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>
              Commander&#39;s Plate


            </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">
                <div class="flex items-center gap-2">
                  $49.73

                    <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">
                $32.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.75
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="12291"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_12291" src="/boxset_card/12291?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20171"
          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">
              32
            </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>
              Teferi&#39;s Protection


            </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-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">
                  $49.54

                    <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">
                $33.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">
                2.13
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20171"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20171" src="/boxset_card/20171?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="20844"
          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">
              297
            </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-mythic ss-fw ss-2x mr-4"></i>
              Sword of Fire and Ice


            </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-3'></i>
              </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $48.75

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $25.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.76
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="20844"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_20844" src="/boxset_card/20844?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="14126"
          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">
              704
            </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>
              Zhulodok, Void Gorger


            </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-5'></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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $48.39

                    <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">
                $16.00
            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
                1.37
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="14126"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_14126" src="/boxset_card/14126?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="94262"
          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">
              382
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
              <i class="drop-shadow-nine py-1 rounded-xl ss ss-grad ss-tdm ss-mythic ss-fw ss-2x mr-4"></i>
              Ugin, Eye of the Storms // Ugin, Eye of the Storms


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Planeswalker — Ugin
            </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">
                  $47.73

                    <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">
                $38.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.69
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="94262"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_94262" src="/boxset_card/94262?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="33969"
          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">
              154
            </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-rare ss-fw ss-2x mr-4"></i>
              Necropotence


            </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-b'></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">
                  $47.40

                </div>
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                $35.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.73
            </td>
        </tr>

        <tr
          data-expandable-row-target="content"
          data-card-id="33969"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_33969" src="/boxset_card/33969?show_other_printings=true&amp;username=denvermullets"></turbo-frame>
          </td>
        </tr>

        <tr
          data-action="click->expandable-row#toggle"
          data-card-id="58286"
          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">
              449
            </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-mythic ss-fw ss-2x mr-4"></i>
              Solphim, Mayhem Dominus


            </td>

            <td class="hidden px-4 py-2 text-sm whitespace-nowrap lg:table-cell">
              Legendary Creature — Phyrexian 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-2'></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">
            </td>

            <td class="px-4 py-2 text-sm whitespace-nowrap">
                <div class="flex items-center gap-2">
                  $46.80

                    <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">
                $22.00
            </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="58286"
          class="hidden border border-background"
        >
          <td colspan="9">
            <turbo-frame loading="lazy" id="card_details_58286" src="/boxset_card/58286?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 1-50 of 9368 in total</span>
      <nav class="pagy series-nav" aria-label="Pages"><a role="link" aria-disabled="true" aria-label="Previous">&lt;</a><a role="link" aria-disabled="true" aria-current="page">1</a><a href="/load_collection?direction=asc&amp;page=2&amp;username=denvermullets" rel="next">2</a><a href="/load_collection?direction=asc&amp;page=3&amp;username=denvermullets">3</a><a href="/load_collection?direction=asc&amp;page=4&amp;username=denvermullets">4</a><a href="/load_collection?direction=asc&amp;page=5&amp;username=denvermullets">5</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=2&amp;username=denvermullets" rel="next" aria-label="Next">&gt;</a></nav>
    </div>
</div>

</template></turbo-stream>