/*
 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=Amatic+SC|Monoton&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;
    font-family: 'Amatic SC', sans-serif;
}

html.intro {
    padding: 0.25vw 0.5vw;
    box-sizing: border-box;
    font-size: 1.5vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    border: double 0.2vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
    height: 100vh;
    width: 100vw;
}

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

#infoContainer {
    width: 20vw;
    height: 100%;
    position: absolute;
    left: 0vw;
}

#mapContainer {
    width: 80vw;
    height: 100%;
    position: absolute;
    left: 20vw;
    overflow:hidden;
}

#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));
    background: #2c2316;
    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;
}

#map, #map div, #logo, #logo div {
    transform-style: preserve-3d;
    perspective: 10000px;
}

.mapSide {
    background-image: url(img/dirt.jpg);
    background-color: rgba(128, 128, 128, 1);
    background-blend-mode: multiply;
    position: absolute;
    z-index: 100;
}

.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;
}

.cityTile {
    position: relative;
    background-image: url(img/dirt.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border: solid 1px #3c301e;
    color: rgba(175, 133, 69, 0.5);
    font-family: monospace;
}

.cityTile.cityTile_redHouse, .cityTile.cityTile_yellowHouse, .cityTile.cityTile_park {
    background-image: url(img/grass.jpg);
}

.cityTile.cityTile_office, .cityTile.cityTile_factory, .cityTile.cityTile_metro, .cityTile.cityTile_fire, .cityTile.cityTile_police, .cityTile.cityTile_hospital {
    background-image: url(img/pavement.jpg);
}

.cityTile.cityTile_water {
    background-image: url(img/water.jpg);
}

.cityTile.cityTile_road {
    background-image: url(img/asphalt.jpg);
    background-repeat: repeat;
    background-size: 25%;
}

.cityTile.areaBorder_0 {
    border-top: solid 2px #fff;
}

.cityTile.areaBorder_1 {
    border-right: solid 2px #fff;
}

.cityTile.areaBorder_2 {
    border-bottom: solid 2px #fff;
}

.cityTile.areaBorder_3 {
    border-left: solid 2px #fff;
}

.roadLines {
    background-image: url(img/roadLines.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: var(--gridUnit);
    height: var(--gridUnit);
    transform-origin: center;
    position: absolute;
    top: 0;
    left: 0;
}

.roadLines.roadLines1 {
    transform: rotate(90deg);
}

.roadLines.roadLines2 {
    transform: rotate(180deg);
}

.roadLines.roadLines3 {
    transform: rotate(270deg);
}

.waterSide {
    position: absolute;
    box-sizing: border-box;    
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: var(--gridUnit);
    height: var(--gridUnit);
    top: 0;
    left: 0;
    background-image: url(img/water.jpg);
    opacity: 0.5;    
}

.waterSide.waterSide0 {
    transform-origin: top;
    transform: rotateX(270deg);
    top: -2px;
    /*-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);*/
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0.4) 12%, rgba(0, 0, 0, 0) 100%);
    height: calc(var(--gridUnit) * 2);
}

.waterSide.waterSide1 {
    transform-origin: right;
    transform: rotateY(270deg) translateZ(var(--gridUnit));
    width: calc(var(--gridUnit) * 2);
    /*-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);*/
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0.4) 12%, rgba(0, 0, 0, 0) 100%);
}

.waterSide.waterSide2 {
    transform-origin: top;
    transform: rotateX(-90deg) translateZ(var(--gridUnit));
    height: calc(var(--gridUnit) * 2);
    bottom: 0;
    /*-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.15) 50%,rgba(0, 0, 0, 0) 100%);*/
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0.4) 12%, rgba(0, 0, 0, 0) 100%);
}

.waterSide.waterSide3 {
    transform-origin: left;
    transform: rotateY(-270deg);
    left: -2px;
    width: calc(var(--gridUnit) * 2);
    /*-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);*/
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0.4) 12%, rgba(0, 0, 0, 0) 100%);
}

.cityTilePart {
    position: absolute;
    box-sizing: border-box;
    transform-origin: left bottom;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: var(--gridUnit);
    height: var(--gridUnit);
    animation: flipup 2s ease-in-out both;
    left:0;
}

.cityTilePart.row0 {
    top: 0;
}

.cityTilePart.row1 {
    top: calc(var(--gridUnit) * -0.5);
}

.cityTilePart.row2 {
    top: calc(var(--gridUnit) * -1);
}

.cityTilePart.row3 {
    top: calc(var(--gridUnit) * -2.5);
}

.redHouse {
    background-image: url(img/redHouse.png);
}

.yellowHouse {
    background-image: url(img/yellowHouse.png);
}

.fence {
    background-image: url(img/fence.png);
}

.police {
    background-image: url(img/police.png);
}

.hospital {
    background-image: url(img/hospital.png);
}

.fire {
    background-image: url(img/fire.png);
}

.metro {
    background-image: url(img/metro.png);
}

.slum1, .slum {
    background-image: url(img/slum1.png);
}
.slum2 {
    background-image: url(img/slum2.png);
}

.road {
    background-image: url(img/roadLines.png), url(img/asphalt.jpg);
    position: relative;
}

.water {
    background-image: url(img/water.jpg);
}

.cardType.road:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/roadLines.png);
    z-index: 1;
    background-size: contain;
    background-position: center;
    transform-origin: center;
    transform: rotate(180deg);
}

.slum1.row0, .slum2.row0  {
    top: calc(var(--gridUnit) * -0.2) !important;
}

.slum1.row2, .slum2.row2 {
    top: calc(var(--gridUnit) * -0.9) !important;
}

.office {
    background-image: url(img/office.png);
    height: calc(var(--gridUnit) * 2);
}

.cityTilePart.office.row1 {
    top: calc(var(--gridUnit) * -1.5);
}

.factory1 {
    background-image: url(img/factory1.png);
}

.factory {
    background-image: url(img/factory1.png), url(img/factory2.png);background-image: url(img/factory1.png), background-image: url(img/factory2.png);
}

.factory2 {
    background-image: url(img/factory2.png);
    height: calc(var(--gridUnit) * 2);
}

.cityTilePart.factory2.row2 {
    top: calc(var(--gridUnit) * -1.7);
}

.tree, .park {
    background-image: url(img/tree.png);
}

.bush {
    background-image: url(img/bush.png);
}

.cityTilePart.bush.row2 {
    background-position-x: calc(var(--gridUnit) * 0.1);
}


@keyframes flipup {
    from {transform: rotateX(0deg);}
    to {transform: rotateX(-90deg);}
}

.cityTilePartShadow {
    filter: brightness(0);
    position: absolute;
    box-sizing: border-box;
    transform-origin: bottom center;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: var(--gridUnit);
    height: var(--gridUnit);
    left: 0;    
    transform: rotateZ(0deg);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%,rgba(0, 0, 0, 0) 50%);
}

.cityTilePartShadow.row0 {
    top: 0;
}

.cityTilePartShadow.row1 {
    top: calc(var(--gridUnit) * -0.5);
}

.cityTilePartShadow.row2 {
    top: calc(var(--gridUnit) * -1);
}

.cityTilePartShadow.row3 {
    top: calc(var(--gridUnit) * -1.5);
}

.cityTilePartShadow.factory2.row2 {
    top:unset;
    bottom: calc(var(--gridUnit) * 0.7);
    height: calc(var(--gridUnit) * 2);
}

.cityTilePartShadow.row1.office {
    top: calc(var(--gridUnit) * -1.5);
    height: calc(var(--gridUnit) * 2);
}

.card {
    position: relative;
    width: 18.5vw;
    background-color: #f1f1ea;
    margin: 1vw auto;
    border-radius: 0.25vw;
    border: double 0.3vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    background-image: url(img/paper.jpg);
    background-size: cover;
}

.cardOption {
    width: 18.5vw;
    height: 6vw;
    display: flex;
    justify-content: space-between;
    padding: 1vw 0;
    filter: drop-shadow(0px 0px 0.3vw white) drop-shadow(0px 0px 0.4vw white);
    cursor: pointer;
    padding-top: 1.5vw;
    box-shadow: inset 0 0 0.3vw #000000;
}

.cardOption:first-child {
    padding-bottom: 1.5vw;
    padding-top: 1vw;
}

.cardOption.notActive {
    filter: grayscale(1) contrast(0.5);
    opacity: 0.5;
    background-color: rgba(160, 160, 160, 0.7);
}

#currentCard .cardOption:hover {
    background-color: rgba(255, 255, 255, 0.5);
    filter: unset;
    transition: 0.25s;
}

.cardOption.active {}

.cardType {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    filter: drop-shadow(2px 4px 1px black);
}

.cardShape {
    position: relative;
    display: inline-block;
    width: 45%;
}

.shapeBlock {
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    background-color: #000;
    border: solid 1px #a0a0a0;
    margin: 0px;
    top: calc(var(--yPos) * calc(1.5vw + 1px));
    left: calc(var(--xPos) * calc(1.5vw + 1px));
    border-radius: 0.1vw;
    box-sizing: border-box;
}

.orLine {
    position: absolute;
    width: 18.5vw;
    top: 8vw;
    z-index:10;
}

.orLine hr {
    height: 0.5vw;
    border: solid 0.2vw rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    box-shadow: inset 0 0 0.3vw rgba(0, 0, 0, 0.1), 0 0 0.3vw rgba(0, 0, 0, 0.5);
}

.orLine.orLine2 {
    top: 16.5vw;
}

.orCenter {
    position: absolute;
    background: #f1f1ea;
    left: 50%;
    transform-origin: center;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    background-image: url(img/paper.jpg);
    font-weight: 900;
    color: #fff;
    font-size: 1.5vw;
    background-position: center;
    z-index: 10;
    text-shadow: 1px 1px 2px #000;
    border-radius: 0;
    border: double 0.5vw rgba(255, 255, 255, 0.7);
    height: 2vw;
    width: 2vw;
    text-align: center;
    line-height: 2vw;
    box-shadow: inset 0 0 0.3vw rgba(0, 0, 0, 0.5), 0 0 0.3vw rgba(0, 0, 0, 0.5);
}

.orCenter div {
    transform: rotate(-45deg);
}

.outline {
    position: absolute;
}

.outlineBlock {
    position: absolute;
    width: var(--gridUnit);
    height: var(--gridUnit);
    border: solid calc(var(--gridUnit) * 0.05) rgba(117, 255, 0, 0.5);
    background-color: rgba(117, 255, 0, 0.3);
    top: calc(var(--yPos) * var(--gridUnit));
    left: calc(var(--xPos) * var(--gridUnit));
    pointer-events: none;
}

.outlineBlock.error {
    border: solid calc(var(--gridUnit) * 0.05) rgba(255, 74, 0, 0.5);
    background-color: rgba(255, 74, 0, 0.3);
}

.cityTile * {
    pointer-events: none;
}

#game > .error {
    color: #a00;
    position: absolute;
    z-index: 100;
    width: 80vw;
    left: 20vw;
    text-align: center;
    top: 2vw;
    font-weight: 900;
    font-size: 2vw;
}

.cardOption .warning {
    position: fixed;
    z-index: 10;
    color: #aa8f00;
    font-weight: 900;
    transform-origin: left;
    top: 1vw;
    left: 1vw;
    font-size: 1.25vw;
    text-shadow: 0 0 1px #a00;
    width: 100%;
}

.tileScore {
    position: absolute;
    transform-origin: center bottom;
    width: calc(var(--gridUnit) * 2.5);
    height: calc(var(--gridUnit) * 2.5);
    left: 0;
    background-color: rgba(28, 93, 0, 0.75);
    transform: rotateX(-90deg) translateY(calc(var(--gridUnit) * -2.3)) translateX(calc(var(--gridUnit) * -0.75)) rotateY(var(--scoreRotation));
    top: calc(var(--gridUnit) * -2);
    box-sizing: border-box;
    border: solid 1px #41ff00;
    color: rgb(255, 255, 255);
    padding: calc(var(--gridUnit) * 0.05);
    font-size: calc(var(--gridUnit) * 0.15);
    font-family: sans-serif;
    font-variant: slashed-zero;
    border-radius: calc(var(--gridUnit) * 0.07);
}

.tileScore:after {
    content: "";
    position: absolute;
    height: calc(var(--gridUnit) * 2.5);
    width: calc(var(--gridUnit) * 0.1);
    background-color: rgba(52, 173, 0, 0.75);
    border: solid 1px #41ff00;
    border-top: 0;
    left: calc(var(--gridUnit) * 1.1);
    top: calc((var(--gridUnit) * 2.5) - 1px);
}

.tileScore .scorePart {
    display: flex;
    min-height: calc(var(--gridUnit) * 0.28);
    line-height: calc(var(--gridUnit) * 0.28);
}

.tileScore .scoreLabel {
    width: 80%;
}

.tileScore .fullLine .scoreLabel {
    width: 100%;
}

.tileScore .scoreValue {
    text-align: right;
    width: 20%;
    color: #aaff80;    
}

.tileScore .fullLine .scoreValue {
    width: 0%;
}

.tileScore .scoreLabel b {
    text-transform: uppercase;
    color: #edff00;
    font-weight: normal;
}

.tileScore .checkFalse {
    color: #ffc12e;
    text-shadow: none;
}

.tileScore .checkTrue {
    color: #83ff00;
    text-shadow: 0 0 1px #54ff00;

}
#currentCard {
    position: relative;
}

#currentScore {
    width: 19vw;
    margin: 1.2vw auto 0vw auto;
    border-radius: 0.2vw;
    border: double 0.2vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    background-image: url(img/paper.jpg);
    background-size: cover;
    padding: 1vw;
    background-blend-mode: multiply;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.8vw;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
}

.scorePart.totalAreaScore {
    border-top: solid 1px #41ff00;
    padding-top: calc(var(--gridUnit) * 0.1);
}

.scorePart.totalAreaScore .scoreValue {
    font-size: calc(var(--gridUnit) * 0.2);
}

#currentStatus {
    width: 18vw;
    margin: 1vw auto;
    padding: 1vw;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.2vw;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 21vw;
}

#currentRound {
    position: absolute;
    top: 1.4vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25vw 0.5vw;
    border-radius: 0.2vw;
    box-sizing: border-box;
    font-size: 1.5vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    border: solid 0.1vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
}

.card.specialCard.slumCard {
    border: double 0.3vw rgba(86, 51, 7,0.8);
}

.card.specialCard {
    border: double 0.3vw rgba(108, 137, 164,0.8);
}

.card.specialCard .orLine hr {
    border: solid 0.2vw rgba(108, 137, 164,0.7);
}

.card.specialCard .orCenter {
    color: rgba(108, 137, 164,0.8);
    border: double 0.5vw rgba(108, 137, 164,0.7);
    text-shadow: 1px 1px 2px #fff;
}

#deck {
    position: relative;
    height: 8vw;
    width: 19vw;
    margin: 1vw auto;
}

.deckCard {
    width: 18.5vw;
    height: 8vw;
    position: absolute;
    left: 0vw;
    top: 1.5vw;
    background-color: rgb(121, 121, 121);
    border-radius: 0.25vw;
    border: double 0.25vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw 0.1vw #000000, 0 0 0 1px #000;
    transform-origin: left center;
    overflow: hidden;
    transform: translate(0, calc(var(--rot) * 0.1vw));
}

/*Cardback by Ana Tudor*/

.deckCard:before, .deckCard:after {
    --p: 0;
    --s: calc(1 - 2*var(--p));
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-mask: var(--m);
    mask: var(--m);
    content: "";
}

.deckCard:after {
    --p: 1;
}

.deckCard:before, .deckCard:after {
    --c0: hsla(0, 0%, 0%, var(--p));
    --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
    background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #ffffff 0, #000000 calc(50% + 1px), transparent 0) 50%/ 0.75em 0.75em;
    --m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 45deg, var(--c1) 0%, var(--c1) 90deg);
}

.deckFront {
    position: absolute;
    z-index: 2;
    background-color: rgba(233, 220, 241, 0.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5vw;
    border-radius: 0.25vw;
    color: rgba(255, 255, 255, 1);
    box-shadow: 0.1vw 0.1vw 0.3vw #000;
    text-shadow: 1px 1px 1px #000;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.1vw;
    font-size: 1.2vw;
}

#mouseHelp {
    right: 0;
    width: 13vw;
    margin: 1vw auto;
    padding: 1vw;
    font-weight: 600;
    position: absolute;
    top: 0;
    display: grid;
    grid-template-columns: auto auto;
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.88);
}

#decklist {
    position: absolute;
    z-index: 15;
    display: grid;
    grid-template-columns: 11vw 11vw 11vw 11vw 11vw 11vw 11vw 11vw;
    grid-template-rows: 11vw 11vw;
    background: #ffffff;
    width: 95vw;
    height: 86vh;
    left: 2.5vw;
    top: 2.5vw;
    border-radius: 0.4vw;
    border: double 0.2vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    background-image: url(img/paper.jpg);
    background-size: cover;
    background-blend-mode: multiply;
    grid-template-areas:
        ". . . . . . . ."
        ". . . . . . . ."
        "under under under under under under under under";
}

#decklistHead {
    position: absolute;
    top: 1.4vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25vw 0.5vw;
    border-radius: 0.2vw;
    box-sizing: border-box;
    font-size: 1.5vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    border: solid 0.1vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
}

#decklist .card {
    transform: scale(0.55);
    box-shadow: 1px 1px 0.5vw rgba(0,0,0,1);
    margin: 0;
    height: 17vw;
}

#decklistHead {
    position: absolute;
    top: 0vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25vw 5vw;
    box-sizing: border-box;
    font-size: 2.5vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
    background-blend-mode: multiply;
    background-color: #fff;
    border-radius: 0.2vw;
    border: double 0.2vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
}

button {    
    padding: 0.25vw 3vw;
    border-radius: 0.2vw;
    box-sizing: border-box;
    font-size: 2.5vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    border: double 0.3vw rgba(218, 165, 32, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
    color: #ffb600;
    text-shadow: 1px 1px 2px #000, 2px 2px 1px #ffb600;
    background-color: #101010;
    background-blend-mode: multiply;
    font-family: 'Amatic SC', sans-serif;
    transition: all 1s;
    cursor:pointer;
}

button#decklistStart {
    position: absolute;
    bottom: 0vw;
    left: 50%;
    transform: translate(-50%, 50%);
}

button:hover, button#decklistStart:hover {
    background-color: #ffb600;
    color: #101010;
    border-color:#101010;
}

#decklist .bonusCard {
    transform: scale(0.9);
    box-shadow: 1px 1px 0.5vw rgba(0,0,0,0.7);
}

.bonusCard {
    position: relative;
    height: 7.5vw;
    background-color: #f1f1ea;
    width: 19vw;
    margin: 1.2vw auto 0vw auto;
    border-radius: 0.2vw;
    border: double 0.2vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    background-image: url(img/paper.jpg);
    background-size: cover;
    padding: 1vw;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.8vw;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
}

.bonusCard .cardTypes {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.bonusCard .cardType {
    width: 3vw;
    height: 3vw;
}

.bonusType.bonusTerrain {
    font-size: 1vw;
    padding: 0.5vw;
    font-weight: bold;
    text-align: center;
}

.bonusHeader {
    position: absolute;
    top: 0vw;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25vw 1vw;
    box-sizing: border-box;
    font-size: 1.2vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    color: #fff;
    font-weight: 600;
    text-shadow: 1px 1px 2px #000;
    background-blend-mode: multiply;
    background-color: #fff;
    border-radius: 0.2vw;
    white-space: nowrap;
    text-align: center;
    border: solid 0.1vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
}

#bonusList {
    width: 100%;
    display: flex;
    grid-area: under;
    justify-content: space-around;
    padding-top: 3.5vw;
    padding-left: 3.5vw;
}

.finalScoring {
    width: 19vw;
    margin: 2vw auto 0vw auto;
    border-radius: 0.2vw;
    border: double 0.2vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    background-image: url(img/paper.jpg);
    background-size: cover;
    padding: 1vw;
    background-blend-mode: multiply;
    box-sizing: border-box;
    color: #fff;
    font-size: 1.2vw;
    font-weight: 600;
    position:relative;
}

.scoringLabel {
    width: 75%;
    display: inline-block;
}

.scoringValue {
    display: inline-block;
    text-align: right;
    width: 20%;
}

.scoringPart:last-child {
    border: none;
}

.scoringPart {
    border-bottom: double 0.2vw #fff;
    padding: 0.5vw 0;
    filter: drop-shadow(1px 1px 2px #000);
}

.finalScoringHeader {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25vw 0.5vw;
    border-radius: 0.2vw;
    box-sizing: border-box;
    font-size: 1.5vw;
    background-image: url(img/paper.jpg);
    background-size: cover;
    border: solid 0.1vw rgba(255, 255, 255, 0.8);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
    text-shadow: 1px 1px 2px #000;
}

.scorePartHeader {
    text-align: center;
    text-decoration: underline;
    position:relative;
}

.scorePartHeader:after {
    content: "";
    position: absolute;
    bottom: -1px;
    height: 0.1vw;
    background-color: #fff;
    width: 1.5vw;
    left: 50%;
    transform: translate(-50%, 0);
}

#decklist .card:hover {
    transform: scale(1.1);
    z-index: 10;
    transition: 0.75s ease-in-out;
}

#decklist .bonusCard:hover {
    transform: scale(1.5);
    z-index: 10;
    transition: 0.75s ease-in-out;
}

#intro {
    display: flex;
    justify-content: space-evenly;
}

.introBox {
    margin-top: 15vh;
}

#playerName {
    cursor: pointer;
    padding: 0.4vw 0.6vw;
    box-sizing: border-box;
    min-width: 6vw;
    max-width: 12vw;
    border: solid 2px rgba(0,0,0,0);
    display: inline-block;
    position: absolute;
    top: 1vw;
    right: 1vw;
}

#playerName:hover {
   border:solid 2px rgba(218, 165, 32, 0.8);
   color: #ffb600;
   background-color:#000;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.15vw #000000;
}

#simplyCityHigh {
    display: inline-block;
    vertical-align: top;
}

#highScoreHeader {
    font-family: 'Monoton';
    text-align: center;
    font-size: 7vh;
    line-height: 7vh;
    text-shadow: 0 0 1px goldenrod, 0 0 1px goldenrod, 0 0 1px goldenrod, 0 0 1px goldenrod, 0 0 1px goldenrod;
}

#highScoreTable {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    height: 73vh;
    overflow-y: auto;
    grid-gap: 0.5vw;
    padding: 1vw;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
}

.highHead {
    text-decoration: underline;
    cursor: pointer;
}

.highHead:hover, .highHead.activeHigh {
    text-shadow: 1px 1px 2px #ffb600, 2px 2px 1px #ffb600;
}

#highScoreTable .numberone {
    font-weight: bold;
}

.challenge {
    border-bottom: solid 1px #303030;
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;
    padding-bottom:2px;
}

.challenge:hover {
    border-bottom: double 3px goldenrod;
    padding-bottom: 0;
    color: goldenrod;
    text-shadow: 1px 1px 1px #000;
}

#simplyCityMenu {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 80vh;
    vertical-align: top;
}

#menu {
    position:relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 80vh;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
}

#menuHeader {
    font-family: 'Monoton';
    text-align: center;
    font-size: 7vh;
    line-height: 7vh;
    text-shadow: 0 0 1px goldenrod, 0 0 1px goldenrod, 0 0 1px goldenrod, 0 0 1px goldenrod, 0 0 1px goldenrod;
    vertical-align: top;
}

.introContent {
    width: 45vw;
    border: double 0.3vw #949494;
    box-sizing: border-box;
}

#logo {
    --gridUnit: 10vh;
    position: absolute;
    top: 9vh;
    height: 8vh;
    width: 79vh;
    transform-style: preserve-3d;
    transform-origin: center center;
    perspective: 10000px;
    perspective-origin: top center;
    transform: rotateX(77deg) rotateY(0deg) rotateZ(5deg);
    display: inline-flex;
    z-index: 100;
    justify-content: space-evenly;
}

.logoTile {
    position: relative;
    width: calc(var(--gridUnit) * 0.78);
    text-align: center;
    font-size: 9vh;
    color: #000;
    font-family: 'Monoton';
    text-shadow: 0 0 0.5vh goldenrod, 0 0 0.5vh goldenrod, 0 0 0.5vh goldenrod, 0 0 0.5vh goldenrod, 0 0 0.5vh goldenrod;
}

#logo .row0, #logo .row2, #logo .row3 {
    filter: sepia(1) opacity(0.5) grayscale(1);
}

#help {
    background-color: rgba(214, 165, 37, 0.1);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(img/paper.jpg);
    background-size: cover;
    background-blend-mode: multiply;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    display:none;
    overflow-y: auto;
}

.closeHelp {
    position: sticky;
    cursor: pointer;
    font-size: 2vw;
    font-family: monospace;
    color: #303030;
    top: 0;
    right: 1vw;
}

.closeHelpContent {
    top: 0;
    position: absolute;
    right: 1vw;
}

.closeHelp:hover {
    color: goldenrod;
    text-shadow: 1px 1px 1px #303030;
}

button.restart {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 1vw);
    z-index: 1000;
}

#currentBonus {
    position: relative;
}

.arrowRight {
    position: absolute;
    transform-origin: center;
    top: 1vw;
    right: 1.5vw;
    margin: auto;
    height: 0;
    width: 0;
    border: 0.5vw solid;
    border-color: #303030 #303030 transparent transparent;
    transform: rotate(45deg);
    filter: drop-shadow(3px 0px 1px #000);
    cursor: pointer;
}

.arrowLeft {
    position: absolute;
    transform-origin: center;
    top: 1vw;
    left: 1.5vw;
    margin: auto;
    height: 0;
    width: 0;
    border: 0.5vw solid;
    border-color: #303030 #303030 transparent transparent;
    transform: rotate(-135deg);
    filter: drop-shadow(-3px 0px 1px #000);
    cursor: pointer;
}

.arrowRight:hover, .arrowLeft:hover {
    border-color: goldenrod goldenrod transparent transparent;
}

#helpContent {
    display:none;
}

.helpBlock {
    font-size: 0.8vw;
    padding: 1vw;
    padding-bottom: 0.5vw;
    font-family: sans-serif;
}

.helpBlockHead {
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 1px goldenrod;
    font-size: 1vw;
}

span.yellowText {
    font-weight: 600;
    color: yellow;
}

span.redText {
    color: #a00;
    font-weight: 600;
}

span.blueText {
    color: #00a;
    font-weight: 600;
}

span.greenText {
    color: #0a0;
    font-weight: 600;
}

span.brownText {
    color: rgb(86, 51, 7);
    font-weight: 600;
}

::-webkit-scrollbar {
    width: 1vw;
    height: 1vw;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border: double 3px rgba(218, 165, 32, 0.5);
    box-sizing: border-box;
}
::-webkit-scrollbar-track {
    background-color: rgb(34, 34, 34);
}


#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: #303030;
}

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