* {
  box-sizing: border-box; /* Include borders in div size */
  font-family: 'Sancreek', cursive; /* Set font for site */
  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 */
}

/* Set the size of page to one screen, add border */
#framePage {
  height: calc(var(--vh, 1vh) * 100);
  background: #452925;
  padding: calc(var(--vh, 1vh) * 1);
  position: relative;
}

/* Start modal */
#modalStart, #modalScore {
  background: #452925;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

#modalScore {
  background: black;
  display: none;
}

#modalScoreInner {
  align-content: center;
  background: #be302f;
  border: 5px #452925 ridge;
  color: white;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  justify-content: center;
  left: 50%;
  padding: 1vh 2vh 8vh;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

table {
  border-collapse: collapse;
}

td {
  background: white;
  border: #452925 2px solid;
  color: #452925;
  font-size: 2.5vh;
  font-weight: bold;
  padding: 1vh;
  text-align: center;
}

th {
  border: none;
  font-size: 4vh;
  padding: 1vh;
  text-align: center;
}

.columnHeads > td {
  background: #452925;
  border: #452925 2px solid;
  color: white;
  font-weight: bold;
}

#modalStartInner {
  background-image: url(resources/objects/backgroundMexicanTrain.png);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: .5vh;
  box-shadow: #6b3601 1vh 1vh .5vh .5vh;
  color: #452925;
  height: 76vh;
  left: 50%;
  padding-top: 54vh;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 85vh;
  z-index: 1;
}

#selectPlayers {
  font-size: 3vh;
  padding: 1vh 3.5vh;
  width: calc(var(--vh, 1vh) * 12);
}

select, button { 
  text-align: center; 
}

#startButton, #buttonNewRound, #buttonEndRound {
  font-size: 1.5vh;
  height: calc(var(--vh, 1vh) * 6);
  width: calc(var(--vh, 1vh) * 12);
}

#startButton {
  margin-top: 1vh;
}

#buttonNewRound {
  bottom: calc(var(--vh, 1vh) * 1);
  position: absolute;
}

#buttonEndRound {
  bottom: calc(var(--vh, 1vh) * .5);
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
  z-index: 2;
}

/* Define area for deck number and deck */
#trayDeck {
  color: white;
  height: calc(var(--vh, 1vh) * 14);
  left: calc(var(--vh, 1vh) * 1);
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: calc(var(--vh, 1vh) * 1);
  width: calc(var(--vh, 1vh) * 32);
}

#trayDeck {
  border: #be302f calc(var(--vh, 1vh) * .2) solid;
}

#domionoesLeft {
  bottom: 0;
  background: #be302f;
  color: white;
  font-size: 1.8vh;
  position: absolute;
  width: 100%;
  z-index: 1;
}

#playersTray {
  display: grid;
  grid-template-rows: repeat( auto-fit, minmax(1fr, 1fr) );
  height: calc(var(--vh, 1vh) * 78);
  left: calc(var(--vh, 1vh) * 1);
  position: absolute;
  top: calc(var(--vh, 1vh) * 15.5);
  width: calc(var(--vh, 1vh) * 32);
  transform: unset;
}

[id^="trayPlayer"] {
  border: #be302f calc(var(--vh, 1vh) * .2) solid;
  display: flex;
  flex-wrap: wrap;
  height: auto;
  width: auto;
}
[class^="labelPlayer"] {
  align-items: center;
  background: #be302f;
  color: white;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--vh, 1vh) * 1.8);
  font-weight: bold;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 3.5vw;
}

#trayPlayer1 {border-color: green;}
#trayPlayer1 .labelPlayer {border-color: green; background: green;}
#trayPlayer2 {border-color: blue;}
#trayPlayer2 .labelPlayer {border-color: blue; background: blue;}
#trayPlayer3 {border-color: red;}
#trayPlayer3 .labelPlayer {border-color: red; background: red;}
#trayPlayer4 {border-color: yellow;}
#trayPlayer4 .labelPlayer {border-color: yellow; background: yellow; color: black;}
#trayPlayer5 {border-color: orange;}
#trayPlayer5 .labelPlayer {border-color: orange; background: orange;}
#trayPlayer6 {border-color: purple;}
#trayPlayer6 .labelPlayer {border-color: purple; background: purple;}
#trayPlayer7 {border-color: white;}
#trayPlayer7 .labelPlayer {border-color: white; background: white; color: black;}
#trayPlayer8 {border-color: black;}
#trayPlayer8 .labelPlayer {border-color: black; background: black;}

#trayDeckNumber {
  align-content: center;
  background: #be302f;
  color: white;
  display: flex;
  flex-wrap: wrap;
  font-size: calc(var(--vh, 1vh) * 2.5);
  font-weight: bold;
  height: calc(var(--vh, 1vh) * 4);
  justify-content: center;
  text-align: center;
  width: 100%;
}

[id^="playerScoreA"] {
  font-weight: normal;
}

#trayDominoes {
  align-content: center;
  border-top: none; 
  display: flex;
  flex-wrap: nowrap;
  height: calc(var(--vh, 1vh) * 15.75);
  overflow: hidden;
  padding-left: calc(var(--vh, 1vh) * .5);
  position: relative;
  width: calc(var(--vh, 1vh) * 43);
}

[id^="trayDominoesPlayer"] {
  align-content: space-around;
  background-image: url(resources/objects/backgroundMexicanTrain2.png);
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: calc(100% - 3.5vw);
}

[id^="draw"] {
  font-size: 1.3vh;
  height: calc(var(--vh, 1vh) * 4);
  width: 98%;
}

#deck {
  height: 100%;
  width: 100%;
}

#deck .gridPipsLarge, #deck .gridPipsSmall, #deck .bar, [id^="trayDominoesPlayer"] .gridPipsLarge, [id^="trayDominoesPlayer"] .gridPipsSmall, [id^="trayDominoesPlayer"] .bar {
  visibility: hidden;
}

.domino {
  background: white;
  border: dimgray 1px solid;;
  border-radius: calc(var(--vh, 1vh) * .5);
  box-shadow: darkgray calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .2);
  color: black;
  display: grid;
  float: left;
  grid-template-rows: 5fr .5fr 5fr;
  height: calc(var(--vh, 1vh) * 6);
  padding: calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .133);
  position: relative;
  text-align: center;
  transform-origin: -50% -50%;
  width: calc(var(--vh, 1vh) * 3);
}

.starter {
  box-shadow: darkgray calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * -.2);
  left: 50.4%;
  position: absolute;
  top: 49.5%;
  transform: translate(-50%, -50%) rotate(180deg);
}

#centralHub {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(6, 1fr);
  height: calc(var(--vh, 1vh) * 18.75);
  left: 50.4%;
  position: absolute;
  top: 49.5%;
  transform: translate(-50%, -50%);
  width: calc(var(--vh, 1vh) * 18.75);
  z-index: 1;
}

#centerCentralHub {
  background: transparent;
  grid-area: 1 / 2 / 6 / 5;
  position: relative;
}

#centerCentralHub .icon {
  display: none;
  position: absolute;
}

#hatMexicanTrain {
  display: block;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
}

[id^="dropIconArea"] {
  background: #452925;
  background: none;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

[id^="dropIconArea"]::before, [id^="dropIconArea"]::after {
  content: '';
  border-bottom: transparent 0px solid;
  border-left: black 1px solid;
  border-right: black 1px solid;
  border-top: black 3vh solid;
  height: 0;
  width: 0;
  position: absolute;
  left: 75%;
}

[id^="dropIconArea"]::after {
  left: 25%;
}

[id^="icon"] {
  height: auto;
  width: 5vh;
}

#hatMexicanTrain {
  height: auto;
  width: 8vh;
}

[id^="space"] img, [id^="dropIconArea"] img {  
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

[id^="playerDominoesThisRound"] .domino {
  border-radius: calc(var(--vh, 1vh) * .5);
  box-shadow: darkgray calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .2);
  color: black;
  display: grid;
  float: left;
  grid-template-rows: 5fr .5fr 5fr;
  height: calc(var(--vh, 1vh) * 7.5);
  padding: 1% .5%;
  padding: calc(var(--vh, 1vh) * .2) calc(var(--vh, 1vh) * .133);
  position: relative;
  text-align: center;
  transform-origin: -50% -50%;
  width: calc(var(--vh, 1vh) * 4);
}

[id^="playerDominoesThisRound"] p {
  visibility: hidden;
}

#deck .domino {
  margin: calc(var(--vh, 1vh) * .75) calc(var(--vh, 1vh) * .7) 20px 0;
}

#deck .domino p {
  visibility: hidden;
}

[id^="trayDominoesPlayer"] .domino {
  border-radius: calc(var(--vh, 1vh) * 1.5 * .2);
  box-shadow: darkgray calc(var(--vh, 1vh) * .15) calc(var(--vh, 1vh) * .15);
  height: calc(var(--vh, 1vh) * 2.6);
  margin: calc(var(--vh, 1vh) * .1);
  width: calc(var(--vh, 1vh) * 5.2);
}

#trayCenter .domino {
  border-radius: calc(var(--vh, 1vh) * 1.5 * .4);
  box-shadow: darkgray calc(var(--vh, 1vh) * -.3) calc(var(--vh, 1vh) * .3);
  height: calc(var(--vh, 1vh) * 18.75 * .5);
  padding: .2% .1%;
  transform: rotate(270deg) translate(-200%, -75%);
  width: calc(var(--vh, 1vh) * 9.375 * .5);
}

.domino p {
  font-size: 1.5vh;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
}

.gridPipsLarge {
  display: grid;
  gap: 2%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  padding: 5%;
}

.gridPipsSmall {
  display: grid;
  gap: 2%;
  grid-template-columns: 1fr .33fr 1fr .33fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  padding: 5%;
}

.pip {border-radius: 50%;}

.d1 {background: #773c00; box-shadow: inset .75vh .75vh .5vh #5a2d01;}
.d2 {background: olivedrab; box-shadow: inset .75vh .75vh .5vh rgb(66, 88, 22);}
.d3 {background: darkred; box-shadow: inset .75vh .75vh .5vh rgb(70, 0, 0);}
.d4 {background: gray; box-shadow: inset .75vh .75vh .5vh rgb(90, 90, 90);}
.d5 {background: black;}
.d6 {background: yellow; box-shadow: inset .75vh .75vh .5vh rgb(207, 207, 0);}
.d7 {background: magenta; box-shadow: inset .75vh .75vh .5vh rgb(170, 0, 170);}
.d8 {background: darkblue; box-shadow: inset .75vh .75vh .5vh rgb(1, 1, 73);}
.d9 {background: purple; box-shadow: inset .75vh .75vh .5vh rgb(71, 0, 71);}
.d10 {background: orange; box-shadow: inset .75vh .75vh .5vh rgb(204, 133, 1);}
.d11 {background: green; box-shadow: inset .75vh .75vh .5vh rgb(0, 75, 0);}
.d12 {background: red; box-shadow: inset .75vh .75vh .5vh rgb(173, 1, 1);}

.d11M {
  grid-area: 2 / 3 / 4 / 4;
  background: green;
  box-shadow: inset .75vh .75vh .5vh rgb(0, 75, 0);
  height: 50%;
  margin-top: 50%;
}
.bar {
  background: black;
  height: 100%;
  margin-left: 5%;
  width: 90%;
}

#blankCard {
  border: calc(var(--vh, 1vh) * 1) white solid;
}


/* Define bottom button box */
#boxButtons {
  align-content: space-around;
  bottom: calc(var(--vh, 1vh) * 1);
  display: flex;
  font-size: .9vh;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 5);
  justify-content: space-between;
  left: calc(var(--vh, 1vh) * 1);
  position: absolute;
  width: calc(var(--vh, 1vh) * 32);
}

#boxButtons button {
  font-size: .9vw;
  height: 100%;
  top: calc(var(--vh, 1vh) * 1);
  width: 32%;
}



/* Formatting for center tray */
#trayCenter, #trayCenter2 {
  border: #be302f 5px ridge;
  display: block;
  height: calc(var(--vh, 1vh) * 98);
  left: calc(var(--vh, 1vh) * 34);
  overflow: hidden;
  position: absolute;
  top: calc(var(--vh, 1vh) * 1);
  width: calc(100vw - calc(var(--vh, 1vh) * 35));
}

#trayCenter {
  z-index: 1;
}

#boardImage {
  height: 100%;
  position: relative;
  width: 100%;
}

.trayCenterSpot {
  border-radius: .1%;
  float: left;
  height: calc(var(--vh, 1vh) * 9.375 * .25);
  position: relative;
  width: calc(var(--vh, 1vh) * 9.375 * .25);
}

.trayCenterSpot .domino {
  left: 50%;
  margin: none;
  top: 50%;
  transform: translate(-50%, -50%);
}

#trayCenter .domino p {
  display: none;
}