/*
 Copyright (C) 2020 Jan-Dirk van Dingenen
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import url('https://fonts.googleapis.com/css?family=Barriecito&display=swap');

::selection, button::selection {
background: transparent;
}
::-moz-selection, button::-moz-selection {
background: transparent;
}

*:not(input):not(textarea) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

html {
    background-color: #000;
    background-image: url(img/background.jpg);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}

#game {
    position: absolute;
    top: 0;
    left: 0;
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    --gridUnit: 80px;
    display:none;
}

#mapContainer {
    width: 80vw;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

#map {
    --gridSize: 12;
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 10000px;
    transform: rotateX(45deg) rotateY(0deg) rotateZ(18deg);
    position: absolute;
    width: calc(var(--gridUnit) * var(--gridSize));
    height: calc(var(--gridUnit) * var(--gridSize));
    left: calc(50% - calc(var(--gridUnit) * calc(var(--gridSize) / 2)));
    top: calc(50% - calc(var(--gridUnit) * calc(var(--gridSize) / 2)));
    display: grid;
    grid-template-columns: repeat(var(--gridSize), var(--gridUnit));
    grid-template-rows: repeat(var(--gridSize), var(--gridUnit));    
    z-index: 11;
    background-image:url(img/board.jpg);
    background-size:100% 100%;
}

.mapSide {
    position: absolute;
    z-index: 100;
    background: url(img/board.jpg), linear-gradient(to bottom, rgba(98,226,0,0.5) 0%,rgba(98,226,0,0) 10%,rgba(98,226,0,0) 90%,rgba(98,226,0,0.5) 100%), linear-gradient(to right, rgba(98,226,0,0.5) 0%,rgba(98,226,0,0) 10%,rgba(98,226,0,0) 90%,rgba(98,226,0,0.5) 100%);
    background-blend-mode: multiply, multiply, multiply , multiply;
    background-color: #929292;
    background-size: 100% 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 10000px;
}

.mapSide.mapFront {
    bottom: 0;    
    width: calc(var(--gridUnit) * var(--gridSize));
    height: calc(var(--gridUnit) * 0.25);    
    transform-origin: bottom;
    transform: rotateX(-270deg);
}

.mapSide.mapBack {
    bottom: 0;    
    width: calc(var(--gridUnit) * var(--gridSize));
    height: calc(var(--gridUnit) * 0.25);    
    transform-origin: top;
    transform: rotateX(270deg);
    top:0;
}

.mapSide.mapLeft {
    height: calc(var(--gridUnit) * var(--gridSize));
    width: calc(var(--gridUnit) * 0.25);
    transform-origin: left;
    transform: rotatey(90deg);
}

.mapSide.mapRight {
    height: calc(var(--gridUnit) * var(--gridSize));
    width: calc(var(--gridUnit) * 0.25);
    transform-origin: right;
    transform: rotatey(-90deg);
    left: unset;
    right: 0;
}

.gridTile {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 10000px;
}

.gridTile.selectionGrid {    
   background-repeat: no-repeat;
   background-size:var(--gridUnit);
   cursor:pointer;
   filter: brightness(0.5);
   background-color: rgba(200, 255, 255, 1);
   background-blend-mode: multiply;
}

.gridTile.selectionGrid.highlightGridTile {
    filter: brightness(1.0);
    cursor: pointer;
}

.gridTile.selectionGrid.highlightOriginNeighbour {
    filter: brightness(1.0);
    background-color: rgb(197, 232, 187);
}

.gridTile.selectionGrid.highlightGridTile.highlightOrigin {
    background-color: rgb(114, 225, 82);
}

.gridTile.selectionGrid.highlightGridTile:hover {
    filter: brightness(1.4);
    transition: 0.5s;
}

.box-wrapper, .box-outer, .box-outer .box, .box-outer .box .box-face {
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 10000px;
}

.box-wrapper.highLightHover_col .box-outer .box .box-face, 
.box-wrapper.highLightSelect_col .box-outer .box .box-face, 
.box-wrapper.highLightHoverMain_col .box-outer .box .box-face {
    background-color: #c8ffc8;
}

.box-wrapper.highLightHover_row .box-outer .box .box-face, 
.box-wrapper.highLightSelect_row .box-outer .box .box-face, 
.box-wrapper.highLightHoverMain_row .box-outer .box .box-face {
    background-color: #c8ffc8;
}

.box-wrapper.highLightSelect_row.highLightHoverMain_col .box-outer .box .box-face,
.box-wrapper.highLightHoverMain_row.highLightSelect_col .box-outer .box .box-face,
.box-wrapper.highLightSelectMain_row.highLightHover_col .box-outer .box .box-face,
.box-wrapper.highLightHover_row.highLightSelectMain_col .box-outer .box .box-face,
.box-wrapper.highLightHover_row.highLightHover_col .box-outer .box .box-face, 
.box-wrapper.highLightSelect_row.highLightHover_col .box-outer .box .box-face,
.box-wrapper.highLightHover_row.highLightSelect_col .box-outer .box .box-face {
    background-color: #c9ff31;
}

.box-wrapper.highLightSelectMain_row.highLightHoverMain_col .box-outer .box .box-face,
.box-wrapper.highLightHoverMain_row.highLightSelectMain_col .box-outer .box .box-face {
    background-color: yellow;
}

.box-outer .box, .box-outer .box .box-face {
    position: absolute;
    width: calc(var(--gridUnit) *1);
    height: calc(var(--gridUnit) *1);
}

.box-outer .box .box-face {
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    box-sizing: border-box;
    transform-origin: left bottom;
    backface-visibility: visible;
    border-radius: calc(var(--gridUnit) *0.05);
    box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.3);
    background-image: url(img/sides.jpg);
    background-size: 100% 100%;
    background-color: #fffded;
}

.box-outer .box .box-face:first-child {
    transform: translateZ(calc(var(--gridUnit) * var(--boxZ)));
    background-image: url(img/tile.jpg);
}

.box-outer .box .box-face:nth-child(2) {
    transform: rotateY(-90deg) translateX(calc(var(--gridUnit) * var(--boxZ)));
    width: calc(var(--gridUnit) * var(--boxHeight));
    filter: brightness(0.9);
}

.box-outer .box .box-face:nth-child(3) {
    transform: rotateY(-90deg) rotateX(-270deg) translateX(calc(var(--gridUnit) * var(--boxZ)));
    width: calc(var(--gridUnit) * var(--boxHeight));
    filter: brightness(0.85);
}

.box-outer .box .box-face:nth-child(4) {
    transform: rotateZ(0deg) rotateY(-90deg) rotateX(90deg) translateZ(var(--gridUnit)) translateX(calc(var(--gridUnit) * var(--boxZ)));
    width: calc(var( --gridUnit) * var(--boxHeight));
    filter: brightness(0.9);
}

.box-outer .box .box-face:nth-child(5) {
    transform: rotateY(-90deg) translateZ(calc(var(--gridUnit) * -1)) translateX(calc(var(--gridUnit) * var(--boxZ)));
    width: calc(var( --gridUnit) * var(--boxHeight));
    filter: brightness(0.85);
}

.box-outer .box .box-face:nth-child(6) {
    transform: translateZ(calc(var( --gridUnit) * var(--boxHeight))) translateZ(calc(var(--gridUnit) * var(--boxZ)));    
}

.box_green .box-outer .box .box-face:nth-child(6), .gridTile_green {
    background-image: url(img/tile_green.jpg);   
}

.box_red .box-outer .box .box-face:nth-child(6), .gridTile_red {
    background-image: url(img/tile_red.jpg);   
}

.box_blue .box-outer .box .box-face:nth-child(6), .gridTile_blue {
    background-image: url(img/tile_blue.jpg);   
}

.box_yellow .box-outer .box .box-face:nth-child(6), .gridTile_yellow {
    background-image: url(img/tile_yellow.jpg);   
}

.box_purple .box-outer .box .box-face:nth-child(6), .gridTile_purple {
    background-image: url(img/tile_purple.jpg);   
}


#infoContainer, #scoreValuesContainer, #controlsContainer, .gameOverModal, #menu, .howToPlay{
    position: absolute;
    color: #a7ff63;
    text-shadow: 1px 1px 2px rgb(3, 27, 0), 1px 1px 2px rgb(29, 67, 0);
    font-size: calc(var(--gridUnit) * 0.4);
    border: solid 1px rgba(98,226,0,1);
    padding: calc(var(--gridUnit) *0.25) calc(var(--gridUnit) *0.25);
    border-radius: calc(var(--gridUnit) * 0.05);
    background-image: url(img/board.jpg);
    background-size: cover, cover, cover, cover;
    background-blend-mode: multiply;
    background: url(img/board.jpg), linear-gradient(to bottom, rgba(98,226,0,0.5) 0%,rgba(98,226,0,0) 10%,rgba(98,226,0,0) 90%,rgba(98,226,0,0.5) 100%), linear-gradient(to right, rgba(98,226,0,0.5) 0%,rgba(98,226,0,0) 10%,rgba(98,226,0,0) 90%,rgba(98,226,0,0.5) 100%);
    left: calc(var(--gridUnit) *0.5);
    top: calc(var(--gridUnit) *0.5);
    width: calc(var(--gridUnit) * 2.2);
    z-index: 100;
    text-align: center;
    font-family: 'Barriecito', cursive;
}

#scoreValuesContainer {
    top: calc(var(--gridUnit) * 4);
    font-size: calc(var(--gridUnit) * 0.2);
}

#controlsContainer {
    left: unset;
    right: calc(var(--gridUnit) *0.5);
    font-size: calc(var(--gridUnit) * 0.23);
    padding: calc(var(--gridUnit) *0.25) calc(var(--gridUnit) *0.25);
}

.scoreValue {
    display: flex;
    justify-content: space-between;
    padding: calc(var(--gridUnit) *0.05) calc(var(--gridUnit) *0.1);
    border-radius: calc(var(--gridUnit) *0.05);
    transition: all 1s;
}

#scoreContainer {
    padding-bottom: calc(var(--gridUnit) * 0.1);
}

.highLightScoreLine {
    background-color: #14d900;
    color: #fff;
}

#tilesLeftContainer {
    border-top: solid 1px rgba(98,226,0,1);
    padding-top: calc(var(--gridUnit) * 0.1);
}

#controlsContainer .controlButtonContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button {
    font-family: 'Barriecito', cursive;
    font-size: calc(var(--gridUnit) * 0.25);
    padding: calc(var(--gridUnit) *0.01) calc(var(--gridUnit) *0.1);
    margin: calc(var(--gridUnit) *0.1);
    border-radius: calc(var(--gridUnit) *0.05);
    cursor: pointer;
    outline: none;
    color: #a7ff63;
    background-color: #166541;
    width: calc(var(--gridUnit) *0.4);
    border: outset calc(var(--gridUnit) *0.02) #92e056;
}

button:hover {
    color: #ffffff;
    text-shadow: 1px 1px 2px #000;
}

button:active {
    border: solid calc(var(--gridUnit) *0.02) #324d1d;
    transform: translate(0, calc(var(--gridUnit) *0.02));
}

.undoButton {
    width: calc(var(--gridUnit) * 1.8);
}

button.undoButton:disabled {
    filter: grayscale(1);
}

#playerName {
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    font-family: 'Barriecito', cursive;
    font-size: 2vw;   
    padding: 0 1vw;
    cursor: pointer;
}

.gameOverModal {
    position: absolute;
    top: 25%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%,-50%);
    width: calc(var(--gridUnit) * 5);
    height: calc(var(--gridUnit) * 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--gridUnit) * 0.25);
    border-radius: calc(var(--gridUnit) * 0.1);
    justify-content: space-around;
    text-transform: uppercase;
}

button.gameOverButton {
    width: auto;
    padding: calc(var(--gridUnit) *0.25);
}

canvas#confettiCanvas {
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2000;
}

.scoreAnimation {
    color:#202020;
    z-index: 100;
    position: absolute;
    font-size: calc(var(--gridUnit) * 1);
    width: calc(var(--gridUnit) * 1);
    height: calc(var(--gridUnit) * 1);
    text-align:center;
    line-height: calc(var(--gridUnit) * 1);
    font-weight: bold;
    font-family: 'Barriecito', cursive;
    text-shadow: 0 0 calc(var(--gridUnit) * 0.1) #fff;
    pointer-events:none;
    animation: scoreAnimate 1s both linear;
}

@keyframes scoreAnimate {
    0% { transform: scale(0.1) translate(-50%,-100%); text-shadow: 0 0 calc(var(--gridUnit) * 0.1) #fff;}
    25% { transform: scale(2) translate(-50%,-100%); text-shadow: 0 0 calc(var(--gridUnit) * 0.3) #fff;}
    50%   { transform: scale(1) translate(-50%,-100%); opacity:1; text-shadow: 0 0 calc(var(--gridUnit) * 0.1) #fff;}
    100% { transform: scale(0.1) translate(-50%,-100%); opacity:0.25; text-shadow: 0 0 calc(var(--gridUnit) * 0.1) #fff;}
}

#menu {
    width: 50vw;
    height: 70vh;
    top: 20vh;
    left: 50%;
    transform: translate(-50%,0);
    display: flex;
    justify-content: space-between;
    background-size: cover;
}

#menu img {
    position:absolute;
    width: 50vw;
    transform: translate(0,-105%);
}

#menuButtons {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0 2vw;
    width: 16vw;
    align-items: center;
}

#menuButtons div {
    background-image: url(img/tile2.jpg);
    width: 8vw;
    height: 8vw;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 2.2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor:pointer;
    box-shadow:0.25vw 0.25vw 0.5vw rgba(0,0,0,0.5);
    transition:all 0.25s;
}

#menuButtons div:hover {
    box-shadow:-0.25vw -0.25vw 0.5vw rgba(0,0,0,0.5);
}

#newGame {
    color: #fe7c00;
    text-shadow: 1px 1px 2px rgb(86, 42, 0), 1px 1px 2px #FF9800, 0px 0px 1px #e53700, 0px 0px 1px #e53700, 0px 0px 1px #e53700;
}

#howTo {
    color: #a7ff63;
    text-shadow: 1px 1px 2px rgb(3, 27, 0), 1px 1px 2px rgb(29, 67, 0);
}

#highscores {
    padding: 1vh;
    max-height: 60vh;
    overflow: auto;
}

.scoreLine {
    display: flex;
    width: 28vw;
    justify-content: space-between;
    font-size: 1.25vw;
    padding: 0.5vh 1vw 0.5vh 2.5vw;
    position: relative;
    box-sizing: border-box;
}

.scoreLine:hover {
    background-color: rgba(0,0,0,0.5);
    border-radius: 0.5vh;
    text-shadow: 0px 0px 2px rgb(216, 255, 0), 1px 1px 2px rgb(0, 0, 0);
}

#highScoresTitle {
    font-size: min(6vh, 6vw);
    line-height: min(8vh, 8vw);
    text-decoration: underline;
    color: #d0f780;
}

.scoreNum {
    position: absolute;
    left: 0.5vw;
    color: #a7ff63;
}

.scoreName {
    color: #d0f780;
}

.content--canvas {
    z-index: -1;
    position: absolute;
}

.howToPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52vw;
    height: 72vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    border: solid 1px rgba(98,226,0,1);
    background-size: cover;
}

.howToPart {
    display: flex;
    justify-content: start;
    padding: 1vw 1vw 1vw 3vw;
}

#menu .howToPlay img.howToImage {
    position: unset;
    width: 20vw;
    transform: unset;
    display: inline-block;
    border-radius: 1vw;
}

.howToPlay .howToClose {
    position: sticky;
    top: 0;
    right: 0;
    width: 100%;
    text-align: right;
}

.howToCross {
    display: inline-block;
    padding: 0.1vw 0.7vw;
    font-size: 2vw;
    position: absolute;
    z-index: 100;
    right: 0vw;
    font-family: monospace;
    cursor: pointer;
}

.howToCross:hover {
    filter: brightness(5);
    transition: 0.5s;
}

.howToTitle {
    width: 100%;
    text-align: center;
    font-size: 2.5vw;
    text-decoration: underline;
}

.howToText {
    text-align: left;
    padding-left: 2vw;
    font-family: sans-serif;
    text-shadow: none;
    color: #caffa1;
    font-size: 1vw;
}

.mouseInfo {
    font-size: calc(var(--gridUnit) * 0.2);
    position: absolute;
    bottom: calc(var(--gridUnit) * -0.25);
    width: 100%;
    text-align: center;
    left: 0;
}

::-webkit-scrollbar {
    width: 0.5vw;
    height: 0.5vh;
}
 
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
::-webkit-scrollbar-thumb {
    border-radius: 2px;
    box-shadow: inset 0 0 6px #52b300;
    background-color: rgba(32, 158, 136,0.5);
}