From 79fb9b44fc5b208921547590c006663489fd3c67 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Sun, 21 Jun 2026 22:18:12 -0400
Subject: [PATCH] home3 Play card: 'bleeding boards' graphic (Wordle + BYTES
 word-search + Memory Match)

Decorative tiles (no live answer = no spoilers); placeholder copy. Built from CD's
Play Card Graphic handoff.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/home3/+page.svelte | 68 +++++++++++++++++++++++---
 1 file changed, 60 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index b7c3764..2dac0d7 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -87,10 +87,40 @@
     <!-- bottom pair -->
     <div class="pair">
       <a class="card play" href="/play">
-        <span class="label" style="color:#D2861B">PLAY</span>
-        <h3>A little daily puzzle</h3>
-        <p class="play-copy">Daily Word, Word Search, Bloom, Memory Match.</p>
-        <span class="link play-link">Enter</span>
+        <div class="play-top">
+          <span class="label" style="color:#D2861B">PLAY</span>
+          <h3>A little daily puzzle</h3>
+        </div>
+
+        <!-- "bleeding boards": three game motifs clipping at the card edges (decorative) -->
+        <div class="play-band" aria-hidden="true">
+          <div class="wb">
+            <div class="wb-row"><span class="wb-t wb-g">B</span><span class="wb-t wb-a">Y</span><span class="wb-t wb-n">R</span><span class="wb-t wb-a">E</span></div>
+            <div class="wb-row"><span class="wb-t wb-g">B</span><span class="wb-t wb-g">Y</span><span class="wb-t wb-g">T</span><span class="wb-t wb-g">E</span></div>
+            <div class="wb-row"><span class="wb-t wb-e"></span><span class="wb-t wb-e"></span><span class="wb-t wb-e"></span><span class="wb-t wb-d"></span></div>
+          </div>
+          <div class="ws">
+            <span>K</span><span>R</span><span>O</span><span>A</span><span>E</span><span>S</span>
+            <span class="hl">B</span><span class="hl">Y</span><span class="hl">T</span><span class="hl">E</span><span class="hl">S</span><span>W</span>
+            <span>T</span><span>I</span><span>M</span><span>U</span><span>H</span><span>P</span>
+            <span>G</span><span>E</span><span>B</span><span>O</span><span>R</span><span>L</span>
+            <span>F</span><span>I</span><span>N</span><span>D</span><span>C</span><span>A</span>
+            <span>Z</span><span>O</span><span>S</span><span>E</span><span>K</span><span>Y</span>
+          </div>
+          <div class="mm">
+            <span class="mm-a"></span>
+            <span class="mm-w"><span class="mm-dot" style="background:#6bbf8c"></span></span>
+            <span class="mm-a"></span>
+            <span class="mm-w"><span class="mm-dot" style="background:#6bbf8c"></span></span>
+            <span class="mm-a"></span>
+            <span class="mm-a"></span>
+            <span class="mm-a"></span>
+            <span class="mm-w"><span class="mm-dot" style="background:#D2861B"></span></span>
+            <span class="mm-a"></span>
+          </div>
+        </div>
+
+        <div class="play-foot"><span class="link play-link">Enter</span></div>
       </a>
       <div class="card moment">
         <div class="moment-top">
@@ -204,10 +234,32 @@
 
   /* bottom pair */
   .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
-  .play { background: #FFF3DC; border: 1px solid #f6e2b8; padding: 22px 24px; display: flex; flex-direction: column; }
-  .play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 9px 0 8px; color: #5c3d0c; }
-  .play-copy { font-size: 13px; line-height: 1.5; color: #917642; margin: 0; }
-  .play-link { margin-top: auto; padding-top: 16px; color: #D2861B; border-bottom: 2px solid #f0c878; }
+  .play { background: #FFF3DC; border: 1px solid #f6e2b8; display: flex; flex-direction: column; }
+  .play-top { padding: 22px 24px 0; }
+  .play h3 { font-size: clamp(1.25rem, 1.9vw, 23px); margin: 14px 0 0; color: #5c3d0c; }
+  .play-foot { margin-top: auto; padding: 16px 24px 22px; }
+  .play-link { color: #D2861B; border-bottom: 2px solid #f0c878; }
+
+  /* "bleeding boards" — three game motifs clipping at the card edges (decorative) */
+  .play-band { position: relative; height: 116px; margin-top: 24px; overflow: hidden; }
+  .wb { position: absolute; top: 50%; left: -34px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; }
+  .wb-row { display: flex; gap: 4px; }
+  .wb-t { width: 22px; height: 22px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; }
+  .wb-g { background: #6bbf8c; } .wb-a { background: #E6A02C; } .wb-n { background: #d9c39a; }
+  .wb-e { background: #fff; border: 1.5px solid #ecca84; } .wb-d { background: #fff; border: 1.5px dashed #e0bb6f; }
+  .ws {
+    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+    display: grid; grid-template-columns: repeat(6, 18px); gap: 3px;
+    font-weight: 600; font-size: 11px; color: #d4b576; text-align: center;
+    background: #fff; border: 1.5px solid #f0d597; border-radius: 10px; padding: 10px;
+    box-shadow: 0 4px 14px -8px rgba(210, 134, 27, 0.5);
+  }
+  .ws .hl { color: #D2861B; }
+  .mm { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 5px; }
+  .mm > span { border-radius: 6px; }
+  .mm-a { background: #E6A02C; }
+  .mm-w { background: #fff; border: 1.5px solid #f0d597; display: flex; align-items: center; justify-content: center; }
+  .mm-dot { width: 7px; height: 7px; border-radius: 50%; display: block; }
 
   .moment { background: #E6F3E9; border: 1px solid #cee6d3; padding: 22px 24px; display: flex; flex-direction: column; }
   .moment-top { display: flex; align-items: center; justify-content: space-between; }