@font-face {
  font-family: stratego;
  src: url(resources/fonts/FenwickWoodtype.ttf);
}

* {
  box-sizing: border-box; /* Include borders in div size */
  font-family: stratego;
  margin:0; padding:0; /* Default - No margins, no padding  */
  -webkit-user-select: none; /* Do not permit select text on page - Safari */
  -ms-user-select: none; /* Do not permit select text on page - IE 10+ and Edge */
  user-select: none; /* Do not permit select text on page - Standard */
  -webkit-user-drag: none; /* Do not permit dragging of any images */
}

button {
  font-size: 4vh;
}


/* Set the size of page to one screen, add border */
#framePage {
  height: calc(var(--vh, 1vh) * 100);
  background: lightgray;
  border: transparent calc(var(--vh, 1vh) * 1) solid;
  width: 100vw;
}

#boardGameImage {
  height: calc(var(--vh, 1vh) * 98);
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
}

#boardGameGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  height: calc(var(--vh, 1vh) * 92.5);
  left: 50%;
  position: absolute;
  top: calc(var(--vh, 1vh) * 3.75);
  transform: translate(-50%, 0%);
  width: calc(var(--vh, 1vh) * 80);
}

[id^="boardGridSpace"] {
  position: relative;
}

#iconNewGame:after       { content: "\27f3"; } 
#iconHelp:after      { content: "\003F"; } 
#iconRules:after { content: "\2637"; }

.tooltipText {
  color: white;
  background: red;
  font-size: 1.25vh;
  line-height: calc(var(--vh, 1vh) * 5);
  position: absolute;
  visibility: hidden;
  width: calc(var(--vh, 1vh) * 5);
}

#iconNewGame:hover .tooltipText, #iconHelp:hover .tooltipText, #iconRules:hover .tooltipText {
  visibility: visible;
} 

.nav {
  list-style: none;
  align-content: center;
  display: flex;
  font-size: .9vh;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 5);
  justify-content: end;
  position: absolute;
  right: calc(var(--vh, 1vh) * 0);
  top: calc(var(--vh, 1vh) * .5);
  width: calc(var(--vh, 1vh) * 17.5);
}

.nav li {
  position: relative;
  display: inline-block;
  margin-left: calc(var(--vh, 1vh) * -.8);
}

.nav a {
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  color: #a7a7a7;
  font-size: 3vh;
  margin: calc(var(--vh, 1vh) * 3/4);
  width: calc(var(--vh, 1vh) * 5);
  height: calc(var(--vh, 1vh) * 5);
  position: relative;
  text-align: center;
  text-decoration: none;
  line-height: calc(var(--vh, 1vh) * 5);
  
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
}

.nav a:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: calc(var(--vh, 1vh) * -3/8);
  left: calc(var(--vh, 1vh) * -3/8);
  bottom: calc(var(--vh, 1vh) * -3/8);
  right: calc(var(--vh, 1vh) * -3/8);
  z-index: -1;
  box-shadow: inset 0px calc(var(--vh, 1vh) * 8/144) calc(var(--vh, 1vh) * 1) #ddd;
}

#boxPiecesLeft, #boxPiecesRight {
  border:rgb(0, 0, 199) 1px solid;
  background: #C0C0C0;
  height: calc(var(--vh, 1vh) * 92.5);
  left: calc(var(--vh, 1vh) * 1);
  padding-bottom: calc(var(--vh, 1vh) * 1.5);
  position: absolute;
  top: calc(var(--vh, 1vh) * 6.5);
  width: calc(var(--vh, 1vh) * 32.4);
  max-width: calc(calc(100vw - calc(var(--vh, 1vh) * 100))/2);
  z-index: 1;
}

#boxPiecesRight {
  border-color: red;
  left: unset;
  right: calc(var(--vh, 1vh) * 1);
}

[id^="piece"] {
  height: 7%;
  float: left;
  margin: 4.5% 3%;
  position: relative;
  width: 19%;
}

[id^="boardGridSpace"] > [id^="piece"], #boxAttacker > [id^="piece"], #boxDefender > [id^="piece"] {
  height: 70%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-55%, -55%);
  width: 70%;
}

[id^="piece"] img {
  height: 100%;
  float: left;
  left: 50%;
  max-width: 90%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-43%, -50%);
  width: auto;
  display: none;
}

[id^="piece"] p {
  font-size: 2vh;
  left: 5%;
  position: absolute;
  z-index: 2;
  display: block;
  display: none;
}

#boxAttacker [id^="piece"] p, #boxDefender [id^="piece"] p {
  font-size: 4vh;
  left: 15%;
}

.blue {
  background: blue;
  color: #C0C0C0;
}

.red {
  background: red;
  color: #d4af37;
}

.blue:after, .red:after, .blue:before, .red:before {  
  content: '';
  height: 0;
  left: 0%;
  width: 20%;
  border-bottom: calc(var(--vh, 1vh) * 8.5) solid rgb(0, 0, 199);
  border-radius: 3px;
  position: absolute;
  top: 50%;
  transform: translate(-40%, -50%);
  z-index: 1;
}

.blue:before, .red:before {  
  left: 100%;
}

.red:after, .red:before {
  border-color: rgb(199, 0, 0);
  border-bottom: calc(var(--vh, 1vh) * 8.5) solid rgb(199, 0, 0);
}

#boxAttacker .blue:after, #boxAttacker .blue:before, #boxDefender .blue:before, #boxDefender .blue:after, #boxAttacker .red:after, #boxAttacker .red:before, #boxDefender .red:before, #boxDefender .red:after {
  border-bottom-width: calc(var(--vh, 1vh) * 27.56756757);
  z-index: 3;
}

#boxAttacker .blue:after, #boxAttacker .blue:before, #boxDefender .blue:before, #boxDefender .blue:after, #boxAttacker .red:after, #boxAttacker .red:before, #boxDefender .red:before, #boxDefender .red:after {
  border-bottom-width: calc(var(--vh, 1vh) * 27.56756757);
  z-index: 3;
}

.maskedID {
  font-size: 3.5vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-45%, -50%);
  z-index: 13;
}

#boxAttacker .maskedID, #boxDefender .maskedID {
  font-size: 10vh;
}

/* The Modal (background) */
.modal {
  background-color: rgb(0,0,0);
  display: block;
  display: none; /* Hidden by default */
  height: calc(var(--vh, 1vh) * 100); /* Full height */
  left: 0;  
  position: fixed; /* Stay in place */
  top: 0;
  width: 100%; /* Full width */
  z-index: 6; /* Sit on top */
}

#modalBattleInner {
  align-content: center;
  background: white;
  border: #292c7b 10px ridge;
  display: flex;
  flex-wrap: nowrap;
  font-size: calc(var(--vh, 1vh) * 6);
  height: 60%;
  justify-content: center;
  left: 50%;
  padding: 1vh;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

#textBattle {
  background: black;
  color: lightgray;
  font-size: calc(var(--vh, 1vh) * 6);
  left: 50%;
  padding: calc(var(--vh, 1vh) * 1);
  text-align: center;
  top: 1vh;
  transform: translate(-50%, 0%);
  position: absolute;
  width: 90%;
}

#boxAttacker, #boxDefender {
  height: 30vh;
  left: 30%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26.27027027vh;
}

#boxDefender {
  left: 70%;
}


#boxButtonsBattle {
  bottom: 2vh;
  display: flex;
  height: 12%;
  justify-content: space-around;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
  width: 45%;
}

#buttonProceedBattle, #buttonCancelBattle {
  height: 90%;
  position: relative;
  width: 45%;
}


/* Style for Player Card */
/* Start modal */
#modalStart {
  background: lightgray;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

#modalStartInner {
  align-content: space-between;
  border: 10px darkgray ridge;
  border-radius: .5vh;
  box-shadow: grey 1vh 1vh .5vh .5vh;
  display: flex;
  flex-wrap: wrap;
  font-size: 3.5vh;
  height: 60%;
  justify-content: space-around;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  z-index: 1;
}

#modalStartInner img {
  height: auto;
  max-height: 28%;
  width: 100%;
}

#modalStartInner h1 {
  font-size: calc(var(--vh, 1vh) * 5); 
  width: 100%;
}

#boxDeck {
  display: flex;
  height: fit-content;
  justify-content: center;
  left: calc(var(--vh, 1vh) * 1);
  position: absolute;
  top: calc(var(--vh, 1vh) * 1.5);
  width: calc(var(--vh, 1vh) * 32.4);
  max-width: calc(calc(100vw - calc(var(--vh, 1vh) * 100))/2);
  z-index: 1;
}

#labelDeckNumber {
  background: none;
  border: none;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  padding-left: calc(var(--vh, 1vh) * 1);
  padding-right: calc(var(--vh, 1vh) * .5);
}

#deckNumber, #deckNumberPC {
  background: none;
  border: none;
  font-family: stratego;
  font-size: calc(var(--vh, 1vh) * 4);
  font-weight: bold;
  text-align: left;
  width: 4vw; 
}

#deckNumberPC {
  display: none;
}

#deckNumberPC {
  background: white;
  border: black 1px solid;
  font-size: calc(var(--vh, 1vh) * 5);
  text-align: center;
}
#buttonStartBlue, #buttonStartRed {
  font-size: calc(var(--vh, 1vh) * 4); 
  height: calc(var(--vh, 1vh) * 5);
  margin-bottom: calc(var(--vh, 1vh) * 3);
  text-align: center;
  width: 30%;
  position: relative;
}

#warningLandscape {
  background: red;
  color: #d4af37;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }  
  html {
    background: red;
  }
  #framePage {
    display: none;
  }
}

@media only screen and (max-width: 1150px) {
  #modalBattleInner {
    width: 80%;
  }
}