*,
*:before,
*:after {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   font-size: clamp(16px, 4vmin, 32px);
   font-weight: 700;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   scroll-behavior: unset;
}

*:focus {
   outline: none;
   filter: var(--button-select);
}

:root {
   --button-select: drop-shadow(0px 0px 0.2em #000000) brightness(90%);
   --border-radius: 999px;
   --letter-code: "23";
}

html {
   width: 100%;
   height: 100%;
   /* position: fixed; */
   /* scroll-behavior: unset; */
   overflow: hidden;
}

body {
   height: 100%;
   background-color: #444;
}

/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/
/*---------------------------------------------------------*/

#container {
   display: grid;
   justify-content: center;
   align-content: center;
   height: 100%;
   overflow: hidden;
   color: #0123d3;
}

@media (orientation: landscape) {
   #container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: calc(100% - 3ex) 3ex;
   }
   #hints-area {
      grid-column: span 2;
   }
}

@media (orientation: portrait) {
   #container {
      grid-template-columns: 1fr;
      grid-template-rows: calc(50% - 2ex) calc(50% - 1ex) 3ex;
   }
   #hints-area {
      grid-column: span 1;
   }
}

/*------------------------------*/
/*------------------------------*/

#letters-area {
   grid-column: span 1;
   grid-row: span 1;
   text-align: center;
   overflow: hidden;
   display: grid;
   grid-template-columns: 2fr 20fr;
   grid-template-rows: 2fr 23fr;
   background-color: #a7e0e2;
   padding: 0 0.1rem 0.1rem 0;
}

#tools {
   grid-column: 1 / span 1;
   overflow: visible;
}

#letters-top {
   grid-column: 2 / span 1;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: 1fr;
   justify-content: center;
   align-items: center;
}

#letters-left {
   grid-column: span 1;
   grid-row: 2 / span 1;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(6, 1fr);
   justify-content: center;
   align-items: center;
}

#letters {
   grid-column: 2 / span 1;
   grid-row: 2 / span 1;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(6, 1fr);
   /* font-size: clamp(min(3vh, 3vw), min(5vh, 5vw), 64px); */
   font-size: 3ex;
}
/* .letter-divs::after {
   content: "nnn";
} */
.letter-divs {
   position: relative;
}
/*.letter-divs::before {
   position: absolute;
   top: 2%;
   left: 40%;
   font-size: 0.8em;
   content: "";
   content: var(--letter-code);
   z-index: 100;
   color: black;
} */
/**********************************************/
/**********************************************/

#words-area {
   grid-column: span 1;
   grid-row: span 1;
   text-align: center;
   overflow: hidden;
   display: grid;
   grid-template-columns: 2fr 25fr 2fr;
   background-color: #5f9ea0;
   padding: 0.1rem 0 0.1rem 0;
}

#words-left {
   grid-column: 1 / span 1;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(6, 1fr);
   justify-content: center;
   align-items: center;
}

#words-right {
   grid-column: -1 / -2;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(6, 1fr);
}

#words {
   grid-column: 2 / 3;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: repeat(6, 1fr);
}

/**********************************************/
/**********************************************/

#hints-area {
   background-color: #eee7de;
   color: black;
   text-align: center;
   max-width: 100%;
   overflow: hidden;
}

#hints-button {
   width: 100;
   height: 100;
   font-size: 2ex;
   font-weight: 600;
   text-shadow: none;
   overflow: hidden;
}

/**********************************************/
/**********************************************/

.letter-divs {
   padding: 0 0.04rem 0.04rem 0;
}

.word-letter-divs {
   padding: 0.05rem 0 0 0.03rem;
}

.game-button {
   width: 100%;
   height: 100%;
   border: none;
   background-color: rgba(0, 0, 0, 0);
   color: inherit;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.selected-top-left-letter {
   background-color: #b97a19;
   color: wheat;
   border-radius: 50%;
   width: 1.5em;
   height: 1.5em;
}
.selected-word-left {
   background-color: black;
   color: wheat;
   border-radius: 50%;
   width: 1.5em;
   height: 1.5em;
}

.selected-letter::before {
   position: absolute;
   top: 0.2em;
   left: 50%;
   transform: translateX(-50%);
   font-size: 0.7em;
   z-index: 100;
   color: black;
   content: var(--letter-code);
}

#tools-letter {
   margin: 10% auto 0 auto;
   width: 90%;
   height: 90%;
   overflow: hidden;
   background-image: url("../resources/images/ToolsIcon.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   cursor: pointer;
   filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.7));
}

.letters-letter {
   border: solid 1px #3f547c;
   background-color: #0077d3;
   color: white;
   border-radius: 25%;
}
/**************************************/

.word-letter-divs {
   border-top: solid 2px #94043d;
   border-bottom: solid 2px #94043d;
   border-left: solid 1px #94043d;
   border-right: solid 1px #94043d;
   border-radius: 10%;
   background-color: #ffffd3;
   position: relative;
   overflow: hidden;
}

.word-letter,
.word-letter-hint {
   display: block;
   position: absolute;
   width: 100%;
   left: 0;
}

.word-letter-hint {
   top: 0;
   height: 2ex;
   font-size: 70%;
   font-weight: 700;
   color: #94043d;
   z-index: 10;
}

.word-letter {
   top: 1ex;
   height: calc(100% - 1ex);
   background-color: #00000000;
   font-size: 90%;
   font-weight: 700;
   color: inherit;
}

/*---------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/

.highlighted {
   outline: lavender;
   background-color: #b97a19;
}

.disabled {
   background-color: gray;
   pointer-events: none;
   outline: gray;
}

/*---------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------*/

/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

.unselectable {
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   cursor: default;
}

.blur {
   filter: blur(1px);
}

.shielder {
   width: 100%;
   height: 100%;
   background-color: rgba(25, 25, 25, 0.1);
   position: fixed;
   top: 0px;
   left: 0px;
   overflow: hidden;
   text-align: center;
   align-content: center;
   visibility: hidden;
   z-index: 100;
   scroll-behavior: unset;
}

.dialogBox {
   position: absolute;
   background-color: rgb(252, 247, 247, 0.8);
   top: 10%;
   left: 50%;
   transform: translate(-50%, 0);
   border: solid 2px rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   padding: 1rem;
   z-index: 101;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}
.dialogBox-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

#dialogBox1,
#dialogBox2 {
   visibility: hidden;
   min-width: clamp(250px, 350px, 90%);
}
#dialogBox1 {
   position: relative;
}

#close-dialog-x {
   position: absolute;
   font-size: 12px;
   width: 30px;
   height: 30px;
   top: 3px;
   right: 3px;
   background-color: rgb(253, 208, 191);
   color: steelblue;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   border: solid 2px steelblue;
   border-radius: 50%;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   padding-bottom: 3px;
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.hidden {
   display: none;
}

.dialogBoxButton {
   display: inline-block;
   color: steelblue;
   background-color: rgb(253, 208, 191);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 1rem auto auto auto;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.dialogBoxButton:hover,
#close-dialog-x:hover {
   /* transform: scale(0.9); */
   filter: var(--button-select);
}

#playerName,
#madeItMsg,
.hidden {
   visibility: hidden;
}

#skipIt {
   display: none;
}

.buttons {
   display: block;
   min-width: 12ch;
   font-size: 1rem;
   font-weight: 700;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   border-radius: var(--border-radius);
   padding: 0.4rem;
   background-color: burlywood;
   color: brown;
   box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.8);
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.buttons:hover {
   /* transform: scale(0.9); */
   filter: var(--button-select);
}

.checkBox {
   width: 20px;
   height: 20px;
}

#openning {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   z-index: 100;
   padding: 10px 0 300px 0;
   background-color: rgba(125, 125, 125, 0.5);
   display: grid;
   scroll-behavior: unset;
   overflow: hidden;
}

#openning-content {
   min-width: clamp(250px, 350px, 90%);
   height: 0px;
   width: 0px;
   padding: 1rem;
   margin: 0 auto;
   background-color: rgba(255, 255, 255, 0.7);
   position: relative;
   overflow: hidden;
   opacity: 0;
   animation-name: openning;
   animation-duration: 1s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
}

#splasherButton,
#huzzahButton {
   pointer-events: all;
   display: inline-block;
   color: steelblue;
   background-color: rgb(203, 198, 221);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 0.3rem auto;
   padding: 0.5rem;
   font-weight: 700;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

#splasherButton:hover,
#huzzahButton:hover {
   /* transform: scale(0.9); */
   filter: var(--button-select);
}

@keyframes openning {
   0% {
      width: 0;
      height: 0;
   }
   10% {
      width: 100px;
      height: 100px;
      opacity: 1;
      transform: rotate(90deg);
   }
   25% {
      width: 200px;
      height: 200px;
      opacity: 1;
      transform: rotate(180deg);
   }
   50% {
      width: 100px;
      height: 100px;
      opacity: 1;
      transform: rotate(360deg);
   }
   100% {
      width: clamp(250px, 50vw, 90%);
      height: max-content;
      opacity: 1;
      transform: rotate(720deg);
   }
}

/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/
#huzzah {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   z-index: 100;
   background-color: rgba(125, 125, 125, 0.5);
   color: #0123d3;
   scroll-behavior: unset;
   overflow: hidden;
}

#huzzah-content {
   width: 100%;
   height: 100%;
   padding: 1rem;
   margin: 0 auto;
   background-color: rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
}

#huzzah-word {
   font-family: cursive;
}

.animation {
   opacity: 0;
   animation-name: huzzah;
   animation-duration: 1s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
}

@keyframes huzzah {
   0% {
      fonnt-zize: 10px;
   }
   10% {
      font-size: 20px;
      opacity: 1;
      transform: rotate(90deg);
   }
   25% {
      font-size: 60px;
      opacity: 1;
      transform: rotate(180deg);
   }
   50% {
      font-size: 10px;
      opacity: 1;
      transform: rotate(360deg);
   }
   60% {
      font-size: clamp(5vw, 20vw, 20vw);
      opacity: 1;
      transform: rotate(720deg);
   }
   70% {
      font-size: 10px;
      opacity: 1;
      transform: rotate(720deg);
   }
   80% {
      font-size: 22vw;
      opacity: 1;
      transform: rotate(720deg);
   }
   90% {
      font-size: 10vw;
      opacity: 1;
      transform: rotate(720deg);
   }
   100% {
      font-size: clamp(5vw, 20vw, 20vw);
      opacity: 1;
      transform: rotate(720deg);
   }
}

/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/* https://stackoverflow.com/questions/20420464/do-css-animations-still-happen-when-invisible */
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/
/************************************************************************************/

.huzzah-letters-annimate {
   animation-name: tiles-letters-huzzah;
   animation-duration: 1s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
}

@keyframes tiles-letters-huzzah {
   50% {
      transform-origin: top left;
      transform: scale(0.9, 0.9) translate(1rem, 1rem) skew(10deg, 20deg) rotate(3turn);
   }
   100% {
      transform-origin: bottom right;
      transform: scale(0.9, 0.9) skew(-10deg, -20deg) rotate(-3turn);
   }
}

.huzzah-words-annimate {
   animation-name: tiles-words-huzzah;
   animation-duration: 1s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
}

@keyframes tiles-words-huzzah {
   10% {
      transform: scale(0.2, 0.2) translate(0, -2rem) skew(10deg, 10deg);
   }
   30% {
      transform: scale(0.4, 0.4) translate(0, 2rem) skew(-10deg, -10deg);
   }
   60% {
      transform: scale(0.7, 0.7) translate(0, -1rem) skew(-10deg, -10deg);
   }
   100% {
      transform: scale(0.7, 0.7) translate(0, 1rem) skew(10deg, 10deg);
   }
}

@media screen {
   #print-clues,
   #print-words {
      display: none;
   }
}

@media print {
   #print-clues h1 {
      font-size: 24px;
      font-weight: 900;
   }
   #print-clues ol {
      padding-left: 50px;
   }
   #print-clues {
      padding: 20px;
      page-break-before: always;
      display: block;
      background-color: white;
      color: #000000;
      height: 50%;
   }
   #print-solutions {
      display: block;
      background-color: white;
      font-size: xx-small;
      color: #dddddd;
      transform: rotate(180deg);
      height: 50%;
      padding: 20px;
   }
}
/* ============================================= */

dialog {
   background-color: beige;
   margin: auto;
   padding: 1.5em;
   box-shadow: 5px 5px 20px black;
   border-radius: 20px;
   position: relative;
}

dialog::backdrop {
   backdrop-filter: blur(2px);
}

/* =============================================================== */
/* =============================================================== */
.buttons-class-cancel {
   position: absolute;
   font-size: 10px;
   width: 20px;
   height: 20px;
   top: 2px;
   right: 5px;
   background-color: rgb(253, 208, 191);
   color: steelblue;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   border: solid 2px steelblue;
   border-radius: 50%;
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
   padding-bottom: 3px;
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
}

.buttons-class {
   padding: 0.1em 1em;
   border-radius: 9999px;
   color: blanchedalmond;
   background-color: #323232;
   cursor: pointer;
   margin-left: 50%;
   transform: translateX(-50%);
}
/* =============================================================== */
/* =============================================================== */