Updating Background Picture

[purplepotables]

I am attempting to make a card that has a random background picture that updates every 10 seconds, but the update never happens. This is my code:

type: custom:flipclock-card
time:
  face: TwelveHourClock
card_mod:
  style: |
    ha-card {
      width: 1279px;
      height: 393px !important;
      background: url(http://picsum.photos/1280/400?random=${timestamp});
      box-shadow: inset 0 0 0 2000px rgb(56 43 1 / 44%);
    }
    .fc-date {
      font-size: 45px !important;
      height: 55px !important;
      display: none;
    }
    .flip-clock {
      font-size: 50px;
    }
    .flip-clock-label {
      display: none;
    }
    .fc-now {
      opacity: 90%
    }
    .background {
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 100%;
      width: 100%;
    }
    <script src="/local/flipclock-card.js" nomodule></script>
    <script>
      setInterval(function() {
        var card = document.querySelector("flipclock-card");
        card.shadowRoot.querySelector("#clock").style.backgroundImage = `url(http://picsum.photos/1280/400?random=${Date.now()})`;
      }, 10000);
    </script>

I am not sure what I need to change or what is going wrong with it, and haven't been able to find anyone with a similar issue.

[thomasloven]

Card-mod is for adding CSS styling to stuff. Not javascript. Also, please use the issue templates.