body{background: #C0E1D2;}
.lesson-container { font-family: 'Segoe UI', sans-serif; text-align: center; max-width: 600px; margin: auto; padding: 20px; }
.display-area { background: #f0f4f8; padding: 30px; border-radius: 15px; margin-bottom: 20px; }
#english-input { font-size: 24px; padding: 10px; width: 80%; text-align: center; border: 2px solid #ccc; border-radius: 8px; margin-top: 10px; }

/* Keyboard Layout */
.keyboard-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; background: #eee; border-radius: 10px; }
.key { padding: 15px 20px; background: white; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; font-weight: bold; min-width: 45px; transition: 0.2s; }
.key:active { background: #007bff; color: white; transform: translateY(2px); }
.key.wide { min-width: 100px; background: #ff4444; color: white; }

.hidden { display: none; }
/*++++++Keyboard++++++++++++++++++++++++++++++++++*/
.physical-keyboard {
  background: #333;
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
}
/*.kb-row { display: flex; margin-bottom: 8px; justify-content: center; }
.row-indent-1 { padding-left: 30px; } /* Mimics row staggering 
.row-indent-2 { padding-left: 50px; }*/

.key {
  background: #fdfdfd;
  border-radius: 5px;
  padding: 15px;
  margin: 0 4px;
  width: 45px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px #bbb; /* The "raised" effect */
  transition: all 0.1s;
}

.key:active, .key.pressed {
  box-shadow: 0 1px #bbb;
  transform: translateY(3px); /* "Pressing" the key down */
  background: #e0e0e0;
}*/

/*.utility-key { background: #d0d0d0; min-width: 80px; }*/
.space-key { min-width: 300px; }
/*.kb-row { display: flex; justify-content: center; margin-bottom: 5px; }
/* Standard Keyboard Staggering */
.row-1 { padding-left: 20px; } 
.row-2 { padding-left: 40px; }

.key { 
    min-width: 40px; height: 50px; margin: 2px; 
    border-radius: 6px; border: 1px solid #ccc;
    background: #fff; cursor: pointer; font-size: 18px;
}*/
/* below is big keys */
/*.kb-row {
    display: flex;
    justify-content: center;
    width: 100%;       /* Ensure the row fills the container */
    max-width: 100%;   /* Prevent overflow */
    box-sizing: border-box; /* Includes padding in width */
    margin-bottom: 5px;
}

.key {
    flex: 1;           /* Buttons grow/shrink to share space */
    min-width: 0;      /* Crucial: Allows buttons to shrink smaller than content */
    max-width: 45px;   /* Prevents them from getting too big on desktop */
    height: 50px;
    margin: 2px;
    font-size: 16px;   /* Smaller font for mobile compatibility */
    /* ... your other styles ... */
}*/
.kb-row {
    display: flex;
    justify-content: center;
    width: 100%;       /* Ensure the row fills the container */
    max-width: 100%;   /* Prevent overflow */
    box-sizing: border-box; /* Includes padding in width */
    margin-bottom: 5px;
}

.key {
    flex: 1;           /* Buttons grow/shrink to share space */
    min-width: 0;      /* Crucial: Allows buttons to shrink smaller than content */
    max-width: 45px;   /* Prevents them from getting too big on desktop */
    height: 50px;
    margin: 2px;
    font-size: 16px;   /* Smaller font for mobile compatibility */
    /* ... your other styles ... */
}


.utility-key { background: #e0e0e0; padding: 0 15px;flex:2; max-width:80px; }
.key:active { background: #bbb; transform: translateY(2px);flex:8; max-width:300px; }

/* Targeted styling for the space key */
.key.space-bar {
    width: 350px; /* Adjust to match your keyboard's total width */
    max-width: 80%; /* Responsive safeguard */
    background: #fdfdfd;
    color: transparent; /* Makes it look like a blank physical key */
    position: relative;
}

/* Optional: Add a subtle 'hollow' or symbol if you want it visible */
.key.space-bar::after {
    content: "__________"; 
    color: #ccc;
    font-size: 10px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Ensure the row containing the space bar is centered */
.row-3 {
    justify-content: center;
    margin-top: 10px;
}
/* Ensure this matches the JS string exactly */
/* Better way to hide initially */
#next-btn {
    display: none; /* Hide completely */
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding: 5px 8px;
    background-color: cromson;
}

/* Better way to show */
#next-btn {
    display: none; /* Keep it hidden by default */
}

#next-btn.show-suit {
    display: block !important; /* Only show when the 'Clean Suit' class is added */
}
/*#progress-meter {
    display: inline-block;    /* Shrinks the box to fit the text */
    margin: 10px auto;        /* Centers it if the parent is a block */
    padding: 8px 15px;
    background: #f0f4f8;      /* Optional: makes it look like a little pill */
    border-radius: 20px;
    border: 1px solid #ddd;
}*/
#progress-meter {
    max-width: 200px;         /* Prevents it from broadening to full screen */
    margin-left: auto;        /* Centers the block */
    margin-right: auto;
}


@media (max-width: 400px) {
    .key {
        padding: 10px 5px;
        font-size: 14px;
        margin: 1px;
    }
}
.success-buttons {
    display: flex;
    flex-direction: row;     /* Side-by-side on desktop */
    flex-wrap: wrap;         /* Allows wrapping on mobile */
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}
.success-btn {
    width: 100%;           /* Full width on mobile for easier tapping */
    max-width: 280px;      /* Prevents them from getting too huge */
    padding: 15px 20px;    /* Larger hit area for thumbs */
    font-size: 18px;
    white-space: nowrap;   /* Prevents text from breaking into two lines */
    box-sizing: border-box; /* Includes padding in width calculation */
}
.btn-grey, .btn-green {
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none; /* Removes the underline from the link */
    display: inline-block;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.btn-grey { background: #6c757d; color: white; }
.btn-green { background: #4CAF50; color: white; }
	#nextLessonBtn {
		  padding: 12px 24px;
		  font-size: 16px;
		  background-color: #28a745; /* Green for celebration */
		  color: white;
		  border: none;
		  border-radius: 8px;
		  cursor: pointer;
		  transition: background-color 0.3s ease;
		}

		#nextLessonBtn:hover {
		  background-color: #218838;
		}

/* Mobile-specific: Stack buttons vertically */
@media (max-width: 480px) {
    .success-buttons {
        flex-direction: column; 
        align-items: center;
    }
}