/* General body styling */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}


.santa-sleigh {
    position: fixed;
    top: 20vh;
    left: -300px;
    width: 300px;
    height: auto;
    opacity: 0;
    z-index: 99999;
    transform: scale(1) translateX(0);
    transition: transform 10s linear, opacity 2s ease-in-out;
}

/* --- Main Menu Styles --- */
.game-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-2xl;
}

.stats-button {
    @apply inline-block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors;
}

/* --- Shared Game Styles --- */
.back-button {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background-color: #4f46e5;
    color: white;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
    z-index: 50;
}
.back-button:hover {
    background-color: #4338ca;
    transform: scale(1.05);
}

/* --- Failure Screen Button Styles --- */
.fail-option-btn {
    @apply w-full text-white font-bold py-3 px-4 rounded-lg transition-transform transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed;
}

/* --- Difficulty Badge Style --- */
.difficulty-badge {
    @apply inline-block bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm font-semibold text-gray-800 dark:text-gray-200 mb-4;
}

/* --- Score Display Style --- */
.score-display {
    @apply text-xl font-bold text-indigo-500 dark:text-indigo-400;
}

/* --- Consent Banner Styles --- */
.consent-banner {
    @apply max-w-4xl mx-auto mt-12 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-2xl flex items-center justify-between gap-4;
}
.consent-btn {
    @apply px-6 py-2 text-white font-bold rounded-lg transition-colors;
}

/* --- Question Counter Style --- */
.question-counter {
    @apply inline-block bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm font-semibold text-gray-800 dark:text-gray-200;
}

/* --- NEW Stats Page Styles --- */
.stat-card {
    @apply bg-gray-50 dark:bg-gray-700 p-6 rounded-xl text-left;
}
.stat-title {
    @apply text-2xl font-bold mb-4 text-indigo-500 dark:text-indigo-400;
}
.stat-list {
    @apply space-y-2 text-lg;
}
.stat-list li {
    @apply flex justify-between;
}

.solved-group.group-yellow {
    background-color: #f9df6d;
    color: #121212;
}
.solved-group.group-green {
    background-color: #a0c35a;
    color: #121212;
}
.solved-group.group-blue {
    background-color: #3b82f6;
    color: #ffffff;
}
.solved-group.group-purple {
    background-color: #9333ea;
    color: #ffffff;
}

/* --- Pure CSS Falling Snow Effect (No SCSS) --- */
.snow-container {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 9999;
}

.snowflake {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}

/* 50 unique snowflakes */
.snowflake:nth-child(1) { left: 2%; animation-duration: 6s; animation-delay: 0s; transform: scale(0.4); }
.snowflake:nth-child(2) { left: 8%; animation-duration: 5s; animation-delay: 1s; transform: scale(0.6); }
.snowflake:nth-child(3) { left: 15%; animation-duration: 7s; animation-delay: 2s; transform: scale(0.5); }
.snowflake:nth-child(4) { left: 20%; animation-duration: 4s; animation-delay: 3s; transform: scale(0.7); }
.snowflake:nth-child(5) { left: 30%; animation-duration: 8s; animation-delay: 1s; transform: scale(0.3); }
.snowflake:nth-child(6) { left: 35%; animation-duration: 6s; animation-delay: 0.5s; transform: scale(0.5); }
.snowflake:nth-child(7) { left: 40%; animation-duration: 5s; animation-delay: 2.5s; transform: scale(0.8); }
.snowflake:nth-child(8) { left: 45%; animation-duration: 7s; animation-delay: 1.5s; transform: scale(0.6); }
.snowflake:nth-child(9) { left: 50%; animation-duration: 9s; animation-delay: 0s; transform: scale(0.4); }
.snowflake:nth-child(10){ left: 55%; animation-duration: 6s; animation-delay: 1s; transform: scale(0.7); }
.snowflake:nth-child(11){ left: 60%; animation-duration: 5s; animation-delay: 2s; transform: scale(0.5); }
.snowflake:nth-child(12){ left: 65%; animation-duration: 8s; animation-delay: 3s; transform: scale(0.4); }
.snowflake:nth-child(13){ left: 70%; animation-duration: 7s; animation-delay: 1.2s; transform: scale(0.6); }
.snowflake:nth-child(14){ left: 75%; animation-duration: 6s; animation-delay: 0.3s; transform: scale(0.5); }
.snowflake:nth-child(15){ left: 80%; animation-duration: 5s; animation-delay: 2.1s; transform: scale(0.8); }
.snowflake:nth-child(16){ left: 85%; animation-duration: 7s; animation-delay: 1.7s; transform: scale(0.6); }
.snowflake:nth-child(17){ left: 90%; animation-duration: 9s; animation-delay: 0.4s; transform: scale(0.4); }
.snowflake:nth-child(18){ left: 95%; animation-duration: 6s; animation-delay: 1.3s; transform: scale(0.7); }
.snowflake:nth-child(19){ left: 4%; animation-duration: 5s; animation-delay: 2.3s; transform: scale(0.5); }
.snowflake:nth-child(20){ left: 12%; animation-duration: 8s; animation-delay: 3.2s; transform: scale(0.4); }
.snowflake:nth-child(21){ left: 18%; animation-duration: 7s; animation-delay: 1.1s; transform: scale(0.6); }
.snowflake:nth-child(22){ left: 24%; animation-duration: 6s; animation-delay: 0.6s; transform: scale(0.5); }
.snowflake:nth-child(23){ left: 28%; animation-duration: 5s; animation-delay: 2.6s; transform: scale(0.8); }
.snowflake:nth-child(24){ left: 32%; animation-duration: 7s; animation-delay: 1.4s; transform: scale(0.6); }
.snowflake:nth-child(25){ left: 38%; animation-duration: 9s; animation-delay: 0.2s; transform: scale(0.4); }
.snowflake:nth-child(26){ left: 44%; animation-duration: 6s; animation-delay: 1.6s; transform: scale(0.7); }
.snowflake:nth-child(27){ left: 48%; animation-duration: 5s; animation-delay: 2.7s; transform: scale(0.5); }
.snowflake:nth-child(28){ left: 52%; animation-duration: 8s; animation-delay: 3.3s; transform: scale(0.4); }
.snowflake:nth-child(29){ left: 58%; animation-duration: 7s; animation-delay: 1.8s; transform: scale(0.6); }
.snowflake:nth-child(30){ left: 62%; animation-duration: 6s; animation-delay: 0.7s; transform: scale(0.5); }
.snowflake:nth-child(31){ left: 66%; animation-duration: 5s; animation-delay: 2.8s; transform: scale(0.8); }
.snowflake:nth-child(32){ left: 72%; animation-duration: 7s; animation-delay: 1.9s; transform: scale(0.6); }
.snowflake:nth-child(33){ left: 76%; animation-duration: 9s; animation-delay: 0.1s; transform: scale(0.4); }
.snowflake:nth-child(34){ left: 82%; animation-duration: 6s; animation-delay: 1.5s; transform: scale(0.7); }
.snowflake:nth-child(35){ left: 86%; animation-duration: 5s; animation-delay: 2.4s; transform: scale(0.5); }
.snowflake:nth-child(36){ left: 92%; animation-duration: 8s; animation-delay: 3.1s; transform: scale(0.4); }
.snowflake:nth-child(37){ left: 6%; animation-duration: 7s; animation-delay: 1.3s; transform: scale(0.6); }
.snowflake:nth-child(38){ left: 14%; animation-duration: 6s; animation-delay: 0.4s; transform: scale(0.5); }
.snowflake:nth-child(39){ left: 22%; animation-duration: 5s; animation-delay: 2.4s; transform: scale(0.8); }
.snowflake:nth-child(40){ left: 26%; animation-duration: 7s; animation-delay: 1.2s; transform: scale(0.6); }
.snowflake:nth-child(41){ left: 34%; animation-duration: 9s; animation-delay: 0.3s; transform: scale(0.4); }
.snowflake:nth-child(42){ left: 42%; animation-duration: 6s; animation-delay: 1.8s; transform: scale(0.7); }
.snowflake:nth-child(43){ left: 46%; animation-duration: 5s; animation-delay: 2.1s; transform: scale(0.5); }
.snowflake:nth-child(44){ left: 54%; animation-duration: 8s; animation-delay: 3.4s; transform: scale(0.4); }
.snowflake:nth-child(45){ left: 63%; animation-duration: 7s; animation-delay: 1.7s; transform: scale(0.6); }
.snowflake:nth-child(46){ left: 68%; animation-duration: 6s; animation-delay: 0.8s; transform: scale(0.5); }
.snowflake:nth-child(47){ left: 74%; animation-duration: 5s; animation-delay: 2.9s; transform: scale(0.8); }
.snowflake:nth-child(48){ left: 79%; animation-duration: 7s; animation-delay: 1.6s; transform: scale(0.6); }
.snowflake:nth-child(49){ left: 88%; animation-duration: 9s; animation-delay: 0.5s; transform: scale(0.4); }
.snowflake:nth-child(50){ left: 96%; animation-duration: 6s; animation-delay: 1.4s; transform: scale(0.7); }

@keyframes fall {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}