Update index.html

index.html

@@ -181,7 +181,7 @@
         }
         .definitions-board {
             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            padding: 20px 0;
+            padding: 20px 0 150px 0;
         }
         .card {
             height: 80px;
@@ -228,6 +228,7 @@
             transform: rotateY(180deg);
             border: 2px solid #001a38;
             color: white;
+            overflow: hidden;
         }
         .card-back .content {
             color: white;
@@ -239,7 +240,6 @@
         .card-back.definition {
             font-size: 0.8rem;
             line-height: 1.4;
-            overflow-y: auto;
         }
         .card.matched .card-inner {
             transform: rotateY(180deg);
@@ -259,12 +259,22 @@
             position: relative;
         }
         .definitions-board .card.selected .card-inner {
-            transform: rotateY(180deg) scale(1.4);
+            transform: rotateY(180deg);
             transition: transform 0.3s ease;
         }
         .definitions-board .card.selected .card-back {
             box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 193, 7, 0.6);
-            font-size: 0.95rem;
+            font-size: 1.05rem;
+            width: 340px;
+            height: auto;
+            min-height: 110px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            transform: rotateY(180deg);
+            overflow: visible;
+            padding: 20px;
+            line-height: 1.5;
         }
         /* Also enlarge term cards slightly when selected */
         .terms-board .card.selected {
@@ -324,6 +334,11 @@
             .card-back.definition {
                 font-size: 0.75rem;
             }
+            .definitions-board .card.selected .card-back {
+                width: 100%;
+                min-width: unset;
+                font-size: 0.95rem;
+            }
         }
     </style>
 </head>