/* --------- zone de resultats --------------*/
wheelsres{ 
    display: flex; flex: none; flex-direction: column; border-radius: 1vw; overflow: hidden;
    position: absolute; top: -2em; left: 0; width: 100%; height: calc( var(--wheelctHeight) + 4em );
}
wheelsres .overlay{ 
    display: flex; flex: none; width: 100%; height: calc( var(--wheelctHeight) + 4em );
    position: absolute; top: 0; left: 0; overflow: hidden;
}
wheelsres #wheels_win_cars{
    background: url(images/wheels/win/wheel_win_cars.png) no-repeat; background-position: left 30% bottom -12%; background-size: 110% auto;
    filter: drop-shadow( 0 -1em 3em #d24f00 );
}
#wheelsView.resShow.small #wheelsres_small #wheels_win_cars{ animation: reszonecars 1s linear both; }
@keyframes reszonecars{
    from{ background-position: left 30% bottom -75%; }
    to{ background-position: left 30% bottom -12%; }
}

.drone_overlay{ justify-content: center; padding-top: 3em; animation: droneraise 1s linear both; }
@keyframes droneraise{
    from{ padding-top: 100%; }
    to{ padding-top: 3em; }
}
.drone_overlay.tablette{ padding-top: 2em; animation: droneraise_tbl 1s linear both; }
@keyframes droneraise_tbl{
    from{ padding-top: 100%; }
    to{ padding-top: 2em; }
}
wheelsres #drone{ display: flex; flex: none; position: relative; height: 18em; aspect-ratio: 587/286; animation: dronebounce 1s ease-in-out infinite both; }
@keyframes dronebounce{
    0%{ transform: translate(0, 0.75em); }
    50%{ transform: translate(0, -0.75em); }
    100%{ transform: translate(0, 0.75em); }
}
wheelsres #drone reszone{ 
    display: flex; flex: none; align-items: center; justify-content: center; width: 100%; aspect-ratio: 587/286;
    position: absolute; top: 0; left: 0;
    background: no-repeat center center; background-size: contain; 
}
wheelsres #drone reszone #main{ 
    display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 45%; margin-bottom: 1em;
} 
wheelsres #drone reszone #main h1{ display:flex; flex: none; align-items: center; justify-content: center; font-size: 2.5em; margin: 0.25em 0; }
wheelsres #drone reszone #main h1 img{ height: 1em; margin-left: 0.25em; } 

wheelsres .tablette #drone{ aspect-ratio: 365/291; } 
wheelsres .tablette #drone reszone{ aspect-ratio: 365/291; } 
wheelsres .tablette #drone reszone #main{ width: 75%; margin-bottom: 0; margin-top: 3em;}


#wheelsView #wheelsres_small{ display: none; } /* #wheelsView #wheelsres_small_reg, #wheelsView #wheelsres_small_big */
#wheelsView.resShow.small #wheelsres_small{ display: block; }

/*-- originale */
#wheelsView #wheelsres_small wheelsres #drone reszone{ background-image: url(images/wheels/win/drone_R1.png); }
#wheelsView #wheelsres_small wheelsres .tablette #drone reszone{ background-image: url(images/wheels/win/dronetablet_R1.png); }


#wheelsView #wheelsres_big{ display: none; } /* #wheelsView #wheelsres_small_reg, #wheelsView #wheelsres_small_big */
#wheelsView.resShow.big #wheelsres_big{ display: block; }
wheelsres #wheels_win_safes{
    background: url(images/wheels/win/wheel_win_safe.png) no-repeat; background-position: left 10% bottom -12%; background-size: 105% auto;
    filter: drop-shadow( 0 -1em 3em #d24f00 );
}
#wheelsView.resShow.big #wheelsres_big #wheels_win_safes{ animation: reszonesafe 1s linear both; }
@keyframes reszonesafe{
    from{ background-position: left 10% bottom -75%; }
    to{ background-position: left 10% bottom -12%; }
}

#wheelsView #wheelsres_big wheelsres #drone reszone{ background-image: url(images/wheels/win/drone_R2.png); }
#wheelsView #wheelsres_big wheelsres .tablette #drone reszone{ background-image: url(images/wheels/win/dronetablet_R2.png); }

#wheelsView #wheelsres_big wheelsres reszone .resSPE{ 
    display: inline-flex; flex: none; align-items: center; font-size: 1.25em; height: 1.2em; padding: 0.1em 1.75em 0.1em 0.5em; border-radius: 0.5em; 
    background: right center no-repeat; background-size: cover; border: 2px solid #000;
}
#wheelsView #wheelsres_big wheelsres reszone .resBTC{ background-image: url(images/wheels/btc_fond.png); }
#wheelsView #wheelsres_big wheelsres reszone .resETH{ background-image: url(images/wheels/eth_fond.png); }

#fireworksCanvas{ width: 100%; height: 100%; }

/*-- gains normaux */