From c95ca8775aeeaab41e40d6e09aeb47ce819ff658 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Mon, 22 Jun 2026 05:47:10 -0400
Subject: [PATCH] home3 Play card: fit word-search panel + bolder BYTES,
 EAT/YTE tiles, richer amber

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

diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte
index 16cace7..2acefe0 100644
--- a/frontend/src/routes/home3/+page.svelte
+++ b/frontend/src/routes/home3/+page.svelte
@@ -88,16 +88,16 @@
     <div class="pair">
       <a class="card play" href="/play">
         <div class="play-top">
-          <span class="label" style="color:#D2861B">PLAY</span>
+          <span class="label" style="color:#A8650F">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-a">T</span><span class="wb-t wb-g">Y</span><span class="wb-t wb-n">P</span><span class="wb-t wb-g">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 class="wb-row"><span class="wb-t wb-a">E</span><span class="wb-t wb-n">A</span><span class="wb-t wb-a">T</span></div>
+            <div class="wb-row"><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-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>
@@ -238,23 +238,23 @@
   .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; }
+  .play-link { color: #A8650F; border-bottom: 2px solid #e0a94f; }
 
   /* "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; }
+  .play-band { position: relative; height: 124px; margin-top: 24px; overflow: hidden; }
+  .wb { position: absolute; top: 50%; left: -22px; 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);
+    display: grid; grid-template-columns: repeat(6, 14px); gap: 3px;
+    font-weight: 600; font-size: 10.5px; line-height: 14px; color: #d4b576; text-align: center;
+    background: #fff; border: 1.5px solid #f0d597; border-radius: 10px; padding: 9px;
+    box-shadow: 0 5px 16px -8px rgba(210, 134, 27, 0.55);
   }
-  .ws .hl { color: #D2861B; }
+  .ws .hl { color: #B5701A; font-weight: 800; }
   .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; }