/* Base Styles & Fonts */
        body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background-color: #f8fafc;
          color: #1e293b;
          margin: 0;
          padding: 20px;
        }

        /* Button Container Formatting */
        .navigation-bar {
          text-align: center;
          margin: 20px auto;
          display: flex;
          justify-content: center;
          gap: 15px;
        }

        /* Button Styling */
        /* Card Level Audio TTS Action Button styling */
        .tts-btn {
          background-color: #f1f5f9 !important; /* Soft light background */
          color: #4f46e5 !important;            /* Text matching application base theme */
          border: 1px solid #cbd5e1 !important;
          font-size: 0.85rem !important;
          padding: 6px 14px !important;
          margin-top: 15px;
          border-radius: 20px !important;
          box-shadow: none !important;
          width: 90%;
        }

        .tts-btn:hover {
          background-color: #e2e8f0 !important;
          transform: scale(1.03) !important;
        }

        /* Micro adjustments to keep elements nicely separated on the card layout */
        .vocab-card {
          min-height: 280px; /* Forces equal height cards to keep grids tidy */
        }

        button {
          background-color: #4f46e5; /* Modern Purple/Blue tint */
          color: white;
          border: none;
          padding: 12px 24px;
          font-size: 1rem;
          font-weight: 600;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        button:hover {
          background-color: #4338ca;
          transform: translateY(-2px);
          box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15);
        }

        /* Secondary Menu Button styling */
        #backMenuBtn {
          background-color: #64748b; /* Slate Grey */
        }

        #backMenuBtn:hover {
          background-color: #475569;
        }

        /* Responsive Grid Layout */
        .vocab-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
          gap: 25px;
          max-width: 1200px;
          margin: 40px auto;
          padding: 0 10px;
        }

        /* Flashcard Styling */
        .vocab-card {
          background: white;
          border-radius: 16px;
          padding: 25px 15px;
          text-align: center;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
          border: 1px solid #e2e8f0;
          transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
        }

        .vocab-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
          border-color: #cbd5e1;
        }

        /* Card Media Elements */
        .vocab-card img {
          max-width: 110px;
          height: 90px;
          object-fit: contain;
          margin-bottom: 15px;
          filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
        }

        /* Typography Hierarchy */
        .vocab-card h3 {
          font-size: 1.8rem;
          color: #0f172a; /* Deep bold Korean characters */
          margin: 10px 0 5px 0;
          font-weight: 700;
          letter-spacing: -0.5px;
        }

        .sinhala-text {
          font-size: 1.1rem;
          color: #2563eb; /* Vibrant Blue for clarity reading Sinhala scripts */
          margin: 5px 0;
          font-weight: 500;
        }

        .english-text {
          font-size: 0.95rem;
          color: #64748b; /* Soft muted Grey for alternate definitions */
          margin: 5px 0 0 0;
        }

        /* Responsive Media Queries for Smartphone Optimization */
        @media (max-width: 480px) {
          .vocab-grid {
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 15px;
          }
          
          button {
            padding: 10px 16px;
            font-size: 0.9rem;
          }

          .vocab-card h3 {
            font-size: 1.5rem;
          }
        }