/* Globale Stile */
body {
    font-family: 'Arial', sans-serif; background-color: #000000;color: #ffffff;
    display: flexbox; flex-direction: row;
}

#credits{
background-color:rgba(14, 106, 226, 0.3) ;
  width: 95%;height: 100%;
  border: 2px solid #000000; border-radius: 10px; box-shadow: 0 0 50px rgb(47, 9, 163);
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
}
#credits.hidden{display: none;}
#laden{z-index: 2500;position: fixed;top: 50%;left: 44%;}
#laden.hidden{display:none;}
#gamesuberschrift{
 
  position: absolute;
  top: 2%;
  left: 25%;
  font-size: 1.4vw;
}
#subscribe{
  
  
  bottom: 20%;
  left: 25%;
  font-size: 1.4vw;
}
#games{

  font-size: 1vw;
 
}
#gamesb{
  padding: 5px;
  margin-top :5%;
  width: 30%;
 
  /*justify-content: center; */
  /*position: relative;align-items: center;*/
}

#titelbild{  width: 97%; height: 97%; border: 2px solid #0e4fe9; border-radius: 10px;background: #000000; position: fixed; }    
#introtextbox{top:30%;left: 20%; position: fixed; width: 35%;z-index: 61;}
#introtextbox.hidden{display: none; }


#intro-text{font-size: 1.4vw; color: #00f7ff; position:absolute; bottom: 10%; left: 5%;overflow: hidden;}

#menubuttons{ width: 100%; height: 100%; position: absolute;z-index: 3000;} 
#version{font-size: 1vw;color: white;position: absolute;top: 36%;right: 37%}
#menutext{font-size: 2vw;color: white;position: absolute;top: 42%;right: 40%}

#backtogame-btn{border-radius: 10px; font-size: 2vw; position:absolute;top: 55%;left: 40%;width: 22%;height: 10%;}
#credit-btn{border-radius: 10px; font-size: 2vw; position:absolute;top: 70%;left: 40%;width: 22%;height: 10%;}
#exit-btn{border-radius: 10px; font-size: 2vw; position:absolute;top: 85%;left: 40%;width: 22%;height: 10%;}
#nato-btn{color: transparent;position:absolute;border-color:transparent;width: 25%;height: 30%;right: 4%;top: 13%;background-color: transparent;}
#russia-btn{color: transparent;position:absolute;border-color: transparent;width: 22%;height: 30%;left: 7%;top: 15%;background-color: transparent;}
#backtogame-btn.hidden{display: none; }
#menubuttons.hidden{display: none; }
#restartgame{    
color: #000000;
    font-size: 1.4vw;padding: 5%;border: 8px solid black;    border-radius: 10px;
    background: whitesmoke; z-index: 3500;position:fixed;top: 40%;left: 36%;width: 20%;
    height: 20%;font-size: 2vw;
}
#restart{
border-radius: 10px; font-size: 2vw; position:absolute;top: 70%;left: 20%;width: 25%;height: 14%;    
}
#goongame{
border-radius: 10px; font-size: 2vw; position:absolute;top: 70%;right: 25%;width: 25%;height: 14%;    
}

#restartgame.hidden{display: none;}


/*spielbrett       */
#game-canvas {
  width:auto; height: auto;
    position:absolute; border: 2px solid #0e4fe9; border-radius: 10px;
    background: #0a0a0a; cursor: crosshair;  margin: 5px; overflow:auto ;    
    box-shadow: 0 0 20px rgb(47, 9, 163);
}

#gamefenster.hidden{display: none; }
#menufenster.hidden{display: none; }
/*/////////hud/////*/

#Hud {    
position: fixed; display: flex; flex-direction: row; box-shadow: 0 0 30px rgb(47, 9, 163);
left:2%; width: 90%; height: 13%;z-index: 2105;bottom: 5%;margin: 2px;
 border: 2px solid #0759f1;border-radius: 5px; padding: 2px; 
}
#Hud.hidden {display: none;}


#zahlen{    
position: absolute;display: flex; flex-direction: row; box-shadow: 0 0 30px rgb(47, 9, 163);
left:1px; width: 33%; height: 90%;z-index: 2105;top: 1px;margin: 2px;
 border: 2px solid #0759f1;border-radius: 5px; padding: 2px; 
}
#zahlen.hidden{display:none}
#Status {top: 2%; font-size: 1.5vw;font-weight: bold;   display: flex;flex-direction: column;    
 border: 1px solid #0759f1; color: #ffffff;background-color: rgba(14, 106, 226, 0.3);width: 30%; 
 padding: 2px;margin: 2px;
}
.control-btn {
 
  font-size: 1.5vw; border: 1px solid #0759f1;padding-left: 4px;    
color: #2ee2df;background-color: rgba(14, 106, 226, 0.3);
margin: 2px; padding: 2px; width:23%;
}
.control-btn:hover {
    background-color: rgba(13, 148, 186, 0.5); transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(10, 147, 135, 0.1);
}



#tower-selection { border: 1px solid #0759f1;color: #2ee2df;background-color: rgba(14, 106, 226,0.2);position: absolute;left:34%;width:52%;height: 95%;}

.tower-buttons {border: 1px solid #0759f1;color: #2ee2df;background-color: rgba(14, 106, 226, 0.3);height: 100%;overflow:auto;}

.tower-btn { margin: 1px; width: 13%; height: 95%;background-color: rgba(13, 148, 186, 0.1);   border: 2px solid #0759f1;border-radius: 5px; }

.tower-btn:hover {background-color: rgba(13, 148, 186, 0.2);transform: translateY(-2px);    box-shadow: 0 4px 8px rgba(10, 147, 135, 0.1);}

.tower-btn.selected {background: rgba(0, 255, 0, 0.3);border-color: #00ff00;} 

.tower-btn img {  width: 100%;height: 100%; background-color: transparent;}

#menu-btn{font-size: 1vw; position: absolute;
  color: #0759f1;  writing-mode: vertical-lr; top:2%;height: 90%;width: auto;left: 87%;width: 3%;
font-size: 1.vw;z-index: 3000;border: 2px solid #0759f1;border-radius: 2px;
background-color: transparent;margin: 2px;
}

#Development {background-color: rgba(13, 148, 186,0.2);border-radius: 5px; position: absolute; left:91%;height: 95%; width: 7%;}
.nick-btn  {width:100%;height: 100%;background-color: transparent;border: 2px solid #0e4cbe;border-radius: 5px; }
.nick-btn img {background-color: transparent; width: 100%;height: 100%;}
.nick-btn:hover {transform: translateY(-2px);box-shadow: 0 4px 8px rgba(10, 147, 135, 0.2);background: rgba(0, 255, 0, 0.3);border-color: #00ff00;} 
#Development.hidden{display:none}



/*raster*/
#selection-overlay {
   /* width: 97%;
    height:auto;*/
 position: fixed; border: 2px solid #00ff00; background: rgba(0, 255, 0, 0.5); pointer-events: none;
   
   /* display: none;*/
}


/*developmentpanel*/
#devel-panel{
position: fixed;bottom: 2%;left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 30px rgb(47, 9, 163);background-color: rgba(7, 125, 209, 0.178);
z-index: 1330;border: 5px solid #2222d6; border-radius: 5px;width: 40%;height:60%
}
#devel-panel.hidden { display: none;}
.nickslager{position: absolute;font-size: 1vw;z-index: 2000; color:  rgb(12, 227, 191);z-index: 1330; padding-left: 15%;}
.nick {opacity: 0.5; position: absolute; width: 70%; height: 70%; padding-left: 15%}

.laufschrift-container{margin-left: 16%; width: 48%; overflow: hidden; white-space: nowrap;margin-top: 35%;padding-left:20% ; }
#laufschrift-text{font-size:1.5vw;display: inline-block; animation: lauftext 10s linear infinite;}
@keyframes lauftext{from{transform: translateX(20%);} to {transform:translateX(-100%) ;}}

#devel-infant-btn,#devel-tank-btn,#devel-plane-btn,#devel-barricade-btn{
font-size: 1.2vw; margin-top: 5%;margin-left: 3%;border: 1px solid #0759f1;
padding-left: 4px;color: #2ee2df;background-color: rgba(14, 106, 226, 0.3);
 padding: 2px;width: 20%;height: 20%;
}
#close-devel-btn{
font-size: 2vw;border: 1px solid #0759f1;color: #2ee2df;background-color: rgba(14, 106, 226, 0.3);
position: fixed;top: 5px;right: 5px;
}




/*information panel*/

#information-panel{
 position: fixed; top: 40%;left: 50%;transform: translate(-50%, -50%); font-size: 1.4vw;background-color: rgba(7, 125, 209, 0.178);
z-index: 1330;border: 5px solid #2222d6; border-radius: 5px;width: 40%;height:60%;
box-shadow: 0 0 30px rgb(47, 9, 163);
}
#information-panel.hidden {display: none;}
#close-info-btn{
font-size: 2vw;border: 1px solid #0759f1;color: #2ee2df;background-color: rgba(14, 106, 226, 0.3);
position: fixed; bottom: 5px;right: 45%;
}
#close-info-btn.hidden{display: none;}
#informant {opacity: 0.4; position: absolute; width: 70%; height: 70%; padding-left: 15%}
#infotextcontainer{
margin-top: 40%;margin-left: 20%;position: absolute;width: 60%;height: 20%;overflow: auto;
}
#info-text{
  font-size: 1.4vw;font-weight:bold;color: #ffffff; position:absolute; bottom: 10%; left: 5%;overflow: hidden;
}  

/* Upgrade Panel */
#upgrade-panel {
position: fixed; display: flex;flex-direction: row; box-shadow: 0 0 30px rgb(47, 9, 163);    
left:20px; width: 95%; height: 12%;z-index: 2105;bottom: 5%;
margin: 2px; border: 2px solid #0759f1;    border-radius: 5px;   padding: 2px;  } 
#upgrade-panel.hidden {  display: none;}
#tower-stats {display: grid;grid-template-columns:45% 45% 45%;column-gap: 5%;background: rgba(19, 78, 178, 0.2); padding-right: 10%;}
#tower-stats div {font-size: 1.4vw;}