Update static/styles.css

static/styles.css

@@ -7,83 +7,169 @@ body {
 }
 
 #game-container {
-    position: relative;
     width: 100%;
     max-width: 800px;
+    text-align: center;
 }
 
 #info {
-    margin-bottom: 20px;
     font-size: 18px;
-    text-align: center;
+    margin-bottom: 20px;
 }
 
 #coin {
     width: 200px;
     height: 200px;
     border-radius: 50%;
+    margin: 0 auto 20px;
+    cursor: pointer;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 72px;
-    cursor: pointer;
-    margin: 0 auto 20px;
+    color: #333;
+    background-color: #ffd700;
+    transition: transform 0.3s ease;
+}
+
+#coin:hover {
+    transform: scale(1.05);
 }
 
 #shop {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    width: 100%;
-    margin-top: 20px;
+    gap: 10px;
+    margin-bottom: 20px;
 }
 
 .shop-item {
+    position: relative;
+    width: 80px;
     text-align: center;
-    padding: 5px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
     cursor: pointer;
-    margin: 5px;
-    font-size: 12px;
 }
 
 .shop-coin {
-    width: 40px;
-    height: 40px;
+    width: 60px;
+    height: 60px;
     border-radius: 50%;
-    margin: 0 auto 5px;
+    margin: 0 auto;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 10px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
 }
 
-#generate-coin {
+.coin-name {
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+.coin-tooltip {
+    display: none;
+    position: absolute;
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 1;
+    width: 150px;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 100%;
+    font-size: 12px;
+    text-align: left;
+}
+
+.shop-item:hover .coin-tooltip {
     display: block;
-    margin: 20px auto 0;
+}
+
+#generate-coin {
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+#leaderboard {
+    margin-top: 20px;
+}
+
+#leaderboard table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+#leaderboard th, #leaderboard td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+
+#leaderboard th {
+    background-color: #f2f2f2;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 300px;
+    text-align: center;
+}
+
+#initials {
+    margin: 10px 0;
+    padding: 5px;
+    width: 50px;
+    text-align: center;
+    font-size: 18px;
+}
+
+#submit-score, #play-again {
+    margin-top: 10px;
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
 }
 
 #loading-overlay {
-    position: absolute;
+    display: none;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
-    display: none;
+    z-index: 1000;
     justify-content: center;
     align-items: center;
-    z-index: 1000;
 }
 
 .loading-message {
     background-color: white;
     padding: 20px;
     border-radius: 5px;
-    font-size: 18px;
 }