body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 95%;
    max-width: 1200px;
}

h1, h2 {
    color: #333;
}

.crossword-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping if items don't fit horizontally */
    gap: 30px; /* Space between grid and clues */
    margin-top: 20px;
    justify-content: center; /* Center items horizontally */
    align-items: flex-start; /* Align items to the start of the cross axis */
    position: relative;
    /* Removed margin-right: 370px; */
    flex-direction: column; /* Arrange grid and clues vertically */
}

.crossword-grid {
    display: grid;
    border: 1px solid #ccc;
    background-color: #fff;
    /* Grid template columns and rows will be set by JS based on XML */
    position: relative; /* Context for absolute positioning of image */
    z-index: 10; 
}

.crossword-grid .cell {
    width: 35px; /* Adjust cell size as needed */
    height: 35px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box;
    position: relative; /* For z-index on input */
    z-index: 10; /* Ensure cells are above the image's z-index */
}

.crossword-grid .cell.black {
    background-color: #000;
    border: none;
    z-index: 5; /* Black cells can be behind the image if image z-index is higher */
}

.crossword-grid .cell input {
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background-color: transparent;
    outline: none;
    caret-color: #333;
    z-index: 20; /* Ensure inputs are above cells and image */
    position: relative; /* Often required for z-index to work */
}

.crossword-grid .cell.active {
    background-color: #ffff99; /* Highlight active cell */
}

.crossword-grid .cell .number {
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: 9px;
    color: #666;
    line-height: 1;
    z-index: 15; /* Above image, below input */
}

/* Image styling for placement within the grid */
#banksy-image {
    position: absolute; /* Changed to absolute positioning */
    /* top, left, width, height will be set by JavaScript */
    object-fit: cover; /* Adjust as needed: 'contain', 'cover' */
    opacity: 0.5; /* Make it semi-transparent */
    z-index: 15; /* Place it above cells (z-index 10) but below inputs (z-index 20) */
    pointer-events: none; /* Ensure it doesn't block clicks on cells */
}

.clues-section {
    /* REMOVED: position: fixed;, top, right, z-index */
    position: relative; /* Back to normal flow */
    width: 100%; /* Take full width of crossword-layout */
    max-width: 600px; /* Limit max width for readability, adjust as needed */
    height: 150px; /* Smaller fixed height for the window */
    margin-top: 30px; /* Space between grid and clues */
    overflow-y: auto; /* Keep scrollbar */
    background-color: #f9f9f9; /* Re-apply background */
    border: 1px solid #ccc; /* Re-apply border */
    padding: 15px; /* Re-apply padding */
    border-radius: 5px; /* Keep border-radius */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* Keep shadow */
    text-align: left; /* Align text within clues section */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Re-introduce flex properties if needed for inner alignment, but .clues will handle text-align */
}

.clues {
    /* Removed redundant styles, now inherited or handled by .clues-section */
    width: 100%; /* Ensure it fills parent */
    /* text-align: left; is already fine */
}

.clues h2 {
    /* Removed as h2 is not directly in the HTML anymore */
    /* But if re-introduced, it would keep these styles */
    margin-top: 0;
    color: #555;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* New styles for dynamically inserted clues */
#active-clues-display {
    min-height: 50px; /* Ensure some height even if no clue */
    padding: 5px;
    font-size: 1.1em;
    line-height: 1.4;
    color: #333;
}
#active-clues-display p {
    margin: 0;
    padding: 5px 0;
}
#active-clues-display .active-clue-text {
    font-weight: bold;
    background-color: #e0e0e0;
    padding: 2px 5px;
    border-radius: 3px;
    display: block; /* So background spans full width */
}


/* Removed styles for .clues ol, .clues li, .clues li.visible-clue, .clues li.active-clue */
/* as these HTML elements are no longer used for clue display */


/* Responsive adjustments */
@media (min-width: 768px) {
    .crossword-layout {
        flex-wrap: wrap; /* Keep wrap */
        justify-content: center; /* Center horizontally */
        flex-direction: column; /* Force column layout for grid then clues */
        align-items: center; /* Center items horizontally */
    }
}