Color tweaking.

src/app/cell.css

@@ -2,6 +2,10 @@
     background-color: var(--color-maze-cell-solution);
 }
 
+.solution:hover {
+    background-color: var(--color-maze-cell-solution-highlight);
+}
+
 .top {
     border-top-color: var(--color-maze-border);
 }
@@ -18,10 +22,14 @@
     border-left-color: var(--color-maze-border);
 }
 
-.user {
+.user{
-    background-color: hotpink;
+    background-color: var(--color-maze-cell-user);
+}
+
+.user:hover {
+    background-color: var(--color-maze-cell-user-highlight);
 }
 
 .solution.user {
-    background-color: darkred;
+    background-color: #c8ff00;
 }

src/app/cell.module.css

@@ -5,3 +5,7 @@
     width: 2em;
     padding: 0;
 }
+
+.cell:hover {
+    background-color: var(--color-background-highlight);
+}

src/app/globals.css

@@ -10,6 +10,9 @@
     --color-maze-background: #e8e6e3;
     --color-maze-border: #333333;
     --color-maze-cell-solution: #b1d5b1;
+    --color-maze-cell-solution-highlight: #b9e8b9;
+    --color-maze-cell-user: #ffcc00;
+    --color-maze-cell-user-highlight: #ffdd22;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,6 +27,9 @@
         --color-maze-background: #181a1b;
         --color-maze-border: #e8e6e3;
         --color-maze-cell-solution: #213d21;
+        --color-maze-cell-solution-highlight: #3d6e3d;
+        --color-maze-cell-user: #ffcc00;
+        --color-maze-cell-user-highlight: #ffdd22;
     }
 }
 
@@ -46,171 +52,3 @@ input:hover, input:focus, select:hover, select:focus {
     border-color: var(--color-border-highlight);
     color: var(--color-foreground-highlight);
 }
-
-/*div.cell {*/
-/*    display: table-cell;*/
-/*    border: 1px solid transparent;*/
-/*    height: 2em;*/
-/*    width: 2em;*/
-/*    padding: 0;*/
-/*}*/
-
-/*div.cell.solution {*/
-/*    background-color: lightgray;*/
-/*}*/
-
-/*div.cell.top {*/
-/*    border-top-color: var(--color-maze-border);*/
-/*}*/
-
-/*div.cell.right {*/
-/*    border-right-color: var(--color-maze-border);*/
-/*}*/
-
-/*div.cell.bottom {*/
-/*    border-bottom-color: var(--color-maze-border);*/
-/*}*/
-
-/*div.cell.left {*/
-/*    border-left-color: var(--color-maze-border);*/
-/*}*/
-
-/*div.cell.user {*/
-/*    background-color: hotpink;*/
-/*}*/
-
-/*div.cell.user2 {*/
-/*    border-radius: 0.5em;*/
-/*}*/
-
-/*div.cell.solution.user {*/
-/*    background-color: darkred;*/
-/*}*/
-
-input:invalid {
-    border-color: #f00;
-}
-
-body {
-    margin: 20px;
-    padding: 0;
-}
-
-h1 {
-    margin-top: 0;
-    font-size: 22px;
-}
-
-h2 {
-    margin-top: 0;
-    font-size: 20px;
-}
-
-h3 {
-    margin-top: 0;
-    font-size: 18px;
-}
-
-h4 {
-    margin-top: 0;
-    font-size: 16px;
-}
-
-h5 {
-    margin-top: 0;
-    font-size: 14px;
-}
-
-h6 {
-    margin-top: 0;
-    font-size: 12px;
-}
-
-code {
-    font-size: 1.2em;
-}
-
-ul {
-    padding-left: 20px;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-.square {
-    background: #fff;
-    border: 1px solid #999;
-    float: left;
-    font-size: 24px;
-    font-weight: bold;
-    line-height: 34px;
-    height: 34px;
-    margin-right: -1px;
-    margin-top: -1px;
-    padding: 0;
-    text-align: center;
-    width: 34px;
-}
-
-.board-row:after {
-    clear: both;
-    content: '';
-    display: table;
-}
-
-.status {
-    margin-bottom: 10px;
-}
-
-.game {
-    display: flex;
-    flex-direction: row;
-}
-
-.game-info {
-    margin-left: 20px;
-}
-
-/*:root {*/
-/*  --background: #ffffff;*/
-/*  --foreground: #171717;*/
-/*}*/
-
-/*@media (prefers-color-scheme: dark) {*/
-/*  :root {*/
-/*    --background: #0a0a0a;*/
-/*    --foreground: #ededed;*/
-/*  }*/
-/*}*/
-
-/*html,*/
-/*body {*/
-/*  max-width: 100vw;*/
-/*  overflow-x: hidden;*/
-/*}*/
-
-/*body {*/
-/*  color: var(--foreground);*/
-/*  background: var(--background);*/
-/*  font-family: Arial, Helvetica, sans-serif;*/
-/*  -webkit-font-smoothing: antialiased;*/
-/*  -moz-osx-font-smoothing: grayscale;*/
-/*}*/
-
-/** {*/
-/*  box-sizing: border-box;*/
-/*  padding: 0;*/
-/*  margin: 0;*/
-/*}*/
-
-/*a {*/
-/*  color: inherit;*/
-/*  text-decoration: none;*/
-/*}*/
-
-/*@media (prefers-color-scheme: dark) {*/
-/*  html {*/
-/*    color-scheme: dark;*/
-/*  }*/
-/*}*/