/*
 Copyright (C) 2019 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=Bungee+Inline&display=swap');

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

html {
    background-color: #215220;
    background-image: url(img/rail.png), url(img/asfalt.png);
    background-blend-mode: soft-light;
    background-size: 100vh;
    background-position: center;
}

body {
    margin:0;
    font-family: sans-serif;
    --rows:7;
    --cols:7;
    --baseUnit : 105;
    --dieUnit: calc(var(--baseUnit) * 1px);    
    --trainHeight : calc(var(--baseUnit) * 1px);
    --image: url(img/tiles.gif);
}

#game, #menu {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:calc(var(--dieUnit) * 10);
    display:none;
    font-size: calc(var(--dieUnit) * 0.2);
}

#game.verticalLayout {
    height:calc(var(--dieUnit) * 17.5);
}

.board {
    position: relative;
    display: inline-block;
    width: calc(var(--dieUnit) * (var(--cols) + 1));
    height: calc(100vh - 16px);
    padding-left: calc(var(--dieUnit) * 0.5)
}

.verticalLayout .board {
    height: calc(var(--dieUnit) * (var(--rows) + 2));
    margin-top: calc(var(--dieUnit) * 4);
    width: 100%;
}

#game.verticalLayout .board {
    margin-top: calc(var(--dieUnit) * 0.5);
}

.dieWrapper {
    display: inline-block;
    width: calc(var(--dieUnit) * 1);
    height: calc(var(--dieUnit) * 1);
    margin-right: calc(var(--dieUnit) * 0.3);
}

#gameGrid, #specialTile-container, #info-container, #opponentMap, #world {
    box-shadow: calc(var(--dieUnit) * 0.1) calc(var(--dieUnit) * 0.1) calc(var(--dieUnit) * 0.15) #000, 0 0 var(--dieUnit) rgba(47, 181, 39, 0.5);
}

#gameControls {
    position: relative;
    display: inline-block;
    width: calc(var(--dieUnit) * 7);
    height: calc(100vh - 16px);    
    vertical-align: top;
    margin-left: calc(var(--dieUnit) * 0.5);
}

.verticalLayout #gameControls {
    margin-left: calc(var(--dieUnit) * 1);
    margin-top: calc(var(--dieUnit) * 0.5.);
    height: calc(var(--dieUnit) * 8.5);
}

#specialTile-container {
    border: solid 1px #0D270C;
    background-color: #2A7B28;
    width: calc(var(--dieUnit) * 7);
    height: var(--dieUnit);
    display: flex;
    justify-content: space-evenly;
    border-top: none;
    padding: calc(var(--dieUnit) * 0.1) 0;
    border-radius: 0 0 calc(var(--dieUnit) *0.025) calc(var(--dieUnit) *0.025);

}

#specialTile-container .tile {
    position: relative;
    background-color: #eeeee0;
    box-sizing: border-box;
    border: outset 2px;
}

#info-container {
    width: calc(var(--dieUnit) * 7);
    height: calc(var(--dieUnit) * 0.5);
    line-height: calc(var(--dieUnit) * 1);
    text-align: center;
    padding-bottom: calc(var(--dieUnit) * 0.5);
    border: solid 1px #0D270C;
    border-top: none;
    border-bottom: none;
    background: linear-gradient(to bottom, rgb(238, 238, 224) 0%,rgba(42,123,40,1) 100%);
    border-radius: calc(var(--dieUnit) *0.025) calc(var(--dieUnit) *0.025) 0 0;
}

#info-container span {
    display: inline-block;
    height: calc(var(--dieUnit) * 0.5);
}

.score-container {
    position: absolute;
    top: calc(var(--dieUnit) * -1);
    left: 0;
    width: calc(var(--dieUnit) * 7);
    height: calc(var(--dieUnit) *0.5);
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    background-color: #eeeee0;
    z-index: -1;
    border-radius: calc(var(--dieUnit) *0.025);
}

.score-container .scorePart div, .helpText .scoreIcon {
    width: calc(var(--dieUnit) * 0.4);
    height: calc(var(--dieUnit) *0.4);
    line-height: calc(var(--dieUnit) * 0.4);
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.score-container .scoreNum {
    background-color: #fff
    border: solid calc(var(--dieUnit) * 0.02) #f0f0f0;
    box-sizing: border-box;
}
.scorePart {
    display: flex;
    align-items: center;
}

.scoreIcon {
    box-sizing: border-box;
    border: solid calc(var(--dieUnit) * 0.02) #000;
    position: relative;
    overflow: hidden;
}

.scoreIcon_connect:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(var(--dieUnit) * 0.15) calc(var(--dieUnit) * 0.3) calc(var(--dieUnit) * 0.15);
    border-color: transparent transparent #a00 transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.scoreIcon.scoreIcon_road:after, .scoreIcon.scoreIcon_rail:after, .scoreIcon.scoreIcon_environment:after {
    content: "";
    width: var(--dieUnit);
    height: var(--dieUnit);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    background-image: var(--image);
    background-size: calc(var(--dieUnit) * 25);
    background-repeat: no-repeat;
    background-position-x: calc(var(--dieUnit) * -1);
}

.scoreIcon.scoreIcon_rail:after {
    background-position-x: calc(var(--dieUnit) * -4);
}

.scoreIcon.scoreIcon_central:after {
    content: "";
    background-color: #EEE6D8;
    width: calc(var(--dieUnit) * 0.25);
    height: calc(var(--dieUnit) * 0.25);
    border: solid 1px #e1baba;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.scoreIcon.scoreIcon_error:after, .scoreIcon.scoreIcon_error:before, .errorCross:after, .errorCross:before  {
    content: "";
    background-color: #aa0000;
    width: calc(var(--dieUnit) * 0.05);
    height: calc(var(--dieUnit) * 0.25);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) rotate(45deg);
}

.scoreIcon.scoreIcon_error:before, .errorCross:before  {
    transform: translate(-50%, -50%)  rotate(-45deg);
}

.scoreIcon.scoreIcon_environment:after {
    background-position-x: calc(var(--dieUnit) * -19 * 0.5);
    background-size: calc(var(--dieUnit) * 25 * 0.5);
    width: calc(var(--dieUnit) * 0.5);
    height: calc(var(--dieUnit) * 0.5);
}

.scoreIcon.scoreIcon_result:after {
    content: "=";
    width: calc(var(--dieUnit) * 0.4);
    height: calc(var(--dieUnit) * 0.4);
    position: absolute;
    top: calc(var(--dieUnit) * -0.01);
    left: calc(var(--dieUnit) * -0.01);
    z-index: 2;
    line-height: calc(var(--dieUnit) * 0.4);
    text-align: center;
    font-size: calc(var(--dieUnit) * 0.4);
    color: #000000;
}

.errorCross {
    position: absolute;
    pointer-events:none;
}

.errorCross.errorCross_0 {
    top: 0;
    left: 50%;
}

.errorCross.errorCross_1 {
    right: 0;
    top: 50%;
}

.errorCross.errorCross_2 {
    bottom: 0;
    left: 50%;
}

.errorCross.errorCross_3 {
    left: 0;
    top: 50%;
}

#dice-container {
    margin-top:calc(var(--dieUnit) * 0.3);
}

.dice-outer {
    display: inline-block;
    position: relative;
    width: calc(var(--dieUnit) *0.5);
    height: calc(var(--dieUnit) *0.5);
    perspective: 500000px;
    perspective-origin: center;
    margin-right: calc(var(--dieUnit) *1);
    margin-bottom: calc(var(--dieUnit) *1);
    box-sizing: border-box;
    transform: rotateX(-15deg);
    transition: opacity 1s ease-in-out;    
    transform-style: preserve-3d;
    --rollUnitX : 0vh;
    --rollUnitY : calc(var(--dieUnit) * 0.05);
    transition: all 1s;
    top: 3vh;
    left: 0;
    transform: rotateX(-94deg) rotateY(0deg) rotateZ(-4deg);
}

.dice-outer .dice, .dice-outer .dice .dice-face {
    position: absolute;
    width: calc(var(--dieUnit) *1);
    height: calc(var(--dieUnit) *1);
    transform-origin: center center;
}

.dice-outer .dice {
    display: inline-block;
    transform-style: preserve-3d;
}

.dice-outer .dice .dice-face {
    background: #eeeee0;    
    background-repeat: no-repeat;
    border: calc(var(--dieUnit) *0.025) solid #aaa;
    box-sizing: border-box;
    backface-visibility: hidden;
    background-size: calc(var(--dieUnit) * 25);
}

.dice-outer .dice .dice-face:first-child, .showDieSide.showDieSide_1 {
    transform: translateZ(calc(var(--dieUnit) *0.5));
}

.dice-outer .dice .dice-face:nth-child(2), .showDieSide.showDieSide_2 {
    transform: rotateY(-90deg) translateZ(calc(var(--dieUnit) *0.5));
}

.dice-outer .dice .dice-face:nth-child(3), .showDieSide.showDieSide_3 {
    transform: rotateX(-90deg) translateZ(calc(var(--dieUnit) *0.5));
}

.dice-outer .dice .dice-face:nth-child(4), .showDieSide.showDieSide_4 {
    transform: rotateX(90deg) translateZ(calc(var(--dieUnit) *0.5));
}

.dice-outer .dice .dice-face:nth-child(5), .showDieSide.showDieSide_5 {
    transform: rotateY(90deg) translateZ(calc(var(--dieUnit) *0.5));
}

.dice-outer .dice .dice-face:nth-child(6), .showDieSide.showDieSide_6 {
    transform: rotateY(180deg) translateZ(calc(var(--dieUnit) *0.5));
}

.dice-outer .dice .dice-face{
    background-image: var(--image);
    border-color: #dfdfd0;
}

.tile {
    background-image: var(--image);
    background-size: calc(var(--dieUnit) * 25);
    background-repeat: no-repeat;
    width: calc(var(--dieUnit) *1);
    height: calc(var(--dieUnit) *1);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}

.tile_0 { background-position-x: calc(var(--dieUnit) * 0) !important; }
.tile_1 { background-position-x: calc(var(--dieUnit) * -1) !important; }
.tile_2 { background-position-x: calc(var(--dieUnit) * -2) !important; }
.tile_3 { background-position-x: calc(var(--dieUnit) * -3) !important; }
.tile_4 { background-position-x: calc(var(--dieUnit) * -4) !important; }
.tile_5 { background-position-x: calc(var(--dieUnit) * -5) !important; }
.tile_6 { background-position-x: calc(var(--dieUnit) * -6) !important; }
.tile_7 { background-position-x: calc(var(--dieUnit) * -7) !important; }
.tile_8 { background-position-x: calc(var(--dieUnit) * -8) !important; }
.tile_9 { background-position-x: calc(var(--dieUnit) * -9) !important; }
.tile_10 { background-position-x: calc(var(--dieUnit) * -10) !important; }
.tile_11 { background-position-x: calc(var(--dieUnit) * -11) !important; }
.tile_12 { background-position-x: calc(var(--dieUnit) * -12) !important; }
.tile_13 { background-position-x: calc(var(--dieUnit) * -13) !important; }
.tile_14 { background-position-x: calc(var(--dieUnit) * -14) !important; }
.tile_15 { background-position-x: calc(var(--dieUnit) * -15) !important; }
.tile_16 { background-position-x: calc(var(--dieUnit) * -16) !important; }
.tile_17 { background-position-x: calc(var(--dieUnit) * -17) !important; }
.tile_18 { background-position-x: calc(var(--dieUnit) * -18) !important; }
.tile_19 { background-position-x: calc(var(--dieUnit) * -19) !important; }
.tile_20 { background-position-x: calc(var(--dieUnit) * -20) !important; }
.tile_21 { background-position-x: calc(var(--dieUnit) * -21) !important; }
.tile_22 { background-position-x: calc(var(--dieUnit) * -22) !important; }
.tile_23 { background-position-x: calc(var(--dieUnit) * -23) !important; }
.tile_24 { background-position-x: calc(var(--dieUnit) * -24) !important; }
.tile_25 { background-position-x: calc(var(--dieUnit) * -25) !important; }

.tileRotation_0 { transform: rotate(0deg); }
.tileRotation_1 { transform: rotate(90deg); }
.tileRotation_2 { transform: rotate(180deg); }
.tileRotation_3 { transform: rotate(-90deg); }

.tile .tileRotator {
    position: absolute;
    width: calc(var(--dieUnit)/4);
    height: calc(var(--dieUnit)/4);
    border: solid 1px rgba(0, 0, 0, 0.1);
    background-color:rgba(0, 0, 0, 0.05);
    background-image: url(img/rotateIcon.svg);
    background-size: calc(var(--dieUnit)/5);
    cursor:pointer;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.tile .tileMover {
    position: absolute;
    width: calc(var(--dieUnit)/4);
    height: calc(var(--dieUnit)/4);
    border: solid 1px rgba(0, 0, 0, 0.1);
    background-color:rgba(0, 0, 0, 0.05);
    background-image: url(img/moveIcon.svg);
    background-size: calc(var(--dieUnit)/3);
    cursor: move;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.tile .tileFlipper {
    position: absolute;
    width: calc(var(--dieUnit)/4);
    height: calc(var(--dieUnit)/4);
    border: solid 1px rgba(0, 0, 0, 0.1);
    background-color:rgba(0, 0, 0, 0.05);
    background-image: url(img/flip.svg);
    background-size: calc(var(--dieUnit)/5);
    cursor: e-resize;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.tile.tileRotation_0 .tileRotator {
    right: 0;
    top: 0;
}

.tile.tileRotation_1 .tileRotator {
    left: 0;
    top: 0;
}

.tile.tileRotation_2 .tileRotator {
    left: 0;
    bottom: 0;
}

.tile.tileRotation_3 .tileRotator {
    right: 0;
    bottom: 0;
}

.tile.tileRotation_0 .tileMover {
    left: 0;
    top: 0;
}

.tile.tileRotation_1 .tileMover {
    left: 0;
    bottom: 0;
}

.tile.tileRotation_2 .tileMover {
    right: 0;
    bottom: 0;
}

.tile.tileRotation_3 .tileMover {
    right: 0;
    top: 0;
}

.tile.tileRotation_0 .tileFlipper {
    left: 0;
    bottom: 0;
}

.tile.tileRotation_1 .tileFlipper {
    right: 0;
    bottom: 0;
}

.tile.tileRotation_2 .tileFlipper {
    right: 0;
    top: 0;
}

.tile.tileRotation_3 .tileFlipper {
    left: 0;
    top: 0;
}

#dice-container .rollDice {
    animation: roll 1s linear both;    
}

.dieWrapper.ui-draggable-dragging .dice-outer {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    animation: none !important;    
}

.ui-draggable-dragging {
    z-index:10;
}

/* ------- adapted from roll-a-die by chukwumaijem -------  */
@keyframes roll {
    0% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 0), calc(var(--rollUnitY) * 0)) rotateZ(-200deg) rotateY(100deg);}
    3% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 3), calc(var(--rollUnitY) * 20)) rotateZ(-190deg) rotateY(95deg); }
    6% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 6), calc(var(--rollUnitY) * 30)) rotateZ(-180deg) rotateY(90deg); }
    9% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 9), calc(var(--rollUnitY) * 40)) rotateZ(-170deg) rotateY(85deg); }
    12% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 11), calc(var(--rollUnitY) * 50)) rotateZ(-160deg) rotateY(80deg); }
    15% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 14), calc(var(--rollUnitY) * 54)) rotateZ(-150deg) rotateY(75deg); }
    18% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 17), calc(var(--rollUnitY) * 70)) rotateZ(-140deg) rotateY(70deg); }
    21% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 20), calc(var(--rollUnitY) * 94)) rotateZ(-130deg) rotateY(65deg); }
    24% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 23), calc(var(--rollUnitY) * 71)) rotateZ(-120deg) rotateY(60deg); }
    27% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 25), calc(var(--rollUnitY) * 47)) rotateZ(-110deg) rotateY(55deg); }
    30% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 28), calc(var(--rollUnitY) * 32)) rotateZ(-100deg) rotateY(50deg); }
    33% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 30), calc(var(--rollUnitY) * 26)) rotateZ(-90deg) rotateY(45deg); }
    36% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 33), calc(var(--rollUnitY) * 29)) rotateZ(-80deg) rotateY(40deg); }
    39% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 35), calc(var(--rollUnitY) * 41)) rotateZ(-70deg) rotateY(35deg); }
    42% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 37), calc(var(--rollUnitY) * 62)) rotateZ(-60deg) rotateY(30deg); }
    45% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 40), calc(var(--rollUnitY) * 92)) rotateZ(-50deg) rotateY(25deg); }
    48% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 42), calc(var(--rollUnitY) * 85)) rotateZ(-40deg) rotateY(20deg); }
    51% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 44), calc(var(--rollUnitY) * 75)) rotateZ(-30deg) rotateY(15deg); }
    54% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 46), calc(var(--rollUnitY) * 73)) rotateZ(-20deg) rotateY(10deg); }
    57% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 48), calc(var(--rollUnitY) * 80)) rotateZ(-10deg) rotateY(5deg); }
    60% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 50), calc(var(--rollUnitY) * 95)) rotateZ(0deg) rotateY(0deg); }
    63% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 51), calc(var(--rollUnitY) * 92)) rotateZ(0deg) rotateY(0deg); }
    66% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 53), calc(var(--rollUnitY) * 90)) rotateZ(0deg) rotateY(0deg); }
    69% { transform: rotateX(-55deg) rotateY(45deg) translate(calc(var(--rollUnitX) * 54), calc(var(--rollUnitY) * 97)) rotateZ(0deg) rotateY(0deg); }
    100% {transform: rotateX(-94deg) rotateY(0deg) rotateZ(-4deg)}
}

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

.grid {
    z-index: 0;
    bottom: 5px;
    left: var(--dieUnit);
    width: calc(var(--dieUnit) * var(--cols));
    height:calc(var(--dieUnit) * var(--rows));
    position: absolute;
    background-color: #EEEEE0;
}

.grid .gridRow {
    width: var(--dieUnit);
    display: inline-block;
    vertical-align: top;
}

.grid .gridRow .gridCell {
    width: var(--dieUnit);
    height: var(--dieUnit);
    margin: 0;
    padding: 0;    
    position:relative;
}

.grid .gridRow .gridCell.marked {
    background-color: rgba(255, 0, 255, 0.3);
}

.grid .gridRow .gridCell:after {
    content:"";
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position:absolute;
    border: solid 1px rgba(0, 0, 0, 0.05);
    top:0;
    left:0;
    z-index:-1;
}

#worldZoom.grid .gridRow .gridCell:after {
    border: solid 1px rgb(242, 242, 228);
    z-index: 1;
}

.grid .gridRow .gridCell.gridCenter:after {
    background-color: rgba(231, 24, 24, 0.04);
}

.dropHighlight {
    background-color: rgba(121, 212, 27, 0.23);
}

.dropHighlight.dropHere {
    background-color: rgba(121, 212, 27, 0.5);
}

.illegal {
    background-color: rgba(200, 0, 0, 0.5);
}

.exit {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 calc(var(--dieUnit) / 4) calc(var(--dieUnit) / 2) calc(var(--dieUnit) / 4);
    border-color: transparent transparent #a00 transparent;
}

.exit.exitDirection_0 {
    top: calc(var(--dieUnit) / -2);
    left: calc(var(--dieUnit) / 4);
}

.exit.exitDirection_1 {
    top: calc(var(--dieUnit) / 4);
    right: calc(var(--dieUnit) / -2);
    transform: rotate(90deg);
}

.exit.exitDirection_2 {
    bottom: calc(var(--dieUnit) / -2);
    left: calc(var(--dieUnit) / 4);
    transform: rotate(180deg);
}

.exit.exitDirection_3 {
    top: calc(var(--dieUnit) / 4);
    left: calc(var(--dieUnit) / -2);
    transform: rotate(-90deg);
}

.exit:after {
    content:"";
    width: calc(var(--dieUnit) / 2);
    height: calc(var(--dieUnit) / 2);
    position: absolute;
    top:0;
    left: calc(var(--dieUnit) / -4);
}

.exit.exitType_road:after {
    background-image: var(--image);
    background-size: calc(var(--dieUnit) * 25);
    background-repeat: no-repeat;
    background-position-x: calc(var(--dieUnit) * -1.25)
}

.exit.exitType_rail:after {
    background-image: var(--image);
    background-size: calc(var(--dieUnit) * 25);
    background-repeat: no-repeat;
    background-position-x: calc(var(--dieUnit) * -4.25)
}

.exit.exitColor_0 {
    border-color: transparent transparent transparent transparent
}

.exit.exit.exitColor_1 {
    border-color: transparent transparent #1faa00 transparent
}

.exit.exitColor_2 {
    border-color: transparent transparent #001aaa transparent
}

.exit.exitColor_3 {
    border-color: transparent transparent #aa9f00 transparent
}

.exit.exitColor_4 {
    border-color: transparent transparent #5400aa transparent
}

.exit.exitColor_5 {
    border-color: transparent transparent #00aa9d transparent
}

.exit.exitColor_6 {
    border-color: transparent transparent #aa4100 transparent
}

#gameGrid, #world, #controlsWrapper {
    top: 50%;
    transform: translate(0,-50%);
}

#controlsWrapper {
    height: calc(var(--dieUnit) * (var(--rows) + 2));
    position:relative;
}


/* WORLD MAP */

#world {
    position:relative;
    left: calc(var(--dieUnit) * 0.5);
    bottom: unset;
    border: outset calc(var(--dieUnit) * 0.25) #2a7b28;
}

#world.grid .grid, #highWorld.grid .grid {
    left: 0;
    top: 0;
}

#world.grid .grid .gridRow, #highWorld.grid .grid .gridRow {
    --dieUnit: calc(var(--baseUnit) / 7 * 1px);
}

#world.grid .grid .gridCell:after, #highWorld.grid .grid .gridCell:after {
    content:unset;
}

#world.grid .exit, #highWorld.grid .exit {
    display:none;
}

.verticalLayout #world {
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
}

#worldZoom {
    position: absolute;
    top: unset;
    left: unset;
    --dieUnit: calc(var(--baseUnit) / 2 * 1px);
    display: none; 
    pointer-events: none;
    border: solid calc(var(--dieUnit) * 0.1) #000;
    border-radius: calc(var(--dieUnit) * 0.2);
    background-color: #fffff0;
}

#highWorld {
    position: relative;
    left: unset;
    bottom: unset;
}

/*  MENU */

#menu .board {
    padding-left: 0;
    margin-right: 0;
}

#menuButtons {
    display: inline-block;
    vertical-align: top;
    margin-left: calc(var(--dieUnit) * 0.5);
}

.verticalLayout #menuButtons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: calc(var(--dieUnit) * 0.5);
    height: calc(var(--dieUnit) * 3);
    margin-left:0;
}

#menu:not(.verticalLayout) #menuButtonsWrapper {
    height: calc(var(--dieUnit) * var(--rows));
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.menuTitle {
    font-size: calc(var(--dieUnit) * 0.4);
    color: #ceffc1;
    font-weight: 900;
    text-shadow: calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.01) #000;
}

#worldMapMessage {
    font-size: calc(var(--dieUnit) * 0.2);
    color: #ceffc1;
    font-weight: 900;
    text-shadow: calc(var(--dieUnit) * 0.025) calc(var(--dieUnit) * 0.025) calc(var(--dieUnit) * 0.005) #000;
}

.verticalLayout #worldMapMessage {
    text-align: center;
}

#worldMapMessage span {
    font-size: calc(var(--dieUnit) * 0.5);
    vertical-align: sub;
}

.verticalLayout #worldMapMessage span {
    display: none;
}

.verticalLayout #menuButtonsWrapper .buttonEditionWrapper {
    display: inline-flex;
    width: 45%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: calc(var(--dieUnit) * 3);
}

#tileSetPicker {
    display: inline-block;
    background: #216016;
    padding: calc(var(--dieUnit) * 0.01) calc(var(--dieUnit) * 0.2) calc(var(--dieUnit) * 0.09) calc(var(--dieUnit) * 0.2);
    border: solid calc(var(--dieUnit) * 0.03) #184612;
    color: #4cc224;
    border-radius: calc(var(--dieUnit) * 0.05);
    box-shadow: calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) #16720a;
    font-family: 'Bungee Inline', cursive;
    font-size: calc(var(--dieUnit) * 0.2);
    height: calc(var(--dieUnit) * 0.65);
    line-height: calc(var(--dieUnit) * 0.32);
}

select#tileSet {
    width: 100%;
    background-color: #216016;
    border: none;
    outline: none;
    color: #4cc220;
    font-weight: bold;
    line-height: calc(var(--dieUnit) * 0.32);
}

#opponentMap {
    position: absolute;
    top: unset;
    left: unset;
    bottom: calc(var(--baseUnit) * 1px);
    right: 0;
    --dieUnit: calc(var(--baseUnit) / 2 * 1px);
    z-index:-1;
}

.challenger {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: calc(var(--dieUnit) * 0.7);
    font-weight: bold;
    color: rgba(9, 9, 9, 0.5);
    z-index: 5;
}


/*  Buttons */

button {
    display: inline-block;;
}

button#nextRound {
    font-size: calc(var(--dieUnit) * 0.2);
    display: inline-block;
    float: right;
    margin-top: calc(var(--dieUnit) * 0.2);
    margin-right: calc(var(--dieUnit) * 0.2);
}

button {
    font-size: calc(var(--dieUnit) * 0.4);
    background-color: #112e00;
    text-decoration: none;
    position: relative;
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(29, 47, 26)), color-stop(1, rgb(35, 119, 21)) );
    border-radius: 5px;
    box-shadow: inset 0px calc(var(--dieUnit) * 0.005) 0px #4d7548, 0px calc(var(--dieUnit) * 0.025) 0px 0px #1e6b0f, 0px calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.025) #273c23;
    border: none;
    color: #4cc224;
    font-family: 'Bungee Inline', cursive;
    padding: calc(var(--dieUnit) * 0.03) calc(var(--dieUnit) * 0.15);
    outline: none;
    text-shadow: calc(var(--dieUnit) * -0.005) calc(var(--dieUnit) * -0.005) calc(var(--dieUnit) * 0.005) #255819;
    transition: color 0.5s;
    cursor:pointer;
    margin-bottom: calc(var(--dieUnit) * 0.2);
}

button:active {
    top: calc(var(--dieUnit) * 0.015);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgba(31, 119, 21, 1)), color-stop(1, rgb(30, 48, 28)) );
    box-shadow: inset 0px 1px 0px #2e482c, 0px 2px 0px 0px #0e4610, 0px 5px 3px #233c24;
}

button:hover, button:hover div {
    color: #49f727;
    filter: brightness(125%);
}

.buttonEditionWrapper.highscoreButtonWrapper {
    position: absolute;
    bottom: 0;
    left: calc(var(--dieUnit) * 0.5);
    z-index:2;
}

.buttonEditionWrapper.highscoreButtonWrapper > span {
    display: inline-block;
    background: #216016;
    padding: calc(var(--dieUnit) * 0.01) calc(var(--dieUnit) * 0.2) calc(var(--dieUnit) * 0.09) calc(var(--dieUnit) * 0.2);
    border: solid calc(var(--dieUnit) * 0.03) #184612;
    color: #4cc224;
    border-radius: calc(var(--dieUnit) * 0.05);
    box-shadow: calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) #16720a;
    font-family: 'Bungee Inline', cursive;
    font-size: calc(var(--dieUnit) * 0.2);
    height: calc(var(--dieUnit) * 0.65);
}

.buttonEditionWrapper.highscoreButtonWrapper > span > span {
    margin-right: calc(var(--dieUnit) * 0.1);
    position: relative;
    top: calc(var(--dieUnit) * 0.05);
}

.buttonEditionWrapper.highscoreButtonWrapper {
    position: absolute;
    bottom: 0;
    left: calc(var(--dieUnit) * 0.5);
    display: flex;
    justify-content: space-between;
    width: calc(var(--dieUnit) * var(--cols) + calc(var(--dieUnit) * 2));
    flex-wrap: wrap;
}

.verticalLayout .buttonEditionWrapper.highscoreButtonWrapper {
    width: calc(var(--dieUnit) * var(--cols) + calc(var(--dieUnit) * 0.5));
    left: calc(var(--dieUnit) * 0.75);
    bottom: calc(var(--dieUnit) * -1);
}

button#highscoreButton {
    font-size: calc(var(--dieUnit) * 0.3);
    display: inline-block;
    vertical-align: top;
}

button#helpButton {
    font-size: calc(var(--dieUnit) * 0.3);
    display: inline-block;
    vertical-align: top;
}

.errorMessage {
    position: absolute;
    z-index: 100;
    color: #a00;
    text-align: center;
    top: 50%;
    left: 50%;
    font-size: calc(var(--dieUnit) * 0.3);
    transform: translate(-50%,-50%);
    width: 100%;
    font-family: 'Bungee Inline', cursive;
}

#playerName {
    z-index: 10;
    position: absolute;
    top: calc(var(--dieUnit) * 0.1);
    right: calc(var(--dieUnit) * 0.1);
    font-size: calc(var(--dieUnit) * 0.4);
    font-family: 'Bungee Inline', cursive;
    color: #4cc224;
    line-height: normal;
    cursor:pointer;
}

#logo {
    width: 100vw;
    height: var(--trainHeight);
    overflow: hidden;
    position: relative;
}

#logo img {
    height: var(--trainHeight);
    position: absolute;
    top:0;
    left:0vw; 
    animation: moveTrain 8s linear infinite;
    transform:translate(-100%,0);
}

.verticalLayout #logo img  {
    animation: moveTrainV 4s linear infinite;
}


#logo img.stopped, .verticalLayout #logo img.stopped {
    animation:unset !important;
}


@keyframes moveTrain {
  0% { left:0vw; }
  100% {left:200vw;}
}

@keyframes moveTrainV {
  0% { left:0vw; }
  100% {left:400vw;}
}

canvas#canvas {
    width: calc(var(--dieUnit) * var(--cols));
    height: calc(var(--dieUnit) * var(--rows));
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

/* highscores */
#overlay, #overlayHelp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(42, 94, 41, 0.5);
    z-index: 500;
}

#highscores, #bigHelp {
    position: absolute;
    top: 10%;
    left: 49%;
    width: 80vw;
    min-height: 80vh;
    background-color: #132913;
    z-index: 501;
    transform: translate(-50%, 0);
    border-radius: calc(var(--dieUnit) * 0.1);
    border: solid 1px #234a21;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
}

.highTitle {
    font-size: calc(var(--dieUnit) * 0.4);
    color: #43e618;
    text-shadow: calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.01) #000;
    width: calc(var(--dieUnit) * var(--cols));
    text-align: center;
    font-family: 'Bungee Inline', cursive;
    line-height: calc(var(--dieUnit) * 0.5);
}

.highscoreList {
    height: calc(var(--dieUnit) * var(--rows) / 2);
    width: calc(var(--dieUnit) * var(--cols));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scoreRow {
    display: grid;
    grid-template-columns: 10% 65% 10%;
    color: #c5ffb6;
    padding: 0 calc(var(--dieUnit) * 0.5);
    grid-gap: 5%;
    font-size: calc(var(--dieUnit) * 0.25);
    font-family: 'Bungee Inline', cursive;
    line-height: calc(var(--dieUnit) * 0.3);
}

.scorePoints {
    text-align: right;
}

#closeHigh, #closeHelp {
    position: absolute;
    top: calc(var(--dieUnit) * -0.2);
    right: calc(var(--dieUnit) * -0.1);
    font-size: calc(var(--dieUnit) * 0.3);
    color: #43e618;
    line-height: calc(var(--dieUnit) * 0.3);
    font-weight: 900;
    cursor: pointer;
    background: #132913;
    border-radius: 100%;
    padding: calc(var(--dieUnit) * 0.1) calc(var(--dieUnit) * 0.15);
    transition: all 0.4s;
}

#closeHigh:hover, #closeHelp:hover {
    color:#b2ff9d;
}

.gameoverTitle {
    text-align: center;
    font-size: calc(var(--dieUnit) * 0.4);
    font-family: 'Bungee Inline', cursive;
    color: #27ff00;
    margin-bottom: calc(var(--dieUnit) * 0.2);
    line-height: calc(var(--dieUnit) * 0.4);
    filter: drop-shadow(calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.05) calc(var(--dieUnit) * 0.02) black);
}

.gameoverText {
    text-align: center;
    font-size: calc(var(--dieUnit) * 0.2);
    font-family: 'Bungee Inline', cursive;
    color: #27ff00;
    margin-bottom: calc(var(--dieUnit) * 0.2);
    line-height: calc(var(--dieUnit) * 0.4);
}

.gameoverText b {
    font-size: calc(var(--dieUnit) * 0.3);
    font-weight: normal;
}

/* info popups */

span.extraInfo {
    position: relative;
    font-size: calc(var(--dieUnit) * 0.13) !important;
    border: solid calc(var(--dieUnit) * 0.02) #2a7b28;
    border-radius: calc(var(--dieUnit) * 1);
    padding: calc(var(--dieUnit) * 0) calc(var(--dieUnit) * 0.05);
    display: inline-block;
    cursor: help;
    text-align: center;
    color: #4cc224;
    font-family: 'Finger Paint', cursive;
    text-shadow: initial;
    vertical-align: super !important;
}

.extraInfoText {
    display: none;
    position: absolute;
    font-size: calc(var(--dieUnit) * 0.15);
    pointer-events: none;
    width: calc(var(--dieUnit) * 4.5);
    z-index: 6;
    background-color: #2a7b28;
    right: 0;
    top: calc(var(--dieUnit) * 0.2);
    padding: calc(var(--dieUnit) * 0.1);
    border-radius: calc(var(--dieUnit) * 0.1);
    box-shadow: calc(var(--dieUnit) * 0.2) calc(var(--dieUnit) * 0.2px) calc(var(--dieUnit) * 0.2) #000;
    border: solid 1px #184612;
    color: #70f23c;
    font-family: sans-serif;
    transform: translate(50%, 0);
    text-align:left;
}

.environmentBox {
    position: absolute;
    font-size: calc(var(--dieUnit) * 0.17);
    margin-left: calc(var(--dieUnit) * 0.1);
    background: rgba(33, 82, 32, 0.85);
    padding: calc(var(--dieUnit) * 0.09);
    color: #a9ff00;
    border-radius: calc(var(--dieUnit) * 0.05);
    pointer-events:none;
}

.verticalLayout span.extraInfo.extraInfoLeft .extraInfoText {
    transform: none;
}

span.extraInfo:hover .extraInfoText, span.extraInfo:active.extraInfoText, span.extraInfo:focus.extraInfoText {
    display: block;
}

#bigHelp, #overlayHelp {
    display:none;
}

#bigHelp {
    margin-bottom: calc(var(--dieUnit) * 0.5);
}

#helpWrapper {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    width: 80vw;
    min-height: 80vh;
    padding: 2vh 2vw;
}

.helpPart {
    min-width: 35vw;
    clear: both;
}

.geDescription {
    clear: both;
    height: calc(var(--dieUnit) *1);
    width: 30vw;
}

.geDescription span {
    height: calc(var(--dieUnit) *1);
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
}

.geTile {
    position: relative;
    width: calc(var(--dieUnit) *1);
    height: calc(var(--dieUnit) *1);
    display: inline-block;
    float: left;
    margin-right: calc(var(--dieUnit) * 0.2);
}

.geTile .tile {
    filter: drop-shadow(0 0 calc(var(--dieUnit) * 0.05) #3f3);
    width: calc(var(--dieUnit) *0.955);
    height: calc(var(--dieUnit) *0.955);
}

#helpWrapper .highTitle {
    margin-bottom: calc(var(--dieUnit) * 0.2);
    text-decoration: underline;
}

#helpWrapper .scoreIcon {
    float: left;
    margin-right: calc(var(--dieUnit) *0.1);
    border: none;
}

#helpWrapper ul {
    padding-left: calc(var(--dieUnit) * 0.25);
}

#helpWrapper li {
    clear: both;
    height: calc(var(--dieUnit) * 0.7);
    max-width: 30vw;
    list-style: none;
}

.helpText {
    color: #9dd988;
    font-size: calc(var(--dieUnit) * 0.155);
}

.verticalLayout #helpWrapper li {
    max-width: 60vw;
}

.verticalLayout .geDescription {
    width: 60vw;
}

#others {
    position: absolute;
    top: 3px;
    left: 10px;
    font-size: 80%;
    font-family: Verdana, sans-serif;
    font-size: 0.7vw;
    z-index: 10000;
}

#others a {
    color: #31b62d;
}

#others a:hover {
    color: #fff;
}

#worldscores {
    height: calc(var(--dieUnit) * (var(--rows) + 1));
    overflow-y: auto;
}

/* Switch starts here by Marcus Connor  https://codepen.io/marcusconnor/pen/QJNvMa */

.rocker {
    display: inline-block;
    position: relative;
    font-size: calc(var(--dieUnit) * 0.15);
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #888;
    width: 7em;
    height: 4em;
    overflow: hidden;
    border-bottom: 0.5em solid #2a7b28;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

.rocker-small {
  font-size: 0.75em; /* Sizes the switch */
  margin: 1em;
}

.rocker::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2b632a;
  border: 0.5em solid #2a7b28;
  border-bottom: 0;
}

.rocker input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-left,
.switch-right {
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  width: 3em;
  transition: 0.2s;
}

.switch-left {
  height: 2.4em;
  width: 2.75em;
  left: 0.85em;
  bottom: 0.4em;
  background-color: #ddd;
  transform: rotate(15deg) skewX(15deg);
}

.switch-right {
  right: 0.5em;
  bottom: 0;
  background-color: #bd5757;
  color: #fff;
}

.switch-left::before,
.switch-right::before {
  content: "";
  position: absolute;
  width: 0.4em;
  height: 2.45em;
  bottom: -0.45em;
  background-color: #ccc;
  transform: skewY(-65deg);
}

.switch-left::before {
  left: -0.4em;
}

.switch-right::before {
  right: -0.375em;
  background-color: transparent;
  transform: skewY(65deg);
}

input:checked + .switch-left {
  background-color: #4cc224;
  color: #fff;
  bottom: 0px;
  left: 0.5em;
  height: 2.5em;
  width: 3em;
  transform: rotate(0deg) skewX(0deg);
}

input:checked + .switch-left::before {
  background-color: transparent;
  width: 3.0833em;
}

input:checked + .switch-left + .switch-right {
  background-color: #ddd;
  color: #888;
  bottom: 0.4em;
  right: 0.8em;
  height: 2.4em;
  width: 2.75em;
  transform: rotate(-15deg) skewX(-15deg);
}

input:checked + .switch-left + .switch-right::before {
  background-color: #ccc;
}

/* Keyboard Users */
input:focus + .switch-left {
  color: #333;
}

input:checked:focus + .switch-left {
  color: #fff;
}

input:focus + .switch-left + .switch-right {
  color: #fff;
}

input:checked:focus + .switch-left + .switch-right {
  color: #333;
}

::-webkit-scrollbar {
    width: calc(var(--dieUnit) * 0.1);
}

::-webkit-scrollbar-thumb {
    border-radius: calc(var(--tileSize) * 0.2);
    background: rgba(72, 189, 40, 0.5);
    box-shadow: inset 0 0 calc(var(--dieUnit) * 0.1) rgba(0,0,0,0.5);
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 calc(var(--dieUnit) * 0.2) rgba(0,0,0,0.3);
    border-radius: calc(var(--dieUnit) * 0.2);
}