/* ChatBase — 🎁 Surprise Drops + 🎰 Lottery (liveevents.js) */

/* 🎁 floating gift */
#dropGift {
    position: fixed; right: 20px; bottom: 96px; z-index: 100000; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: linear-gradient(135deg, rgba(60,20,80,.96), rgba(20,30,70,.96));
    border: 1px solid rgba(255,209,102,.6); border-radius: 16px; padding: 12px 16px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; font: inherit;
    animation: dropIn .4s cubic-bezier(.2,1.3,.4,1), dropWobble 1.6s ease-in-out .4s infinite;
}
#dropGift:active { transform: scale(.9); }
#dropGift:disabled { opacity: .5; }
.drop-emoji { font-size: 34px; line-height: 1; }
.drop-lbl { font-size: 12px; font-weight: 700; color: #ffd166; white-space: nowrap; }
@keyframes dropIn { from { opacity: 0; transform: translateY(40px) scale(.5); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dropWobble { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* 🎰 lottery banner */
#lottoBanner {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99985;
    display: flex; align-items: center; gap: 10px; width: min(420px, calc(100vw - 24px));
    background: linear-gradient(135deg, rgba(50,30,10,.96), rgba(45,10,45,.96));
    border: 1px solid rgba(255,209,102,.5); border-radius: 14px; padding: 9px 13px;
    box-shadow: 0 10px 34px rgba(0,0,0,.45); color: #fff; animation: dropIn .35s ease;
}
#lottoBanner.lotto-done { border-color: rgba(52,232,176,.6); }
.lotto-ico { font-size: 28px; }
.lotto-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lotto-mid b { font-size: 13px; }
.lotto-mid small { font-size: 11px; color: rgba(255,255,255,.65); }
.lotto-enter {
    flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; color: #1a1026;
    padding: 9px 14px; border-radius: 11px; border: none; background: linear-gradient(135deg, #ffd166, #ffb347);
}
.lotto-enter:active { transform: scale(.93); }
.lotto-in { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #5ef0c0; }

@media (max-width: 560px) {
    #dropGift { right: 12px; bottom: 150px; padding: 10px 12px; }
    #lottoBanner { bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) { #dropGift { animation: dropIn .3s ease; } }