/* ======================================================================================== */
/* ================= css file for 14/1 Straight Pool JS, © jh-concepts.at ================= */
/* ======================================================================================== */
/* ===================================== global styles ==================================== */
/* ======================================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #fff;
  --lightGrey: #ccc;
  --lightBlue: #a0d7ee;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #160109;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

div {
  border-radius: 3px;
}

hr {
  margin: 10px 0;
  border: 0;
  height: 0;
}

button {
  color: #000;
}

/* ======================================================================================== */
/* ================================ choose breaking player ================================ */
/* ======================================================================================== */
#startBreaking {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 5vh;
  background-color: #0003;
}

#startBreaking div {
  text-align: center;
  margin-top: 3vh;
}

#startBreaking button {
  width: 30vw;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  font-size: 5vh;
}

.playerSelection {
  width: 50%;
  min-width: 350px;
  display: flex;
  justify-content: space-between;
  /* margin: 10px 0; */
  font-size: 1.25rem;
}

/* ======================================================================================== */
/* =============================== grid for showing display =============================== */
/* ======================================================================================== */
#myGrid {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background-color: #0007;
  display: none;
  grid-template-areas: 
    "player1Area  player1Area plus15     plus14     rest2     rest3     rest4           rest5           rest6           rest7"
    "player1Area  player1Area plus15     plus14     rest2     rest3     rest4           rest5           rest6           rest7"
    "player1Area  player1Area rest8      rest9      rest10    rest11    rest12          rest13          rest14          rest15"
    "player1Area  player1Area rest8      rest9      rest10    rest11    rest12          rest13          rest14          rest15"
    "player1Area  player1Area foul1      foul1      foul2     foul2     foul15          foul15          undoButton      undoButton"
    "player1Area  player1Area foul1      foul1      foul2     foul2     foul15          foul15          undoButton      undoButton"
    "player1Area  player1Area finishEnd  finishEnd  finishEnd finishEnd finishEnd       finishEnd       finishEnd       finishEnd"
    "player2Area  player2Area finishEnd  finishEnd  finishEnd finishEnd finishEnd       finishEnd       finishEnd       finishEnd"
    "player2Area  player2Area startWatch startWatch dummy3    stopWatch stopWatch       dummy4          resetWatch      resetWatch"
    "player2Area  player2Area startWatch startWatch dummy3    stopWatch stopWatch       dummy4          resetWatch      resetWatch"
    "player2Area  player2Area newGame    newGame    dummy5    leaveGame leaveGame       dummy6          fullScreen      fullScreen"
    "player2Area  player2Area newGame    newGame    dummy5    leaveGame leaveGame       dummy6          fullScreen      fullScreen"
    "player2Area  player2Area overview   overview   overview  overview  stopWatchOutput stopWatchOutput stopWatchOutput stopWatchOutput"
    "player2Area  player2Area overview   overview   overview  overview  stopWatchOutput stopWatchOutput stopWatchOutput stopWatchOutput";
}

#myGrid > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#myGrid > div,
#myGrid > div > span {
  color: #fff !important;
  font-size: 1.5vh;
}

#myGrid button {
  font-size: 1.5vh;
}

/* ======================================================================================== */
/* =================================== game action area =================================== */
/* ======================================================================================== */
.scoreButton {
  width: 10vw;
  border: solid 1px #000;
  background-color: var(--lightBlue);
}

#plus15 {
  grid-area: plus15;
}

#plus14 {
  grid-area: plus14;
}

#rest2 {
  grid-area: rest2;
}

#rest2:hover {
  background-color: #ccc !important;
}

#rest3 {
  grid-area: rest3;
}

#rest4 {
  grid-area: rest4;
}

#rest5 {
  grid-area: rest5;
}

#rest6 {
  grid-area: rest6;
}

#rest7 {
  grid-area: rest7;
}

#rest8 {
  grid-area: rest8;
}

#rest9 {
  grid-area: rest9;
}

#rest10 {
  grid-area: rest10;
}

#rest11 {
  grid-area: rest11;
}

#rest12 {
  grid-area: rest12;
}

#rest13 {
  grid-area: rest13;
}

#rest14 {
  grid-area: rest14;
}

#rest15 {
  grid-area: rest15;
}

#foul1 {
  grid-area: foul1;
  width: 20vw;
  border: solid 1px #000;
  background-color: #fbb;
}

#foul2 {
  grid-area: foul2;
  width: 20vw;
  border: solid 1px #000;
  background-color: #fbb;
}

#foul15 {
  grid-area: foul15;
  width: 20vw;
  border: solid 1px #000;
  background-color: #fbb;
}

#finishEnd {
  grid-area: finishEnd;
  background-color: #ada;
  border: solid 1px #000;
  background-image: url('/img/lock.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#finishEnd:hover {
  background-color: #9b9;
}

#startWatch {
  grid-area: startWatch;
  border: solid 1px #000;
  background-color: var(--lightGrey);}

#stopWatch {
  grid-area: stopWatch;
  border: solid 1px #000;
  background-color: var(--lightGrey);}

#resetWatch {
  grid-area: resetWatch;
  border: solid 1px #000;
  background-color: var(--lightGrey);
}

#newGame {
  grid-area: newGame;
  border: solid 1px #000;
  background-color: var(--lightGrey);
}

#leaveGame {
  grid-area: leaveGame;
  border: solid 1px #000;
  background-color: var(--lightGrey);
}

#fullScreenOn {
  color: #000 !important;
  text-align: center;
}
#fullScreenOff {
  color: #000 !important;
  text-align: center;
}
#fullScreen {
  grid-area: fullScreen;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--lightGrey);
  color: #000 !important;
  border: solid 1px #000;
  border-radius: 2px;
}

#undoButton {
  grid-area: undoButton;
  border: solid 1px #000;
  color: #000 !important;
  background-color: #fdb !important;
}

#dummy3 {
  grid-area: dummy3;
  border: solid 1px #000;
  background-color: #aaa;
}

#dummy4 {
  grid-area: dummy4;
  border: solid 1px #000;
}

#dummy5 {
  grid-area: dummy5;
  border: solid 1px #000;
}

#dummy6 {
  grid-area: dummy6;
  border: solid 1px #000;
}

#dummy2,
#dummy3,
#dummy4,
#dummy5,
#dummy6 {
background-color: var(--lightGrey);
border-radius: 3px;
color: #000 !important;
}

/* ======================================================================================== */
/* =============================== game footer info display =============================== */
/* ======================================================================================== */
#overview {
  grid-area: overview;
  flex-direction: row !important;
  color: #fff !important;
  font-size: 2rem !important;
  background-color: #0001;
  border: solid 1px #fff;
}

#stopWatchOutput,
#stopWatchOutput > span,
#overview,
#overview > span {
  font-size: 3vh !important;
}

div#stopWatchOutput {
  grid-area: stopWatchOutput;
  color: #fff !important;
  background-color: #0001;
  border: solid 1px #fff;
  flex-direction: row !important;
}

#stopWatchOuptout > span {
  color: #fff !important;
}

.foulButtons:hover,
#undoButton:hover,
.active:hover,
#fullScreen:hover {
  background-color: #ddd !important;
  border-radius: 5px;
}

#myGrid > div,
#myGrid button,
#fullScreen button {
  font-size: 3.5vh;
}

/* ======================================================================================== */
/* ============================== winner message on overlay =============================== */
/* ======================================================================================== */
#winnersMessage {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  position: absolute;
  background-color: #000;
  color: #fff;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#resultOutput {
  width: 400px;
}

#scoresSorted1, 
#scoresSorted2 {
  max-width: 50%;
  word-break: break-all;
  word-wrap: break-word;
}

#winnersMessage button {
  margin-top: 3vh;
  margin-top: 3dvh;
  width: 400px;
  height: 50px;
}

#winnersMessage hr {
  border: solid 1px #fff;
}

/* ======================================================================================== */
/* ============================== players area on scoreboard ============================== */
/* ======================================================================================== */
#player1Area {
  grid-area: player1Area;
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
  align-items: center;
  padding-top: 5vh;
  padding-top: 5dvh;
  padding-left: 0.5vw;
  padding-left: 0.5dvw;
  padding-bottom: 1vh;
  padding-bottom: 1dvh;
  padding-right: 0.5vw;
  padding-right: 0.5dvw;
  background-color: #0001;
  border: solid 1px #fff;
  width: 20vw;
}

#player2Area {
  grid-area: player2Area;
  display: flex;
  flex-direction: column;
  justify-content: space-between !important;
  align-items: center;
  padding-top: 5vh;
  padding-top: 5dvh;
  padding-left: 0.5vw;
  padding-left: 0.5dvw;
  padding-bottom: 1vh;
  padding-bottom: 1dvh;
  padding-right: 0.5vw;
  padding-right: 0.5dvw;
  background-color: #0001;
  border: solid 1px #fff;
  width: 20vw;
}

#p1hi, 
#gameStatus1,
#p2hi, 
#gameStatus2,
.gameStatus {
  font-size: 3vh;
  font-size: 3dvh;
}

#namePlayer1, 
#namePlayer2 {
  text-align: center;
  font-size: 2rem;
}

#onTable1, 
#onTable2 {
  background-color: #c00;
  border: solid 1px #fff;
  text-align: center;
  width: 100%;
  font-size: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#score1,
#score2 {
  font-size: 5rem;
  text-align: center;
}

#scorePlayer1,
#scorePlayer2 {
  text-align: center;
}

#fullScreenOff {
  display: none;
}

/* ======================================================================================== */
/* =============================== correction screen popup ================================ */
/* ======================================================================================== */
#corrScreen {
  width: 80vw;
  width: 80dvw;
  height: 80vh;
  height: 80dvh;
  background-color: #c00;
  color: #fff;
  display: none;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 10vh;
  top: 10vh;
  left: 10vw;
  left: 10dvw;
  border-radius: 3vw;
  border: solid 0.5vw #fff;
  font-size: 3vw;
}

#yesNoButtons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#corrScreen button {
  margin: 0 3vw;
  width: 20vw;
  height: 10vh;
  font-size: 2vw;
  border-radius: 1vh;
}

/* ======================================================================================== */
/* ============================== media queries from here on ============================== */
/* ======================================================================================== */
/* ============================== landscape AND width 1100px ============================== */
/* ======================================================================================== */
@media (orientation: landscape) AND (max-height: 1100px) {
  
  #myGrid,
  #player1Area,
  #player2Area {
    border: none;
  }
  
  
  
  #namePlayer1,
  #namePlayer2 {
    font-size: 5vh;
    font-size: 5dvh;
  }
  
  #score1,
  #score2 {
    font-size: 8vh;
    font-size: 8dvh;
  }
  
  #raceToInfo,
  #overview,
  #stopWatchOutput,
  #overview > span {
    font-size: 4vh !important;
    font-size: 4dvh !important;
  }
  
  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 2.9vh;
    font-size: 2.9dvh;
  }
  
}

/* ======================================================================================== */
/* ============================== landscape AND width 1000px ============================== */
/* ======================================================================================== */
@media (orientation: landscape) AND (max-height: 1000px) {
  
  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 2.6vh;
    font-size: 2.6dvh;
  }
  
}

/* ======================================================================================== */
/* ============================== landscape AND width 900px =============================== */
/* ======================================================================================== */
@media (orientation: landscape) AND (max-height: 900px) {

  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 2.4vh;
    font-size: 2.4dvh;
  }

}

/* ======================================================================================== */
/* ============================== landscape AND width 800px =============================== */
/* ======================================================================================== */
@media (orientation: landscape) AND (max-height: 800px) {

  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 2.3vh;
    font-size: 2.3dvh;
  }

}

/* ======================================================================================== */
/* ============================== landscape AND width 750px =============================== */
/* ======================================================================================== */
@media (orientation: landscape) AND (max-width: 750px) {
  
  #myGrid,
  #player1Area,
  #player2Area {
    border: none;
  }
  
  #namePlayer1,
  #namePlayer2 {
    font-size: 5vh;
    font-size: 5dvh;
  }
  
  #score1,
  #score2 {
    font-size: 8vh;
    font-size: 8dvh;
  }
  
  #raceToInfo,
  #overview,
  #stopWatchOutput,
  #overview > span {
    font-size: 4vh !important;
    font-size: 4dvh !important;
  }
  
  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 2.2vh;
    font-size: 2.2dvh;
  }
  
}

/* ======================================================================================== */
/* ============================== landscape AND width 550px =============================== */
/* ======================================================================================== */
@media (orientation: landscape) AND (max-height: 550px) {

  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 2.1vh;
    font-size: 2.1dvh;
  }

}

/* ======================================================================================== */
/* ======================================= portrait ======================================= */
/* ======================================================================================== */
@media (orientation: portrait) {
  #myGrid {
    grid-template-areas: 
      "player1Area     player1Area     player1Area     player1Area     player2Area     player2Area     player2Area     player2Area"
      "player1Area     player1Area     player1Area     player1Area     player2Area     player2Area     player2Area     player2Area"
      "player1Area     player1Area     player1Area     player1Area     player2Area     player2Area     player2Area     player2Area"
      "player1Area     player1Area     player1Area     player1Area     player2Area     player2Area     player2Area     player2Area"
      "plus15          plus14          rest2           rest3           rest4           rest5           rest6           rest7"
      "rest8           rest9           rest10          rest11          rest12          rest13          rest14          rest15"
      "foul1           foul1           foul2    	     foul2           foul15          foul15          undoButton      undoButton"
      "finishEnd       finishEnd       finishEnd       finishEnd       finishEnd       finishEnd       finishEnd       finishEnd"
      "newGame         newGame         dummy5          leaveGame       leaveGame       dummy6          fullScreen      fullScreen"
      "startWatch      startWatch      dummy3          stopWatch       stopWatch       dummy4          resetWatch      resetWatch"
      "overview        overview        overview        overview        stopWatchOutput stopWatchOutput stopWatchOutput stopWatchOutput"
      "overview        overview        overview        overview        stopWatchOutput stopWatchOutput stopWatchOutput stopWatchOutput"
    ;
    width: 100vw;
    height: 100vh;
  }

  #player1Area,
  #player2Area {
    width: 50vw;
    border: none;
  }

  #namePlayer1,
  #namePlayer2 {
    font-size: 5vw;
    font-size: 5dvw;
  }
  
  #score1,
  #score2 {
    font-size: 10vw;
    font-size: 10dvw;
  }

  #overview,
  #stopWatchOutput,
  #overview > span {
    font-size: 4vw !important;
    font-size: 4dvw !important;
  }

  div#stopWatchOutput {
    grid-area: stopWatchOutput;
    color: #fff !important;
    background-color: #0001;
    border: solid 1px #fff;
    flex-direction: column !important;
  }
  

  .scoreButton {
    width: 12.5vw;
  }

  #foul1,
  #foul2,
  #foul15 {
    width: 25vw;
  }

  #finishEnd {
    width: 100vw;
  }

  #player1Area,
  #player2Area {
    width: 50vw;
  }

  #p1hi, 
  #gameStatus1,
  #p2hi, 
  #gameStatus2,
  .gameStatus {
    font-size: 4vw;
    font-size: 4dvw;
  }

  #myGrid > div,
  #myGrid button,
  #fullScreen button {
    font-size: 3.5vw !important;
  }

  #foul1 {
    grid-area: foul1;
    width: 25vw !important;
    border: solid 1px #000;
  }
  
  #foul2 {
    grid-area: foul2;
    width: 25vw !important;
    border: solid 1px #000;
  }
  
  #foul15 {
    grid-area: foul15;
    width: 25vw !important;
    border: solid 1px #000;
  }

  #undoButton {
    width: 25vw !important;
  }

  .scoreButton {
    width: 12.5vw !important;
    font-size: 5vw !important;
    padding: 0;
  } 

  #onTable1, 
  #onTable2 {
    background-color: #c00;
    border: solid 1px #fff;
    text-align: center;
    width: 100%;
    font-size: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #finishEnd {
    grid-area: finishEnd;
    background-color: #aca;
    width: 100vw;
    border: solid 1px #000;
  }

  #newGame,
  #leaveGame,
  #fullScreen,
  #startWatch,
  #stopWatch,
  #resetWatch {
    width: 25vw !important;
  }

  #dummy3,
  #dummy4,
  #dummy5,
  #dummy6 {
    width: 12.5vw !important;
  }

  #corrScreen button {
    margin: 0 3vw;
    width: 20vw;
    height: 10vh;
    font-size: 2vw;
    border-radius: 1.5vw;
  }

  #startBreaking {
    font-size: 5vw;
  }
  
  #startBreaking div {
    margin-top: 3vw;
  }
  
  #startBreaking button {
    font-size: 5vw;
  }

}