/* ───────────────────────────────────────────────────────────────
   0️⃣  Global resets / fonts
   ─────────────────────────────────────────────────────────────── */
   html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-family: "Crimson Pro", serif;
   }
   
   /* ───────────────────────────────────────────────────────────────
      1️⃣  FULL-SCREEN TILE (always visible, z-index −2)
      ─────────────────────────────────────────────────────────────── */
   #base-background {
     background-image: url("/assets/backgrounds/tile.png");
     background-size: auto;
     background-position: center;
     background-repeat: repeat;
     position: fixed;
     inset: 0;
     width: 100vw;
     height: 100vh;
     z-index: -2;  /* bottom-most visual layer */
     pointer-events: none;
   }
   
   /* ───────────────────────────────────────────────────────────────
      2️⃣  CARD / STAGE  (this is what Frame buttons change)
      ─────────────────────────────────────────────────────────────── */
   /* The callback sets   style={"--card-url": "url('/assets/backgrounds/<theme>/<weekday>.jpg')"} */
   .card-stage {
     background-image: var(--card-url);
     background-size: contain;     /* or “cover” if you prefer edge-to-edge */
     background-position: center;
     background-repeat: no-repeat;
   }

    .card-stage,                               /* /home, /play, /profile … */
    #frame-wrapper {                           /* /start  ─ outer wrapper  */
      background-image: var(--card-url);       /* ← picks up the variable  */
      background-size: contain;                /* keep aspect ratio        */
      background-position: center;
      background-repeat: no-repeat;
    }
   
   /* ───────────────────────────────────────────────────────────────
      3️⃣  Ensure Dash content sits above backgrounds
      ─────────────────────────────────────────────────────────────── */
   #page-wrapper {
     position: relative;
     z-index: 0;
   }
   
   #frame-wrapper,
   #page-wrapper,
   .card-stage {
     background-color: transparent !important;
   }