Show full SaveData.zip path in loader card

app.js

@@ -10,7 +10,6 @@
     loaderStatus: $("loaderStatus"),
     browseBtn: $("browseBtn"),
     fileInput: $("fileInput"),
-    savesPath: $("savesPath"),
     copyPathBtn: $("copyPathBtn"),
     search: $("search"),
     category: $("category"),
@@ -345,11 +344,10 @@
   }
 
   function bind() {
-    els.savesPath.textContent = SAVES_PATH;
     els.copyPathBtn.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(SAVES_PATH);
-        toast("Path copied. Paste it into the file dialog's address bar.");
+        toast("Saves folder path copied. Paste it into the file dialog's address bar, then open your SteamID and save folders.");
       } catch {
         toast("Couldn't copy. Select the path and copy it manually.", true);
       }

index.html

@@ -29,9 +29,10 @@
       <input type="file" id="fileInput" accept=".zip,.json" hidden>
     </div>
     <div class="path-hint">
-      <span>Saves folder</span>
+      <span class="path-label">Your save file is here</span>
-      <code id="savesPath"></code>
+      <code class="path"><span>%USERPROFILE%\AppData\LocalLow\Endnight\SonsOfTheForest\Saves\</span><var>SteamID</var><span>\SinglePlayer\</span><var>SaveID</var><span>\SaveData.zip</span></code>
-      <button type="button" class="btn-link" id="copyPathBtn">Copy path</button>
+      <p class="path-note"><var>SteamID</var> is the long number folder. <var>SaveID</var> is one folder per save; sort by date modified to find your latest. Hosted co-op saves are under Multiplayer instead of SinglePlayer.</p>
+      <button type="button" class="btn-link" id="copyPathBtn">Copy Saves folder path</button>
     </div>
   </section>
 

styles.css

@@ -113,20 +113,38 @@ main {
 
 .path-hint {
   grid-column: 1 / -1;
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  gap: 0.4rem;
-  gap: 0.5rem 0.75rem;
+  justify-items: start;
-  align-items: baseline;
   font-size: 0.875rem;
   color: var(--fog);
   padding-top: 1rem;
   border-top: 1px solid var(--line);
 }
 
-.path-hint code {
+.path {
+  display: block;
+  width: 100%;
   font-family: Consolas, "Courier New", monospace;
+  font-size: 0.95rem;
   color: var(--bone);
-  word-break: break-all;
+  background: var(--spruce);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  padding: 0.6rem 0.75rem;
+  overflow-wrap: anywhere;
+  user-select: all;
+}
+
+.path-hint var {
+  font-style: normal;
+  color: #e0a39a;
+  border-bottom: 1px dotted var(--blood-hi);
+}
+
+.path-note {
+  margin: 0;
+  max-width: 60em;
 }
 
 .btn {