:root {
     --speaking-primary-bg: #f5f4ed;
     --speaking-secondary-bg: #ffc62f;
     --speaking-dark: #1e1e1e;
     --speaking-border-width: clamp(2px, 1vw, 4px);
     /* Fluid border thickness */
 }

 .three-speaking-overlay {
     position: fixed;
     inset: 0;
     /* Shorthand for top, left, right, bottom: 0 */
     background: linear-gradient(135deg, #ffebc4 0%, #ffebc4ad 100%);
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     padding: clamp(5px, 2vw, 20px);
     backdrop-filter: blur(10px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     /* Smooth scroll for iOS */
 }


 /* Container: Uses percentage width with a max limit */
 .three-speaking-container {
     background: var(--speaking-primary-bg);
     width: 100%;
     max-width: 1100px;
     margin: 10px auto;
     border-radius: 20px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     border: var(--speaking-border-width) solid var(--speaking-secondary-bg);
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .three-header {
     background: linear-gradient(45deg, #dfab46 40%, #dfb86d 40%, #dfab46 61%);
     padding: clamp(10px, 3vw, 25px);
     display: flex;
     justify-content: space-between;
     align-items: center;
 }


 .three-header h1 {
     font-size: 1.1rem;
     color: white;
     margin: 0;
     line-height: 1.2;
 }

 .three-stats-row {
     display: grid;
     grid-template-columns: 1fr;
     /* Single column for mobile */
     gap: 10px;
     padding: 15px;
 }

 .three-stat-card {
     background: var(--speaking-secondary-bg);
     padding: 15px;
     border-radius: 15px;
     text-align: center;
     border: 3px solid var(--speaking-dark);
 }

 .stat-score {
     font-size: 1.4rem;
     font-weight: 900
 }

 .stat-label {
     font-size: 1.0rem;
     text-transform: uppercase;
     font-weight: 550;
 }

 .three-activity-row {
     display: flex;
     flex-wrap: wrap;
     /* Allows cards to drop to next line */
     gap: 15px;
     padding: 15px;
 }

 .three-activity-card {
     background: var(--speaking-secondary-bg);
     border-radius: 20px;
     padding: 20px;
     text-align: center;
     cursor: pointer;
     border: 3px solid var(--speaking-dark);
     flex: 1 1 100%;
     /* Full width on mobile */
     transition: 0.3s;
 }

 .three-activity-card h2 {
     font-size: 1.1rem;
     margin-bottom: 10px;
 }

 /* Responsive Typography */
 .section-title,
 .part-title {
     color: var(--speaking-dark);
     font-size: 1.4rem;
     border: 4px solid var(--speaking-secondary-bg);
     padding: 15px;
     margin-bottom: 20px;
     text-align: center;
     font-weight: 900;
     background: #fff;
     border-radius: 15px;
 }

 .greetings-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 10px;
 }

 /* --- MEDIA QUERIES --- */

 /* Tablets & Small Laptops */
 @media (min-width: 768px) {
     .three-header h1 {
         font-size: 1.8rem;
     }

     .three-stats-row {
         grid-template-columns: repeat(3, 1fr);
     }

     .three-activity-card {
         flex: 1 1 calc(33% - 15px);
     }

     .section-title {
         font-size: 2rem;
     }
 }

 /* Large Desktops */
 @media (min-width: 1024px) {
     .three-stats-row {
         grid-template-columns: repeat(5, 1fr);
     }

     .three-activity-row {
         flex-wrap: nowrap;
     }
 }

 /* Circular Close Button Container */
.three-close-x {
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    border: 2px solid white;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Makes it a circle */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for color and rotation */
    padding: 0;
    line-height: 1;
    outline: none;
}

/* Hover Effect: Background changes and the whole button rotates */
.three-close-x:hover {
    background: #e74c3c; /* Red background on hover */
    border-color: #e74c3c;
    transform: rotate(90deg); /* The rotation effect */
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

/* Optional: Active state for a "pressed" feel */
.three-close-x:active {
    transform: rotate(90deg) scale(0.9);
}


 .three-activity-card:hover {
     transform: translateY(-5px);
 }


 .game-content {
     padding: 30px;
 }


 .sub-category-box {
     margin-bottom: 25px;
     background: rgba(255, 255, 255, 0.5);
     padding: 15px;
     border-radius: 15px;
 }

 .category-subtitle {
     font-size: 1.6rem;
     color: #e67e22;
     margin-bottom: 15px;
     border-left: 8px solid #e67e22;
     padding-left: 15px;
     font-weight: 800;
 }

 .greeting-item {
     background: #fdfcf7;
     border: 3px solid var(--speaking-secondary-bg);
     border-radius: 12px;
     cursor: pointer;
     font-weight: 800;
     padding: 20px;
     font-size: 1.2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
    
 }

 .mark-completed-div {
     background: #27ae60;
     color: white;
     padding: 15px 30px;
     border-radius: 15px;
     text-align: center;
     font-weight: 800;
     cursor: pointer;
     margin: 20px auto;
     max-width: 400px;
     border: 3px solid var(--speaking-dark);
     transition: 0.2s;
 }

 .mark-completed-div:hover {
     background: #2ecc71;
     transform: scale(1.05);
 }

 .word-drop-zone {
     background: white;
     min-height: 80px;
     border: 3px dashed var(--speaking-secondary-bg);
     border-radius: 20px;
     padding: 20px;
     display: flex;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
     margin: 20px 0;
 }

 .word-bank {
     display: flex;
     justify-content: center;
     gap: 10px;
     flex-wrap: wrap;
     margin-bottom: 30px;
 }

 .word-tile {
     background: var(--speaking-secondary-bg);
     padding: 10px 20px;
     border-radius: 10px;
     font-weight: bold;
     border: 2px solid var(--speaking-dark);
     cursor: pointer;
     box-shadow: 0 4px 0 #000;
 }

 .audio-prompt-box {
     background: #fff8e1;
     border: 3px solid var(--speaking-secondary-bg);
     padding: 20px;
     border-radius: 15px;
     cursor: pointer;
     text-align: center;
     margin-bottom: 25px;
     font-weight: 800;
 }

 .game-controls {
     display: flex;
     justify-content: center;
     gap: 15px;
 }

 .three-action-btn {
     padding: 12px 24px;
     border-radius: 12px;
     font-weight: bold;
     cursor: pointer;
     border: none;
     color: white;
     background: var(--speaking-dark);
 }

 .check-btn {
     background: #27ae60 !important;
 }

 .reset-btn {
     background: #e67e22 !important;
 }

 .undo-btn {
     background: #7f8c8d !important;
 }

 .intro-item {
     justify-content: space-between !important;
     text-align: left;
     background: white !important;
 }

 .intro-text {
     display: flex;
     flex-direction: column;
 }

 .intro-label {
     color: #e67e22;
     font-size: 1rem;
 }

 /* Circular Close Button Container */
.three-close-x {
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    border: 2px solid white;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%; /* Makes it a circle */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for color and rotation */
    padding: 0;
    line-height: 1;
    outline: none;
}

/* Hover Effect: Background changes and the whole button rotates */
.three-close-x:hover {
    background: #e74c3c; /* Red background on hover */
    border-color: #e74c3c;
    transform: rotate(90deg); /* The rotation effect */
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}

/* Optional: Active state for a "pressed" feel */
.three-close-x:active {
    transform: rotate(90deg) scale(0.9);
}

 .feedback-text {
     text-align: center;
     margin-top: 20px;
     font-weight: bold;
     font-size: 1.4rem;
 }

 .section-divider {
     border: 0;
     height: 3px;
     background: var(--speaking-secondary-bg);
     margin: 30px 0;
     opacity: 0.5;
 }


 .question-words-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
     padding: 10px;
 }

 .q-word-card {
     background: white;
     border: 4px solid var(--speaking-secondary-bg);
     border-radius: 20px;
     overflow: hidden;
 }

 .q-word-header {
     background: var(--speaking-secondary-bg);
     padding: 15px;
     font-weight: 900;
     text-align: center;
     cursor: pointer;
     font-size: 1.4rem;
 }

 .q-example-box {
     background: #fdfcf7;
     border: 2px dashed #e67e22;
     padding: 15px;
     border-radius: 12px;
     cursor: pointer;
     color: #e67e22;
     font-weight: 700;
     text-align: center;
 }


 .exercise-card {
     background: white;
     border: 4px solid #3498db;
     border-radius: 20px;
     padding: 30px;
     max-width: 600px;
     margin: 20px auto;
     text-align: center;
 }

 .opt-btn {
     background: #3498db;
     color: white;
     border: 3px solid #2980b9;
     padding: 12px 25px;
     font-size: 1.1rem;
     font-weight: 700;
     border-radius: 15px;
     cursor: pointer;
 }

 .phrase-img-box {
     width: 250px;
     height: 250px;
     margin: 0 auto 20px;
     border-radius: 20px;
     border: 5px solid var(--speaking-secondary-bg);
     overflow: hidden;
 }

 .phrase-img-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .self-intro-learn-box {
     background: #ffffff;
     border: 4px solid #e67e22;
     border-radius: 20px;
     padding: 25px;
     margin-bottom: 30px;
 }

 .intro-step {
     background: #fff5e6;
     border-left: 8px solid #e67e22;
     padding: 15px 20px;
     border-radius: 12px;
     margin-bottom: 10px;
     font-weight: 700;
 }

 .three-help-content {
     padding: 40px;
     max-width: 900px;
     margin: 0 auto;
 }

 .three-help-issue {
     background: white;
     border: 3px solid var(--speaking-dark);
     border-radius: 20px;
     padding: 30px;
     margin-bottom: 25px;
     display: flex;
     gap: 20px;
     align-items: flex-start;
 }

 .three-help-number {
     width: 50px;
     height: 50px;
     background: var(--speaking-secondary-bg);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     font-weight: 800;
     border: 3px solid var(--speaking-dark);
 }

 .three-back-btn {
     background: var(--speaking-dark);
     color: white;
     border: none;
     padding: 15px 40px;
     border-radius: 25px;
     font-weight: 700;
     cursor: pointer;
     display: block;
     margin: 20px auto;
 }

 .yes-btn {
     background: #27ae60 !important;
     border-color: #1e8449 !important;
 }

 .no-btn {
     background: #e74c3c !important;
     border-color: #c0392b !important;
 }

 .categories-wrapper {
     margin-bottom: 20px;
 }

 .game-controls {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 20px;
 }

 .q-word-body {
     padding: 20px;
 }

 .q-usage {
     font-size: 1.1rem;
     margin-bottom: 15px;
     color: #555;
    text-align: center;
 }

 .self-intro-list {
     max-width: 800px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 15px;
     
 }


 .three-speaking-toast {
     position: fixed;
     bottom: -100px;
     left: 50%;
     transform: translateX(-50%);
     background: linear-gradient(135deg, #ffc62f 0%, #dfab46 100%);
     color: #1e1e1e;
     padding: clamp(15px, 3vw, 20px) clamp(25px, 5vw, 35px);
     border-radius: clamp(12px, 2.5vw, 20px);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     z-index: 99999;
     min-width: clamp(250px, 40vw, 400px);
     max-width: 90vw;
     border: 3px solid #1e1e1e;
     font-family: 'Noto Sans Tamil', sans-serif;
     transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     opacity: 0;
 }

 .three-speaking-toast-show {
     bottom: clamp(20px, 4vw, 40px);
     opacity: 1;
 }

 .three-speaking-toast-content {
     display: flex;
     align-items: center;
     gap: clamp(12px, 2.5vw, 15px);
 }

 .three-speaking-toast-icon {
     width: clamp(35px, 6vw, 45px);
     height: clamp(35px, 6vw, 45px);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(18px, 3.5vw, 24px);
     font-weight: 800;
     flex-shrink: 0;
     background: rgba(255, 255, 255, 0.3);
     border: 2px solid #1e1e1e;
 }

 .three-speaking-toast-message {
     font-size: clamp(12px, 2.5vw, 16px);
     font-weight: 700;
     line-height: 1.5;
     text-align: left;
 }


 .three-speaking-toast-success {
     background: linear-gradient(135deg, #4cd964 0%, #2ecc71 100%);
     color: white;
 }

 .three-speaking-toast-success .three-speaking-toast-icon {
     background: rgba(255, 255, 255, 0.3);
     color: white;
     border-color: white;
 }

 .three-speaking-toast-error {
     background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
     color: white;
 }

 .three-speaking-toast-error .three-speaking-toast-icon {
     background: rgba(255, 255, 255, 0.3);
     color: white;
     border-color: white;
 }

 .three-speaking-toast-warning {
     background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
     color: #1e1e1e;
 }

 .three-speaking-toast-warning .three-speaking-toast-icon {
     background: rgba(30, 30, 30, 0.1);
     color: #1e1e1e;
     border-color: #1e1e1e;
 }

 .three-speaking-toast-info {
     background: linear-gradient(135deg, #ffc62f 0%, #dfab46 100%);
     color: #1e1e1e;
 }

 .three-speaking-toast-info .three-speaking-toast-icon {
     background: rgba(30, 30, 30, 0.1);
     color: #1e1e1e;
     border-color: #1e1e1e;
 }

 @media (max-width: 480px) {
     .three-speaking-toast {
         min-width: auto;
         width: calc(100% - 40px);
         left: 20px;
         transform: none;
     }

     .three-speaking-toast-show {
         bottom: 20px;
     }
 }