/* Basic Reset & Defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
    background-color: #f0f8ff; /* Light sky blue */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden; /* Prevent scrollbars during drag */
}

#game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 95vw; /* Limit width */
}

h1, h2 {
    color: #ff6347; /* Tomato color */
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 1.1em;
    background-color: #4682b4; /* Steel blue */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.2s ease;
}

button:hover {
    background-color: #5a9bd8;
}

/* Screen Management */
.screen {
    display: none; /* Hide screens by default */
}

.screen.active {
    display: block; /* Show the active screen */
}

/* 1. Image Selection */
#image-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

#image-options img {
    width: 100%;
    height: auto;
    border: 3px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

#image-options img:hover {
    border-color: #4682b4;
    transform: scale(1.05);
}

/* 2. Difficulty Selection */
#selected-image-preview {
    max-width: 200px;
    max-height: 150px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 2px solid #ddd;
}

#difficulty-options {
    margin-bottom: 20px;
}

#difficulty-options button {
    background-color: #32cd32; /* Lime green */
}
#difficulty-options button:hover {
    background-color: #50e050;
}
#back-to-image-select,
#back-to-difficulty,
#quit-button {
     background-color: #ffa500; /* Orange */
     margin-top: 10px;
}
#back-to-image-select:hover,
#back-to-difficulty:hover,
#quit-button:hover {
     background-color: #ffbf40;
}

/* 3. Game Screen */
.game-controls {
    margin-bottom: 15px;
}

#hint-button {
     background-color: #9370db; /* Medium purple */
}
#hint-button:hover {
     background-color: #a380e4;
}

.puzzle-area {
    display: flex;
    flex-wrap: wrap; /* Allow pieces container to wrap below on small screens */
    gap: 20px;
    justify-content: center;
    align-items: flex-start; /* Align tops */
    margin-top: 20px;
    position: relative; /* Needed for absolute positioning if used later */
}

#puzzle-container {
    display: grid; /* Grid layout for slots */
    border: 2px dashed #ccc;
    position: relative; /* For hint overlay */
    background-size: contain; /* For hint image */
    background-repeat: no-repeat;
    background-position: center;
    /* Dimensions set by JS */
}

/* Hint Styling */
#puzzle-container.show-hint::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: var(--puzzle-image-url); /* Set by JS */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3; /* Make hint semi-transparent */
    z-index: 0; /* Behind pieces but above container background */
    pointer-events: none; /* Allow clicks through */
}


#pieces-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #f8f8f8;
    border-radius: 8px;
    min-height: 100px; /* Ensure it has some height */
    max-width: 40%; /* Limit width relative to puzzle area */
    justify-content: center; /* Center pieces */
    align-content: flex-start; /* Pack pieces at the top */
    /* Dimensions potentially adjusted by JS */
}


/* Puzzle Pieces & Slots */
.puzzle-slot, .puzzle-piece {
    background-color: #e0e0e0; /* Placeholder bg for slot */
    border: 1px solid #ccc; /* Slight border for slots */
    /* Dimensions set by JS */
    background-size: var(--puzzle-total-width) var(--puzzle-total-height); /* Set by JS */
    background-repeat: no-repeat;
    position: relative; /* For potential z-index stacking if needed */
    z-index: 1; /* Ensure slots are interactive */
}

.puzzle-piece {
    border: 1px solid #888;
    cursor: grab;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
    z-index: 10; /* Pieces appear above slots */
    background-color: transparent; /* Show image part */
}

.puzzle-piece.dragging {
    cursor: grabbing;
    opacity: 0.7;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 100; /* Ensure dragging piece is on top */
}

.puzzle-piece.placed {
    cursor: default;
    border: 1px solid #3a3a3a; /* Slightly darker border when placed */
    z-index: 5; /* Above hint, below dragging pieces */
    /* No box-shadow or transform */
}

/* Slot highlighting on drag over */
.puzzle-slot.drag-over {
    background-color: #c0ffc0; /* Light green highlight */
    border-style: solid;
}


/* Completion Message */
#completion-message {
    margin-top: 20px;
    padding: 15px;
    background-color: #90ee90; /* Light green */
    border-radius: 8px;
    color: #006400; /* Dark green */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    #game-container {
        padding: 10px;
    }
    .puzzle-area {
        flex-direction: column; /* Stack puzzle and pieces */
        align-items: center;
    }
    #pieces-container {
        max-width: 90%; /* Take more width when stacked */
        margin-top: 20px;
        max-height: 250px; /* Limit height and allow scrolling */
        overflow-y: auto;
    }
     #image-options {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }
    h1 { font-size: 1.5em; }
    button { font-size: 1em; padding: 8px 15px;}

}

@media (max-width: 480px) {
     #image-options {
        grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns on very small screens */
    }
     h1 { font-size: 1.3em; }
     button { font-size: 0.9em; padding: 6px 12px;}
}