app/opengraph-image.tsx

@@ -4,14 +4,6 @@ export const alt = "Puzzle Trainer";
 export const size = { width: 1200, height: 630 };
 export const contentType = "image/png";
 
-const GAMES = [
-  { label: "Q", color: "#d97706" },
-  { label: "T", color: "#ea580c" },
-  { label: "Z", color: "#2563eb" },
-  { label: "S", color: "#16a34a" },
-  { label: "P", color: "#7c3aed" },
-];
-
 export default function OGImage() {
   return new ImageResponse(
     (
@@ -27,33 +19,39 @@ export default function OGImage() {
           fontFamily: "system-ui, -apple-system, sans-serif",
         }}
       >
+        {/* Game icons row */}
         <div style={{ display: "flex", gap: 24, marginBottom: 40 }}>
-          {GAMES.map((g) => (
+          {["♛", "☀", "∞", "#", "▦"].map((icon, i) => (
             <div
-              key={g.label}
+              key={i}
               style={{
                 width: 72,
                 height: 72,
-                background: g.color,
+                background: "#111827",
                 borderRadius: 16,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 fontSize: 32,
-                fontWeight: 700,
+                color: "#f9fafb",
-                color: "#ffffff",
               }}
             >
-              {g.label}
+              {icon}
             </div>
           ))}
         </div>
+
+        {/* Title */}
         <div style={{ fontSize: 72, fontWeight: 700, color: "#111827", letterSpacing: -2 }}>
           Puzzle Trainer
         </div>
+
+        {/* Tagline */}
         <div style={{ fontSize: 28, color: "#6b7280", marginTop: 16 }}>
           5 puzzles logiques · chaque jour
         </div>
+
+        {/* URL */}
         <div
           style={{
             position: "absolute",