:root{ 
    --header-bg: #3a3d51; 
    --bg-color: #3e4464; 
    --footer-bg: #161824; 
    --bets-bg: rgb(58, 61, 81); 
    --bets-border: rgb(64, 75, 79); 
}
html, body{ display:block; height:100%; background:var(--footer-bg); overflow-x: hidden; }
#main_wrapper{ width:100%; height:100%; min-height:100%; display:flex; flex-flow:column nowrap; justify-content:start; align-items:stretch; gap:0px; padding:0px; background:var(--bg-color); border-radius:0; }
main{ width:100%; flex-grow:1; flex-shrink:1; display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:stretch; gap:0px; padding:0px; overflow:hidden; position:relative; } 
#game_container{ width:100%; height:100%; position:relative; }
#game_field{ width:100%; height:100%; } 

#splash{ display:flex; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,1); border:0; flex-flow:column nowrap; justify-content:center; align-items:center; gap:0; color:#fff; font-size:16px; opacity:1; transition:all 0.5 linear; }
#splash h4{ color:#fff; font-size:5rem; font-weight:700; text-align:center; cursor:pointer; }
#splash.show_modal{ background:rgba(0,0,0,0.5); backdrop-filter: blur(10px); }
#splash .disclaimer{ display:none; width:300px; background:#2c2d30; padding:10px; flex-flow:column nowrap; justify-content:start; align-items:stretch; gap:10px; border-radius:10px; }
#splash .disclaimer h4{ width:100%; height:30px; display:flex; flex-flow:row nowrap; justify-content:start; align-items:center; gap:0; padding:0px 0px; }
#splash .disclaimer h4 img{ height:30px; width:auto; margin:0; }
#splash .disclaimer p{ font-size:16px; line-height:1.5em; text-align:left; color:#fff; padding:10px 0px 20px 0px; }
#splash .disclaimer button{ width:100%; height:40px; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; gap:0px; background:rgb(40, 169, 9); border:solid 1px rgb(178, 242, 163); border-radius:12px; cursor:pointer; color:#fff; font-size:16px; font-weight:bold; }
#splash .disclaimer button:hover{ background:#36cb12; }

#splash.show_modal .disclaimer{ display:flex; }
#loader, 
#loader:before, 
#loader:after { border-radius: 50%; width: 2.5em; height: 2.5em; animation-fill-mode: both; animation: bblFadInOut 1s infinite ease-in-out; cursor:pointer; }
#loader { color: #FFF; font-size: 7px; position: relative; text-indent: -9999em; transform: translateZ(0); animation-delay: -0.16s; }
#loader:before,
#loader:after { content: ''; position: absolute; top: 0; }
#loader:before { left: -3.5em; animation-delay: -0.32s; }
#loader:after { left: 3.5em; } 

#overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.01); z-index:100; }

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}

#splash.show_modal #loader{ display:none; }



header#header{ width:100%; height:50px; display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:center; gap:0px; flex-grow:0; flex-shrink:0; background:var(--header-bg); border:0; padding-right:10px; position:relative;  } 
#logo{ height:100%; width:240px; border:0; cursor:pointer; text-decoration:none; background:transparent url('../img/logo.svg') center center no-repeat; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; gap:0 flex-grow:0; flex-shrink:0; }
#header .menu{ display:flex; flex-grow:1; flex-shrink:1; flex-flow:row nowrap; justify-content:end; align-items:center; gap:10px; padding:0px 0px; } 
#header .menu button[data-rel="menu-balance"]{ display:flex; justify-content: center; min-width: 150px; align-items: center; padding: 4px 16px; gap: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 6px; height: 33px; color:#fff; }
#sound_switcher{ height:33px; aspect-ratio:1; background:transparent /*url('../img/sound_off.png') center center no-repeat*/; background-size:90%; border-radius:50%; border:0; cursor:pointer; }
#sound_switcher.off{ /*background-image:url('../img/sound_on.png');*/ } 
#sound_switcher svg{ height:33px; width:33px; }
#show_burger_menu{ display:none; } 
#burger_menu{ width:270px; display:none; flex-flow:column nowrap; justify-content:stretch; align-items:stretch; gap:10px; border-radius:12px;  background: rgb(58, 61, 81);; padding:16px; color:#fff; position:absolute; top:100%; right:10px; margin-top:10px; z-index:100; box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 12px; border: 2px solid rgb(64, 75, 79); padding: 16px; transition: opacity 0.2s; opacity: 1; pointer-events: auto; } 
#show_burger_menu:checked ~ #burger_menu{ display:flex; }
#burger_menu .line{ display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:center; gap:10px; }
#burger_menu .line svg{ height:17px; flex-grow:0; flex-shrink:0; }
#burger_menu .line span{ flex-grow:1; flex-shrink:1; text-align:left; font-weight: 400; font-size: 14px; line-height: 14px; color:#fff; }
#burger_menu .line .switcher{ width:28px; height:17px; background: rgba(255, 255, 255, 0.1); transition: 0.3s; border-radius: 34px; position:relative; }
#burger_menu .line .switcher input{ display:none; }
#burger_menu .line .switcher div{ position: absolute; top: 1px; height: calc(100% - 2px); aspect-ratio:1; left: 1px; transition: 0.3s; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 0.1px 0.3px, rgba(0, 0, 0, 0.2) 0px 1px 2px;
}
#burger_menu .line .switcher:has( input:checked ){ background: rgb(27, 205, 73); }
#burger_menu .line .switcher input:checked ~ div{ left: calc(40%); }



#stats{ height:40px; position:absolute; top:0px; left:0px; width:240px; display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:center; gap:0; padding:0px 10px; }
#stats span{ flex-grow:0; flex-shrink:0; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; color: rgb(167, 177, 230); } 
#stats div{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; } 
#stats div i{ display:block; width:8px; height:8px; border-radius:50%; background-color: rgb(83, 243, 94); }
#random_bet{ position:absolute; top:40px; left:0px; width:240px; height:0px; transition:all 0.5s linear; overflow:hidden; display:flex; flex-flow:row nowrap; justify-content:end; align-items:stretch; gap:0; }
#random_bet .inner{ width:100%; height:40px; background:linear-gradient(90deg, rgba(92, 105, 150, 1) 0%, rgba(92, 105, 150, 0) 100%); display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:center; gap:10px; padding:0px 10px; }
#random_bet .inner img{ height:60%; aspect-ratio:1; border-radius:50%; }
#random_bet .inner h2{ font-size:12px; font-weight:bold; color:#fff; line-height:1.5em; flex-grow:1; flex-shrink:1; text-align:left; }
#random_bet .inner h3{ font-size:12px; font-weight:bold; color:rgb(83, 243, 94); line-height:1.5em; flex-grow:0; flex-shrink:0; text-align:right; }




footer#footer{ flex-grow:0; flex-shrink:0; background:var(--footer-bg); display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:center; gap:0; padding:20px; } 
#bet_wrapper{ width:100%; min-height:130px; display: flex; flex-flow:row nowrap; justify-content:stretch; align-items:stretch; gap:20px; border-radius: 16px; border: 2px solid var(--bets-border); background:var(--bets-bg); padding: 16px; gap: 20px; color:#fff; } 
#values{ flex-grow:0; flex-shrink:0; display:flex; flex-flow:column nowrap; justify-content:stretch; align-items:stretch; gap:10px; }
#dificulity{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:column nowrap; justify-content:stretch; align-items:stretch; gap:0; position:relative; } 
#dificulity i{ position:absolute; inset:0; display:none; cursor:default; }
#close_bet{ display:none; flex-flow:column nowrap; justify-content:center; align-items:center; gap:0; border: 0px; flex: 1 1 0%; font-family: "Montserrat", sans-serif; font-weight: 700; border-radius: 12px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px; background: rgb(255, 194, 26); color: rgb(29, 31, 33); font-size: 20px; text-transform: uppercase; white-space:nowrap; } 
#close_bet:hover{ filter: brightness(110%); } 
#close_bet span{ color: rgb(29, 31, 33); font-size: 20px; text-transform: uppercase; white-space:nowrap; font-family: "Montserrat", sans-serif; font-weight: 700; }
#start{ display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; gap:0; border: 0px; flex: 1 1 0%; font-family: "Montserrat", sans-serif; font-weight: 700; color: rgb(255, 255, 255); background: rgb(61, 197, 91); border-radius: 12px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px; font-size: 24px; text-transform: uppercase; } 
#start:hover{ filter: brightness(110%); } 

.gray_input{ min-height:50px; display:flex; box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px; background: rgb(78, 80, 98); border-radius: 6px; width: 100%; border: 1px solid rgb(78, 80, 98); transition: border 0.2s ease-in-out; } 
.gray_input:hover{ border: 1px solid rgb(95, 97, 114); } 
.bet_value_wrapper{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:stretch; gap:10px; padding:10px; }
.bet_value_wrapper button{ height:100%; width:50px; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; flex-grow:0; flex-shrink:0; border-radius:6px; background: rgb(96, 97, 114); color: rgb(255, 255, 255); font-weight: 600; line-height: 150%; letter-spacing: -0.3px; text-transform: uppercase; font-size:14px; cursor:pointer;}
.bet_value_wrapper button:hover{ background: rgba(255, 255, 255, 0.15); }
.bet_value_wrapper input{ flex-grow:1; flex-shrink:1; background:transparent; border:0; color:#fff; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; text-align:center; color: rgb(255, 255, 255); font-weight: 600; line-height: 150%; letter-spacing: -0.3px; text-transform: uppercase; font-size:14px; }
.basic_radio{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:stretch; gap:10px; }
.basic_radio .gray_input{ height:50px; display:flex; justify-content:center; align-items:center; gap:5px; min-width:auto; flex-grow:1; flex-shrink:1; padding:0px 20px; } 
.basic_radio .gray_input:hover{ background: rgb(95, 97, 113); }
.basic_radio input{ display:none; }
.basic_radio span{ cursor: pointer; color: rgb(255, 255, 255); font-weight: 600; line-height: 150%; letter-spacing: -0.3px; text-transform: uppercase; font-size:14px; }

#dificulity h2{ flex-grow:1; flex-shrink:1; display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:start; gap:0; font-size:16px; font-weight:600; color:#fff; cursor:default; } 
#dificulity h2 span{ flex-grow:1; flex-shrink:1; text-align:right; color: rgb(255, 255, 255); opacity: 0.6; } 
#dificulity .radio_buttons{ display:flex; justify-content:stretch; align-items: center; gap:10px; border-radius: 8px; height:50px; background: rgb(78, 80, 98); box-shadow: rgba(0, 0, 0, 0.25) 0px 2.99px 3.987px 0px; width: 100%; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 600; color: rgb(142, 143, 154); padding:5px; }
#dificulity .radio_buttons label{ flex-grow:1; flex-shrink:1; height:100%; display:flex; justify-content:center; align-items:center; gap:0; cursor:pointer; }
#dificulity .radio_buttons label span{ width:100%; height:100%; display:flex;  font-size: 14px; font-weight: 600; color: rgb(142, 143, 154); background:transparent; border-radius: 8px; }
#dificulity .radio_buttons label:hover span{ background: rgb(95, 97, 113); color: rgb(255, 255, 255); }
#dificulity .radio_buttons input{ display:none; }
#dificulity .radio_buttons input:checked ~ span{ background: rgb(95, 97, 113); color: rgb(255, 255, 255); } 
#buttons_wrapper{ display:flex; flex-flow:row nowrap; justify-content:stretch; align-items:stretch; gap:20px; flex-grow:1; flex-shrink:1; }


@media ( max-width:1110px ){
    #bet_wrapper{ height:385px; border-radius:12px; flex-flow:column nowrap; }
}



#win_modal{ display:none; position:fixed; inset:0; z-index:200; background:rgba(40, 44, 69, 0.5); flex-flow:row nowrap; justify-content:center; align-items:center; gap:0; }
#win_modal .inner{ min-width:400px; aspect-ratio:1; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; gap:10px; background:rgba(40, 44, 69, 0.5); padding:50px 50px; border-radius:20px; border:solid 3px #9ea6ca; backdrop-filter: blur(10px); transform-origin:center; animation: modal 3s linear infinite; } 
#win_modal .inner h2{ font-size:48px; line-height:1.5em; font-weight:bold; color:#fff; }
#win_modal .inner h3{ font-size:60px; line-height:1.5em; font-weight:bold; color:#ffc31a; }
#win_modal .inner h4{ font-size:36px; line-height:1.5em; font-weight:bold; color:#2bfd80; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; gap:10px; }
#win_modal .inner h4 span{ font-size:36px; line-height:1.5em; font-weight:bold; color:#2bfd80; } 
@keyframes modal {
    0%{ transform:rotateZ(0deg); }
    25%{ transform:rotateZ(-15deg); }
    50%{ transform:rotateZ(0deg); }
    75%{ transform:rotateZ(15deg); }
    100%{ transform:rotateZ(0deg); } 
}




@media (max-width:1150px){
    #main_wrapper{ height:auto; }
    /*main{ flex-flow:column nowrap; justify-content:start; }*/
    #bets_wrapper{ width:100%; height:100vh; order:2; }
    #game_field{ width:100%; aspect-ratio:4/3; }
    #game_container{ min-height:575px; }
} 

@media ( max-width:1110px ){
    /*#game_container{ min-height:calc( 100vh - 435px ); } */
}
@media ( max-width:700px ){
    #game_container{ min-height:500px; } 
    #dificulity h2{ display:none; }
}