/* Tailwind CSS is usually best loaded via CDN for this simple setup 
   because importing the full 3MB build into a small plugin is inefficient.
   However, we can rely on WordPress admin styles or just basic custom styles for the container.
   The JS file assumes Tailwind classes. If your theme doesn't have Tailwind, 
   add this line to the TOP of the JS file or enqueue the Tailwind CDN script in PHP.
*/

/* Custom Keyframes matching the React code */
@keyframes shineRed {
    0% { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; border-color: #ff4444; }
    50% { box-shadow: 0 0 20px #ff0000, 0 0 40px #ff3333; border-color: #ff8888; }
    100% { box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000; border-color: #ff4444; }
}
@keyframes shineGold {
    0% { box-shadow: 0 0 5px #ffd700; border-color: #ffd700; }
    50% { box-shadow: 0 0 20px #ffd700, 0 0 30px #ffed4a; border-color: #ffe066; }
    100% { box-shadow: 0 0 5px #ffd700; border-color: #ffd700; }
}
@keyframes shinePurple {
    0% { box-shadow: 0 0 5px #a855f7; border-color: #a855f7; }
    50% { box-shadow: 0 0 20px #a855f7; border-color: #d8b4fe; }
    100% { box-shadow: 0 0 5px #a855f7; border-color: #a855f7; }
}
@keyframes shineBlue {
    0% { box-shadow: 0 0 5px #3b82f6; border-color: #3b82f6; }
    50% { box-shadow: 0 0 20px #3b82f6; border-color: #93c5fd; }
    100% { box-shadow: 0 0 5px #3b82f6; border-color: #3b82f6; }
}

.rarity-mythic { animation: shineRed 2s infinite; background: linear-gradient(135deg, #4a0000 0%, #1a0505 100%); }
.rarity-legendary { animation: shineGold 3s infinite; background: linear-gradient(135deg, #422006 0%, #1a1005 100%); }
.rarity-epic { animation: shinePurple 3s infinite; background: linear-gradient(135deg, #2e1065 0%, #0f0518 100%); }
.rarity-common { animation: shineBlue 4s infinite; background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); border-color: #3b82f6; }

.gacha-strip {
    display: flex;
    gap: 12px;
    will-change: transform;
    transform-origin: left center;
}

/* Utility for spinning */
.animate-spin-slow { animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Basic container reset if Tailwind isn't present */
#mattie-root {
    color: #f3f4f6;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}