Some QOL improvements:

- Added subtle highliting of attempted letters
- Using correct backspace character
- Reduced header size a little
- Added a "define" button to show word definition

site/assets/styles/main.css

@@ -10,11 +10,25 @@
 }
 
 body {
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
 
+button {
+    font-size: 0.9em;
+}
+
+button.secondary {
+    background: var(--bg);
+    color: var(--accent);
+}
+
+button.secondary:hover {
+    background: var(--bg);
+    color: var(--accent-hover);
+}
+
 main {
     flex-grow: 1;
     flex-shrink: 1;
@@ -23,8 +37,13 @@ main {
     flex-direction: column;
 }
 
-body header > h1 {
-    margin-block: 0.2rem;
+body header > h1:only-child {
+    margin-block: 0.5rem;
+    font-size: 2rem;
+}
+
+body header {
+    padding-block-end: 0;
 }
 
 main > div:first-child {
@@ -45,6 +64,12 @@ div.playfield div[data-playfield-target="playfield"] {
     font-size: 2.5rem;
 }
 
+div.playfield div[data-playfield-target="nextPuzzleButtons"] {
+    display: flex;
+    justify-content: center;
+    gap: 0.8rem;
+}
+
 div.keyboard > div {
     display: flex;
     justify-content: space-around;
@@ -61,6 +86,10 @@ div.keyboard button {
     border: solid 1px #444;
 }
 
+div.keyboard button:hover {
+    background: #bbb;
+}
+
 div.keyboard > div:nth-child(2) {
     margin-inline: 2vw;
 }
@@ -75,16 +104,36 @@ button[data-keyboard-target="key"].right-pos {
     color: var(--color-right-letter-fg);
 }
 
+button[data-keyboard-target="key"].right-pos:hover {
+    background: var(--color-right-letter-bg);
+}
+
 button[data-keyboard-target="key"].right-char {
     background: var(--color-has-letter-bg);
     color: var(--color-has-letter-fg);
 }
 
+button[data-keyboard-target="key"].right-char:hover {
+    background: var(--color-has-letter-bg);
+}
+
 button[data-keyboard-target="key"].miss {
     background: var(--color-no-letter-bg);
     color: var(--color-no-letter-fg);
 }
 
+button[data-keyboard-target="key"].miss:hover {
+    background: var(--color-no-letter-bg);
+}
+
+button[data-keyboard-target="key"].attempted {
+    background: #ddd;
+}
+
+button[data-keyboard-target="key"].miss:hover {
+    background: #ddd;
+}
+
 div.playfield div.row {
     display: flex;
     justify-content: center;
@@ -117,7 +166,7 @@ div.playfield div.row span.miss {
 
 div.overlay {
     position: fixed;
-    bottom: 25%;
+    bottom: 30%;
     left: 10%;
     right: 10%;
     z-index: 10;
@@ -131,7 +180,7 @@ div.overlay.show {
 }
 
 div.overlay-message {
-    font-size: 2rem;
+    font-size: 1.8rem;
     line-height: 2.2rem;
 
     text-align: center;
@@ -145,5 +194,5 @@ div.overlay-message {
 }
 
 .hide {
-    display: none;
+    display: none !important;
 }