/* =====================================================================
   Mascot drops (Living Mascot Plan step 5, switch Mascot:Drops).
   wwwroot/js/mascot-drops.js places .md-drop on the mascot's floor, the
   sticker card on the companion strip, and confetti bursts. Only
   transform and opacity animate; reduced motion keeps them still.
   ===================================================================== */

.md-drop {
    position: absolute;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    animation: md-land 0.55s cubic-bezier(0.3, 1.4, 0.6, 1);
    transition: opacity 0.3s ease;
}
.md-drop svg { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.md-drop:focus-visible { outline: 2px solid oklch(var(--a)); outline-offset: 2px; }
.md-drop:not(:disabled):hover svg { transform: scale(1.1); }
.md-drop.is-fading { opacity: 0.45; transition: opacity 10s linear; }
.md-drop.is-gone { opacity: 0; }
.md-drop.is-eaten svg { animation: md-eaten 0.6s ease-in forwards; }
.md-balloon { padding: 6px 9px 4px; height: 52px; }

/* Toys at play for 10 s */
.md-play-ball svg { animation: md-roll 2.5s ease-in-out infinite; }
.md-play-balloon svg { animation: md-float 10s ease-in forwards; }
.md-play-plane svg { animation: md-loop 2.5s ease-in-out infinite; }

/* +XP and the sticker count */
.md-pop {
    position: absolute;
    z-index: 6;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    color: oklch(var(--ac));
    background: oklch(var(--a));
    transform: translate(-50%, -100%);
    animation: md-pop 1.4s ease-out forwards;
}

/* The sticker card on the companion strip */
.md-card {
    position: absolute;
    left: 0.75rem;
    bottom: 0.5rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    pointer-events: none;
    background: oklch(var(--b1) / 0.92);
    border: 1px solid oklch(var(--bc) / 0.12);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.md-card.is-empty { opacity: 0.55; }
.md-card.is-bump { animation: md-bump 0.4s ease-out; }
.md-card-star { width: 18px; height: 18px; }
.md-card-star svg { display: block; width: 100%; height: 100%; }
.md-slots { display: flex; gap: 3px; }
.md-slot { width: 8px; height: 8px; border-radius: 2px; background: oklch(var(--bc) / 0.18); }
.md-slot.is-filled { background: #f6c443; }

/* Confetti in the brand colours */
.md-confetti { position: fixed; z-index: 70; width: 0; height: 0; pointer-events: none; }
.md-confetti span {
    position: absolute;
    width: 7px;
    height: 10px;
    border-radius: 2px;
    animation: md-burst 1.2s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
.md-confetti.is-sparkle::after {
    content: "✨";
    position: absolute;
    font-size: 28px;
    transform: translate(-50%, -50%);
    animation: md-sparkle 1.2s ease forwards;
}

@keyframes md-land { 0% { transform: translateY(-60px) scale(0.6); opacity: 0; } 60% { transform: translateY(0) scale(1.05, 0.9); opacity: 1; } 100% { transform: none; } }
@keyframes md-eaten { to { transform: scale(0.2) translateY(-10px); opacity: 0; } }
@keyframes md-roll { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(60px) rotate(360deg); } }
@keyframes md-float { 0% { transform: none; opacity: 1; } 100% { transform: translate(30px, -320px) rotate(8deg); opacity: 0; } }
@keyframes md-loop { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(40px, -50px) rotate(-30deg); } 50% { transform: translate(0, -90px) rotate(-180deg); } 75% { transform: translate(-40px, -50px) rotate(-300deg); } 100% { transform: translate(0, 0) rotate(-360deg); } }
@keyframes md-pop { 0% { transform: translate(-50%, -80%) scale(0.8); opacity: 0; } 20% { transform: translate(-50%, -100%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -220%); opacity: 0; } }
@keyframes md-bump { 50% { transform: scale(1.15); } }
@keyframes md-burst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 90px)) rotate(var(--rot)); opacity: 0; } }
@keyframes md-sparkle { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .md-drop,
    .md-drop *,
    .md-card,
    .md-pop { animation: none !important; transition: none !important; }
    .md-pop { opacity: 1; }
    .md-confetti.is-sparkle::after { animation-duration: 0.01ms; animation: none; opacity: 1; }
}