/*
 Copyright (C) 2021 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/css2?family=Fascinate&family=PT+Sans+Narrow:wght@400;700&display=swap');

body {
    margin:0;
    font-size: calc(var(--baseSize) * 0.35);
    background: radial-gradient(ellipse at bottom, #1d84ff 0%, #030619 100%);
    width: 100vw;
    height: 100vh;
}

#menu {
    position: absolute;
    width: calc(var(--baseSize) * 20);
    height: calc(var(--baseSize) * 14);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
    --tileSize: calc(var(--baseSize) * 14 / var(--gridSize));
    font-family: 'PT Sans Narrow', sans-serif;
    color: #e8e8e8;
    background-image: repeating-linear-gradient( 133deg, #00ffdc3b 0, #0945bb 1px, transparent 0, transparent 50%);
    background-size: 0.3vw 0.3vw;
    cursor: default;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 1vh;
    box-sizing: border-box;
    border: solid 1px #08577e;
    box-shadow: calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 1) #001e5f;
}

#menu.expanded {
    transition: all 2s;
    width: 100vw;
    height: 100vh;
    pointer-events:none;
}

#game {
    visibility: hidden;
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: start;
    --tileSize: calc(var(--baseSize) * 14 / var(--gridSize));
    font-family: 'PT Sans Narrow', sans-serif;
    color: #e8e8e8;
    background-image: repeating-linear-gradient( 45deg, #00ffdc3b 0, #0945bb 1px, transparent 0, transparent 50%);
    background-size: 0.3vw 0.3vw;
    cursor:default;
}

#game.gameover #board {
    pointer-events: none;
}

#header {
    width: calc(var(--baseSize) * 33.7);
    height: calc(var(--baseSize) * 2.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

#gameTitle, #menuHeader {
    width: calc(var(--baseSize) * 18.5);
    margin-left: calc(var(--baseSize) * 4.5);
    font-size: calc(var(--baseSize) * 2);
    text-align: center;
    font-family: 'Fascinate', cursive;
    filter: drop-shadow(calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.05) #0b0909) drop-shadow(calc(var(--baseSize) * -0.05) calc(var(--baseSize) * -0.05) calc(var(--baseSize) * 0.05) #65aaff);
    color: #156ad8;
    animation: movearound 60s linear infinite;
    background-image: url(img/dollars.jpg);
    background-size: 25%;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#menuHeader {
    margin-left: 0;
    margin-bottom: calc(var(--baseSize) * 0.25);
}

#highscores {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    width: calc(var(--baseSize) * 8);
    justify-content: space-between;
}

#highscores .highScoreTab {
    width: calc(var(--baseSize) * 2.5);
    box-sizing: border-box;
    text-align: center;
    border: solid 1px #79a5d4;
    border-radius: calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.2) 0 0;
    position: relative;
    top: 1px;
    box-shadow: calc(var(--baseSize) * 0.05) 0 calc(var(--baseSize) * 0.05) #001c42, inset calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) rgb(23 164 187 / 64%);
    color: #cae1ff;
    cursor: pointer;
    font-variant: small-caps;
    font-weight: bold;
    background-color: rgb(11 42 90 / 50%);
    border-bottom-color: #79a5d4;
}

#highscores .highScoreTab:hover, #highscores .highScoreTab.activeTab {
    filter: brightness(1.3);
}

#scoreList {
    width: calc(var(--baseSize) * 8);
    border: solid 1px #79a5d4;
    background-color: rgb(11 42 90 / 50%);
    border-radius: 0 0 calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1);
}

#highHeader {
    text-align: center;
    width: calc(var(--baseSize) * 8);
    font-size: calc(var(--baseSize) * 0.4);
    font-family: 'Fascinate', cursive;
    filter: drop-shadow(calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.05) #0b0909) drop-shadow(calc(var(--baseSize) * -0.05) calc(var(--baseSize) * -0.05) calc(var(--baseSize) * 0.05) #65aaff);
    margin: calc(var(--baseSize) * 0.25) 0;
}

.scoreGrid {
    display: grid;
    width: calc(var(--baseSize) * 8);
    max-height: calc(var(--baseSize) * 7.5);
    overflow-y: auto;
    padding: calc(var(--baseSize) * 0.5);
    padding-top: 0;
    box-sizing: border-box;
}

.scoreGrid .scoreField_score {
    text-align: right;
}


.scoreGrid .scoreField_mall {
    text-align: right;
}

.scoreGrid img {
    width: calc(var(--baseSize) * 0.4);
    filter: brightness(1.5);
    cursor: pointer;
}

.scoreGrid img:hover {
    filter: brightness(10);
}

#menuButtonContainer {
    position: absolute;
    bottom: calc(var(--baseSize) * 1);
    z-index: 2;
}

button#startGame {
    padding: calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 1);
    text-transform: uppercase;
}

#menuOptions {
    display: flex;
    align-items: start;
    justify-content: space-evenly;
    width: 100%;
}

#gameModes {
    display: inline;
    width: calc(var(--baseSize) * 8);
    border: solid 1px #79a5d4;
    background-color: rgb(11 42 90 / 50%);
    border-radius: calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1);
    padding: calc(var(--baseSize) * 0.5);
}

#gameModeTitle, #howtoTitle {
    font-size: calc(var(--baseSize) * 0.4);
    text-align: center;
    font-family: 'Fascinate', cursive;
    filter: drop-shadow(calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.05) #0b0909) drop-shadow(calc(var(--baseSize) * -0.05) calc(var(--baseSize) * -0.05) calc(var(--baseSize) * 0.05) #65aaff);
    color: #e8e8e8;
    margin-bottom: calc(var(--baseSize) * 0.4);
}

#gameModeOptions {
    display: inline-grid;
    grid-template-columns: calc(var(--baseSize) * 1) auto;
    width: calc(var(--baseSize) * 8);
    height: calc(var(--baseSize) * 2.5);
}

#gameModes input {
    width: calc(var(--baseSize) * 0.75);
    height: calc(var(--baseSize) * 0.75);
    cursor: pointer;
    filter: drop-shadow(calc(var(--baseSize) * 0.06) calc(var(--baseSize) * 0.06) calc(var(--baseSize) * 0.05) #113);
}

#gameModes label {
    padding-left: calc(var(--baseSize) * 0.75);
    line-height: calc(var(--baseSize) * 0.75);
}

@keyframes movearound {
  0%   {background-position-x: center; background-position-y:bottom;}
  100% {background-position-x: center; background-position-y:top;}
}

#gameScore {
    width: calc(var(--baseSize) * 7);
    margin-right: calc(var(--baseSize) * 3);
    font-size: calc(var(--baseSize) * 2);
    font-family: 'Fascinate', cursive;
    --iconSize: calc(var(--baseSize) * 1);
    filter: drop-shadow(calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.05) #0b0909) drop-shadow(calc(var(--baseSize) * -0.05) calc(var(--baseSize) * -0.05) calc(var(--baseSize) * 0.05) #65aaff);
    color: #156ad8;
}

button {
    font-size: calc(var(--baseSize) * 1);
    font-family: 'Fascinate', cursive;
    color: #156ad8;
    text-shadow: calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.025) #0b0909, calc(var(--baseSize) * -0.025) calc(var(--baseSize) * -0.025) calc(var(--baseSize) * 0.025) #65aaff;
    border-radius: calc(var(--baseSize) * 0.15);
    cursor: pointer;
    box-sizing: border-box;
    background-color: #439ae4;
    border-bottom: solid calc(var(--baseSize) * 0.1) #28679c;
    border-right: solid calc(var(--baseSize) * 0.08) #20537e;
    border-top: solid calc(var(--baseSize) * 0.05) #8fccff;
    border-left: solid calc(var(--baseSize) * 0.05) #8fccff;
}

button#gameOverButton {
    visibility: hidden;
    width: calc(var(--baseSize) * 6);
}

button:hover {
    color: #f6f6f6;
    transition: color 250ms;
}

#board {
    display: flex;
}

#mall {
    position: relative;
    display: inline-block;
    width: calc(var(--tileSize) * var(--gridSize));
    height: calc(var(--tileSize) * var(--gridSize));
    border-radius: calc(var(--tileSize) * 0.05);
    box-shadow: 
        calc(var(--tileSize) * 0.01) calc(var(--tileSize) * 0.02) calc(var(--tileSize) * 0.06) #393636, 
        calc(var(--tileSize) * 0.005) calc(var(--tileSize) * 0.005) 0 calc(var(--tileSize) * 0.005) #343131;
}

#mallCanvas {
    position: absolute;
    top:0;
    left:0;
    width: calc(var(--tileSize) * var(--gridSize));
    height: calc(var(--tileSize) * var(--gridSize));
    border-radius: calc(var(--tileSize) * 0.05);
    pointer-events: none;
    z-index:2;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    width: calc(var(--baseSize) * 14.5);
    justify-content: space-between;
    height: calc(var(--baseSize) * 14);
    flex-direction: column;
    margin-left: calc(var(--baseSize) * 0.25);
}

#resources {
    display: flex;
    flex-direction: column;
    justify-content: start;
    width: calc(var(--baseSize) * 5);
    align-items: center;
}

#resources .resourceCard {
    margin-bottom: calc(var(--baseSize) * 0.25);
}

#resources.multiResourceRound .resourceCard {
    --baseSize: calc(var(--baseSizeCopy) / 1.5);
    font-size: calc(var(--baseSizeCopy) * 0.25);
}

.tile {
    position: absolute;
    width: var(--tileSize);
    height: var(--tileSize);
    left: calc(var(--tileSize) * var(--x));
    top: calc(var(--tileSize) * var(--y));
    box-shadow: inset 0 0 0 1px #ffffff8c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #1b1b1b;
    background-image: url(img/blue.jpg);
    background-blend-mode: overlay;
    background-size: contain;
}

.tile_0_0.tileCorner {
    border-top-left-radius: calc(var(--tileSize) * 0.05);
}

.tile_3_0.tileCorner {
    border-top-right-radius: calc(var(--tileSize) * 0.05);
}

.tile_0_3.tileCorner {
    border-bottom-left-radius: calc(var(--tileSize) * 0.05);
}

.tile_3_3.tileCorner {
    border-bottom-right-radius: calc(var(--tileSize) * 0.05);
}

.tile.highlight, .card.highlight, .tile.highlight .building {
    box-shadow: inset 0 0 calc(var(--tileSize) * 0.2) #d74700;
    cursor: pointer;
}

.tile.highlightBuild {
    box-shadow: inset 0 0 calc(var(--tileSize) * 0.3) #0a0;
}

.resource {
    position: relative;
    box-sizing: border-box;
    width: calc(var(--tileSize) / 2);
    height: calc(var(--tileSize) / 2);
    background-size: cover;
    background-repeat: no-repeat;
}

.resource.resource_Brick {
    background-image: url(img/brick2.png);
}

.resource.resource_Steel {
    background-image: url(img/steel2.png);
}

.resource.resource_Concrete {
    background-image: url(img/stone2.png);
}

.resource.resource_Wood {
    background-image: url(img/wood2.png);
}

.resource.resource_Plastic {
    background-image: url(img/plastic2.png);
}

.patternPart .resource {
    background-image: unset;
    box-shadow: 1px 1px 0px 1px #434343, inset 1px 1px 1px 1px #ffffff57;
}

.patternPart .resource.resource_Brick {
    background-color: #970c0c;
}

.patternPart .resource.resource_Steel {
    background-color: #138ec6;
}

.patternPart .resource.resource_Concrete {
    background-color: #cacaca;
}

.patternPart .resource.resource_Wood {
    background-color: #4f310a;
}

.patternPart .resource.resource_Plastic {
    background-color: #e5cb20;
}

.tile .resource.resource_Steel {
    filter: drop-shadow(0 0 calc(var(--tileSize) / 8) #138ec6);
}

.tile .resource.resource_Concrete {
    filter: drop-shadow(0 0 calc(var(--tileSize) / 8) #cacaca);
}

.tile .resource.resource_Wood {
    filter: drop-shadow(0 0 calc(var(--tileSize) / 8) #4f310a);
}

.tile .resource.resource_Plastic {
    filter: drop-shadow(0 0 calc(var(--tileSize) / 8) #e5cb20);
}

.tile .resource.resource_Brick {
    filter: drop-shadow(0 0 calc(var(--tileSize) / 8) #970c0c);
}

.tile .resource {
    pointer-events:none;
}

#toastContainer {
    position: absolute;
    top: calc(var(--baseSize) * 1);
    left: 50%;
    transform: translate(-50%,0);
    width: calc(var(--baseSize) * 8);
    z-index: 1000;
    max-height: calc(var(--baseSize) * 10.8);
    overflow-y: auto;
}

.toast {
    position: relative;
    z-index: 1;
    background-color: #43618f;
    padding: calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.4);
    border-radius: calc(var(--baseSize) * 0.25) 0 calc(var(--baseSize) * 0.5) 0;
    margin-bottom: calc(var(--baseSize) * 0.1);
    color: #f7b772;
    font-size: calc(var(--baseSize) * 0.5);
    border: solid calc(var(--baseSize) * 0.05) #11141e;
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.2) #4a435c, inset 0 0 calc(var(--baseSize) * 0.5) #384158, calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.4) #00000050, inset 0 calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.1) #48425c;
    background: linear-gradient(to bottom, #70a8ff 0%,#43618f 54%,#23324a 80%);
    width: 100%;
    box-sizing: border-box;
    cursor:pointer;
}

.card {
    position: relative;
    color: #111;
    border-radius: calc(var(--baseSize) * 0.1);
    background-color: #fafafa;
    font-size: calc(var(--baseSize) * 0.25);
    box-shadow: calc(var(--tileSize) * 0.01) calc(var(--tileSize) * 0.02) calc(var(--tileSize) * 0.06) #393636, calc(var(--tileSize) * 0.005) calc(var(--tileSize) * 0.005) 0 calc(var(--tileSize) * 0.005) #7f7c7c;
    background-image: url(img/cardpaper.jpg);
    border-right: solid calc(var(--baseSize) * 0.01) #000;
    border-bottom: solid calc(var(--baseSize) * 0.01) #444;
}

.card:not(.disabled, .resourceCard):hover {
    box-shadow: 0 0 0 1px #000, calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.15) #000000ab, 0 0 calc(var(--baseSize) * 0.5) #ececec;
}

.card .cardTitle {
    text-align: center;
    width: 100%;
    margin: calc(var(--baseSize) * 0.25) 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    font-weight: 700;
}

.card .cardIcon {
    position: absolute;
    right: calc(var(--baseSize) * 0.1);
    top: calc(var(--baseSize) * 0.1);
    background-color: #d7d7d7;
    box-shadow: 0 0 0 calc(var(--baseSize) * 0.1) #d7d7d7, 0 0 1px calc(var(--baseSize) * 0.1) #000;
    border-radius: calc(var(--baseSize) * 0.01);
}

.cardText {
    position: absolute;
    top: calc(var(--baseSize) * 0.6);
    padding: calc(var(--baseSize) * 0.25);
    z-index: 1;
    text-shadow: 0 0 1px #fff;
}

.card.resourceCard {
    --tileSize: calc(var(--baseSize) * 3.5);
    width: calc(var(--baseSize) * 4);
    height: calc(var(--baseSize) * 4);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.resourceCard .resource {
    z-index: 100;
}

.resourceCard .resource:hover {
    filter: drop-shadow(calc(var(--tileSize) * 0.05) calc(var(--tileSize) * 0.08) calc(var(--tileSize) * 0.09) black);
    transform: translate(calc(var(--tileSize) * -0.01), calc(var(--tileSize) * -0.01));
    transition: all 0.25s;
    cursor: grab;
}

.card.buildingCard {
    width: calc(var(--baseSize) * 3.25);
    height: calc(var(--baseSize) * 6.75);
    margin: 0 calc(var(--baseSize) * 0.2);
    --tileSize: calc(var(--baseSize) * 0.7);
    --iconSize: calc(var(--baseSize) * 0.25);
    color: #111;
    cursor:pointer;
}

.card.buildingCard .cardTitle {
    width: calc(100% - (var(--baseSize) * 0.8));
    padding-left: calc(var(--baseSize) * 0.25);
    text-align: left;
}

.buildingCard .cardImage {
    position: absolute;
    width: calc(var(--tileSize) * 4.4);
    height: calc(var(--baseSize) * 2.6);
    bottom: calc(var(--tileSize) * 2.5);
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    background-position: bottom center;
    box-sizing: border-box;
    margin: calc(var(--tileSize) * 0.1);
    border-radius: calc(var(--tileSize) * 0.1);
    filter: drop-shadow(calc(var(--tileSize) * 0.05) calc(var(--tileSize) * 0.05) calc(var(--tileSize) * 0.03) black);
}

.cardImage_blue { background-image: url(img/blue.jpg); }
.cardImage_red { background-image: url(img/red.jpg); }
.cardImage_grey { background-image: url(img/grey.jpg); }
.cardImage_green { background-image: url(img/green.jpg); }
.cardImage_yellow { background-image: url(img/yellow.jpg); }
.cardImage_black { background-image: url(img/black.jpg); }
.cardImage_orange { background-image: url(img/orange.jpg); }
.cardImage_purple { background-image: url(img/purple.jpg); }

.buildingCard.buildingCard_ShoesOutlet .cardImage.cardImage_green,  .buildingCard.buildingCard_ThriftStore .cardImage.cardImage_green {
    bottom: calc(var(--tileSize) * 1.8);
}

.card.buildingCard.readyToBuild {
    background-color: #ffffff;
    background-blend-mode: soft-light;
    filter: brightness(1.1) drop-shadow(0px 0px 6px #aff);
}

.card.buildingCard.readyToBuild:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5) 0 0;
    border-color: #1b488f transparent transparent transparent;
    filter: drop-shadow(1px 1px 1px #000);
}

.cardPatternWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: calc(var(--tileSize) / 4) 0;
    position: absolute;
    bottom: 0;
    height: calc(var(--tileSize) * 2);
    align-items: center;
    border-radius: 0 0 calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1);
}

.cardPattern {
    width: calc(var(--tileSize) / 2* var(--dimx));
    height: calc(var(--tileSize) /2 * var(--dimy));
    position: relative;
}

.cardPattern .patternPart .resource {
    left: 0;
    top: 0;
    transform: unset;
}

.patternPart {
    position: absolute;
    left: calc(var(--partx) * var(--tileSize) / 1.6);
    top: calc(var(--party) * var(--tileSize) / 1.6 );
}

.card.disabled .cardPatternWrapper {
    opacity: 0.5;
}

.card.disabled {
    background-color: #e5e5e5;
}

.canDrop {
    box-shadow: inset 0 0 0 1px #ffffff8c, inset 0 0 calc(var(--tileSize) * 0.2) #8500ff;
    cursor: cell;
}

.dragging {
    cursor: grab;
}

.askModal {
    position: absolute;
    top: calc(var(--baseSize) * 0.2);
    left: calc(var(--baseSize) * 13);
    background: #1f7590;
    color: #fff;
    padding: calc(var(--baseSize) * 0.25);
    border-radius: calc(var(--baseSize) * 0.1);
    box-sizing: border-box;
    border: solid 1px #a0a0a0;
    box-shadow: calc(var(--baseSize) * 0.02) calc(var(--baseSize) * 0.02) 0 calc(var(--baseSize) * 0.02) rgb(0 81 105), inset calc(var(--baseSize) * 0.02) calc(var(--baseSize) * 0.02) 0 calc(var(--baseSize) * 0.02) rgb(255 255 255 / 50%),calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.1) rgb(0 0 0 / 50%);
    transform: translate(-50%,0);
    transition: 0.5s all;
    z-index: 7;
}

.askModal.collapsed {
    transform: scale(0.25) translate(-205%, -150%);
    top: calc(var(--baseSize) * 0.2) !important;
}

.askModal.collapsed > * {
    pointer-events:none;
}

.askModal.pickSpecialCard {
    top: calc(var(--baseSize) * 3);
}

.askModal.gameOver {
    top: calc(var(--baseSize) * 3);
    font-size: calc(var(--baseSize) * 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.askModal.gameOver .modalTitle {
    font-size: calc(var(--baseSize) * 1.4);
    font-family: 'Fascinate', cursive;
    color: #156ad7;
    text-shadow: calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.025) #0b0909, calc(var(--baseSize) * -0.025) calc(var(--baseSize) * -0.025) calc(var(--baseSize) * 0.025) #8cbdf9;
    border-radius: calc(var(--baseSize) * 0.15);
    cursor: pointer;
}

.askModal.gameOver .modalMessage {
    text-shadow: 1px 1px 1px #000;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    flex-wrap: nowrap;
}

.modalAnswer {
    cursor: pointer;
}

.modalAnswer:hover > * {
    box-shadow: 0 0 calc(var(--baseSize) * 0.2) #fff;
}

.modalTitle {
    text-align: center;
}

.modalClose {
    position: absolute;
    top: 0;
    right: calc(var(--baseSize) * 0.1);
    cursor: pointer;
}

.modalClose.modalCollapse {
    top: calc(var(--baseSize) * -0.1);
    right: calc(var(--baseSize) * 0.2);
    font-weight: bold;
    font-size: calc(var(--baseSize) * 0.5);
    line-height: calc(var(--baseSize) * 0.25);
}

.modalQuestionText {
    width: 100%;
    text-align: center;
}

.modalQuestions {
    display: flex;
}

.grid6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5);
    grid-gap: 1px;
    text-align: center;
    background-color: #000;
}

.grid7 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5);
    grid-gap: 1px;
    text-align: center;
    background-color: #000;
}

.grid6 p, .grid7 p {
    height: calc(var(--baseSize) * 0.5);
    line-height: calc(var(--baseSize) * 0.5);
    margin: 0;
    background-color: #fff;
}

.building {
    position: relative;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    box-sizing: border-box;
    --iconSize: calc(var(--baseSize) * 0.25);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: var(--tileSize);
    height: var(--tileSize);
    pointer-events: none;
    text-align: center;
}

.building .storedResources {
    position: absolute;
    --tileSize: calc(var(--baseSize) * 3.5 / var(--gridSize));
    bottom: calc(var(--tileSize) * 0.2);
    display: flex;
    width: 100%;
    right: 0;
    justify-content: space-evenly;
}

.buildingTitle {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    width: 100%;
    text-align: center;
}

.buildingScore {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index:6;
}

.icon {
    position: relative;
    display: inline-block;
    width: var(--iconSize);
    height: var(--iconSize);
    margin: calc(var(--iconSize) / 3);
    margin-bottom: 0;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: 0 0 0 1px #000;
}

.icon.icon_vp {
    border-radius: var(--iconSize);
    background-color: gold;     
    width: var(--iconSize);
}

.icon.icon_vp:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--iconSize) * 0.6);
    height: calc(var(--iconSize) * 0.6);
    background-color: #00dcff;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: inset 0 0 0 1px #000;
}

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

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

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

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

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

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

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

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

.cardFoodIcon {
    position: absolute;
    right: calc(var(--baseSize) * 0.8);
    top: calc(var(--baseSize) * 0.1);
    display: block;
}

.icon_food {
    box-sizing: border-box;
    width: var(--iconSize);
    box-shadow: unset;
}
.icon_food::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: var(--iconSize);
    height: calc(var(--iconSize) * 0.6);
    border: calc(var(--iconSize) * 0.1) solid;
    border-bottom-left-radius: calc(var(--iconSize) * 0.5);
    border-bottom-right-radius: calc(var(--iconSize) * 0.5);
    bottom: 0
}
.icon_food::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    background: currentColor;
    width: calc(var(--iconSize) * 0.1);
    height: calc(var(--iconSize) * 0.5);
    border-radius: calc(var(--iconSize) * 0.2);
    transform: rotate(45deg);
    right: calc(var(--iconSize) * 0.2);
    /*top: calc(var(--iconSize) * -0.05);*/
}

.icon .smallName {
    display:none;
    position: absolute;
    top: calc(-100% - calc(var(--baseSize) * 0.05));
    white-space: nowrap;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #030431;
    padding: calc(var(--baseSize) * 0.05);
    box-sizing: border-box;
    border: inset 1px rgb(0 0 0 / 50%);
    border-radius: calc(var(--baseSize) * 0.1);
    color: #4ce5ff;
}

.icon:hover .smallName, icon:active .smallName {
    display:block;
}

#popupMall {
    position: absolute;
    --tileSize: calc(var(--baseSize) * 2.4);
    font-size: calc(var(--baseSize) * 0.3);
    left: calc(var(--baseSize) * -10);
    z-index: 5;
    filter: drop-shadow(calc(var(--baseSize) * 0.4) calc(var(--baseSize) * 0.4) calc(var(--baseSize) * 0.4) #11111170);
    width: calc(var(--tileSize) * 4);
    height: calc(var(--tileSize) * 4);
    border-radius: calc(var(--tileSize) * 0.05);
    overflow: hidden;
    border: solid 1px #7ea4f5;
}

#other a, #playerName {
    font-size: calc(var(--baseSize) * 0.4);
    font-family: 'PT Sans Narrow', sans-serif;
    color: #29b1e7bd;
    transition: 500ms;
}

#other {
    position: absolute;
    left: calc(var(--baseSize) * 0.1);
    top: calc(var(--baseSize) * 0.05);   
    z-index:2;    
}

#playerName {
    position: absolute;
    right: calc(var(--baseSize) * 0.1);
    top: calc(var(--baseSize) * 0.05);
    cursor:pointer;
    z-index:2;
}

#other a:hover, #playerName:hover {
    color: #fff;
}


#volumeControl {
    --soundIconSize: calc(var(--baseSize) * 0.6);
    display: inline-block;
    background-image: url(img/sound.png);
    background-size: calc(var(--soundIconSize) * 1) calc(var(--soundIconSize) * 2);
    height: calc(var(--soundIconSize) * 1);
    width: calc(var(--soundIconSize) * 1);
    background-repeat: no-repeat;
    vertical-align: top;
    cursor: pointer;
    background-position: top;
    margin-left: calc(var(--baseSize) * 0.2);
}

#volumeControl.off {
    background-position: bottom;
}

::selection {  
  background: transparent;
}

::-webkit-scrollbar {
    width: 1vh;
}
::-webkit-scrollbar-thumb {
    background: #0b2a5a;
    border-radius: 1vh;
    box-shadow: inset 0.1vh 0 0.5vh rgb(21 106 215), inset -0.1vh 0 0.5vh rgb(0 0 0 / 50%);
}
::-webkit-scrollbar-track {
    background: #156ad7;
    border-radius: 1vh;
    box-shadow: inset 0.1vh 0 0.5vh rgb(255 255 255 / 50%), inset -0.1vh 0 0.5vh rgb(0 0 0 / 50%);
}