html, body {
    /* height: 100%; /* Remove fixed height */
    margin: 0;
    padding: 0;
    /* overflow: hidden; /* Allow body to scroll */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    /* display: flex; /* No longer forcing flex on body for fixed/scroll areas */
    /* flex-direction: column; */
}

.footer-links {
    text-align: center;
    margin-top: 1rem;
}

.body-wrapper {
    /* display: flex; /* No longer needed for this structure */
    /* flex-direction: column; */
    /* height: 100vh; /* Remove fixed height */
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px; /* Add some horizontal padding to the wrapper */
    box-sizing: border-box;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0;
}

.header-icon {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    flex: 1;
}

.header-center {
    justify-content: center;
}

.header-right {
    justify-content: flex-end;
    gap: 10px;
}

.header-icon:hover {
    background-color: #e0e0e0;
}

.header h1 {
    color: #2c3e50;
    margin: 0; /* Remove default margin */
    font-size: 1.8em;
}

.fixed-content-area {
    /* flex-grow: 1; /* No longer needed */
    display: flex;
    flex-direction: column;
    padding: 10px 0; /* Adjust padding, no horizontal needed if body-wrapper has it */
    /* overflow: hidden; /* No longer needed */
    gap: 10px;
    /* min-height: 0; /* No longer needed */
}

.game-and-controls-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}

.grid-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.grid-section {
    text-align: center;
    display: flex; /* To center grid-wrapper if grid-section is wider */
    justify-content: center; /* Center grid-wrapper */
    align-items: center; /* Center grid-wrapper */
}

#message-container {
    min-height: 40px; /* Reserve space for messages */
    width: 100%;
    max-width: 332px; /* Match grid width */
    text-align: center;
}


.grid-wrapper {
    position: relative;
    display: inline-block;
}

.word-grid {
    display: grid;
    /* Adjusted for responsiveness later, start with a base */
    grid-template-columns: repeat(5, clamp(40px, 12vw, 60px));
    grid-template-rows: repeat(5, clamp(40px, 12vw, 60px));
    gap: clamp(2px, 0.5vw, 3px);
    margin: 0 auto;
    background-color: #dee2e6;
    padding: clamp(5px, 1vw, 10px);
    border-radius: 8px;
    position: relative;
    /* Aspect ratio can help maintain squareness if desired */
    /* aspect-ratio: 1 / 1; */
    max-width: 332px; /* Corresponds to original 5*60 + gaps + padding */
    max-height: 332px;
}


.grid-cell {
    background-color: #ffffff;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.grid-cell:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.grid-cell.selected {
    outline: 2px solid #007bff;
    outline-offset: -2px;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.grid-cell.direction-indicator {
    background-color: #ebf6ff; /* A light blue, for example */
}

.grid-cell.correct {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.grid-cell.present {
    background-color: #ffc107;
    color: black;
    border-color: #ffc107;
}

.grid-cell.absent {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.grid-cell.invalid {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

.control-group {
    margin-bottom: 15px;
}
.control-group:last-child { /* Remove margin from last group in controls */
    margin-bottom: 0;
}


button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}
button:last-child { /* Remove bottom margin from last button in a group */
    margin-bottom: 0;
}


.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

#stats-new-game-btn {
    margin-top: 25px; /* Add space above the button */
}

.btn-success:hover {
    background-color: #1e7e34;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* Game stats are removed from the main view */

.scrollable-content-area {
    /* This area is now empty. Remove visual styles. */
    /* padding: 10px 0; */
    /* background-color: #e9ecef; */
    /* margin-top: 20px; */
    /* If it needs to take up zero space if empty: */
    padding: 0;
    margin: 0;
    height: 0; /* Or display: none; if it's guaranteed to be empty */
    overflow: hidden; /* Ensure no accidental space taken if somehow not empty */
}
.scrollable-content-area > div {
    margin-bottom: 10px; /* Reduced margin */
}
.scrollable-content-area > div:last-child {
    margin-bottom: 0;
}

/* No longer need .controls-section specific styles */

.message { /* General message styling, now used within .controls-section */
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em; /* Slightly smaller font for messages in controls */
    /* margin: 0; /* Remove any default margins if they were previously set for global messages */
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.info {
    background-color: #cce7ff;
    color: #004085;
    border: 1px solid #b8daff;
}

.legend-minimal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
    font-size: 12px;
    color: #666;
}

.legend-minimal .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-minimal .legend-color {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    display: inline-block;
}

body.dark-mode .legend-minimal {
    color: #ccc;
}

.instructions { /* This class is now inside the modal */
    background: #f0f2f5; /* Keep original styling for content */
    padding: 10px;
    border-radius: 8px;
    /* margin-bottom: 20px; /* No longer needed as it's in a modal */
    font-size: 14px;
    line-height: 1.5;
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    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 (shouldn't be for this content) */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.modal.active {
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* Auto margins for centering, though flex handles it */
    padding: 25px;
    border: 1px solid #888;
    border-radius: 8px;
    width: 80%;
    max-width: 500px; /* Max width for the modal content */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative; /* For positioning the close button */
}

.modal-content h2 {
    text-align: center;
    margin-top: 0;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
}

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

/* Dark mode for modal */
.stats-summary {
    text-align: center;
    margin: 20px 0;
}
.stat-final {
    margin-top: 15px;
}
.stat-final-number {
    font-size: 3em;
    font-weight: bold;
    color: #007bff;
}
.stat-final-label {
    font-size: 1.1em;
    color: #6c757d;
}
body.dark-mode .modal-content {
    background-color: #2c2c2c;
    border-color: #555;
    color: #e0e0e0; /* Ensure text inside modal is readable */
}
body.dark-mode .modal-content strong,
body.dark-mode .modal-content ul {
    color: #e0e0e0;
}
body.dark-mode .close-button {
    color: #ccc;
}
body.dark-mode .close-button:hover,
body.dark-mode .close-button:focus {
    color: #fff;
}


/* Settings Modal Styles */
.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.setting-item:last-child {
    border-bottom: none;
}
.setting-item label {
    font-weight: bold;
}
.setting-item select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Toggle Switch for Dark Mode */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider {
    background-color: #2196F3;
}
input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
    transform: translateX(26px);
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}

body.dark-mode .setting-item {
    border-bottom-color: #333;
}
body.dark-mode .setting-item select {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

/* .keyboard-hint styles are no longer needed as the element was removed */
/*
.keyboard-hint {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    margin-top: auto;
    padding-top: 10px;
}
*/

.grid-cell.permanent {
    background-color: #e0e0e0;
    color: #333;
    cursor: not-allowed;
}
.grid-cell.permanent.correct { 
    background-color: #28a745; 
    color: white;
    /* border-color still #28a745 from .correct */
}
.grid-cell.permanent:hover {
    border-color: #dee2e6;
    background-color: #e0e0e0; 
}

.grid-cell.locked {
    cursor: default; 
}
.grid-cell.permanent.locked, .grid-cell.correct.locked {
    cursor: default;
}

/* Dark Mode Styles (copied from your input, ensure they are placed after light mode defaults) */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}
body.dark-mode .body-wrapper {
    /* Potentially a slightly different background if body isn't fully covered */
}
body.dark-mode .header {
    background-color: #1e1e1e; /* Darker header background */
    border-bottom: 1px solid #333;
}
body.dark-mode .header h1 {
    color: #bb86fc;
}
body.dark-mode .header-icon:hover {
    background-color: #333;
}

body.dark-mode .fixed-content-area {
    /* background-color: #1a1a1a; /* Slightly different shade for fixed area if desired */
}
body.dark-mode .scrollable-content-area {
    background-color: #101010; /* Darker for scrollable */
}
body.dark-mode .scrollable-content-area > div {
    /* Dark mode for direct children if needed, e.g., borders */
}

body.dark-mode .instructions {
    background: #232323; /* Darker than fixed-content-area's default */
    color: #c0c0c0;
    border: 1px solid #383838;
}

body.dark-mode .word-grid {
    background-color: #2a2a2a;
}

body.dark-mode .grid-cell {
    background-color: #333333;
    border: 2px solid #444444;
    color: #e0e0e0;
}

body.dark-mode .grid-cell:hover {
    border-color: #bb86fc;
    background-color: #3a3a3a;
}

body.dark-mode .grid-cell.selected {
    outline: 2px solid #bb86fc;
    outline-offset: -2px;
    box-shadow: 0 0 5px rgba(187, 134, 252, 0.5);
}

body.dark-mode .grid-cell.direction-indicator {
    background-color: #2a2a3a; /* A subtle dark blue/purple */
}

body.dark-mode .grid-cell.correct {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

body.dark-mode .grid-cell.present {
    background-color: #ffc107;
    color: black;
    border-color: #ffc107;
}

body.dark-mode .grid-cell.absent {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

body.dark-mode .grid-cell.invalid {
    background-color: #dc3545;
    color: white;
    border-color: #dc3545;
}

body.dark-mode .grid-cell.permanent {
    background-color: #424242;
    color: #bdbdbd;
}
body.dark-mode .grid-cell.permanent:hover {
    border-color: #444444;
    background-color: #424242;
}
body.dark-mode .grid-cell.permanent.correct {
    background-color: #28a745;
    color: white;
}

/* No longer need .controls-section */

/* Game stats are removed from the main view */
body.dark-mode .stat-final-number {
    color: #bb86fc;
}
body.dark-mode .stat-final-label {
    color: #aaaaaa;
}

body.dark-mode .message.success {
    background-color: #1a3c23;
    color: #a7d7b4;
    border: 1px solid #285835;
}

body.dark-mode .message.error {
    background-color: #4d1f24;
    color: #f5c6cb;
    border: 1px solid #721c24;
}

body.dark-mode .message.info {
    background-color: #1c324f;
    color: #b8daff;
    border: 1px solid #004085;
}

/* No longer need .current-selection */

body.dark-mode .keyboard-hint {
    color: #aaaaaa;
}

body.dark-mode .btn-primary {
    background-color: #bb86fc;
    color: #121212;
}
body.dark-mode .btn-primary:hover {
    background-color: #a062f0;
}

body.dark-mode .btn-success {
    background-color: #03dac6;
    color: #121212;
}
body.dark-mode .btn-success:hover {
    background-color: #01bfa5;
}

body.dark-mode .btn-danger {
    background-color: #cf6679;
    color: #121212;
}
body.dark-mode .btn-danger:hover {
    background-color: #b04f5f;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* No longer need .legend-item */


/* Responsive adjustments */
@media (max-width: 900px) { /* Apply when screen is narrower than max-width of body-wrapper */
    .legend {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .legend-colors-group {
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 5px 15px; /* Row and column gap */
        justify-items: start;
    }

    .legend-controls-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .game-and-controls-wrapper {
        display: contents; /* This makes the wrapper's children act as direct children of the flex container */
    }

    /* Re-order the elements for mobile layout */
    /* .legend and .grid-section keep their default order (0) */
    #onscreen-keyboard-container { order: 1; }
    .game-stats { order: 2; }
    .controls-section { order: 3; }
    .game-and-controls-wrapper { /* Adjust max-width for stacked layout */
        max-width: 400px;
    }
    .grid-section {
        width: 100%;
        max-width: 400px;
        margin-bottom: 150px; /* Add space below grid to push other elements down */
    }
    .controls-section {
        width: 100%;
        max-width: 400px;
        margin-bottom: 15px;
    }
    .game-stats { /* Adjust max-width for stacked layout */
        max-width: 400px;
    }
    .controls-section {
        min-height: auto; /* Adjust height for stacked layout */
    }
}

@media (max-width: 768px) {
    .body-wrapper {
        padding: 0; /* Remove padding for smaller screens if body-wrapper had any */
    }
    .fixed-content-area {
        padding: 8px; /* Further reduce padding */
        gap: 8px; /* Further reduce gap */
    }
    .scrollable-content-area {
        padding: 8px;
    }

    .header h1 {
        font-size: 1.4em; /* Smaller header */
    }
    /* .header #dark-mode-toggle {
        font-size: 11px;
        padding: 5px 8px;
    } */


    /* .game-and-controls-wrapper remains column from 900px breakpoint */

    .grid-section, .controls-section {
         max-width: 100%; /* Allow full width within the column */
    }
    .controls-section {
        padding: 10px; /* Reduce padding */
    }

    .word-grid {
        /* Cell sizes already use clamp, this should adapt. */
        /* Ensure word-grid itself doesn't overflow its parent .grid-section */
    }

    .grid-cell {
        /* font-size clamp already handles this */
    }

    .legend { /* Already updated above, ensure it's compact */
        justify-content: center; /* Center items better */
        font-size: clamp(9px, 1.8vw, 10px); /* Even smaller */
        gap: 8px; /* Tighter gap */
        padding-bottom: 5px;
    }
    .legend-color {
        width: 12px; /* Even smaller */
        height: 12px;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Smaller base for stats items */
        gap: 8px;
    }
    .stat-item {
        padding: 8px;
    }

    #onscreen-keyboard-container {
        gap: clamp(2px, 0.5vh, 3px); /* Tighter rows */
        max-width: 100%;
        padding: 3px 0; /* Reduced padding */
        flex-shrink: 0; /* Keyboard should not shrink much */
    }

    .keyboard-row {
        gap: clamp(2px, 0.5vw, 3px); /* Tighter keys */
    }

    .keyboard-row .key {
        padding: clamp(6px, 1.8vh, 10px) clamp(4px, 1vw, 6px); /* More compact padding */
        font-size: clamp(11px, 2.2vh, 14px); /* Smaller font */
        min-width: clamp(25px, 6vw, 35px); /* Smaller min-width */
    }
}

@media (max-height: 700px) and (max-width: 768px) {
    .fixed-content-area {
        gap: 5px; /* Even tighter gap for very short screens */
        padding: 5px;
    }
     .game-and-controls-wrapper {
        /* This might need to take up more relative height */
        flex-grow: 1;
    }
    #onscreen-keyboard-container {
         gap: 2px;
         padding: 2px 0;
    }
    .keyboard-row .key {
        padding: 6px 4px;
        font-size: 11px;
    }
    .game-stats {
        padding: 5px;
    }
    .stats-grid {
        gap: 4px;
    }
    .stat-number {
        font-size: clamp(14px, 3vw, 18px);
    }
    .stat-label {
        font-size: clamp(8px, 1.8vw, 10px);
    }
    .legend {
        font-size: 9px;
        gap: 5px;
    }
    .legend-color {
        width: 10px;
        height: 10px;
    }
}


    /* On-screen Keyboard Styles */
#onscreen-keyboard-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(3px, 1vh, 5px);
    width: 100%;
    max-width: 480px; /* Slightly reduced max-width */
    margin-left: auto;
    margin-right: auto;
    padding: 5px 0;
    flex-shrink: 0; /* Ensure keyboard doesn't get overly squished by default */
    /* flex-grow: 0; /* Default, does not grow */
    /* flex-basis: auto; /* Default, size based on content */
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: clamp(3px, 0.8vw, 5px); /* Responsive gap based on viewport width */
    width: 100%;
}

.keyboard-row .key {
    padding: clamp(10px, 1.8vh, 12px) clamp(5px, 1.2vw, 8px); /* Adjusted responsive padding */
    font-size: clamp(14px, 2.2vw, 16px); /* Adjusted responsive font size, prioritizing vw */
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f9fa;
    color: #333;
    cursor: pointer;
    flex-grow: 0; /* Do not allow regular keys to grow */
    text-align: center;
    width: clamp(35px, 8vw, 45px); /* Fixed width for regular keys */
    margin-bottom: 0;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.keyboard-row .key:hover {
    background-color: #e9ecef;
}

.keyboard-row .key:active {
    background-color: #ced4da;
}

.keyboard-row .special-key {
    flex-grow: 0; /* Do not allow special keys to grow beyond their defined width */
width: clamp(55px, 12vw, 70px); /* Fixed, wider width for special keys */
    background-color: #adb5bd;
    color: white;
}
.keyboard-row .special-key:hover {
    background-color: #9fa8b0;
}


    /* Dark Mode for Keyboard */
body.dark-mode #onscreen-keyboard-container {
    /* Container styles are fine */
}

body.dark-mode .keyboard-row .key {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
}

body.dark-mode .keyboard-row .key:hover {
    background-color: #555;
}

body.dark-mode .keyboard-row .key:active {
    background-color: #666;
}

body.dark-mode .keyboard-row .special-key {
    background-color: #666;
    color: #e0e0e0;
    border-color: #777;
}
body.dark-mode .keyboard-row .special-key:hover {
    background-color: #777;
}

/* Keyboard Key Coloring */
.keyboard-row .key.correct {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.keyboard-row .key.present {
    background-color: #ffc107;
    color: black;
    border-color: #ffc107;
}

.keyboard-row .key.absent {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

#leaderboard-container {
    margin-top: 20px;
    width: 100%;
}

#histogram-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.histogram-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.histogram-label {
    flex-basis: 30px;
    text-align: right;
    font-weight: bold;
}

.histogram-bar-container {
    flex-grow: 1;
    /* background-color: #e9ecef; */ /* Removed to make the track invisible */
    border-radius: 4px;
}

.histogram-bar {
    background-color: #007bff;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    padding-left: 5px;
    min-width: 20px; /* Ensure even small percentages are visible */
}

.histogram-player-count {
    font-size: 12px;
    font-weight: bold;
}

.histogram-row.player-score .histogram-bar {
    background-color: #28a745; /* Highlight player's score with green */
}

.histogram-separator {
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

body.dark-mode .histogram-bar-container {
    background-color: #333;
}

body.dark-mode .histogram-bar {
    background-color: #bb86fc;
    color: #121212;
}

body.dark-mode .histogram-row.player-score .histogram-bar {
    background-color: #03dac6;
}

/* Share Modal Styles */
.share-link-container {
    display: flex;
    margin-top: 15px;
}

#share-link-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    border-right: none;
    font-size: 14px;
    user-select: none;
    overflow-x: auto;
    white-space: nowrap;
    background-color: #fff; /* Explicitly set background */
    color: #333; /* Explicitly set text color */
}

#copy-share-link-btn {
    padding: 8px 15px;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 14px;
    width: auto; /* override default button width */
    margin-bottom: 0; /* override default button margin */
    flex-shrink: 0; /* Prevent button from shrinking */
}

#copy-share-link-btn:hover {
    background-color: #0056b3;
}

body.dark-mode #share-link-input {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode #copy-share-link-btn {
    background-color: #bb86fc;
    border-color: #bb86fc;
    color: #121212;
}

body.dark-mode #copy-share-link-btn:hover {
    background-color: #a062f0;
}

body.dark-mode .keyboard-row .key.correct {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

body.dark-mode .keyboard-row .key.present {
    background-color: #ffc107;
    color: black;
    border-color: #ffc107;
}

body.dark-mode .keyboard-row .key.absent {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}
/* =================================
   Static Page Styles
   ================================= */

.static-page-container {
    position: relative; /* For positioning the close button */
    padding: 20px 30px;
    max-width: 800px;
    margin: 40px auto;
    background-color: #f9f9f9;
    color: #333;
    border-radius: 8px;
    line-height: 1.6;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dark-mode .static-page-container {
    background-color: #2c2c2c;
    color: #f1f1f1;
}

.static-page-container h1, .static-page-container h2, .static-page-container h3 {
    color: #1a1a1a;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-top: 2em;
}

.dark-mode .static-page-container h1, .dark-mode .static-page-container h2, .dark-mode .static-page-container h3 {
    color: #fff;
    border-bottom-color: #555;
}

.static-page-container ul {
    padding-left: 20px;
}

/* This is the corrected link color */
.static-page-container a {
    color: #007bff;
    text-decoration: none;
}
.static-page-container a:hover {
    text-decoration: underline;
}

/* Make sure the close button is not affected by the general 'a' tag rule */
.static-page-container a.close-button-static {
    color: #000000;
    text-decoration: none;
}
.static-page-container a.close-button-static:hover {
    text-decoration: none;
}

/* Corrected link color for dark mode */
.dark-mode .static-page-container a {
    color: #8ab4f8; /* A light, accessible blue for dark backgrounds */
}
.dark-mode .static-page-container a:hover {
    text-decoration: underline;
}

.dark-mode .static-page-container a.close-button-static {
    color: #ccc;
}
 .dark-mode .static-page-container a.close-button-static:hover {
    color: #fff;
}

.close-button-static {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-button-bottom-container {
    text-align: center;
    margin-top: 30px;
}

.btn-close-static {
    display: inline-block;
    padding: 12px 25px;
    background-color: #6c757d;
    color: white !important; /* Use important to override the general 'a' color */
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.btn-close-static:hover {
    background-color: #5a6268;
    text-decoration: none;
}

.dark-mode .btn-close-static {
    background-color: #6c757d;
    color: #e0e0e0 !important; /* Use important to override the general 'a' color */
}

.dark-mode .btn-close-static:hover {
    background-color: #5a6268;
}

/* =================================
   Cookie Consent Banner
   ================================= */

#cookie-consent-banner {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    z-index: 2000;
    text-align: center;
    font-size: 14px;
}

#cookie-consent-banner p {
    margin: 0 0 10px 0;
}

#cookie-consent-banner a {
    color: #bb86fc;
    text-decoration: underline;
}

.cookie-consent-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

#cookie-consent-banner button {
    width: auto;
    padding: 8px 20px;
    font-size: 14px;
    margin-bottom: 0;
    cursor: pointer;
    border: 1px solid white;
    border-radius: 4px;
}

#cookie-accept-btn {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

#cookie-reject-btn {
    background-color: transparent;
    color: white;
    border-color: white;
}

body.dark-mode #cookie-consent-banner {
    background-color: #1e1e1e;
    border-top: 1px solid #333;
}