From 2ff603dd4564c121db7fc8c516e258a07ab20c15 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 15 Nov 2025 15:00:10 +0000
Subject: [PATCH] Fix tablet bugs: remove persistent hover states and reduce
 spacing

Co-authored-by: clayschaad <11883505+clayschaad@users.noreply.github.com>
---
 MemoryGame/wwwroot/css/app.css | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/MemoryGame/wwwroot/css/app.css b/MemoryGame/wwwroot/css/app.css
index 308d600..90bd8f8 100644
--- a/MemoryGame/wwwroot/css/app.css
+++ b/MemoryGame/wwwroot/css/app.css
@@ -153,8 +153,10 @@ code {
     font-weight: bold;
 }
 
-.btn-start:hover {
-    background-color: #45a049;
+@media (hover: hover) and (pointer: fine) {
+    .btn-start:hover {
+        background-color: #45a049;
+    }
 }
 
 .btn-start:active {
@@ -188,6 +190,11 @@ code {
     min-height: 300px;
 }
 
+.question-area:has(.question-word) {
+    min-height: 150px;
+    margin-bottom: 20px;
+}
+
 .question-image {
     max-width: 100%;
     max-height: 400px;
@@ -198,7 +205,7 @@ code {
 }
 
 .question-word {
-    font-size: 4rem;
+    font-size: 3rem;
     font-weight: bold;
     color: #333;
     text-transform: capitalize;
@@ -227,10 +234,12 @@ code {
     text-transform: capitalize;
 }
 
-.option-button:hover {
-    background-color: #e9ecef;
-    border-color: #4CAF50;
-    transform: scale(1.05);
+@media (hover: hover) and (pointer: fine) {
+    .option-button:hover {
+        background-color: #e9ecef;
+        border-color: #4CAF50;
+        transform: scale(1.05);
+    }
 }
 
 .option-button:active {