.confettiToggleBtn{
    /*position: fixed;*/
    /*bottom: 24px;*/
    /*right: 48px;*/
    z-index: 1000;
}


/* Confetti container sits on top of the card */
.confetti-wrap {
pointer-events: none; /* so clicks go through */
position: fixed;
left: 0;
right: 0;
top: -24px;
bottom: -24px;
overflow: visible;
z-index: 50;
/*background-color: rgba(0,0,0,0.1);*/
}


.confetti {
position: absolute;
width: 10px;
height: 14px;
opacity: 0.95;
will-change: transform, opacity;
transform-origin: center;
border-radius: 2px;
}


/* animation that makes confetti fall and rotate */
@keyframes confetti-fall {
0% {
transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg);
opacity: 1;
}
60% {
opacity: 1;
}
100% {
transform: translate3d(var(--tx, 0px), var(--ty, 300px), 0) rotateZ(var(--rz, 360deg)) rotateX(var(--rx, 180deg));
opacity: 0.6;
}
}


/* burst animation for the popper (scales out) */
@keyframes pop-burst {
from { transform: scale(0.96); opacity: 1 }
to { transform: scale(1.02); opacity: 0.98 }
}


/* subtle card pop when firing */
.burst {
animation: pop-burst 300ms ease-out;
}


/* small helper for confetti shapes (triangle ribbons) */
.confetti.triangle {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 14px solid red; /* color overridden inline */
border-radius: 0;
}



/* Responsive adjustments */
@media (max-width: 520px) {
.demo-card-wide.mdl-card { padding: 18px }
.confetti { width: 8px; height: 11px }
}