/* Christmas Background: Deep Red/Green Gradient */
body {
    /* Deep Red/Green Gradient Background */
    background: linear-gradient(135deg, #004d00 0%, #990000 100%); /* Forest Green to Deep Red */
    font-family: 'Arial', sans-serif;
    /* Add subtle glitter texture (requires a background image, simulating here with complex box-shadow/filters) */
}

/* UNO Logo with Festive Gold Glow */
.christmas-logo {
    text-shadow: 0 0 10px gold, 0 0 20px gold;
}

/* Floating Snowflakes (replacing the bubbles) */
.snowflake {
    position: absolute;
    color: white; /* Snow white */
    opacity: 0.8;
    pointer-events: none; /* Allow clicks through snowflakes */
    font-size: 20px; /* Base size */
    animation: fall linear infinite; /* Falling animation */
}

/* Keyframes for falling snowflakes */
@keyframes fall {
    0% { transform: translate(0, -50vh) rotate(0deg); opacity: 0.8; } /* Start above the viewport */
    100% { transform: translate(0, 100vh) rotate(360deg); opacity: 0.1; } /* End below the viewport */
}

/* Keyframes for the snowflakes to float and fall */
.snowflake:nth-child(1) { animation-duration: 12s; left: 10%; font-size: 30px; animation-delay: 0s; }
.snowflake:nth-child(2) { animation-duration: 9s; left: 20%; font-size: 25px; animation-delay: 2s; }
.snowflake:nth-child(3) { animation-duration: 15s; left: 35%; font-size: 35px; animation-delay: 4s; } 
.snowflake:nth-child(4) { animation-duration: 10s; left: 50%; font-size: 20px; animation-delay: 6s; }
.snowflake:nth-child(5) { animation-duration: 13s; left: 65%; font-size: 40px; animation-delay: 8s; }
.snowflake:nth-child(6) { animation-duration: 8s; left: 80%; font-size: 28px; animation-delay: 1s; }
/* New snowflakes added below */
.snowflake:nth-child(7) { animation-duration: 11s; left: 5%; font-size: 22px; animation-delay: 3s; }
.snowflake:nth-child(8) { animation-duration: 14s; left: 90%; font-size: 32px; animation-delay: 7s; }

.christmas-container {
    /* Forest Green background with a subtle gold border/shadow */
    background-color: #003300; 
    border: 2px solid #ffcc00; /* Gold border */
    box-shadow: 0 0 15px rgba(153, 0, 0, 0.7); /* Deep Red Glow */
}

/* Highlighted buttons (Draw, Play Again) */
.christmas-btn {
    background-color: #b30000; /* Festive Red */
    color: white;
    border: 2px solid #ffcc00; /* Gold Trim */
    box-shadow: 0 4px #800000; /* Darker red shadow */
    transition: all 0.15s; /* Smooth hover effect */
}
/* Hover effect for buttons */
.christmas-btn:hover {
    background-color: #cc0000; /* Brighter Red on hover */
    transform: translateY(-2px); /* Lift button slightly */
    box-shadow: 0 6px #800000;
}

/* Message styling */
#message {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 4px;
    color: #ffcc00; /* Soft Gold Message Text */
    text-shadow: 1px 1px 2px #000;
}

/* Card styling */
.card-img {
    width: 70px;
    height: 100px;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
    border-radius: 6px;
    transition: transform 0.12s; /* Smooth scaling effect */
}
/* Hover effect for cards */
.card-img:hover {
    transform: scale(1.08) translateY(-5px); /* Lift card slightly */
    cursor: pointer; /* Indicate interactivity */
}

/* New style for the game-over overlay button */
#playAgainBtn {
    transition: transform 0.2s; /* Smooth scaling effect */
}
/* Hover effect for Play Again button */
#playAgainBtn:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Style for the color selection popup */
#colorSelector {
    /* Make the selector look like a Christmas wreath or gift box */
    background-color: #003300; 
    border: 4px solid #ffcc00;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(153, 0, 0, 1);
    z-index: 1000; /* Ensure it appears above other elements */
}
.color-option {
    /* Color options as ornaments */
    /* *** ADDED STYLES FOR CIRCLE *** */
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Must match width for a circle */
    border-radius: 50%; /* Makes the element a circle */
    /* ***************************** */
    border: 4px solid transparent;
    transition: border-color 0.1s, transform 0.1s;
}
/* Hover effect for color options */
.color-option:hover {
    border-color: white;
    transform: scale(1.1); /* Slightly enlarge on hover */
}