@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');

:root {
  --square-width: calc(50vw / 18);

  /* luxury style */
  /* --dws-color: #2fd60d88; */
  /* --tws-color: #b66361; */
  /* --tls-color: #526387; */
  /* --dls-color: #adc4d2; */
  --square-color: #a33f3466;

  --dws-color: pink;
  --tws-color: #e54b4b;
  --tls-color: #368bc8;
  --dls-color: lightblue;
  /* --square-color: rgba(210, 180, 140, 0.751); */
}

body {
  margin: 0;
  position: relative;
  background: linear-gradient(rgba(205, 134, 63, 0.694), rgb(28, 211, 32));
  background: #222;

  /* background: url("./images/20210419_092919.jpg") no-repeat center center fixed;
  filter: hue-rotate(150deg) saturate(300%) contrast(200%); 
  opacity: .08;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover; */
}

/* https://css-tricks.com/apply-a-filter-to-a-background-image/ */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400%;
  /* background-color: rgb(158, 61, 187);
  background-image: linear-gradient(60deg,#333,#00b1fe88 555%), url('./images/wood-grain1.jpg'); 
  background-blend-mode: difference;
  */
  /* background-image: url('./images/20210419_153423.jpg'); */
  background: url("./images/20210419_092919.jpg") no-repeat center center fixed;
  filter: hue-rotate(150deg) saturate(300%) contrast(200%); 
  opacity: .08;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
  /* background-position: center; */ 

  font-family: monospace;
}



.btn-primary {
  background-color: var(--square-color);
  color: var(--dls-color);
  font-family: monospace;
  font-size: .9em;
  width: 130px;
  height: 2em;
  line-height: 1em;
  margin: 2px;

  height: 1.8em;
  line-height: .9em;
  font-size: .7em;
  border-radius: 4px;
}
.btn-primary:hover {
  background-color: var(--dws-color);
  color: var(--tws-color);
}
/* @media screen and ( min-width : 1081px ) {
  :root {
    --square-width: calc(50vw / 12);
  }
}
   */


/* #region START MAJOR CONTAINERS SECTION */

.layout-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 2fr;
  /* 1fr 3fr 4fr 2fr 1fr;*/
  grid-template-rows: repeat(16, calc(100vh / 16));

  display: flex;
  flex-wrap: wrap;
  width: 98vw;
  margin: 0 0 0 0;
}


.board-section {
  display: flex;
  justify-content: flex-start;
  /* border: solid white; */
}

.dash-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr;
  width: 42vw;
  /* border: 2px solid fuchsia; */
}

.scoring-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 50px;
  /* border: 5px solid red; */
}

.game-container {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: flex-start;
  justify-content: flex-start;
}

.scores-subsection {
  display: flex;
  justify-content: space-between;
}
.p1-score, .p2-score {
  display: block;
  color:rgb(28, 211, 32);
  font-size: 30px;
  font-family: 'Bungee Inline', cursive;
  margin: 0 5em 0 .5em;
}
.p2-score {
  position: relative;
  left: -70px;
}

.last-play-section {
  display: flex;
  justify-content: flex-start;
  /* border: 2px solid blue; */
  padding-left: 1em;
}

.last-play-words {
  display: flex;
  flex-direction: column;
}
.last-word {
  /* position: relative;
  left: -2em; */
  display: block;
  color:rgb(228, 111, 32);
  font-size: 16px;
  font-family: 'Bungee Inline', cursive;
}
.last-play {
  /* position: relative;
  left: -2em; */
  display: block;
  font-size: 13px;
  font-family: 'Bungee Inline', cursive;
  color:var(--tls-color)
}

.last-play-points {
  display: flex;
  flex-direction: column;
}
.last-points {
  display: block;
  font-size: 14px;
  font-family: 'Bungee Inline', cursive;
  color:var(--tls-color);
  margin: .3em 0 0 4em;
}

.title {
  /* grid-area: 2/1/ 16/2; */
  display: block;
  /* user-select: none > prevents a bug where dragging causes other div's text to select and prevents drag */
  user-select: none;
  width: fit-content;
  height: fit-content;
  text-align: right;
  /* background-color: #3336; */
  color: var(--tls-color);
  text-shadow: .7px .5px #9ff;
  margin: 0;
  padding: 1em .2em;
  font-size: clamp(1rem, 2.5em, 4.5rem);
  writing-mode: vertical-rl;
  letter-spacing: 1pc;
  transform: rotate(180deg);
  /* border: 4px solid #9ff; */
}

.tray-legend-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 0 2em;
}

.trays-container {
  position: relative;
  top: 0px;
  display: flex;
  align-self: flex-end;
  justify-content: space-around;
  width: 150px;
}

.legend {
  /* grid-area: 1/2/ 4/3; */
  position: relative;
  top: -6px;
  user-select: none;
  display: flex;
  justify-content: space-around;
  width: fit-content;
  height: 8.5em;
  padding: .7em .7em;
  margin: 0 auto;
  background-color: #52638744;
  transform: rotate(-90deg);
  /* border: 1px solid whitesmoke; */
}

.game-container {
  display: flex;
}

.gameboard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1em;
  /* border: 2px solid deeppink; */
}
.scores {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 0;
}
.score {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.score-label {
  color: white;
}


.gameboard {
  /* grid-area: 1/3/ 8/4; */
  display: flex;
  justify-content: center;
  width: calc(var(--square-width) * 15.5);
  height: calc(var(--square-width) * 15.5);
  min-width: 410px;
  min-height: 410px;
  margin: .2em 0 3em 0;
  padding: .4em;
  flex-wrap: wrap;
  border: 2px inset #677;
  border: .3px inset #6666;
  box-shadow: -2px -2px 5px 5px #9458,
  2px 2px 5px 5px #9458;
}

 .gameboard.loading {
  display: none;
}

.spinner-border {
  display: none;
  /* position: absolute; */
  /* top: 50vh;
  left: 50vw; */
  top: 50%;
  left: 50%;
  
}
.gameboard-container.loading .spinner-border {
  display: block;
}


/* .dashboard {

  position: relative;
  top: 30px;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 26vw;
  height: calc(25vw * .9);
  height: fit-content;
  padding: 0;
  margin: 50px auto;
} */

.console {

  width: 90%;
  height: 250px;
  margin: 0 auto;
  padding: 1em;
  background-color: #235d;
  color: #32cd32ee;
  font-family: monospace;
  font-size: .6em;
  scrollbar-base-color: #333;
  scrollbar-color: #999;
  overflow-y: auto;
  border: .5px solid black;
}

.dashboard {
  /* grid-area: 2/4/ 7/5; */
  /* align-self: center; */
  position: relative;
  top: -10px;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* width: 100%; */
  height: calc(25vw * .9);
  height: fit-content;
  padding: 0;
  margin: 20px 2vw;
  /* border: 3px solid yellow; */
}

.console {

  width: 240px;
  height: 250px;
  margin: 1em auto 1em 1em;
  padding: 1em;
  background-color: #235d;
  color: #32cd32ee;
  font-family: monospace;
  font-size: .6em;
  scrollbar-base-color: #333;
  scrollbar-color: #999;
  overflow-y: auto;
  border: .5px solid black;
}

.wordiness-container {
  display: flex;
  align-items: center;
}
.wordiness-label {
  color: var(--dws-color);
  margin-bottom: .2em;
}
.chk-wordiness {
  height: 1.5em;
  margin-left: .5em;
}

.free-words{
  display: flex;
  align-items: center;
  margin: 0;
}
.free-word-count {
  height: 1.5em;
  width: 4em;
  border-radius: 5px;
}
.btn-free-words, .btn-clear-console {
  height: 1.8em;
  line-height: .9em;
  font-size: .9em;
  border-radius: 4px;
}

/* #endregion END MAJOR CONTAINERS SECTION */

/*  */


/* trays */


.p1-tray-container,
.p2-tray-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: .3px ridge rgb(76, 46, 7);
  margin-top: .8em;
}

.player1-tray,
.player2-tray {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* position: absolute;
  top: 37vh;
  left: 12vw; */
  /* min-width: 45px; */
  width: 100%;
  /* min-height: calc(100vh / 3); */
  /* min-height: 225px; */
  /* min-height: 41.67vh; */
  /* height: 20.38vw; */
  /* max-height: calc(100vh / 2.2); */
  border: 2.2px inset #357;
  /* box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%); */
  padding: 5px;
  background-image: linear-gradient(deeppink, black), url('./images/wood-grain-bg.jpg');
  background-size: cover;
  background-blend-mode: saturation;
  /* border: 3px solid #9ff; */
}

.player2-tray {
  background-image: linear-gradient(black, deeppink), url('./images/wood-grain-bg.jpg');
}

.btn-p  {
  /* prevent hightlighting of button text */
  user-select: none;
  margin-top: .2em;
  background-color: var(--square-color);
  color: var(--dls-color);
  border: .2px solid gray;
  border-radius: 2.2px;
  font-family: monospace;
  font-size: .6em;
  font-weight: normal;
  width: 100%;
  padding: 0 .3em;
}
.btn-p:hover {
  background-color: var(--dls-color);
  color: var(--tws-color);
}



.gameboard div {
  width: var(--square-width);
  height: var(--square-width);
  border: solid gray;
  border-width: .1px;
}

.gameboard div:hover {
  opacity: 1;
}

.div {
  border: solid green;
  /* background-color: #ffe4c4dd; */
  background-color: var(--square-color);
}

.tws-div {
  background-color: var(--tws-color);
  border: solid blueviolet;
}

.dws-div {
  background-color: var(--dws-color);
}

.tls-div {
  background-color: var(--tls-color);
}

.dls-div {
  background-color: var(--dls-color);
}

.square.over {
  /* border: 2px dashed blue; */
  transform: scale(130%);
  filter: saturate(250%);
}

.square {
  min-width: 26px;
  min-height: 26px;
  opacity: .7;

}

.tile {
  z-index: 100;
  height: calc(var(--square-width));
  width: calc(var(--square-width));
  min-width: 26px;
  min-height: 26px;
  background-size: cover;
  background-repeat: no-repeat;
  border: outset #ebba84;
}


.bag-of-tiles,
.tiles-images {
  display: none;
}



/* legend contents */
.color-line {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 220px;

  border-bottom: .2px ghostwhite;
  margin: 0 0 1.5em 0;
}

.color-swatch {
  height: 16px;
  width: 16px;
}

.color-text {
  display: block;
  /* text-orientation: upright; */
  writing-mode: vertical-lr;
  font-size: .6em;
  /* text-combine-upright: 6; */
  margin: 1em 0 0 0;
  /* height: 20px; */
  /* line-height: var(--square-width); */
  color: var(--dls-color);
}

.tws-color {
  background-color: var(--tws-color);
}

.dws-color {
  background-color: var(--dws-color);
}

.tls-color {
  background-color: var(--tls-color);
}

.dls-color {
  background-color: var(--dls-color);
}


/* MODALS */



.modal-dialog-scrollable{
  width: 90vw;
  margin-left: 10vw;
}
.modal-content {
  width: 80vw;
}

.modal-dialog-scrollable img {
  width: 100%;
}
.modal-dialog-scrollable .btn-primary {
  background-color: #368bc800;
  border: 2px solid black;
  color: black;
  height: 3em;
  width: 14em;
}
.modal-dialog-scrollable .btn-primary:hover {
  background-color: #368bc888;
  border: 2px solid black;
  color: black;
  height: 3em;
  width: 14em;
}

.modal-header {
  display: flex;
  justify-content: center;
  padding: .4em;
  text-align: center;
}

.modal-title {
  font-size: 16px;
  text-align: center;
}


#wordinessForm .modal-dialog {
  width: 3vw;
  margin-left: 33vw;
  margin-top: 23vh;
}
#wordinessForm .modal-content {
  width: 30vw;
}

.weird-word {
  margin-right: 4em;
}
.weird-check {
  position: relative;
  left: 100px;
  padding-left: 6em;
}
.weird-div h2 {
  font-size: 14px;
}









@media screen and (max-width: 755px) {
  /* gameboard breaks below this */
}


/* @media (min-width: 1081px) {
  .tile, .gameboard div {
    height: calc(var(--square-width) + 4px);
    width: calc(var(--square-width) + 4px);
  }

  .gameboard {
    width: calc(var(--square-width) * 16.8);
  }
} */