Update app.py

app.py

@@ -111,13 +111,33 @@ def reset_current_game():
 CSS = """
 body, .gradio-container {
     background: #fff0f5 !important;
-    padding: 1rem;
+    padding: 1rem 1.5rem;
     box-sizing: border-box;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #5b021f;
+}
+
+/* Heading and subtext */
+h1 {
+    font-size: clamp(1.8rem, 5vw, 2.5rem);
+    color: #db2777;
+    margin-bottom: 0.2rem;
+    text-align: center;
+    font-weight: 700;
+    user-select: none;
+}
+
+.subtext {
+    font-size: clamp(1rem, 3vw, 1.1rem);
+    color: #9d174d;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    user-select: none;
 }
 
 /* Board container: perfect square, responsive */
@@ -137,7 +157,7 @@ body, .gradio-container {
 .game-btn {
     width: 100%;
     height: 100%;
-    font-size: 3.5rem !important;
+    font-size: clamp(2rem, 6vw, 3.5rem) !important;
     border-radius: 12px !important;
     background: #fff0f5 !important;
     border: 2px solid #f9a8d4 !important;
@@ -157,7 +177,7 @@ body, .gradio-container {
 .neat-button {
     padding: 12px 16px;
     border-radius: 8px;
-    font-size: 1rem;
+    font-size: clamp(0.9rem, 3vw, 1.1rem);
     margin: 6px 0;
     background: #fce7f3;
     border: 1px solid #f472b6;
@@ -165,6 +185,7 @@ body, .gradio-container {
     font-weight: 600;
     width: 100%;
     box-sizing: border-box;
+    user-select: none;
 }
 .neat-button:hover {
     background: #f9a8d4;
@@ -174,14 +195,22 @@ body, .gradio-container {
 
 /* Status */
 #status {
-    font-size: 1.2rem;
+    font-size: clamp(1rem, 4vw, 1.2rem);
     font-weight: bold;
     color: #db2777;
     text-align: center;
     margin: 1rem 0;
+    user-select: none;
+}
+
+/* Player legend text */
+.player-legend {
+    font-size: clamp(0.85rem, 3vw, 1rem);
+    color: #831843;
+    margin-top: 0.5rem;
+    user-select: none;
 }
 
-/* Responsive adjustments */
 @media (max-width: 768px) {
     #board-container {
         width: 90vw;
@@ -191,34 +220,21 @@ body, .gradio-container {
         gap: 8px;
     }
     .game-btn {
-        font-size: 2.5rem !important;
+        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
     }
     .neat-button {
-        font-size: 0.95rem;
+        font-size: clamp(0.85rem, 4vw, 1rem);
     }
     #status {
-        font-size: 1rem;
-    }
-}
-
-@media (min-width: 1200px) {
-    #board-container {
-        width: 480px;
-        height: 480px;
-        max-width: 600px;
-        max-height: 600px;
-        gap: 16px;
-    }
-    .game-btn {
-        font-size: 4rem !important;
+        font-size: clamp(0.95rem, 4vw, 1.1rem);
     }
 }
 """
 
 with gr.Blocks(title="Tic Tac Toe", css=CSS) as demo:
     gr.Markdown("""
-    <h1 style='text-align:center; font-size: 2.5rem; color:#db2777;'>💗 TIC TAC TOE 💗 - By Shafaq Mandha</h1>
-    <p style='text-align:center; font-size: 1rem; color:#9d174d;'>Play solo or with a friend — may the best player win!</p>
+    <h1>💗 TIC TAC TOE 💗 - By Shafaq Mandha</h1>
+    <p class="subtext">Play solo or with a friend — may the best player win!</p>
     """)
 
     with gr.Row():
@@ -229,7 +245,7 @@ with gr.Blocks(title="Tic Tac Toe", css=CSS) as demo:
             reset_btn = gr.Button("🔄 Reset Game", elem_classes=["neat-button"])
 
             gr.Markdown("""
-            <div style="font-size: 0.9rem; color: #831843;">
+            <div class="player-legend">
                 <ul>
                     <li><strong>Player 1:</strong> ❌</li>
                     <li><strong>Player 2 / Computer:</strong> ⭕</li>