style.css

:root {
    --body-bg: #221e1f;
    --tile-bg: rgba(255, 255, 255, 0.2);
    --tile-active-bg: rgba(255, 255, 255, 0.8);
    --tile-correct-bg: #30ad63;
    --tile-incorrect-bg: #e54d42;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--body-bg);
    font-family: 'Inter', sans-serif;
    color: #fff;
    user-select: none;
    overflow-x: hidden;
  }
  .menuOptions{
      
      width: 100%;
      display: flex;
      flex-direction: column;       
      align-items: center;
      position: relative;
      transition: 0.5s;
      /**/      
      
  }
  .infoContent { 
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iMjQiIGhlaWdodD0iMjQiCnZpZXdCb3g9IjAgMCAyNCAyNCIKc3R5bGU9IiBmaWxsOiMwMDAwMDA7Ij4gICAgPHBhdGggZD0iTSAxMiAyIEMgNi40ODg5OTcxIDIgMiA2LjQ4ODk5NzEgMiAxMiBDIDIgMTcuNTExMDAzIDYuNDg4OTk3MSAyMiAxMiAyMiBDIDE3LjUxMTAwMyAyMiAyMiAxNy41MTEwMDMgMjIgMTIgQyAyMiA2LjQ4ODk5NzEgMTcuNTExMDAzIDIgMTIgMiB6IE0gMTIgNCBDIDE2LjQzMDEyMyA0IDIwIDcuNTY5ODc3NCAyMCAxMiBDIDIwIDE2LjQzMDEyMyAxNi40MzAxMjMgMjAgMTIgMjAgQyA3LjU2OTg3NzQgMjAgNCAxNi40MzAxMjMgNCAxMiBDIDQgNy41Njk4Nzc0IDcuNTY5ODc3NCA0IDEyIDQgeiBNIDExIDcgTCAxMSA5IEwgMTMgOSBMIDEzIDcgTCAxMSA3IHogTSAxMSAxMSBMIDExIDE3IEwgMTMgMTcgTCAxMyAxMSBMIDExIDExIHoiPjwvcGF0aD48L3N2Zz4=') 50% 50% no-repeat;
    background-size: 100%; 
    filter: invert(1);    
    transition: 0.3s;  
    cursor: pointer; 
  }
  .infoContent:hover{
    filter: invert(0);   
    background-color: rgb(107, 107, 107);
    border-radius: 1.5rem;
  }
  .infoContent:active{
    background-color: transparent;
    transform: scale(0.95,0.95);
    
  }
  
  .menuItem {
      text-align: center;     
      margin-top: 2rem;
      min-width: 40%;
     
      
  }
  .betButton{
    min-width: fit-content;
    padding: 0.6rem  1.3rem ;
    border-radius: 0.3rem;
    background-color: rgba(28, 28, 196, 0.411);
    color: white;
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid white;
    transition: 0.3s all;
    margin: 0 auto;

  }
  .startButton{
    min-width: fit-content;
    padding: 0.6rem  1.3rem ;
    border-radius: 0.3rem;
    background-color: rgba(28, 28, 196, 0.411);
    color: white;
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid white;
    transition: 0.3s all;
      
  }

  .playAgainButton{
    min-width: fit-content;
    padding: 0.6rem  1.3rem ;
    border-radius: 0.3rem;
    background-color: rgba(28, 28, 196, 0.411);
    color: white;
    font-size: 1.15rem;
    font-weight: 500;
    cursor: pointer;
    border: 2px solid white;
    transition: 0.3s all;
  }

  .mainMenuBtn{
    min-width: fit-content;
    padding: 0.6rem  1.3rem ;
    border-radius: 0.3rem;
    background-color: rgba(28, 28, 196, 0.411);
    color: white;
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    border-right:2px solid white;
    border-bottom:2px solid white ;
    transition: 0.3s all;

  }
  .showRatesBtn{
    position: absolute;
    bottom: 0;
    min-width: fit-content;
    padding: 0.5rem  1.1rem ;
    border-radius: 0.3rem;
    background-color: rgba(28, 28, 196, 0.411);
    color: white;
    font-size: 1.10rem;
    font-weight: 500;
    cursor: pointer;
    transform: translateX(-40px);
    border: none;
    border-top:2px solid white;
    border-right:2px solid white;
    border-bottom:2px solid white ;
    transition: 0.3s all;
  }
  .betButton:hover{
    color:rgb(22, 128, 228);
    background-color: rgba(28, 28, 196, 0.041);
    border: 2px solid rgba(28, 28, 196, 0.411);
  }

  .showRatesBtn:hover {
    color:rgb(22, 128, 228);
    background-color: rgba(28, 28, 196, 0.041);
    transform: translateX(0);
    border-right: 2px solid rgba(28, 28, 196, 0.411);
    border-bottom: 2px solid rgba(28, 28, 196, 0.411);
    border-top: 2px solid rgba(28, 28, 196, 0.411);

  }
  .startButton:hover {
    color:rgb(22, 128, 228);
    background-color: rgba(28, 28, 196, 0.041);
    border: 2px solid rgba(28, 28, 196, 0.411);
  }
  .mainMenuBtn:hover{
    color:rgb(22, 128, 228);
    background-color: rgba(28, 28, 196, 0.041);    
    border-right: 2px solid rgba(28, 28, 196, 0.411);
    border-bottom: 2px solid rgba(28, 28, 196, 0.411);

  }
  .playAgainButton:hover {
    color:rgb(22, 128, 228);
    background-color: rgba(28, 28, 196, 0.041);
    border: 2px solid rgba(28, 28, 196, 0.411);
  }
  .startButton:active{
    color:white;
    border: 2px solid white;
  }
  .betButton:active{
    color:white;
    border: 2px solid white;

  }
  .mainMenuBtn:active {
    color:white;    
    border-right: 2px solid white;
    border-bottom: 2px solid white;

  }
  .showRatesBtn:active {
    color:white;
    border-top: 2px solid white;    
    border-right: 2px solid white;
    border-bottom: 2px solid white;

  }

  .playAgainButton:active{
    color:white;
    border: 2px solid white;
  }
  .betInput {
      padding: 0.5rem 0.3rem;
      background-color: rgba(128, 128, 128, 0.021);
      color: rgba(26, 103, 204, 0.712);
      font-size: 1.15rem;
      border-radius: 0.25rem;
      border: 2px solid rgba(128, 128, 128, 0.342);
      outline:none;
      font-weight: 400;
      transition: 0.3s all; 
  }

  .startInput{
      padding: 1.0rem 0.6rem;
      background-color: rgba(128, 128, 128, 0.021);
      color: white;
      font-size: 1.35rem;
      border-radius: 0.25rem;
      border: 2px solid rgba(128, 128, 128, 0.342);
      outline:none;
      font-weight: 400;
      transition: 0.3s all;      
  }
  .startInput:hover {
    background-color: rgba(128, 128, 128, 0.041);
    border: 2px solid rgba(168, 167, 167, 0.473);
  }
  .betInput:hover{
    background-color: rgba(128, 128, 128, 0.041);
    border: 2px solid rgba(168, 167, 167, 0.473);
  }
  .startInput:focus {
    background-color: rgba(128, 128, 128, 0.041);
    border: 2px solid rgba(168, 167, 167, 0.473);
  }
  .betInput:focus{
    background-color: rgba(128, 128, 128, 0.041);
    border: 2px solid rgba(168, 167, 167, 0.473);
  }
  .startInput::placeholder {
    color: rgba(26, 103, 204, 0.712);
    text-align: left;
  }
  .betInput::placeholder{
    color: rgba(26, 103, 204, 0.712);
    text-align: left;
  }
  
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    
  }
  #errorMessage{
      color: red;
      font-size: 0.85rem;
      transition: 0.3s;
      transform: translateY(50px);

  }
  img{
      background-color: rgba(21, 179, 219, 0.158);
      max-width: 95%;
      border-radius: 0.3rem;
      
      

  }

  .playground {
      width: 100%;
      /* border: 2px solid white; */
      display: none;
      height: 100vh;
      position: relative;


      
      
  }
  .gameArena{
      position: absolute;
      display: flex;
      flex-direction: row;
      top: 35%;
      border: 2px solid white;
      margin:auto 0;
      height: 400px;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.507);
      overflow:hidden;
  }
  .startPlatform{
      background-color:  rgba(29, 228, 228, 0.568);
      position: absolute ;
      left: 0 ;
      top: 0 ;      
      height: 100% ;
      min-width: 10% ;
      transform: translateX(-200px) ;   
      transition: 0.5s ease-in ;
      z-index: 5;

  }
  .endPlatform{
    background-color: rgba(12, 240, 69, 0.192);
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;      
    height: 100%;
    min-width: 10%;
    transform: translateX(200px);
    transition: 0.5s ease-in;
  }

  .gameArenaMobile{
    top: 150px;
    height: calc(100vh - 200px);
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: row;      
    border: 2px solid white;      
    width: 100%;
    background-color: rgba(0, 0, 0, 0.507);
    overflow:hidden;
  }

  .startPlatformMobile {
    background-color:  rgba(29, 228, 228, 0.568);    
    position: absolute ;
    left: 0 ;
    transition: 0.5s ease-in ;
    display: none;
    top:  0;
    width: 100%;
    height: calc((100vh - 150px)*0.05);  
    z-index: 5;


  }
  .endPlatformMobile {
    display: none;
    bottom: 0;   
    cursor: pointer; 
    left: 0;
    width: 100%;
    height: calc((100vh - 150px)*0.05);    
    background-color: rgba(12, 240, 69, 0.192);
    position: absolute;      
    transition: 0.5s ease-in;
  }
  .bridge{
    position: absolute;
    left: 11%;
    width: 79%;
    height: 75%;
    top: 12.5%;    
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: 150px 150px;
    grid-auto-columns: auto;
    align-items: center;
    
  }
  .bridge .platform:nth-child(2n+1) { 
    grid-row:1; /* kazdy druhy */
 }
 .bridge{  
  grid-gap:4px;
 }
 
 .platform{
  border: 1px solid white;
  transition: 0.5s ease-out;
  border-radius: 0.15rem;
  background-color: rgba(20, 172, 243, 0.274);
  transform: scale(0,0);
  cursor: pointer;
  height: 50px;
  z-index: 2;     

       
  margin: 0px 10px;

 } 
 


 .platform:hover{    
  background-color: rgba(20, 172, 243, 0.438);

 }
 .platformMobile{
  border: 1px solid white;
  transition: 0.5s ease-out;
  border-radius: 0.15rem;
  background-color: rgba(20, 172, 243, 0.274);
  transform: scale(0,0);
  cursor: pointer;  
  border: 1px solid white;    
  margin: 0px 10px;

 }
 .bridgeMobile {
  position: absolute;
  left: 12.5%;
  width: 75%;     
  display: grid;
  align-items: center;
  justify-items: center;     
  grid-auto-rows: auto;
  grid-template-columns: repeat(2,auto);  
}

.player{
  width: 25px;
  height: 25px;
  border-radius: 2rem;
  position: relative;
  background-color: rgba(223, 238, 14, 0.863);
  border: 3px solid black;
  display: block;
  margin: 0 auto; 
  padding: 0;
  /* background: url('assets/player.png') no-repeat;
  
  background-size: 100%; */
  cursor: pointer;
  text-align: center;
  color: black;
  font-weight: 600;  
  /* transition: 1.3s ease-in; */
  transform: translate(-200px,0);
  z-index: 3;
}
.player:hover {
  background-color:  transparent;
  border: 3px solid rgba(223, 238, 14, 0.863);
}


.playerMobile{
  width: 25px;
  background-color: rgba(223, 238, 14, 0.863);
  border: 2px solid black;
  height: 25px;  
  transform: translate(0,-200px); 
  position: relative;
  border-radius: 2rem;  
  display: inline-block;
  margin-top: auto;  
  margin-bottom: auto;
}
.afterGameContent{
  position: fixed;
  text-align: center;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 45vh;
  z-index: 7;
  width: 100%;
  height: fit-content;
  padding: 1rem;
  margin: auto 0;  
  display: none;
  transition: 0.3s;
}
.afterGameMessage{
  font-size: 2rem;
  
  color: green;
  border-bottom: 1px solid white;
}
.afterGameItem{
  display: block;  
  margin:10px ;
  
}
.tooltipText{
  position: absolute; 
  top: -10px;
  height: fit-content;
  min-width: 180px; 
  background-color: black;
  border-radius: 0.35rem;
  color: white;  
  transition: 0.2s;
  visibility: hidden; 
  transform:  scale(0,0);
  left: 20px;   
}
.tooltipTextMobile{
  position: absolute;
  bottom: -37px;
  height: fit-content;
  font-size: 0.65rem;
  min-width: 65px; 
  background-color: black;
  border-radius: 0.35rem;
  color: white;  
  transition: 0.2s;
  visibility: hidden; 
  transform:  scale(1,1);
  left: 3px;   
}


 .player:hover .tooltipText{
  visibility: visible;
  transform: scale(1) rotate(18deg);
} 

.panelScore{
  height: 150px; 
  position: relative;
  text-align: end;

}
.panelScore button {
  display: block;
}
.profileContent{
  position: absolute;
  right: 5%;
  top: 0;
  box-shadow: 2px 2px 5px  5px   rgb(16, 62, 189);
  max-width:fit-content;
  padding: 0.55rem;
  height: fit-content;  
  text-align: left;  
}
.profileContent div {
  font-size: 1.3rem;
  display: block;
}
.betContent{
  position: absolute;  
  margin: 0 auto;
  bottom: 0;
  width: 350px;
  transition: 0.3s;
  left: calc(50% - 175px);  
}

.betItem  {
  display: block;
  margin: 5px auto;
  
}
.closeBtn{
  background-color: transparent;
  outline: none;
  border: none;
  color: red;
  font-size: 1.3rem;
  font-family: 'Work Sans', sans-serif;
  transition: 0.3s;
  border-radius: 0.35rem;
  visibility: hidden;
}
.closeBtn:hover{
  background-color: rgba(199, 84, 84, 0.363);
}
.desktopCloseBtn{  
  outline: none;
  border: none;
  background-color: transparent;
  color: red;
  font-size: 1.95rem;
  font-family: 'Work Sans', sans-serif;
  transition: 0.3s;
  border-radius: 0.35rem;  
  cursor: pointer;
}
.mobileCloseBtn{
  outline: none;
  border: none;
  background-color: transparent;
  color: red;
  font-size: 1rem;
  font-family: 'Work Sans', sans-serif;
  transition: 0.3s;
  border-radius: 0.35rem;  
  cursor: pointer;
}
.mobileCloseBtn:hover{
  background-color: rgba(199, 84, 84, 0.363);
}

.mobile{
  box-shadow: 1px 1px 5px white;
  padding: 0.25rem;
  position: fixed;  
  background-color: rgb(37, 37, 37);
  width: 100%;  
  height: 100vh;
  font-size: 0.95rem;  
  z-index: -10;
  overflow-y: scroll;
  opacity: 0%;
  transform: translateY(30%);
  -webkit-overflow-scrolling: touch;
  transition: ease-in-out 0.30s;
}


.desktopCloseBtn:hover{
  background-color: rgba(199, 84, 84, 0.363);
}
.desktop{
  box-shadow: 1px 1px 5px white;
  padding: 0.25rem;
  position: fixed;
  background-color: rgb(37, 37, 37);
  width: 90%;
  height: 100vh;
  transform: translateY(30%);
  opacity: 0%;
  z-index: -10;
  overflow-y: scroll;
  transition: ease-in-out 0.3s;
}
.desktopInfoImg{
  max-width: 30%;
  border: 1px solid grey;
  
}
.betButton{}

@media only screen and (max-width: 600px ) and (min-width: 500px ) {
  .profileContent {
    max-width: 250px;
    right: 12%;
  }
}
@media only screen and (max-width: 450px ){
  .profileContent {    
    right: 12%;
  }
}
@media only screen and (max-width: 500px ) and (min-width: 450px ) {
  .profileContent {
    max-width: 230px;
    right: 10%;
  }
}
@media only screen and (max-width: 450px ) and (min-width: 400px ) {
  .profileContent {
    max-width: 210px;    
  }
}
@media only screen and (max-width: 360px ) {
  .profileContent {
    max-width: 150px;
  }
  .infoContent{
    width: 30px;
    height: 30px;
  }
}
@media only screen and (min-width: 621px ) and (max-width: 800px) {
  .profileContent {
    max-width: 150px;
    right: 8%;
  }
  .infoContent{
    width: 30px;
    height: 30px;
  }
}
@media only screen and (min-width: 800px)  and (max-height: 866px){
  .betContent{
    top: 0;
  }
  .infoContent{
    width: 30px;
    height: 30px
  }
}
@media only screen and (min-width: 866px)  and (max-height: 1136px){
  .infoContent{
    width: 30px;
    height: 30px;
  }
}
.playerCurrent{
  display: none;
}
@media only screen and (max-width: 799px) {
  .betContent{
    background-color: rgb(17, 17, 17);
    border-radius: 1.25rem;
    border: 1px solid green;
    padding: 0.55rem;
    transform: scale(0);
    top: calc((100vh -140px)/2);       
    margin: 0 auto;
    height: fit-content;
    z-index: 100;   
  }
  
  .playerCurrent{
    text-align: center;
    font-size: 0.93rem;
    display: block;
  }
  .betButton{   
    padding: 0.55rem;
    font-size: 0.8rem;
  }
  .betInput{
    font-size: 0.8rem;
    padding: 0.55rem;
  }
  .betContent select {
    display: none;    
  }
  .profileContent div{
    font-size: 0.89rem;
  }
  .showRatesBtn{
    visibility: hidden;
  }
  .tooltipText{
    display: none;
  }
  .mainMenuBtn{
    font-size: 0.95rem;
  }
  .closeBtn {
    visibility: visible;
  }
}