/* Custom styles for aesthetic enhancements */
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #1f2937 0%, #0d121c 100%);
        }
        .card-shadow {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: transform 0.2s;
        }
        .card-shadow:hover {
            transform: translateY(-5px);
        }
        .action-button {
            transition: all 0.15s ease;
        }
        .action-button:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
        }
        .action-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

#kofi-fixed-button {
    position: static !important;
    /* Reset any potential absolute offsets */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    /* Ensure it respects the z-order of the flow */
    z-index: auto !important;
}

/* Optional: Add a subtle animation on hover */
#kofi-fixed-button img {
    transition: transform 0.2s ease-in-out;
}

#kofi-fixed-button:hover img {
    transform: scale(1.05);
}


@keyframes streakShake { /* Changed the name to a generic one */
    0%, 10% {
        transform: translate3d(0,0,0) rotate3d(0,0,1,0deg);
    }
    /* Use a CSS variable for the dynamic rotation value */
    20%, 40%, 60%, 80% {
        transform: translate3d(0,0,0) rotate3d(0,0,1,var(--streak-degrees, 2deg)); 
    }
    30%, 50%, 70%, 90% {
        /* The negative of the CSS variable */
        transform: translate3d(0,0,0) rotate3d(0,0,1,calc(var(--streak-degrees, 2deg) * -1));
    }
    100% {
        transform: translate3d(0,0,0) rotate3d(0,0,1,0deg);
    }
}

.animate-hi-there {
    animation-name: streakShake; /* Reference the new keyframe name */
    animation-duration: 1s;
    animation-fill-mode: both;
    display: inline-block; 
}


@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.animate-shake-wrong {
  /* Animation runs only once (duration 2s) */
  animation: shake 2s ease forwards;
  animation-duration: 1s;
  animation-fill-mode: both;
  display: inline-block; 
}

.card-highlight-red {
    box-shadow: 
        /* 1. THE RING GOES FIRST: 'ring-2 ring-red-400' */
        0 0 0 2px #f87171, 

        /* 2. Custom colored glow/shadow 'shadow-red-400/50' */
        0 0 10px 5px rgba(248, 113, 113, 0.5),

        /* 3. The standard 'shadow-xl' */
        0 20px 25px -5px rgba(0, 0, 0, 0.1), 
        0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

.card-highlight-green {
    box-shadow: 
        /* 1. THE RING GOES FIRST: 'ring-2 ring-green-400' */
        0 0 0 2px #4ade80, 

        /* 2. Custom colored glow/shadow 'shadow-green-400/50' */
        0 0 10px 5px rgba(74, 222, 128, 0.5),

        /* 3. The standard 'shadow-xl' */
        0 20px 25px -5px rgba(0, 0, 0, 0.1), 
        0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

/* all of this is for the origins picker in infinite */

.custom-dropdown {
    position: relative;
    display: inline-block;
    width: fit-content;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 3px;
    /* Ensure the container doesn't block the screen */
    z-index: 40; 
}

.dropdown-header {
    position: relative;
    background: #2a2a2a;
    color: #e0e0e0;
    padding: 5px 10px;
    border: 1px solid #667eea;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.3px;
    /* This makes sure the header itself is on top of its own list when closed */
    z-index: 102; 
    pointer-events: auto !important; 
}

.dropdown-list {
    display: none;
    position: absolute;
    background: #1e1e1e;
    border: 1px solid #667eea;
    width: 350px;         /* Increased width slightly for single column */
    max-height: 500px;
    overflow-y: auto;
    padding: 15px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}
/* THE FLEXBOX CONTAINER */
.sub-items {
    display: none; 
    flex-direction: column;
    padding-left: 25px; /* The indent */
    margin-left: 5px;   /* Slight offset from the parent arrow */
    border-left: 1px solid #333; /* Visual guide for the hierarchy */
}

.sub-items.show-sub {
    display: flex !important; 
}

.sub-items .folder-container {
    grid-column: 1 / -1; /* Spans from column 1 to the end */
    width: 100%;
    margin-top: 10px;
}
.dropdown-list.show {
    display: block;          /* Brings it back into existence */
    pointer-events: auto;    /* Makes the items clickable again */
    bottom: 120%;            /* Moves it above the header */
}

/* Scrollbar Styling for a dark theme */
.dropdown-list::-webkit-scrollbar {
    width: 8px;
}
.dropdown-list::-webkit-scrollbar-track {
    background: #1e1e1e;
}
.dropdown-list::-webkit-scrollbar-thumb {
    background: #6a0dad;
    border-radius: 10px;
}

/* Character 1 & 2 Specific Alignment */
#list-1.show {
    left: 0;
    right: auto;
}

#list-2.show {
    right: 0;
    left: auto; /* Pulls the 800px box back to the left from the right edge */
    margin-right: -15px;
}

.dropdown-list label {
    display: block;
    padding: 8px;
    color: #ffffff; /* Changed from black to white */
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.dropdown-list label:hover {
    background-color: rgba(106, 13, 173, 0.2); /* Soft purple tint */
}

/* Select All Button Style */
.select-all-btn {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
    background: #667eea;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.3s;
}

.select-all-btn:hover {
    background: #667eea
}

.arrow-down {
    border: solid #667eea;/* Purple arrow */
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
}

.selection-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.vs-text {
    font-weight: bold;
    font-style: italic;
    color: #667eea; /* Purple VS text */
    margin-top: 20px;
}

.custom-dropdown label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: #bbb; /* Light gray label */
}


.arrow {
    display: inline-block;
    cursor: pointer;
    margin-right: 8px;
    transition: transform 0.2s ease;
    color: #667eea; /* Purple */
}

.arrow, .no-arrow-spacer {
    display: inline-block;
    width: 25px; /* Adjust this number to match your arrow's width */
    text-align: center;
    flex-shrink: 0;
}
.group-row.active .arrow {
    transform: rotate(90deg);
}
.group-row {
    display: flex;
    align-items: center;
    flex-direction: row; /* Ensure it's standard left-to-right */
    padding: 5px 0;
    cursor: pointer;
}

.item-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 0;
    cursor: pointer;
}

.item-label, .group-row {
    display: flex;
    align-items: center;
    gap: 0; /* Control spacing via the spacer width */
}

.sub-items .folder-container {
    flex: 0 0 100%; /* Folders take up the full width of the row */
    margin-top: 10px;
}
.item-label:hover {
    background-color: rgba(106, 13, 173, 0.1);
    border-radius: 4px;
}
.item-label span {
    margin-left: auto; /* Keeps the count (5) on the far right */
    color: #888;
    padding-right: 10px;
}
.item-label input[type="checkbox"] {
    margin-right: 10px; /* Space between box and text */
}

.dropdown-search {
    width: calc(100% - 10px);
    margin: 0 5px 12px 5px;
    padding: 10px;
    background: #2a2a2a;
    border: 1px solid #667eea;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    outline: none;
    position: sticky; /* Keeps it visible at the top */
    top: -10px;       /* Align with top of scroll container */
    z-index: 110;     /* Keeps it above other items */
}

.dropdown-search::placeholder {
    color: #888;
}