confitti

CSS/styles.css

@@ -251,3 +251,65 @@ body.dark-theme{
 .setting-page:hover{
   color: rgb(150, 141, 141)
 }
+* Definition Alert Styles */
+.definition-alert {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 20px;
+  border-radius: 12px;
+  max-width: 400px;
+  margin: 0 auto 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+.definition-alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+
+.win-definition {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  border-color: rgba(79, 172, 254, 0.5);
+}
+
+.lose-definition {
+  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  border-color: rgba(250, 112, 154, 0.5);
+}
+
+.definition-alert strong {
+  font-weight: 700;
+  font-size: 16px;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.definition-alert::before {
+  content: "💡 Click to dismiss";
+  position: absolute;
+  top: 5px;
+  right: 10px;
+  font-size: 10px;
+  opacity: 0.7;
+}
+
+/* Dark theme adjustments */
+.dark-theme .definition-alert {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .definition-alert {
+    max-width: 90%;
+    font-size: 13px;
+    padding: 15px;
+  }
+}