From 924f885400fe755b6a188b00febf049da7442c64 Mon Sep 17 00:00:00 2001
From: jay <thejayman77@gmail.com>
Date: Thu, 11 Jun 2026 08:42:08 -0400
Subject: [PATCH] Daily Word controls: matched SVG icons + row-aligned
 Backspace/Enter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ⌫ and ↵ glyphs never matched (different font metrics → different size +
baseline). Replaced both with matching 25px line-icon SVGs, perfectly centered.
Also made each control key one row tall — Backspace aligned to the top row,
Enter pushed to the bottom row — so they line up with the letters and look
proportional instead of two oversized half-height blocks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/lib/components/WordGame.svelte | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/WordGame.svelte b/frontend/src/lib/components/WordGame.svelte
index fc7812c..7290fd0 100644
--- a/frontend/src/lib/components/WordGame.svelte
+++ b/frontend/src/lib/components/WordGame.svelte
@@ -203,8 +203,12 @@
             {/each}
           </div>
           <div class="controls">
-            <button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">⌫</button>
-            <button class="key ctl enter" onclick={() => key('enter')} aria-label="Enter">↵</button>
+            <button class="key ctl back" onclick={() => key('back')} aria-label="Backspace">
+              <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M20 5H8.4L2.5 12l5.9 7H20a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1z"/><path d="M11 9.5l5 5M16 9.5l-5 5"/></svg>
+            </button>
+            <button class="key ctl enter" onclick={() => key('enter')} aria-label="Enter">
+              <svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6v3.5a3 3 0 0 1-3 3H5"/><path d="M9 8.5l-4 4 4 4"/></svg>
+            </button>
           </div>
         </div>
       </div>
@@ -251,7 +255,7 @@
   }
   .letters { flex: 1; display: flex; flex-direction: column; gap: 6px; }
   .krow { display: flex; gap: 4px; justify-content: center; }       /* shorter rows auto-centre */
-  .controls { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; width: 42px; flex-shrink: 0; }
+  .controls { display: flex; flex-direction: column; width: 44px; flex-shrink: 0; }
   .key {
     border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink);
     font-family: var(--label); font-weight: 700; font-size: 1.05rem; cursor: pointer; text-transform: uppercase;
@@ -260,8 +264,9 @@
   }
   .key:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); background: var(--bg); }
   .krow .key { width: var(--kw); height: 50px; }
-  .controls .key { width: 100%; height: 100%; font-size: 1.3rem; }
-  .controls .enter { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 1.75rem;
+  .controls .key { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; }
+  .controls .key svg { width: 25px; height: 25px; display: block; }
+  .controls .enter { margin-top: auto; background: var(--accent); border-color: var(--accent); color: #fff;
                      box-shadow: 0 2px 0 var(--accent-deep), 0 3px 6px rgba(0, 131, 173, 0.18); }
   .key.correct { background: #4a9d6e; border-color: #4a9d6e; color: #fff; box-shadow: 0 2px 0 #3a7d56; }
   .key.present { background: #d8b24a; border-color: #d8b24a; color: #fff; box-shadow: 0 2px 0 #b8943a; }
@@ -288,7 +293,7 @@
     .kbzone { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
               padding-bottom: calc(env(safe-area-inset-bottom) + 4px); }
     .keyboard { --kw: min(44px, calc((100vw - 120px) / 10)); width: 100%; max-width: none; margin: 0; }
-    .krow .key { height: 47px; }
+    .krow .key, .controls .key { height: 47px; }
   }
   .result { text-align: center; }
   .rmark { font-family: var(--serif); font-style: italic; color: var(--accent-deep); font-size: 1.2rem; margin: 0 0 10px; }