* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto, Arial, sans-serif;
    height: 100%;
    height: -webkit-fill-available;
    margin: 0;
    color: #FFF;
    background-color: transparent;
    touch-action: manipulation;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    background-size: contain;
    background-position: center;
    background-color: #000;
    overflow: hidden;
}

a {
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.hidden {
    display: none !important;
}

#btnSpinButton-autospinCountText
{
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:black; font-size: 24px;
}

/* LOADER ------------------------------------------------------- */
#vlt,
#loading-hint {
    visibility: hidden;
}

.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;    
}

/* LOGO,PROGRESS,LOADING TEXT */
.inner {
    margin-left: auto;
    margin-right: auto;
    width: 22.7vw;
    text-align: center;
     height:5vw;
}

.inner .progress {
    position: relative;
    width: 100%;
    margin: 0px auto;      
}
.inner .progress img {
    width: 22.7vw;
   
}
.inner .progress .default {
    top: 0;
    left: 0;
}
.inner .progress .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    overflow: hidden; 
}

.logo2 {
    position: relative;
    width: 30vw;
    height:5vw;
}
.logo2 img {
     position: absolute;
    top: 0;
    left: 0; 
    width: 30vw; 
     height:5vw; 
}
.logo2 img:first-child {
    opacity: 1;
    animation: moveLeftToCenter 1s ease .5S forwards;
} 
@keyframes moveLeftToCenter {
  from { transform: translateX(50%); }
  to { transform: translateX(0); }
}
.move-animation {    
    
    animation: moveLeftToCenter 1s ease  forwards;    

    
} 
.glow2 {
    padding-bottom: 0px;
    letter-spacing: 5px;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 1vw;/*.8rem;*/
    color: #fff;
}

@media (orientation: portrait) {
     .inner {   
        width: 50vw;  
        height:11vw; 
    }
    .inner .progress img {
    width: 50vw;
    }  
    .inner .logo2 img {
        width: 66vw;
         height:11vw;
    }  
    .logo2 {
         left:-0.10vw;
         top:-6vw;
    }
    .glow2 {
        font-size: 2vw;
    }
}

.inner img.loader {
    width: 90px;
    height: 90px;
    margin-top: 20px;
}




/* T A P  T O  F U L L S C R E E N ----------------- */
.fs-overlay {
    visibility: hidden;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fs-overlay span {
    font-size: 30px;
    color: #FFF;
    text-align: center;
    padding: 0 20px;
}

.fs-overlay .btn.snd {
    margin-left: 5px;
    margin-right: 5px;
}

.fs-overlay .sound {
    display: flex;
    justify-content: center;
}


/* C O N T R O L S------------------------------------------------------- */

.controls {
     visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; 
}

.controls ul.left {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 40%;
    left: 2rem;
    transform: translate(0, -50%);
    list-style-type: none;  
}

.controls ul.right {
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 40%;/*40vh;*/
   /* right: 10px;*/
    right: 2rem;
    transform: translate(0, -50%);
    list-style-type: none;
}

/* autostart posun od start*/
.liSpace
{
    height:5vh;/*50px;*/
}
/* Posun Plus Minus */
.liSpace2
{
    height:5vh;/*50px;*/
}

/*
.controls ul.right li {
    padding-top: 1rem;
}
*/
.controls ul li {
    display: flex;

}

a.btn {
    color: #FFF;
    text-align: center;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s;
    transform: scale(0.93);
}
a.btn:active {
    transform: scale(0.83);
    opacity: 0.8;
}
a.btn.btn-disabled {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
    /* invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);*/
}
a.btn.btn-hidden {
    pointer-events: none;
    opacity: 0.5;
    display: none;
}

.controls #btnSound>#sndDisabledIcon {
    display: none;
}
#menu {
    list-style: none;
}

/* hranate */
  a.btn-wd {
    scale:60%;
}  

/* L A N D S C A P E -------------------------------------------------------------------------- */
@media (orientation: landscape) {   
    a.btn {
        width:  10vw;
        height: 7vw;
    }
    
    a img {
        width: 10vw;
        height: 10vw;
        
    
        position: absolute;
        left: 0%;
        right: 0%;
    }

    .controls .more a.btn
    {
        width:  7vw;
       
    }

    /* Plus,minus,autostart*/
    a.btn_circle_small
    {
        scale:70%;
    }
     /* a.btn-wd {
        width:  10vw;
        height: 10vw;
        scale:70%;
    }  */

    /* btnMore */
    #menu {
        position: absolute;
         bottom: -2rem;
        margin: 2rem;
        list-style: none;
    }

    /* div more */
    .controls .more {
        visibility: hidden;
        position: absolute;       
        list-style: none;        
    }
    /*more*/
    .controls .more ul.list {
        display: flex;
        position: fixed;     
        justify-content: left;       
        z-index: 10; 
        bottom: -2rem;
        margin: 2rem;      
         left:7.5vw;      
        transform: none;
       
    }    
   /* Autospin count */

   #btnSpinButton-autospinCountText
{
    transform: translate(-50%, 0%);
}

   .controls .more2 {
    /* visibility: hidden; */
    position: absolute;       
    list-style: none;        
}
 .more2  li {           
    /* margin:-0.3rem; */
    width:7vw;
 }      
.controls .more2 ul.list {
    display: flex;
    position: fixed;     
    justify-content: left;       
    z-index: 10; 
    /* top: -2rem;
    margin: 2rem;       */
    margin:2px;
     right:8.0vw;       
    /* transform: none; */
    transform: translate(-5%, 0%);              
}      
/* .menu2 {
    position: absolute;
     bottom: -2rem;
    margin: 2rem;
    list-style: none;
} */
/* .controls .more ul.list li {         
}    */
}
/* P O R T R A I T -------------------------------------------------------------------------- */
@media (orientation: portrait) {
    #vlt {
        height: auto !important;
    }   
    .controls {
        display: flex;
        flex-direction: column;     
        justify-content: center;
        align-items: center;
        top:30%;
    }  
    /* autostart posun od start*/
    .liSpace 
    {
        height:0px;
    }     
    #btnAutostart
    {
        scale:70%;
        /* position: fixed;
        top:100%;
        left:40vw; */
    }    
    #btnSpinButton
    {
        scale:120%;
    }

    a.btn_circle_small
    {
        /* scale:70%; */
    }
    /*plus posun od minus */
    .liSpace2 
    {
       width:calc(28vh);
        
    }
    .controls ul.left {        
         flex-direction: row-reverse;
        position: relative;       
        top:calc(140vh - 135%);
        left: 0;
        justify-content:center;
        transform: translate(0%, 0%); 
        scale:60%;
    }
    a.btn {
        width: 10vh;
        height:10vh;
    }    
    a img {
        width: 10vh;
        height: 10vh;/*100px;*/            
        position: absolute;
        left: 0%;
        right: 0%;
    }
    /* more menu tl. */
    a.btn-wd {
        width:  7.5vh;
        height: 7.5vh;
    } 


    /* spin + autostart */
    .controls ul.right {
        flex-direction: column;
        position: relative;       
        top:calc(120vh - 135%);         
        right: 0;
        justify-content:end;
        transform: translate(0%, 0%);
    }

    /* btnMore */
    #menu {
        display: flex;
        flex-direction: row-reverse;
        position: relative;              
         top:calc(120vh - 135%);  
        left: 0;
        justify-content:center;
        transform: translate(0%, 0%);         
    }

    /* div more */
    .controls .more {
        visibility: hidden;
        position: absolute;
        list-style: none;               
        top:calc(120vh - 82%);  
        left: 0;
        justify-content:center;
        transform: translate(0%, -60%);       
    }
    
     /*AutoSpin count*/
     .controls .more2 {      
        position: absolute;       
        list-style: none;        
    }    
    .more2  li {           
       margin:-.3rem;
    }  
    .controls .more2 ul.list {
        
        display: flex;
        position: fixed;     
        justify-content: center;       
        z-index: 10;          
          left:0;        
          transform: translate(-36%, -90%);       
       
    }  
    
    @media (min-aspect-ratio: 7/12)
    {     
        /* 2023-12-22
         #btnAutostart
        {     
        position: relative;
        top: 100%;
        left: 40vW;
        } 
        */    
        
        
 

    }
         /* CSS specific to iOS devices */ 
         @supports (-webkit-touch-callout: none) { 
            .controls {overflow: visible;}
            .controls ul.left {top:14%}
            .controls ul.right {top:-8%}            
            .controls .more {top: 22%;left: 1.5%;}
        /* 2023-12-22
            #menu {             
              top:-20%; 
              left:-41vW;
            }
            */
            /* 2023-12-22
		 #btnAutostart
		        {     
		        position: relative;
		        top: 95%;
		        left: 40vW;
		        }     */
           } 





    /* @media (min-aspect-ratio: 7/11)
    {      
        .svgColor
        {     
        opacity: 50%;       
        }         
    } */
}




/* SVG ----------------------------------------------------------------- 8/
/* stin svg img */
.svg_shadow {
    filter:
        drop-shadow(-1px -1px 1px #00000055) drop-shadow(1px -1px 1px #00000055) drop-shadow(1px 1px 1px #00000055) drop-shadow(-1px 1px 1px #00000055)
}

/* svg img frame */
.svgColorTop {
    filter:        
        drop-shadow(-1px -1px 1px #000000FF) drop-shadow(1px -1px 1px #000000FF) drop-shadow(1px 1px 1px #000000FF) drop-shadow(-1px 1px 1px #000000FF)
}

/* svg img background */
.svgColor {
    filter: invert(12%) sepia(63%) saturate(234%) hue-rotate(146deg) brightness(87%) contrast(156%);
}

/* NEW_GUI - color pro tlacitka ve hre v canvas odpovidajici barve nastavene v svgColor,svgColorTop hra(statefullTextButton2) si to zde precte */
/* pouziti v statefullTextButton2 - potrebuje v index2.html fake button pro nacteni CSS s id gameBtnColor a gameBtnColorTop */
/* tlacitka jsou seda v Phaser2.png klic (btnRectBck,btnRectBckTop,btnSqBck,btnSqTop)*/
.gameBtnColor {
    color:#9FFCFA;
}
.gameBtnColorTop {
    color:#FFFFFF;
}

.svgColor2 {
    filter: invert(122%) sepia(63%) saturate(234%) hue-rotate(46deg) brightness(87%) contrast(156%);
}


#controls {
    pointer-events: none;
}
#controls a.btn {
    pointer-events: all;
}