/* style.css */

/* Global Resets and Base Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px 0; /* Add some padding at the top/bottom of the viewport */
    box-sizing: border-box;
}

#game-wrapper {
    width: 90%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    text-align: center;
}

/* Header Styling */
#page-header {
    margin-bottom: 20px;
}

#header-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Optional: if you want rounded corners */
}

/* Game Title and Instructions */
#game-title {
    font-size: 2.5em; /* Responsive font size */
    margin-bottom: 10px;
    color: #f0f0f0;
}

#instructions {
    font-size: 1.1em;
    margin-bottom: 25px;
    color: #cccccc;
    line-height: 1.6;
}

/* Tile Bank and Grid Area Styling */
#tile-bank-area,
#grid-area {
    margin-bottom: 25px;
    padding: 15px;
    border: 2px solid #444444; /* Dark grey border */
    border-radius: 8px;
    background-color: #1a1a1a; /* Slightly lighter than page background */
    display: flex;
    flex-direction: column; /* Rows will stack vertically */
    align-items: center; /* Center rows if they don't fill width */
}

.tile-bank-row,
.grid-row {
    display: flex;
    justify-content: center; /* Center tiles/cells within a row */
    margin-bottom: 5px; /* Space between rows */
}

.tile-bank-row:last-child,
.grid-row:last-child {
    margin-bottom: 0;
}

/* Individual Tile Styling (to be added by JS) */
.tile {
    width: 70px;  /* Fixed width for tiles */
    height: 50px; /* Fixed height for tiles */
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    border: 1px solid #333333; /* Dark border for tiles */
    border-radius: 4px;
    margin: 3px; /* Space around each tile */
    display: flex;
    justify-content: center; /* This will center the whole text block */
    align-items: center;    /* This will vertically center the text block */
    font-size: 0.9em; /* You might need to adjust this with a monospaced font */
    font-weight: bold;
    cursor: grab; /* Indicates draggable */
    user-select: none; /* Prevent text selection during drag */
    box-sizing: border-box;

    /* --- ADD THESE LINES --- */
    white-space: pre; /* This is key: it preserves spaces and newlines */
    font-family: 'Courier New', Courier, monospace; /* Use a monospaced font */
    /* text-align: left; /* Optional: if you want text to start from left within its preserved-space block */
                        /* If using this, you might adjust justify-content above if needed, but
                           centering the pre-formatted block often works well. */
}

.tile.dragging { /* Style for tile when it's being dragged */
    opacity: 0.7;
    cursor: grabbing;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5);
}

/* Individual Grid Cell Styling (to be added by JS) */
.grid-cell {
    width: 70px;  /* Must match tile width */
    height: 50px; /* Must match tile height */
    border: 1px dashed #555555; /* Dashed border for empty cells */
    border-radius: 4px;
    margin: 3px; /* Space around each cell, same as tiles */
    background-color: #2a2a2a; /* Slightly different background for drop zones */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.grid-cell.drag-over { /* Style for grid cell when a tile is dragged over it */
    background-color: #404040;
    border-style: solid;
    border-color: #777777;
}

/* Controls Section */
#controls {
    margin-bottom: 25px;
}

.game-button {
    padding: 12px 25px;
    font-size: 1.1em;
    color: #ffffff;
    background-color: #007bff; /* Example blue */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 10px;
    transition: background-color 0.3s ease;
}

.game-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

#reset-button {
    background-color: #dc3545; /* Example red */
}

#reset-button:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* Popup Styling */
.popup {
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    display: flex; /* Use flexbox to center content */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup.visible { /* Class to show the popup */
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background-color: #2c2c2c; /* Dark background for popup content */
    padding: 30px 40px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #555555;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    max-width: 500px;
}

.popup-content h2 {
    margin-top: 0;
    color: #4CAF50; /* Green for success */
    font-size: 2.2em;
}

.popup-content p {
    font-size: 1.2em;
    margin-bottom: 25px;
    color: #f0f0f0;
}
/* --- ADD THESE NEW OPTIONAL STYLES HERE --- */
.popup-content .solved-sentence {
    font-size: 1.1em; /* Slightly smaller */
    font-style: italic;
    margin-bottom: 15px; /* Adjusted margin */
    color: #e0e0e0;
}

.popup-content .event-thankyou {
    font-size: 1.2em; /* Or keep as is if the generic .popup-content p is fine */
    margin-bottom: 25px; /* Or adjust as needed */
    /* color: #f0f0f0; */ /* Already covered by .popup-content p if not overridden */
}
/* --- END OF NEW OPTIONAL STYLES --- */
.popup-content .game-button { /* Style the close button like other game buttons */
    background-color: #6c757d; /* Grey */
}

.popup-content .game-button:hover {
    background-color: #5a6268;
}

/* Responsive adjustments (example) */
@media (max-width: 768px) {
    #game-title {
        font-size: 2em;
    }
    #instructions {
        font-size: 1em;
    }
    .tile, .grid-cell {
        width: 50px; /* Smaller tiles/cells on smaller screens */
        height: 35px;
        font-size: 0.8em;
    }
    .game-button {
        padding: 10px 15px;
        font-size: 1em;
    }
    .popup-content {
        padding: 20px;
        margin: 0 10px; /* ensure popup doesn't touch screen edges */
    }
    .popup-content h2 {
        font-size: 1.8em;
    }
    .popup-content p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    #game-title {
        font-size: 1.6em;
    }
    .tile, .grid-cell {
        width: 40px;
        height: 30px;
        font-size: 0.7em;
        margin: 2px;
    }
    .game-button {
        display: block; /* Stack buttons on very small screens */
        width: 80%;
        margin: 10px auto;
    }
    #tile-bank-area, #grid-area {
        padding: 10px;
    }
}
.pre-placed-tile {
    opacity: 0.8; /* Make it look slightly different, e.g., a bit faded */
    /* background-color: #f0f0f0; /* Or a slightly different background */
    /* border: 1px solid #bbb; */ /* Or a different border to indicate it's fixed */
    cursor: default !important; /* Ensure no grab cursor */
}

.tile-placeholder { /* For empty slots in the tile bank visual if any */
    width: 70px;  /* Must match tile width */
    height: 50px; /* Must match tile height */
    margin: 3px;
    border-radius: 4px;
    /* background-color: rgba(255,255,255,0.05); /* Very subtle fill */
    box-sizing: border-box;
}