body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

#text-to-type-container {
    border: 1px solid #ccc;
    padding: 20px;

    margin-top: 30px; /* New: Explicit top margin */
    margin-bottom: 30px; /* Existing */
    margin-left: auto; /* Existing */
    margin-right: auto; /* Existing */

    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 90%; /* Keeping width relative for responsiveness */

    /* Updated dimensions */
    max-width: 1000px;
    max-height: 300px; /* Increased from 250px */

    overflow-y: auto;
    box-sizing: border-box;
}

#text-to-type {
    font-size: 24px;
    line-height: 38px; /* This defines the spacing for our lines */

    padding-top: 0; /* Removed top padding to simplify first-line alignment */

    background-image: linear-gradient(to bottom,
        transparent 28px,  /* Transparent until 28px */
        #c0c0c0 28px,      /* Line color starts (silver - trying a different shade) */
        #c0c0c0 29px,      /* Line is 1px thick */
        transparent 29px   /* Transparent again until the end of the 38px block */
    );
    background-size: 100% 38px; /* Repeat every 38px vertically */
    background-attachment: local;
    background-origin: content-box; /* Ensure this is present */

    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
    min-height: 100%;
    color: #333;
}

#text-to-type span {
    display: inline-block;
    padding: 0 1px;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
    vertical-align: baseline; /* Crucial for text sitting on the line */
}

#text-to-type span.placeholder {
    color: #555;
}

/* The duplicated rule below will be removed by this replacement,
   as the search block includes the first #text-to-type span rule
   and this replacement provides only one. */
}

span.newline-char {
    display: block; /* Force it to take full width and break line */
    width: 100%;    /* Explicitly take full width */
    height: 38px;   /* Match the parent's line-height to occupy one line of the paper */
    position: relative; /* For positioning the ::before pseudo-element */
    /* Keeping these to ensure the original \n doesn't render if display:block isn't enough */
    font-size: 0;
    color: transparent;
}

span.newline-char::before {
    content: "↵";
    font-size: 22px;
    color: #6c757d;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 2px; /* Small padding from the very edge */
    line-height: normal;
}

#text-to-type span.current-letter-text {
    background-color: #e0e0e0;
    border-bottom: 2px solid #007bff;
}

span.newline-char.current-letter-text {
    /* The background from .current-letter-text will apply to the block span. */
    /* No special background needed here unless to override the default .current-letter-text */
}

span.newline-char.current-letter-text::before {
    color: #007bff; /* Make the symbol itself blue when it's current */
    font-weight: bold;
}

#virtual-keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Increased from 5px for row spacing */
    padding: 15px; /* Increased from 10px */
    background-color: #d1d1d1;
    border-radius: 5px;
    width: 80%; /* This might be fine, or increase to 90% like text-area */
    max-width: 1000px; /* Increased from 700px, to match text area */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#virtual-keyboard .keyboard-row {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 4px; /* Increased from 2px for key spacing in a row */
}

#virtual-keyboard .key {
    /* background-color: #f9f9f9; /* Default background removed to allow zone colors to show */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0;
    height: 48px; /* Increased from 40px */
    line-height: 48px; /* Match new height */
    text-align: center;
    font-size: 18px; /* Increased from 16px */
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-grow: 1;
    flex-basis: 0;
    min-width: 35px; /* Increased from 30px */
    margin: 0; /* Rely on gap for spacing */
    transition: background-color 0.2s, box-shadow 0.2s;
    cursor: default;
}

/* Sizing classes */
#virtual-keyboard .key.key-standard { flex-grow: 1; }
#virtual-keyboard .key.key-backspace { flex-grow: 2; }
#virtual-keyboard .key.key-tab { flex-grow: 1.5; }
#virtual-keyboard .key.key-capslock { flex-grow: 1.75; }
#virtual-keyboard .key.key-enter { flex-grow: 2.25; }
#virtual-keyboard .key.key-shift { flex-grow: 2.5; }
#virtual-keyboard .key.key-modifier { flex-grow: 1.25; } /* Ctrl, Alt */
#virtual-keyboard .key.key-space { flex-grow: 8; }

/* Visual style for special character keys (non-letters/numbers symbols) */
#virtual-keyboard .key.special-visual {
   /* font-weight: normal; */
   /* background-color for special-visual is removed as zones will color it */
}

/* Finger Zone Colors */
.zone-l-pinky { background-color: #FFDDC1; } /* Light Orange/Peach */
.zone-l-ring { background-color: #FFFFE0; } /* Light Yellow */
.zone-l-middle { background-color: #D0FFD0; } /* Light Green */
.zone-l-index { background-color: #ADD8E6; } /* Light Blue */
.zone-l-index-far { background-color: #B0C4DE; } /* Light Steel Blue */

.zone-r-index-far { background-color: #B0C4DE; } /* Light Steel Blue */
.zone-r-index { background-color: #ADD8E6; } /* Light Blue */
.zone-r-middle { background-color: #D0FFD0; } /* Light Green */
.zone-r-ring { background-color: #FFFFE0; } /* Light Yellow */
.zone-r-pinky { background-color: #FFDDC1; } /* Light Orange/Peach */

.zone-thumb { background-color: #E0E0E0; } /* Light Grey for Space */

#virtual-keyboard .key.active {
    background-color: #007bff !important;
    color: white !important;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

/* Adjust padding/font for keys if text doesn't fit well after sizing */
#virtual-keyboard .key.key-capslock,
#virtual-keyboard .key.key-backspace,
#virtual-keyboard .key.key-enter,
#virtual-keyboard .key.key-shift,
#virtual-keyboard .key.key-tab,
#virtual-keyboard .key.key-modifier {
    font-size: 15px; /* Increased from 13px, but kept smaller than base key font */
}

.correct-letter {
    color: #28a745;
}

.selected-letter {
    background-color: #d4edda;
}

.incorrect-letter-flash {
    color: #dc3545 !important;
    background-color: #f8d7da !important;
    animation: flash 0.3s;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

#virtual-keyboard .key.key-incorrect-flash {
    background-color: #dc3545 !important;
    color: white !important;
    animation: subtle-shake 0.3s;
}

/* Optional subtle shake animation */
@keyframes subtle-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

#controls {
    text-align: center;
    margin-bottom: 15px;

    /* New for alignment consistency */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px; /* Add some horizontal padding so buttons aren't at screen edge */
    box-sizing: border-box; /* If padding is added */
}

#customTextBtn {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}
#customTextBtn:hover {
    background-color: #0056b3;
}

.modal {
    /* display: none; /* Hidden by default - initial display set in HTML */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 600px; /* Max width */
    border-radius: 8px;
    text-align: center;
    position: relative; /* For positioning close button */
}

.close-button {
    color: #aaa;
    position: absolute; /* Position relative to modal-content */
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#customTextArea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 95%; /* Ensure it fits well within padding */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#submitCustomTextBtn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #28a745; /* Green */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#submitCustomTextBtn:hover {
    background-color: #218838;
}

#saveTextBtn {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    background-color: #17a2b8; /* Info blue/teal */
    color: white;
    border: none;
    border-radius: 5px;
    margin-left: 10px; /* Space from the other button */
    transition: background-color 0.2s;
}
#saveTextBtn:hover {
    background-color: #138496;
}

#statsDisplay {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    align-items: center;
    width: 90%;
    max-width: 600px; /* Or adjust to fit well */
    margin: 15px auto 20px auto; /* Spacing around it */
    padding: 10px 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.stat-item {
    font-size: 1.1em; /* Slightly larger font for stats */
    color: #343a40;
    padding: 5px 10px;
}

#wpmDisplay { font-weight: bold; }
#accuracyDisplay { font-weight: bold; }
#kpmDisplay { font-weight: bold; }


#savedTextsSection {
    width: 90%;
    max-width: 1000px;
    margin-top: 250px; /* Significantly increased from 120px */
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;

    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#savedTextsSection h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    color: #495057;
}

#savedTextsContainer {
    display: flex; /* Arrange cards in a row, wrap if needed */
    flex-wrap: wrap;
    gap: 15px; /* Spacing between cards */
    justify-content: center; /* Center cards if they don't fill the row */
}

#noSavedTextsMsg {
    width: 100%;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

.saved-text-card {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    padding: 15px;
    width: calc(33.333% - 20px); /* Example for 3 cards per row, considers 15px gap. (15*2/3 = 10 per side) */
    min-width: 200px; /* Minimum width for smaller screens / fewer cards */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out;
    font-size: 0.9em;
    line-height: 1.4;
    position: relative; /* For positioning delete button */
    overflow-wrap: break-word; /* Break long words in snippet */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.saved-text-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.delete-card-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: transparent;
    border: none;
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1; /* Ensure consistent height */
}
.delete-card-btn:hover {
    color: #dc3545; /* Red */
}