*,
*::before,
*::after{
   max-width:100%;
   box-sizing:border-box;
   margin:0;
   padding:0;
   font-family:system-ui,sans-serif;
}

:root{
   --elements-width: 600px;
   --game-elements-text:monospace;
}

body{
   height:100vh;
   max-height:100vh;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:0;
   overflow:hidden;
   background-color:#fff;
   color:#222;
   background-color:#000;
}

.main-head{
   width:var(--elements-width);
   height:15vh;
   display:flex;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   gap:.5em;
   margin-inline:auto;
   margin-block:2.5vh 0;
   background-color:#f6f6f6;
   border-top-left-radius:.35em;
   border-top-right-radius:.35em;
}

.main-content{
   width:var(--elements-width);
   -webkit-aspect-ratio:1/1;
   -moz-aspect-ratio:1/1;
   aspect-ratio:1/1;
   max-height:80vh;
   overflow:hidden;
   background-color:#222;
   color:#fff;
   padding:1em;
   margin-inline:auto;
   border:16px solid #fff;
   border-top:none;
   border-bottom-left-radius:.35em;
   border-bottom-right-radius:.35em;
}

.board-game{
   width:100%;
   height:100%;
   display:flex;
   flex-direction:column;
   justify-content:space-evenly;
   align-items:center;
   overflow:hidden;
   position:relative;
   z-index:1;
   padding:.5em;
}

.board-game-informations{
   width:100%;
   height:max-content;
   align-self:flex-start;
   flex:1;
   padding-block:0 .5em;
}

.board-game-play{
   width:100%;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:3em;
   flex:11;
   background-color:#111;
}

.player-signs,
.ia-signs{
   width:100%;
   display:flex;
   flex-direction:row;
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
   gap:2em;
   position:relative;
   pointer-events:none;
}

.ia-signs::before{
   content:"";
   width:100%;
   height:.5em;
   background-color:#fff;
}

.player-signs-description,
.ia-signs-description{
   width:100%;
   height:1.5em;
   font-size:1em;
   font-weight:400;
   letter-spacing:.05em;
   display:block;
   text-align:center;
   text-transform:uppercase;
}

.signs{
   width:max-content;
   height:max-content;
   background-color:#444;
   font-size:1.5em;
   text-align:center;
   padding:.25em;
   border-radius:.15em;
   cursor:pointer;
   font-style:normal;
   transition:background-color .225s ease-out, border-radius .05s linear;
   -webkit-tap-highlight-color:transparent;
   -moz-tap-highlight-color:transparent;
}

.player-signs{
   pointer-events:all;
}

.player-sign::selection{
   background-color:inherit;
   color:inherit;
}

.ia-sign{
   cursor:default;
}

.signs:not(.ia-sign):hover{
   background-color:#333;
   border-radius:0;
}

.freeze{
   pointer-events:none;
}

.freeze:hover{
   background-color:inherit;
   border-radius:inherit;
}

.launch-game-modal,
.result-modal{
   width:100%;
   height:100%;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:2.5em;
   position:absolute;
   top:0;
   left:0;
   background-color:#111;
}

.launch-game-modal{
   z-index:4;
   opacity:0;
   pointer-events:none;
}

.launch-game-modal.launch-game-show{
   opacity:1;
}

.launch-game-modal.launch-game-show #loadGame{
   pointer-events:all;
}

.result-modal{
   z-index:3;
   opacity:0;
   pointer-events:none;
}

.result-modal.result-show{
   opacity:1;
   pointer-events:all;
}

.launch-text,
.result{
   font-size:2em;
   font-weight:500;
   text-transform:uppercase;
   font-family:var(--game-elements-text);
}

#loadGame,
#reloadGame{
   display:flex;
   justify-content:center;
   align-items:center;
   gap:.5em;
   padding-inline:3em;
   line-height:2.5;
   font-size:1.5em;
   font-weight:900;
   font-family:var(--game-elements-text);
   letter-spacing:.05em;
   border:none;
   background-color:#eee;
   cursor:pointer;
   border-radius:5em;
   -webkit-tap-highlight-color:transparent;
   -moz-tap-highlight-color:transparent;
   transition:box-shadow .325s ease-out;
}

#loadGame:hover,
#reloadGame:hover{
   box-shadow:0 0 1em .25em #2e62bc;
}

@media all and (max-width: 860px){
   .main-head{
      width:calc(100% - 1em);
   }
   .main-head-title{
      font-size:1.5em;
   }
   .main-content{
      width:calc(100% - 1em);
      max-height:70vh;
      /* -webkit-aspect-ratio:unset;
      -moz-aspect-ratio:unset;
      aspect-ratio:unset; */
   }
}