body{
    background: var(--ed-bg-first);
    color: var(--ed-text-first);
    padding: 0px;
    margin: 0px;
    font-family: Roboto;
}


.tile{
	--ico-size: clamp(50px, 17vw, 70px);
	--ico-dive: calc(var(--ico-size) / (-6.5));
    
	--text-width: calc(100% - var(--ico-size) * 5/6);

	position: relative;
	display: flex;
	
	flex-direction: column;

	background-repeat: no-repeat, no-repeat;
	background-size: var(--ico-size) var(--ico-size), auto auto;
  	background-position: bottom var(--ico-dive) right var(--ico-dive), 0px 0px;
    margin-inline: 0px;
    transition: 200ms border-radius, 200ms margin;	

    color: rgba(255,255,255,0.9);
    justify-content: space-between;
}
.tile > div{
    max-width: var(--text-width);
}
#header-ico{
    
    background-image: url(../media/coin.svg);
    width: 20px;
    height: 20px;

    background-repeat: no-repeat, no-repeat;
	background-size: 20px 20px, auto auto;
}
#header-logo{
    background-image: url(../media/kubiki-logo-flat.svg);
    height: 12px;
    aspect-ratio: 5.45;

    background-repeat: no-repeat, no-repeat;
    background-size: cover;
}

.color-w09, .color-w09 > *{
    color: rgba(255,255,255,0.95);
}
#la-header{
    margin-bottom: -7px;
    align-items: center;
}

#la-lottery{
    /* linear-gradient(-45deg, rgba(0, 193, 223, 0.682), rgba(0, 56, 197, 0.654)); */
    background: linear-gradient(-45deg, #ecb900ba, #d80056c9);
    background: linear-gradient(-45deg, #ffdc33ff, #ff0066ff);
    background: linear-gradient(-45deg, #ffe66dff, #ff61a0ff);
    background: linear-gradient(-45deg, #ffcf6dff, #ff77aeff);
    background: linear-gradient(-45deg, #ffcf6db3 0.42%, #ff77aeb3);
    background: linear-gradient(-45deg, #ffc26d99 0.42%, #ff77ae99);
    background: linear-gradient(-45deg, #ffc57499 0.42%, #ff78af99);
    background: linear-gradient(-45deg, #74c5ff99, #ff569b99);
    background: linear-gradient(-45deg, rgb(66,126,186), rgb(197,66,118));
    background: linear-gradient(-45deg, rgb(45, 121, 196), rgb(214, 52, 116));
    background: linear-gradient(-45deg, rgba(0, 63, 174, 0.66), rgba(200, 0, 77, 0.65));
    
    
    /*
    filter: brightness(1.5) saturate(2.5);
    -webkit-filter: brightness(1.5) saturate(2.5);
    */

    padding: 0px;
    overflow: hidden;
    
}
#la-timer img{
    opacity: 1.0;
}
#la-timer{
    background: rgba(255, 255, 255, 1);
    color: rgba(0,0,0,1.0);

    border-radius: 15px;
    
    --rows: 2;
    grid-template-rows: 2fr 1fr;
    padding: 10px;
    
    max-width: 400px;
    margin-block: 4px;
    margin-left: auto;
    margin-right: auto;
}
#la-timer > span{
    color: black;
}

#la-lottery-inner{
    
    
    /*  url(../media/diamond-stroke.svg),  */
    color: white;
    /*mix-blend-mode: multiply;*/
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

    transition: 200ms background;
}
.blend-screen{
    mix-blend-mode: screen;
    opacity: 0.95;
}
.blend-mx{
    mix-blend-mode: plus-lighter;
    opacity: 0.65;
}

#la-bonus-bag{
    /*  */
    background-image: url(../media/bonus-bag-outline.svg), linear-gradient(-45deg, rgba(255, 102, 214, 0.68), rgba(121, 0, 173, 0.654));
    background-image: url(../media/bonus-bag-outline.svg), linear-gradient(to bottom right, rgba(211, 0, 0, 0.65), rgba(233, 49, 103, 0.65));
}
#la-subscription{
    /* linear-gradient(-45deg, rgba(0, 193, 223, 0.682), rgba(0, 56, 197, 0.654)); */
    background-image: url(../media/diamond-stroke.svg), linear-gradient(-45deg, rgba(0, 193, 223, 0.682), rgba(0, 56, 197, 0.654));
    background-image: url(../media/diamond-stroke.svg), linear-gradient(to bottom right, rgba(231, 125, 0, 0.65), rgba(229, 60, 60, 0.65));



    /* linear-gradient(to bottom right, rgba(213, 0, 0, 0.68), rgba(233, 49, 103, 0.6784313725490196) 47.9%, rgba(255, 102, 214, 0.68))*/
}
#la-markets{
    /*  linear-gradient(-45deg, rgba(246, 119, 40, 0.68) 0.42%, rgba(149, 52, 0, 0.65)); */
    background-image: url(../media/store-outline.svg), linear-gradient(-45deg, rgba(71, 204, 41, 0.65), rgba(0, 129, 1, 0.65));
}
#miner-top{
    background-image: url(../media/miner-ico-outline.svg), linear-gradient(-45deg, #FFB801, #D800A8);
    background-image: url(../media/miner-ico-outline.svg), linear-gradient(-45deg, rgba(231, 167, 0, 0.7), rgba(186, 0, 144, 0.7));
}

.trans-btn{
    border: 1px solid white;
    color: white;
    margin-top: 15px;
    transition: 200ms all;
    cursor: pointer;
}
.trans-btn:hover{
    background: white;
    color: black;
    mix-blend-mode: screen;
}



.has-questions{
    color: #ffa3a3;
    color: white;
}
a{
    color: var(--ed-text-first);
    text-decoration: none;
}
#help-btn{
    display: inline-flex;
    grid-gap: 5px;
    align-items: center;
    margin: -5px;
    margin-inline: -1px;
    padding: 5px;
    border-radius: 7px;
    color: #3eb9ff;
    /*color: white;*/
    text-decoration: none;
}


@media (prefers-color-scheme: light) {
    #header-ico{
        background-image: url(../media/coin-black.svg);
    }
    #header-logo{
        background-image: url(../media/kubiki-logo-flat-black.svg);
    }
    .has-questions{
        color: #e95c5c;
    }
    #help-btn{
        color: #0883ca;
    }
}

#la-lottery-inner{
    background: rgba(0, 0, 0, 0.2);
}

#info-loadable{
    background: url(../media/loading.svg);
    background-position: center;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}
#info-loadable > *{
    opacity: 0;
    /*transform: scale(0.9);*/
}

.with-ready #info-loadable {
    background: none;
}
.with-ready #info-loadable > *{
    
    opacity : 1;
    transition: 100ms all;
    
    /*
    animation: landing-anim 0.2s forwards 1;
    animation-timing-function: ease-out;
    -webkit-animation: landing-anim 0.2s forwards 1;
    -webkit-animation-timing-function: ease-out;
    */
}
.with-ready #la-lottery-inner{
    background: transparent;
}

@keyframes landing-anim{
	0% { opacity: 0;}
    100% {opacity: 1;}
}

@media screen and (max-width: 5px) {
    #info-loadable {
        --cols: 1;
    }
}

.tile, #la-lottery-inner{
    border-radius: 10px;
}

@media screen and (min-width: 700px) {
    .tile-block{
        margin-left: 10px;
        margin-right: 10px;
    }
    
}
#lottery-stats{
    grid-gap: 15px;
}

.tile > *, #la-lottery-inner > *{
    margin-left: auto;
    margin-right: auto;
}
hr{
    display: block;
    border: 0.5px solid rgba(255,255,255,0.3);
    width: 100%;
    margin-top:10px;
    margin-bottom: 10px;   
}

#online-pulse{
    width: 8px;
    height: 8px;
    

    animation: pulse-opacity 1.5s forwards infinite;
    animation-timing-function: ease-out;
    -webkit-animation: pulse-opacity 1.5s forwards infinite;
    -webkit-animation-timing-function: ease-out;
    background: rgba(67, 255, 67, 0.478);
    border-radius: 100%;   
}

#top-by-tickets{
    grid-template-rows: max-content 1fr;
    height: 139px;
}
#left-column{
    height: 139px;
}

@keyframes pulse-opacity{
	0% { opacity: 1; transform: scale(1);}
	40% {  opacity: 0.2; transform: scale(0.8);}
	80% { opacity: 1; transform: scale(1);}
}
.ticket-count-personal{
    width: 14px;
}
.player-num{
    width: 12px;
    opacity: 0.35;
}
.player-prize{
    border: 1px solid white;
}
#online-top-header{
    margin-bottom: 10px;
}
.player-avatar{
    overflow: hidden;
}
.player-avatar img {
    aspect-ratio: 1;
}
#instructions, #prizes-list{
    grid-gap: 16px;
    margin: 0;
}
#prizes-list{
    margin-top: 16px;
}
#prize-grid{
    --cols: 3;
    grid-gap: 6px;
    margin-top: 4px;
}
#prize-grid #main-prize{
    grid-column: span 3;
    background-image: url(../media/star-black.svg), linear-gradient(-45deg, white, white);
    --ico-size: clamp(35px, 12vw, 50px);
    padding: 8px;
}
#miner-top-table{
    /*

    margin-left: 0px;
    margin-right: 0px;

    */
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 450px;
    width: 90%;
    height: 120px;
    
}
#miner-top-table.loading{
    background: url(../media/loading.svg);
    background-position: center;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}
#miner-top-table.loading > *{
    opacity: 0;
}

#prize-grid > grid{

    padding: 6px;
    border-radius: 12px;
    text-align: center;

    --ico-size: clamp(25px, 7.5vw, 35px);
	--ico-dive: calc(var(--ico-size) / (-6.5));

    background-repeat: no-repeat, no-repeat;
	background-size: var(--ico-size) var(--ico-size), auto auto;
  	background-position: bottom var(--ico-dive) right var(--ico-dive), 0px 0px;

    background-image: url(../media/coin-almost-blk.svg), linear-gradient(-45deg, white, white);   
}
#prize-grid .bo{
    color: rgba(0,0,0,0.9);
}
#prize-grid .sec{
    color: rgba(0,0,0,0.95);
}
#instructions > *{
    grid-template-rows: max-content 1fr;
}
#info-loadable{
    text-transform: uppercase;
    grid-gap: 10px;
    --cols: 2;
    grid-template-columns: 1fr 1fr;
    margin-inline: 0px;
}
.player .rating{
    opacity: 0.52;
}
.player-avatar .blend-mx{
    opacity: 0.7;
}

.blend-mx.o6{
    opacity: 0.6;
}
@media (prefers-color-scheme: dark) {
    .blend-mx, .blend-mx.o6{
        opacity: 0.8;
    }
}
#results-column{
    grid-template-rows: max-content 1fr;
    text-transform: none;
}

#info-loadable:not(.with-results) #results-column{
    display: none;
}
#info-loadable.with-results #top-by-tickets{
    display: none;
}
#results-top-header{
    text-transform: uppercase;
}
#results-info > div{
    margin-top: 8px;
}
#results-info a{
    text-decoration: underline;
    color: white;
}

.jump {
	animation: jump 1.8s forwards 3;
    animation-timing-function: ease-out;
    -webkit-animation: jump 1.8s forwards 3;
    -webkit-animation-timing-function: ease-out;
}


@keyframes jump {
	0% { transform: scaleY(1.0); }

	2% { transform: scaleY(1.2) translateY(-20px); }
	8% { transform: scaleY(0.9) translateY(-40px); }
	12% { transform: scaleY(1.2) translateY(-20px); }
	15% { transform: scaleY(0.8); }

	18%{ transform: scaleY(1.1) translateY(-15px); }
	23% { transform: scaleY(0.95) translateY(-30px); }
	27%{ transform: scaleY(1.1) translateY(-15px); }
	30%{ transform: scaleY(0.9);}
	

	31%{ transform: scaleY(1.05) translateY(-10px); }
	34% { transform: scaleY(0.97) translateY(-20px); }
	37%{ transform: scaleY(1.05) translateY(-10px); }
	39%{ transform: scaleY(0.95); }

	41%{ transform: scaleY(1.03) translateY(-5px); }
	43% { transform: scaleY(0.98) translateY(-10px); }
	46%{ transform: scaleY(1.03) translateY(-5px); }
	48%{ transform: scaleY(0.97);}

	50% { transform: scaleY(1.0);}
}