body {
    font-family: 'Comic Sans MS', cursive, sans-serif; /* Playful font */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Distribute space between items */
    min-height: 100vh;
    margin: 0;
    background-color: #87CEEB; /* Sky blue */
    transition: background-color 1s ease-in-out, filter 3s ease-in-out; /* Smooth transition for background color and filter */
    user-select: none; /* Prevent text selection on the entire page */
}

body.greyscale-filter {
    filter: grayscale(100%);
}

#goodNightText {
    font-size: 5em; /* Increased font size */
    color: #FFF;
    margin: 20px 0;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

#goodNightText.visible {
    opacity: 1;
}

#nextButton {
    width: 120px; /* Bigger size */
    height: 120px; /* Bigger size */
    border-radius: 50%;
    font-size: 3em; /* Emoji size remains the same */
    line-height: 1;
    margin-top: 20px;
    background: radial-gradient(circle at 50% 50%, #FFD700, #FFA500); /* Golden to Orange gradient for sun effect */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #FFC107; /* Lighter border for sun effect */
    cursor: pointer;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 165, 0, 0.6); /* Glowing sun effect */
    transition: all 0.3s ease-out;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Enhanced text shadow for emoji */
}

#nextButton:focus {
    outline: none;
    border: 5px solid #FFC107;
    box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.9); /* More prominent custom focus ring */
}

#nextButton:hover {
    background: radial-gradient(circle at 50% 50%, #FFEB3B, #FF9800); /* Brighter gradient on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), 0 0 80px rgba(255, 165, 0, 0.7); /* Enhanced glow on hover */
}

#nextButton:active {
    background: radial-gradient(circle at 50% 50%, #FFC107, #FF8F00); /* Darker gradient on active */
    transform: scale(0.95); /* Shrink slightly on click */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 165, 0, 0.4); /* Reduced glow on active */
}

#nextButton:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
    border: none;
}

#resetButton {
    width: 50px; /* Slightly larger */
    height: 50px; /* Slightly larger */
    border-radius: 50%;
    font-size: 1.8em; /* Larger emoji */
    line-height: 1; /* Ensure emoji is vertically centered */
    margin-bottom: 20px;
    background-color: #6A5ACD; /* SlateBlue color */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #5A4BBA; /* Darker border for depth */
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.15); /* More pronounced shadow for depth */
    transition: all 0.2s ease-out; /* Faster transition for responsiveness */
    -webkit-tap-highlight-color: transparent; /* Remove blue highlight on tap */
    user-select: none; /* Prevent text selection */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle text shadow for emoji */
}

#resetButton:focus {
    outline: none; /* Remove default focus outline */
    border: 2px solid #6A5ACD; /* Keep border color consistent with background */
    box-shadow: 0 0 0 5px rgba(106, 90, 205, 0.7); /* More prominent custom focus ring */
}

#resetButton:hover {
    background-color: #5A4BBA; /* Slightly darker on hover */
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.35), 0 7px 7px rgba(0, 0, 0, 0.25); /* Enhanced shadow on hover */
}

#resetButton:active {
    background-color: #4A3B9D; /* Even darker on active for "pressed" look */
    transform: translateY(0); /* Push down on click */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Smaller shadow for "pressed" look */
}

#resetButton:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
    box-shadow: none; /* Remove shadow when disabled */
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 100px);
    gap: 30px; /* Increased gap for more separation */
    margin-bottom: 20px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #FFD700; /* Gold/Yellow for playful */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5em; /* Bigger font */
    font-weight: bold;
    color: #FFF; /* White text */
    border-radius: 20px; /* More rounded corners */
    border: 5px solid #FFA500; /* Orange border */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Soft shadow */
    transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
    user-select: none; /* Prevent text selection */
}

.box:hover {
    /* No hover effect */
}

.box:focus,
.box:active {
    outline: none; /* Remove default focus and active outlines */
    transform: none; /* Ensure no transform on active */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Maintain original shadow on active */
}

.box.lit {
    background-color: #7CFC00; /* Lawn Green when lit */
    border-color: #32CD32; /* Lime Green border when lit */
    color: white;
    animation: sprinkle 0.5s ease-out forwards; /* Sprinkle animation */
}



@keyframes sprinkle {
    0% {
        transform: scale(1) rotate(0deg);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    }
    25% {
        transform: scale(1.05) rotate(-2deg);
        box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
    }
    50% {
        transform: scale(1.1) rotate(2deg);
        box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
    }
    75% {
        transform: scale(1.05) rotate(-1deg);
        box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: scale(1) rotate(0deg);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    }
}