add toast notifications and switch offline download to a dismissible prompt

Ports the generic toast system (ToastProvider/useToast + ToastViewport)
and prompt-driven offline-download UX that was drafted, uncommitted, on
the old nextjs-migration worktree, reconciled with the data+pages
caching fix already on main.

- ToastProvider now wraps the app in layout.tsx, rendering a fixed
  bottom-center viewport (title/message/progress bar/actions) shared by
  any future notification, not just this one.
- OfflineDownload no longer renders an always-visible control on the
  homepage; it prompts once via a toast (skipped if already
  downloaded/dismissed, tracked in localStorage) with Download/Not now
  actions, live progress, and a Retry action on failure. Moved into the
  root layout so it applies site-wide instead of only on "/".
- Extracted the collect/count/download logic into src/lib/offline-cache.ts
  so the component stays focused on UI — keeping the existing "data" +
  "pages" cache split (the pages cache is what makes offline navigation
  to un-visited pages work; see the earlier runtimeCaching fix).
- Extracted the repeated 9-slice card border-image rules into a
  `card-border` mixin (src/styles/_mixins.scss) so Card and the new
  Toast share the same frame styling, and picked up a few small visual
  refinements from the same worktree (list-page row padding to sit
  inside the card frame, blacksmith type-icon sizing, list-row gap).

Verified with `tsc --noEmit`, a full `next build` export, and a browser
check that the toast prompts, downloads, and reports progress/completion
with no console errors.

Author: vallode

src/app/blacksmith/page.tsx

@@ -46,7 +46,7 @@ export default function BlacksmithPage() {
                 href={`/blacksmith/${type}/`}
                 className="list-row"
               >
-                <Icon type={type} size="large" rarity={4} alt={name} />
+                <Icon type={type} alt={name} />
                 <p>{name}</p>
               </Link>
             );

src/app/globals.scss

@@ -155,8 +155,9 @@ hr.border {
     align-items: center;
     display: flex;
     flex: 0 0 38px;
+    gap: 10px;
     height: 38px;
-    padding-left: 6px;
+    padding: 0 16px;
 
     &:hover {
       @include green-hover-gradient;

src/app/layout.tsx

@@ -2,8 +2,10 @@ import type { Metadata } from "next";
 import "modern-normalize/modern-normalize.css";
 import "./globals.scss";
 import GlobalSearch from "@/components/GlobalSearch";
+import OfflineDownload from "@/components/OfflineDownload";
 import { SaveProvider } from "@/context/SaveContext";
 import { PreferencesProvider } from "@/context/PreferencesContext";
+import { ToastProvider } from "@/context/ToastContext";
 
 export const metadata: Metadata = {
   metadataBase: new URL(
@@ -30,8 +32,11 @@ export default function RootLayout({
       <body>
         <PreferencesProvider>
           <SaveProvider>
-            {children}
-            <GlobalSearch />
+            <ToastProvider>
+              {children}
+              <GlobalSearch />
+              <OfflineDownload />
+            </ToastProvider>
           </SaveProvider>
         </PreferencesProvider>
       </body>

src/app/page.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link";
 import styles from "./page.module.scss";
-import OfflineDownload from "@/components/OfflineDownload";
 
 export default function Home() {
   return (
@@ -33,8 +32,6 @@ export default function Home() {
           </ul>
         </div>
       </div>
-
-      <OfflineDownload />
     </main>
   );
 }

src/components/Card.module.scss

@@ -1,17 +1,11 @@
+@use "../styles/mixins" as *;
+
 .card {
-  border-image-outset: 0px 0px 0px 0px;
-  border-image-repeat: round round;
-  border-image-slice: 21 22 20 22 fill;
-  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAAA+CAYAAAABIgi3AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJoSURBVHgB7d1BTjJBEIbhGkLyJz87484Yd1zEA+hJXHoIl55ED+BF2BnDzugKt2MkAZvJfDQN1djTvM9GBdLdCZWqnmJsGjNr7XBN5Pmcc+Qae4hrdp1jZIBAcEAah38831/brm4eXmwfOefINfYQ1+wxB5kDEsEBaaye6EthW9KTx+47JuccucYubs0p7yuZAxLBAWlsDlJ2wyWMm3PsUta875VNiMwBSWaOlCi9e5rNDKWZ9j2Y8r6SOSARHJB+Ptk7+Fr8anpJWSnM6+xtagcic0AiOCB1bxhZl5jJZLL8eX5xRsmo0Pv8Y1l2FotF+PBGPJA5IBEckLbdh7gsMavy8oMSM2ziCkbGgMtnKynatv2/+r1pmi/7I6wjjrICKZo5wt3suZ0ZhivcInSuUnplKythukx5zS6pNSUVs479UVYgdTMHTbCKbbyXc1s1wcLP1jauXLKVlTC97ZJS+9KhRypOWYdKyTWtIwVlBRLBAekoTTCPHfQuaTk2D+tI0w2O9YZkvVGZ/96LyOZ02Kptn6dsxnL2BmpdRx/2HJBon5+QqtrnOXslTdv+W78mMlZN60hBWYFE+/yEDKp97tFSTlpTkMKjz4v5alpHDGUFEsEBqZj2ea40uVG6Yi8ejT4tk1LWkeLoHVKUIexzrC4+ur0Pygqkk8ocpdz6X9q/ICgcwVApjmBAVgQHpKMfjI/j42B8uCM4ILkcjP94Oz14ZwxfNw9v4nEOxocDlyZY7d96NPRvatoXmQMSwQHJ5WB8M75XNmHc3GNvnYOD8eGC4IDk8qmsUVZSxs09ttscZA5IBAekb1eiZU9JPLoUAAAAAElFTkSuQmCC");
-  border-image-width: 20px 22px 20px 22px;
-  border-style: solid;
+  @include card-border;
   display: flex;
   flex-direction: column;
   flex: 1 1 0%;
   font-size: 2.6rem;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
   overflow: hidden;
   padding: 2.6rem 2rem;
   position: relative;