#divAppSkywarsPrizeOverlay
{
    display:none;
    left:50%;
    opacity:0;
    pointer-events:none;
    position:absolute;
    top:30%;
    transform:translate(-50%, -50%);
    transition:opacity 0.3s ease-in-out;
    user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    z-index:25;
}

#divAppSkywarsPrizeOverlay.show
{
    display:block;
    opacity:1;
}

#divAppSkywarsPrizeOverlay.fade-out
{
    opacity:0;
}

#divAppSkywarsPrizeOverlay #divPrizeMessage
{
    background-image:url('../images/skywars/rewardPanel.webp');
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    color:#ffffff;
    filter:drop-shadow(0px 0px 5px #ffffff) drop-shadow(0px 0px 30px #000000) drop-shadow(0px 0px 50px #000000);
    font-size:36px;
    font-weight:600;
    height:90px;
    line-height:42px;
    opacity:1;
    padding:44px 220px 95px;
    pointer-events:auto;
    position:relative;
    text-align:center;
    text-shadow:0px 0px 5px #000000;
    transition:transform 0.3s ease-out, opacity 0.3s ease-in-out;
    width:500px;
}

#divAppSkywarsPrizeOverlay.show #divPrizeMessage
{
    animation:showSkywarsPrizeOverlay 0.5s ease-out forwards;
}

#divAppSkywarsPrizeOverlay.fade-out #divPrizeMessage
{
    opacity:0;
    transform:translateY(-10px);
}

/* ANIMATION KEY FRAMES */
@keyframes showSkywarsPrizeOverlay
{
    0%   {transform:scale(0) translateY(-50px); opacity:0;}
    45%  {transform:scale(1.1) translateY(0px);}
    70%  {transform:scale(.95); opacity:1;}
    85%  {transform:scale(1.0.5);}
    100% {transform:scale(1);}
}

/* MEDIA QUERIES */
@media (max-width: 1200px)
{
    #divAppSkywarsPrizeOverlay
    {
        top:25%;
    }

    #divAppSkywarsPrizeOverlay #divPrizeMessage
    {
        font-size:28px;
        height:70px;
        line-height:32px;
        padding:40px 190px 80px;
        width:400px;
    }
}

@media (max-width: 800px)
{
    #divAppSkywarsPrizeOverlay
    {
        top:20%;
    }
    
    #divAppSkywarsPrizeOverlay #divPrizeMessage
    {
        font-size:22px;
        height:55px;
        line-height:26px;
        padding:26px 140px 60px;
        width:300px;
    }
}

@media (max-width: 600px)
{
    #divAppSkywarsPrizeOverlay #divPrizeMessage
    {
        font-size:18px;
        height:50px;
        line-height:22px;
        padding:22px 116px 45px;
        width:250px;
    }
}

@media (max-width: 500px)
{
    #divAppSkywarsPrizeOverlay #divPrizeMessage
    {
        font-size:16px;
        height:40px;
        line-height:18px;
        padding:20px 95px 40px;
        width:220px;
    }
}

@media (max-width: 420px)
{
    #divAppSkywarsPrizeOverlay #divPrizeMessage
    {
        font-size:14px;
        height:35px;
        line-height:16px;
        padding:15px 75px 35px;
        width:200px;
    }
}