updates

public/styles.css

@@ -77,7 +77,13 @@ body.nature button {
   display: none;
 }
 #wordBox {
-  margin-top: 5rem;
+  font-size: 2em;
+  margin: 20px;
+  min-height: 60px;
+  padding: 20px;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  transition: opacity 0.3s ease;
 }
 .word-box {
   font-size: 3rem;
@@ -150,3 +156,164 @@ body.nature button {
 .adminTab:not(.hidden) {
   display: block;
 }
+
+.typing-sentence {
+    font-size: 1.5em;
+    margin: 20px 0;
+    padding: 15px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+    min-height: 50px;
+    display: block !important;
+    visibility: visible !important;
+}
+
+/* Remove these style classes if they exist */
+.typing-section
+.typing-container
+.typing-prompt
+.input-container
+#typingInput
+#typingFeedback
+
+/* Fix for start buttons visibility */
+#startGameBtn, #startTypingBtn {
+    display: inline-block;
+    margin: 10px;
+    padding: 12px 24px;
+    font-size: 1.1em;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#startGameBtn:hover, #startTypingBtn:hover {
+    transform: scale(1.05);
+    background-color: #45a049;
+}
+
+/* Override any hidden class for these buttons */
+#startGameBtn.hidden, #startTypingBtn.hidden {
+    display: none !important;
+}
+
+/* Button container for better spacing */
+.button-container {
+    margin: 20px 0;
+    padding: 10px;
+    text-align: center;
+}
+
+.student-controls {
+    display: block !important;
+    margin: 20px auto;
+    padding: 15px;
+    text-align: center;
+    visibility: visible !important;
+}
+
+.student-btn {
+    display: inline-block !important;
+    visibility: visible !important;
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 24px;
+    margin: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    opacity: 1 !important;
+}
+
+/* Override any hiding classes for these specific buttons */
+#startGameBtn:not(.hidden),
+#startTypingBtn:not(.hidden) {
+    display: inline-block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* Remove this if it exists as it might conflict */
+.hidden {
+    display: none !important;
+}
+
+/* Add this to ensure student panel shows properly */
+#studentPanel:not(.hidden) {
+    display: block !important;
+}
+
+/* 📝 Typing Practice Styles */
+.typing-section {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+}
+
+#typingPrompt {
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    margin: 20px 0;
+    padding: 20px;
+    background: #f5f5f5;
+    border-radius: 8px;
+    min-height: 60px;
+    display: block !important;
+    visibility: visible !important;
+}
+
+#typingInput {
+    width: 300px;
+    padding: 10px;
+    font-size: 18px;
+    margin-right: 10px;
+}
+
+.typing-word {
+    font-size: 32px;
+    font-weight: bold;
+    text-align: center;
+    padding: 20px;
+    margin: 20px 0;
+    background: #f5f5f5;
+    border-radius: 8px;
+    min-height: 50px;
+    display: block !important;
+    visibility: visible !important;
+}
+
+.typing-input-container {
+    text-align: center;
+    margin: 20px 0;
+}
+
+/* Fix student panel buttons */
+#startGameBtn, #startTypingBtn {
+    display: inline-block;
+    margin: 10px;
+    padding: 12px 24px;
+    font-size: 1.1em;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    visibility: visible !important;
+}
+
+/* Ensure student panel visibility */
+#studentPanel:not(.hidden) {
+    display: block !important;
+}
+
+/* Remove any conflicting hidden styles */
+#startGameBtn:not(.hidden),
+#startTypingBtn:not(.hidden) {
+    display: inline-block !important;
+    visibility: visible !important;
+}