/* General styles for the body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, readable font */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #eaf4f7; /* Very light, cool background */
    /* Assuming bg.jpg is a non-distracting background image for a clean look */
    background-image: url('bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* --- Control Panel Styles --- */

#control-panel {
    width: 100%;
    padding: 15px 10px; /* Increased vertical padding */
    /* A deep, modern blue for better contrast and visibility */
    background-color: rgba(25, 118, 210, 0.9); /* Darker blue with high opacity */
    text-align: center;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth */
    position: sticky; /* Keep control panel visible at the top */
    top: 0;
    z-index: 100; /* Ensure it's above other elements */
}

/* --- Size Form Styles --- */

#size-form {
    display: flex; /* Use flex for better alignment on small screens */
    flex-wrap: wrap; /* Allow items to wrap if screen is very small */
    justify-content: center;
    align-items: center;
    gap: 15px; /* Spacing between elements */
}

#size-form label {
    font-size: 1rem;
    font-weight: 500; /* Slightly lighter weight */
    color: #ffffff; /* Pure white text */
    margin-right: 0;
}

#size-form select {
    padding: 8px; /* More padding for easier tapping */
    font-size: 1rem;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-width: 80px; /* Ensure select box isn't too narrow */
}

#size-form button {
    padding: 8px 15px; /* More padding for easier tapping */
    font-size: 1rem;
    font-weight: bold;
    background-color: #ffffff; /* White background */
    color: #1976d2; /* Primary blue text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#size-form button:hover {
    background-color: #e3f2fd; /* Very light blue background on hover */
    color: #0d47a1; /* Darker blue text on hover */
    transform: translateY(-1px); /* Subtle lift effect */
}

/* --- Puzzle Container Styles --- */

#puzzle-container {
    display: grid;
    gap: 4px; /* Slightly smaller gap for better space utilization on small screens */
    /* Responsive sizing: max 600px, but 90% of the viewport width */
    width: 90vw;
    max-width: 600px;
    height: 90vw;
    max-height: 600px;
    aspect-ratio: 1 / 1; /* Maintain a perfect square */
    background-color: rgba(52, 73, 94, 0.7); /* Dark, muted background for contrast */
    border: 6px solid #2c3e50; /* Strong, dark border */
    border-radius: 12px;
    margin: 30px auto; /* Center with margin, provide space */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); /* Stronger overall shadow */
}

/* --- Tile Styles --- */

.tile {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 5vw, 2.5rem); /* Responsive font size */
    font-weight: 800; /* Extra bold for numbers */
    color: #ffffff; /* White text for high contrast */
    /* Vibrant, engaging blue tile color */
    background-color: #42a5f5;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Clear shadow for 3D effect */
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle inner border for definition */
}

/* Empty tile styles */
.tile.empty {
    /* Subtle background to mark the empty spot */
    background-color: #90caf9; 
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Inset shadow */
    cursor: default;
}

/* Hover effect for tiles */
.tile:not(.empty):hover {
    /* Lighter, brighter blue on hover for clear feedback */
    background-color: #64b5f6;
    transform: scale(1.05) translateY(-2px); /* Lift and scale effect */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
}

/* Active (tap) effect for tiles on mobile */
.tile:not(.empty):active {
    transform: scale(0.98); /* Press down effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}