*,
*:before,
*:after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

:root {
   --button-select: drop-shadow(0px 0px 0.2em #000000) brightness(90%);
   --border-radius: 999px;
   --body-back-color: cadetblue;
   --header-font-zise: max(1.2rem, 5vw);
   /* --grid-offset-up: calc((((100vh - min(85vw, 90vh)) / 2)) * -2 + 1vh); */
   --grid-offset-up: -10vh;
   --pen-color0: black;
   --pen-color1: darkgoldenrod;
   --pen-color2: yellow;
   --pen-color3: rgb(27, 123, 239);
   --pen-color4: rgb(121, 154, 12);
   --pen-color5: white;
   --pen-color6: rgb(93, 92, 92);
   --pen-color7: hsl(154, 88%, 17%);
   /* --pen-color8: rgb(191, 47, 153); */
   --pen-color8: hsl(271, 93%, 46%);
}
body {
   font-size: 24px;
   font-family: "Times New Roman", Times, serif;
   background-color: cadetblue;
   color: black;
   height: 100vh;
   width: 100vw;
}

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

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

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

.dialogBox {
   background-color: rgb(252, 247, 247, 0.8);
   position: relative;
   flex-basis: 75%;
   border: solid 2px rgba(0, 0, 0, 0.5);
   border-radius: 20px;
   padding: 5px 40px 5px 5px;
   z-index: 101;
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}

#dialog-close {
   position: absolute;
   top: 4px;
   right: 2px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: none;
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   text-shadow: 2px 2px 2px black;
   font-size: 20px;
   padding-top: 3px;
   color: white;
   background-color: rgb(10, 97, 97);
   cursor: pointer;
}

.dialogBox-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
}

/* #menu-dialogBox {
   min-width: clamp(250px, 350px, 90%);
} */

.dialogBoxButton {
   display: block;
   white-space: nowrap;
   flex: 1 1 40%;
   color: steelblue;
   background-color: rgb(253, 208, 191);
   font-size: calc(min(100vh, 100vw) / 28);
   font-weight: 700;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   padding: 0.5rem;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.dialogBoxButton:hover,
#downloading:hover,
#load-game-file-label:hover {
   filter: var(--button-select);
}

.instructions,
.instructions2,
.instructions3 {
   font-size: max(3vw, 16px);
   font-weight: 800;
   text-align: center;
   margin: auto;
   /* width: calc(100% - 60px); */
   /* width: 85%; */
}

.instructions2 {
   font-size: max(2vw, 16px);
}
.instructions3 {
   font-size: max(4vw, 16px);
}

#downloading {
   display: block;
   text-decoration: none;
   /* font-size: max(2vw, 16px); */
   font-size: calc(min(100vh, 100vw) / 28);
   font-weight: 700;
   width: calc(100% - 60px);
   text-align: center;
   color: steelblue;
   background-color: rgb(253, 208, 191);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 0.2rem auto 0.2rem auto;
   padding: 0.5rem;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
#load-game-file {
   opacity: 0;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
}
#load-game-file-label {
   display: block;
   /* font-size: max(2vw, 16px); */
   font-size: calc(min(100vh, 100vw) / 28);
   font-weight: 700;
   width: calc(100% - 60px);
   text-align: center;
   color: steelblue;
   background-color: rgb(253, 208, 191);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
   outline: none;
   margin: 0.5rem auto 0.2rem auto;
   padding: 0.5rem;
   border: solid 2px steelblue;
   border-radius: var(--border-radius);
   box-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.inputs {
   font-size: max(2vw, 16px);
   font-weight: 600;
   overflow-wrap: break-word;
   width: 95%;
   height: 3rem;
   display: block;
   /* flex-basis: 1/3; */
   padding: 0.05rem 0.6rem;
   border-radius: 20px;
   margin-bottom: 1rem;
   border: none;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.penColorButton {
   width: auto;
   display: inline-block;
   outline: none;
   margin: 0.01rem auto 0.2rem auto;
   padding: 0 0.3rem 0.3rem 0.3rem;
   border: solid 2px steelblue;
   border-radius: 0;
   font-size: calc(var(--document-minheight) / 16);
   font-weight: 900;
   cursor: pointer;
   background-color: rgb(8, 213, 192);
}

/* ======================================================================================================================================= */
/* ======================================================================================================================================= */
/* ======================================================================================================================================= */
#setup-button {
   position: absolute;
   top: 4px;
   left: 2px;
   width: max(32px, 4vw);
   height: max(32px, 4vw);
   overflow: hidden;
   background-image: url("../images/ToolsIcon.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   cursor: pointer;
}
#number0 {
   background-image: url("../images/Eraser.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}
#pen-color {
   width: calc(var(--document-minheight) / 20);
   height: calc(var(--document-minheight) / 20);
   border-radius: var(--border-radius);
   font-size: calc(var(--document-minheight) / 16);
   margin-top: 0.15rem;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;
   background-color: #333;
   user-select: none;
   overflow: hidden;
   background-image: url("../images/ColorWheel.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}

#current-pen-color {
   width: calc(var(--document-minheight) / 20);
   height: calc(var(--document-minheight) / 30);
   border-radius: 25%;
   font-size: calc(var(--document-minheight) / 16);
   margin-top: 0.05rem;
   margin-left: auto;
   margin-right: auto;
   cursor: pointer;
   background-color: black;
   user-select: none;
   overflow: hidden;
}

/* ***************************************************************************************** */
/* ***************************************************************************************** */
/* ***************************************************************************************** */
/* ***************************************************************************************** */
#difficulty-level,
#stop-watch {
   position: fixed;
   /* bottom: -0.01rem; */
   top: calc(var(--document-height) - 2.5rem);
   left: 0;
   width: 100%;
   text-align: left;
   font-size: 24px;
   font-weight: 900;
   color: #333;
   user-select: none;
   pointer-events: non;
   cursor: none;
   padding: 0.5rem;
}

#stop-watch {
   right: 0;
   text-align: right;
}

#main {
   position: fixed;
   top: 0;
   left: 0;
   height: var(--document-height);
   width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 0 0 0;
   overflow: hidden;
   column-gap: 0.2rem;
}

#container {
   /* margin-top: var(--grid-offset-up); */
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 2px;
   /* width: min(calc(var(--document-height) * 0.95), 95vw);
   height: min(calc(var(--document-height) * 0.95), 95vw); */
   width: var(--document-minheight);
   height: var(--document-minheight);
   /* width: min(85vw, 85vh);
   height: min(85vw, 85vh); */
   overflow: hidden;
   border: solid 4px black;
}

.block {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 2px;
   border: solid 2px black;
}

.cell {
   width: 100%;
   height: 100%;
   font-size: calc(var(--document-minheight) / 16);
   font-weight: 900;
   cursor: pointer;
   background-color: rgb(8, 213, 192);
   overflow: hidden;
   color: blue;
   user-select: none;
   text-align: center;
   padding-top: 5%;
}

#numeric-pad {
   /* margin-top: var(--grid-offset-up); */
   /* height: min(calc(var(--document-height) * 0.95), 95vw); */
   height: var(--document-minheight);
   /* height: min(85vw, 85vh); */
   display: flex;
   flex-direction: column;
   place-content: center;
}

.number-pad-cell {
   /* width: calc(min(100vh, 100vw) / 13);
   height: calc(min(100vh, 100vw) / 13); */
   width: calc(var(--document-minheight) / 13);
   height: calc(var(--document-minheight) / 13);
   border-radius: var(--border-radius);
   /* font-size: calc(min(100vh, 100vw) / 16); */
   font-size: calc(var(--document-minheight) / 16);
   font-weight: 900;
   cursor: pointer;
   color: antiquewhite;
   background-color: #333;
   user-select: none;
   text-align: center;
}

.editable {
   background-color: turquoise;
   pointer-events: all;
   color: var(--pen-color0);
}
.pen-color0 {
   color: var(--pen-color0);
}
.pen-color1 {
   color: var(--pen-color1);
}
.pen-color2 {
   color: var(--pen-color2);
}
.pen-color3 {
   color: var(--pen-color3);
}
.pen-color4 {
   color: var(--pen-color4);
}
.pen-color5 {
   color: var(--pen-color5);
}
.pen-color6 {
   color: var(--pen-color6);
}
.pen-color7 {
   color: var(--pen-color7);
}
.pen-color8 {
   color: var(--pen-color8);
}
#current-pen-color.pen-color0 {
   background-color: var(--pen-color0);
}
#current-pen-color.pen-color1 {
   background-color: var(--pen-color1);
}
#current-pen-color.pen-color2 {
   background-color: var(--pen-color2);
}
#current-pen-color.pen-color3 {
   background-color: var(--pen-color3);
}
#current-pen-color.pen-color4 {
   background-color: var(--pen-color4);
}
#current-pen-color.pen-color5 {
   background-color: var(--pen-color5);
}
#current-pen-color.pen-color6 {
   background-color: var(--pen-color6);
}
#current-pen-color.pen-color7 {
   background-color: var(--pen-color7);
}
#current-pen-color.pen-color8 {
   background-color: var(--pen-color8);
}

.editable:hover {
   filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.9));
}

.cell-selected {
   filter: brightness(1.05) drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.9));
}

.key-selected {
   filter: invert();
}

.cell > p {
   font-weight: 500;
   pointer-events: none;
   user-select: none;
}

.multiple {
   font-size: calc(min(100vh, 100vw) / 28);
}

.multiple > p {
   border-right: solid 1px white;
   border-bottom: solid 1px white;
   font-weight: 900;
   /* padding: 0 0.4px; */
}

.selected-row,
.selected-column {
   /* outline: ridge 5px goldenrod; */
   /* outline: ridge 5px hsla(174, 92%, 32%, 0.5); */
   outline: ridge 5px cadetblue;
   outline-offset: -7px;
}

.selected-number {
   /* color: blueviolet; */
   /* border: dotted 3px #333; */
   /* text-shadow: 2px 2px 3px black; */
   text-shadow: 3px 3px 3px black;
   filter: brightness(1.05) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.9));
   /* filter: brightness(1.1); */
}

.current-number {
   /* text-shadow: 2px 2px 3px black; */
   text-shadow: 3px 3px 3px black;
   /* color: rgb(122, 10, 227); */
   filter: brightness(1.05) drop-shadow(2px 2px 7px rgba(0, 0, 0, 0.9));
}

.conflicted {
   color: red;
}

.stroked {
   text-decoration: underline;
   transform: scale(0.9);
   font-size: calc(var(--document-minheight) / 26);
   padding-top: 0.2rem;
}
/* ************************************************************************* */
/* ************************************************************************* */
/* ************************************************************************* */
#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,
#reviewGameButton {
   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);
   }
}

.hidden {
   display: none;
}