/* Custom styles for the Tic Tac Toe game */
body {
    font-family: 'Inter', sans-serif; /* Using Inter font */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #1a202c; /* Dark background */
    color: #e2e8f0; /* Light text color */
}
.container {
    background-color: #2d3748; /* Slightly lighter dark background for container */
    padding: 2.5rem; /* Increased padding */
    border-radius: 0.75rem; /* Rounded corners */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25); /* Stronger shadow */
    text-align: center;
    max-width: 90%; /* Ensure responsiveness */
    width: 400px; /* Max width for desktop */
}
h1 {
    color: #63b3ed; /* Blue heading */
    margin-bottom: 1.5rem; /* Increased margin */
    font-size: 2.5rem; /* Larger heading */
    font-weight: bold;
}
.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Flexible columns */
    grid-template-rows: repeat(3, 100px); /* Fixed row height for cells */
    gap: 0.5rem; /* Gap between cells */
    margin: 1.5rem auto;
    width: 100%; /* Full width within container */
    max-width: 315px; /* Max width for the board itself */
    border: 2px solid #4299e1; /* Blue border for the board */
    border-radius: 0.5rem; /* Rounded corners for the board */
    overflow: hidden; /* Ensures inner cells respect border-radius */
}
.cell {
    width: 100%; /* Cells take full width of their grid area */
    height: 100px; /* Fixed height */
    background-color: #4a5568; /* Cell background */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.5rem; /* Larger text for X/O */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* Smooth hover transition */
    border-radius: 0.375rem; /* Slightly rounded corners for cells */
}
.cell:hover {
    background-color: #6b7280; /* Darker hover background */
}
.cell.x {
    color: #f6ad55; /* Orange for X */
}
.cell.o {
    color: #f687b3; /* Pink for O */
}
.status {
    margin-top: 1.5rem;
    font-size: 1.5rem; /* Larger status text */
    font-weight: medium;
    color: #48bb78; /* Green for status */
}
.reset {
    margin-top: 2rem; /* More margin for the button */
    padding: 0.75rem 1.5rem; /* Larger padding */
    font-size: 1.125rem; /* Larger font size */
    background-color: #805ad5; /* Purple button */
    color: white;
    border: none;
    border-radius: 0.5rem; /* Rounded button corners */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out; /* Smooth transitions */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Button shadow */
}
.reset:hover {
    background-color: #6b46c1; /* Darker purple on hover */
    transform: translateY(-2px); /* Slight lift effect */
}
.reset:active {
    transform: translateY(0); /* Press effect */
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .container {
        padding: 1.5rem;
    }
    h1 {
        font-size: 2rem;
    }
    .board {
        grid-template-rows: repeat(3, 80px); /* Smaller cells on small screens */
        max-width: 255px; /* Adjust max width for smaller screens */
    }
    .cell {
        height: 80px;
        font-size: 3rem;
    }
    .status {
        font-size: 1.25rem;
    }
    .reset {
        padding: 0.625rem 1.25rem;
        font-size: 1rem;
    }
}