/* ======================================================================= //
// ========= css file for 14/1 Straight Pool JS, © jh-concepts.at ======== //
// ======================================================================= //
// ========== Reading all necessry parameters and set variables ========== */
/* global  settings fpr scoring.html*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #fff;
  --lightGrey: #e9e9ed;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  /* background-color: #003; */
  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: 2rem;
  background-color: #0003;
}

#startBreaking div {
  margin: 15px 0;
  text-align: center;
}

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

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

/* Grid for scoring input area */
#myGrid {
  width: 98vw;
  width: 98dvw;
  height: 98vh;
  height: 98dvh;
  background-color: #0007;
  display: none;
  grid-template-areas: 
    "player1Area player1Area player1Area plus15     plus14     rest2     rest3     rest4           rest5           rest6           rest7"
    "player1Area player1Area player1Area plus15     plus14     rest2     rest3     rest4           rest5           rest6           rest7"
    "player1Area player1Area player1Area rest8      rest9      rest10    rest11    rest12          rest13          rest14          rest15"
    "player1Area player1Area player1Area rest8      rest9      rest10    rest11    rest12          rest13          rest14          rest15"
    "player1Area player1Area player1Area foul1      foul1      foul2     foul2     foul15          foul15          corrButton      corrButton"
    "player1Area player1Area player1Area foul1      foul1      foul2     foul2     foul15          foul15          corrButton      corrButton"
    "player1Area player1Area player1Area finishEnd  finishEnd  finishEnd finishEnd finishEnd       finishEnd       finishEnd       finishEnd"
    "player2Area player2Area player2Area finishEnd  finishEnd  finishEnd finishEnd finishEnd       finishEnd       finishEnd       finishEnd"
    "player2Area player2Area player2Area startWatch startWatch dummy3    stopWatch stopWatch       dummy4          resetWatch      resetWatch"
    "player2Area player2Area player2Area startWatch startWatch dummy3    stopWatch stopWatch       dummy4          resetWatch      resetWatch"
    "player2Area player2Area player2Area newGame    newGame    dummy5    leaveGame leaveGame       dummy6          fullScreen      fullScreen"
    "player2Area player2Area player2Area newGame    newGame    dummy5    leaveGame leaveGame       dummy6          fullScreen      fullScreen"
    "player2Area player2Area player2Area overview   overview   overview  overview  stopWatchOutput stopWatchOutput stopWatchOutput stopWatchOutput"
    "player2Area player2Area player2Area overview   overview   overview  overview  stopWatchOutput stopWatchOutput stopWatchOutput stopWatchOutput";
    column-gap: 0.25vw;
    column-gap: 0.25dvw;
    row-gap: 0.5vh;
    row-gap: 0.5dvh;
    padding: 1vh 0.5vw;
    padding: 1dvh 0.5dvw;
}

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


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

#myGrid button {
  font-size: 1rem;
}

#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;
}

#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;
}

.scoreButton {
  padding: 0.5vw;
  padding: 0.5dvw;
}

#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;
}

#foul2 {
  grid-area: foul2;
}

#foul15 {
  grid-area: foul15;
}

#finishEnd {
  grid-area: finishEnd;
  background-color: #aca;
}

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

#startWatch {
  grid-area: startWatch;
}

#stopWatch {
  grid-area: stopWatch;
}

#resetWatch {
  grid-area: resetWatch;
}

#newGame {
  grid-area: newGame;
}

#leaveGame {
  grid-area: leaveGame;
}

#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;
}

#corrButton {
  grid-area: corrButton;
}

/* #dummy2 {
  grid-area: dummy2;
} */

#dummy3 {
  grid-area: dummy3;
}

#dummy4 {
  grid-area: dummy4;
}

#dummy5 {
  grid-area: dummy5;
}

#dummy6 {
  grid-area: dummy6;
}

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

#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: 1.5rem !important;
}

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

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

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

/* Winners Message Overlay */
#winnersMessage {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  position: absolute;
  /* top: 5vh;
  top: 5dvh;
  left: 5vw;
  left: 5dvw; */
  background-color: #000;
  color: #fff;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#resultOutput {
  min-width: 300px;
}

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

#winnersMessage button {
  margin: 3vh;
  margin: 3dvh;
  width: 300px;
  height: 50px;
}

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

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

#onTable1, 
#onTable2 {
  background-color: #c00;
  border: solid 1px #fff;
  padding: 5px 0;
  text-align: center;
  width: 100%;
}

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

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

#fullScreenOff {
  display: none;
}

#correctionScreen {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  position: absolute;
  /* top: 5vh;
  top: 5dvh;
  left: 5vw;
  left: 5dvw; */
  background-color: #000;
  color: #fff;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 10;
  scroll-behavior: smooth;
  overflow: scroll;
  padding: 2rem;
}

#correctionScreen p {
  font-size: 1.5rem;
  text-align: center;
}

#correctionScreen table {
  margin-top: 2rem !important;
}

#correctionScreen td {
  margin: 10px;
  width: 16%;
  text-align: center;
}

#correctionScreen button {
  padding: 3px;
}

#correctionButton {
  margin-top: 1rem;
  padding: 0 2rem !important;
  display: flex;
}

@media (orientation: landscape) AND (max-height: 500px) {
  #namePlayer1,
  #namePlayer2 {
    font-size: 5vh;
    font-size: 5dvh;
  }
  
  #score1,
  #score2 {
    font-size: 10vh;
    font-size: 10dvh;
  }

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

@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          corrButton      corrButton"
      "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"
    ;
  }

  #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;
  }

  .scoreButton {
    padding: 0.5vh;
    padding: 0.5dvh;
  }
}