/*
 Copyright (C) 2022 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=Nosifer&family=Orbitron:wght@700&family=Rubik+Microbe&family=Work+Sans:wght@100&display=swap');

html {
    overflow:hidden;
}

* {
    cursor:default;
}

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

::-webkit-scrollbar {
    width: calc(1* var(--baseSize));
    height: calc(1* var(--baseSize));
}
::-webkit-scrollbar-thumb {
    border-radius: calc(0.3* var(--baseSize));
    background: linear-gradient(to bottom, #00f3ff 0%,#ffffff 50%,#00ffff 100%);
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 calc(1* var(--baseSize)) rgb(0, 0, 0);
}

#gameseed::selection {
    background: #fff;
}
#gameseed::-moz-selection {
    background: #fff;
}

#seedInput::selection {
    background: pink;
}

#seedInput::-moz-selection {
    background: pink;
}

body {
    margin:0;
    font-family: 'Orbitron', sans-serif;
    font-size: calc(2 * var(--baseSize));   
    --baseSize:9px;
    background-color: #262626;
    overflow:hidden;
}

#game {
    display:none;
    position: relative;
}

div#game.pauseGame canvas#board {
    opacity: 0.7;
}

div#game.pauseGame:after {
    content: "Pause";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc( 8 * var(--baseSize));
    color: #303030;
    pointer-events: none;
}

#keyhelp {
    position: absolute;
    right: calc(2 * var(--baseSize));
    top: calc(16 * var(--baseSize));
    color: #a0a0a0;
    pointer-events: none;
    font-size: calc(1.7 * var(--baseSize));
}

#buildOptions {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: calc(0.5* var(--baseSize)) calc(0.5* var(--baseSize)) calc(0.5* var(--baseSize)) 0;
    box-sizing: border-box;
    border: solid calc( 0.1 * var(--baseSize));
    border-left: none;
    border-top: none;
    border-radius: 0 0 calc(1* var(--baseSize)) 0;
    z-index: 1;
    flex-wrap: wrap-reverse;
    max-height: calc(100* var(--baseSize));
    flex-direction: column;
    justify-content: flex-start;
    transition: all 5s;
    box-shadow: calc(0* var(--baseSize)) calc(0* var(--baseSize)) calc(2* var(--baseSize)) #000;
}

#buildOptions.optionCols2 {
    width: calc(20* var(--baseSize))
}

#buildOptions.optionCols3 {
    width: calc(30* var(--baseSize))
}

.buildOption {
    position: relative;
    width: calc(7.5* var(--baseSize));
    height: calc(7.5* var(--baseSize));
    background-size: contain;
    margin: calc(1* var(--baseSize));
    cursor: pointer;
    border-radius: calc(0.4* var(--baseSize));
    box-shadow: 0 0 0 calc(0.2* var(--baseSize)) #000, calc(0.3* var(--baseSize)) calc(0.3* var(--baseSize)) 0 calc(0.3* var(--baseSize)) #4a4a4a;
    filter: brightness(0.75);
    background-repeat: no-repeat;
    background-color: #f5f5f5;
}

.buildOption:after {
    content: attr(title);
    position: absolute;
    font-size: calc(1* var(--baseSize));
    text-align: center;
    width: 100%;
    color: #fff;
    top: calc(-1.2* var(--baseSize));
    text-transform: capitalize;
}

.buildOption .fastKey {
    position: absolute;
    font-family: monospace;
    left: calc(0.1 * var(--baseSize));
    bottom: calc(0.1 * var(--baseSize));
    font-size: calc(0.8 * var(--baseSize));
    color: #303030;
    background: #ffffffc7;
    border-radius: 33%;
    padding: calc(0.1 * var(--baseSize)) calc(0.3 * var(--baseSize));
    font-variant: small-caps;
    font-weight: bold;
}

.buildOption .machineCost {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: calc(1 * var(--baseSize));
    color: #feffb5;
    background: #000;
    padding: calc(0.25* var(--baseSize)) calc(0.25* var(--baseSize));
    border-radius: calc(0.25* var(--baseSize));
}

.buildOption .machineCost .researchIcon {
    height: calc(1 * var(--baseSize));
    width: calc(1 * var(--baseSize));
    display: inline-block;
    filter: drop-shadow(0 0 calc( 0.2 * var(--baseSize)) #000);
}

.buildOption:hover {
    filter:brightness(1);
    box-sizing: border-box;  
}

.buildOption:hover:after {
    color:#fff;
}

#researchPoints {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 calc(2* var(--baseSize)) #000;
    padding: calc(0.5 * var(--baseSize));
    box-sizing: border-box;
    border: solid calc( 0.1 * var(--baseSize)) #a0a0a0;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 calc(2 * var(--baseSize));
    z-index: 2;
    width: calc(32 * var(--baseSize));
    justify-content: flex-start;
    align-items: flex-end;
    flex: 1 1;
}

.buildOption.active {
    filter:brightness(1);
}

.buildOption.active:after {
    color:cyan;
}

.researchIcon {
    background-image:url(img/researchPoints.svg);
    background-repeat:no-repeat;
    background-size: contain;
}

#pointsEarned {
    display: flex;
    font-size: calc(3 * var(--baseSize));
    align-items: center;
    height: calc(4 * var(--baseSize));
    min-width: calc(8 * var(--baseSize));
    padding: calc(1 * var(--baseSize));
    background: rgba(0, 0, 0, 0.5);
    border: groove calc(0.5 * var(--baseSize)) #424242;
    border-radius: calc(0.3 * var(--baseSize));
    color: #ffef98;
    position: relative;
}

#pointsEarned .researchIcon {
    width: calc(4 * var(--baseSize));
    height: calc(4 * var(--baseSize));
    filter: drop-shadow(0 0 calc(0.5 * var(--baseSize)) #fff);
}

#pointsEarned:after {
    content: "research points";
    position: absolute;
    top: calc(-1.2 * var(--baseSize));
    left: 0;
    font-size: calc(1.2 * var(--baseSize));
    color: #fff;
    font-variant: all-petite-caps;
    text-shadow: none;
    width: 100%;
    text-align: center;
}

#currentResearch {
    position: relative;
    font-size: calc(3 * var(--baseSize));
    color: #05d1d1;
    width: 100%;
    text-align: center;
    text-shadow: calc( 0.2 * var(--baseSize)) calc( 0.2 * var(--baseSize)) calc( 0.1 * var(--baseSize)) #000, calc( 0.2 * var(--baseSize)) calc( 0.2 * var(--baseSize)) calc( 0.2 * var(--baseSize)) #fff;
    margin-top: calc(1.2 * var(--baseSize));
}

#currentResearch:after {
    content: "researching";
    position: absolute;
    top: calc(-1.2 * var(--baseSize));
    left: 0;
    font-size: calc(1.2 * var(--baseSize));
    color: #fff;
    font-variant: all-petite-caps;
    text-shadow: none;
}

#currentResearch span {
    font-size: calc(1.5 * var(--baseSize));
    color: #00ffff;
    position: absolute;
    right: 0;
    top: 0;
}

.button {
    cursor: pointer;
    font-size: calc(1.6 * var(--baseSize));
    text-align: center;
    color: #fff;
    border: solid calc( 0.1 * var(--baseSize)) #04a8cd;
    border-bottom: solid calc(0.5 * var(--baseSize)) #04a8cd;
    border-right: solid calc(0.4 * var(--baseSize)) #0185a3;
    padding: calc(1 * var(--baseSize));
    background: linear-gradient(180deg, #007eff, #00f3ff57);
    text-shadow: calc( 0.2 * var(--baseSize)) calc( 0.2 * var(--baseSize)) 0 black;
    z-index: 1;
    transition: all 0.2s;
}

.button:hover {
    filter: brightness(1.3);
}

.button:active {    
    border-bottom: solid calc(0.2 * var(--baseSize)) #04a8cd;
    transform: translate(0, calc(0.3 * var(--baseSize)));
}

#showResearchTrees {
    position: absolute;
    top: calc(0.8 * var(--baseSize));
    left: calc(0.9 * var(--baseSize));
    cursor: pointer;
}

.researchTrees {
    position: absolute;
    display:flex;
    flex-direction: column;
    font-family: 'Work Sans', sans-serif;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:8;
    color:#f0f0f0;    
}

.researchTabsHolder {
    display: flex;
    height: calc(4* var(--baseSize));
    align-items: flex-end;
    border-bottom: solid calc( 0.1 * var(--baseSize)) #fff;
    box-sizing: border-box;
}

.researchTab {
    line-height: calc(3* var(--baseSize));
    padding: 0 calc(2* var(--baseSize));
    background-color: #f0f0f0;
    color: #303030;
    font-weight: bold;
    border-radius: calc(1* var(--baseSize)) calc(4* var(--baseSize)) 0 0;
    height: calc(3* var(--baseSize));
    margin: 0 calc(2* var(--baseSize)) 0 calc(1* var(--baseSize));
    cursor: pointer;
    box-shadow: inset 0px -1px 2px #000;
}

.researchTab.activeResearchTab {
    height: calc(4 * var(--baseSize));
    line-height: calc(4 * var(--baseSize));
    background-color: #ffffff;
    box-shadow: inset 0px 0px 2px #000;
}

.treesPlaceholder {
    width: calc(150 * var(--baseSize));
    height: calc(82.5 * var(--baseSize));
    box-sizing: border-box;
    box-shadow: calc(2 * var(--baseSize)) calc(2 * var(--baseSize)) calc(5 * var(--baseSize)) #000;
    border: solid calc( 0.1 * var(--baseSize)) cyan;
}

.buffTrees {
    display: flex;
    padding: calc(1* var(--baseSize));
    height: calc(82* var(--baseSize));
    box-sizing: border-box;
}

.buffTree {
    display: flex;
    flex-direction: column;
    font-size: calc(1.5* var(--baseSize));
    font-family: sans-serif;
    padding: calc(1* var(--baseSize));
    margin: 0 calc(1* var(--baseSize));
}

.buffTreeName {
    text-align: center;
    font-weight: bold;
    margin-bottom: calc(1.5* var(--baseSize));
    padding: calc(0.5* var(--baseSize));
    background-color: rgba(118, 255, 255, 0.5);
    text-shadow: calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) 0 black;
    height: calc(3.5* var(--baseSize));
}

.buffLevel {
    border: solid calc( 0.1 * var(--baseSize)) #fff;
    background-color: rgba(0, 36, 112, 0.95);
    margin-top: calc(5* var(--baseSize));
    margin-bottom: calc(1.5* var(--baseSize));
    padding: calc(0.5* var(--baseSize));
    font-size: calc(1.3* var(--baseSize));
    position: relative;
    min-width: calc(18* var(--baseSize));
    box-shadow: calc(0.2* var(--baseSize)) calc(0.25* var(--baseSize)) calc( 0.1 * var(--baseSize)) calc(0.25* var(--baseSize)) rgba(0, 25, 78, 0.95), inset calc(0.1* var(--baseSize)) calc(0.1* var(--baseSize)) calc(1* var(--baseSize)) rgba(255, 255, 255, 0.5);
    cursor:default;
    text-align: center;
}

.buffLevelTitle {
    top: calc( 0.1 * var(--baseSize));
    white-space: nowrap;
    text-align: center;
    position: absolute;
    transform: translate(-50%,-100%);
    background: rgba(38, 69, 137, 0.95);
    left: 50%;
    border: solid calc( 0.1 * var(--baseSize)) #fff;
    border-radius: calc(0.25* var(--baseSize)) calc(0.25* var(--baseSize)) 0 0;
    border-bottom-color: rgba(0, 36, 112, 0.95);
    padding: calc(0.2* var(--baseSize)) calc(1* var(--baseSize));
    color: #00f3ff;
}

.buffLevelCost {
    position: absolute;
    left: 50%;
    background-color: rgba(0, 36, 112, 0.95);
    color: #f0f0f0;
    font-weight: bold;
    top: calc(-3* var(--baseSize));
    line-height: calc(2* var(--baseSize));
    text-align: center;
    display: flex;
    align-items: center;
    transform: translate(-50%,-100%);
    padding: 0 calc(0.5* var(--baseSize));
    box-shadow: 0 0 0 calc( 0.1 * var(--baseSize)) #f0f0f0;
}

.buffLevelCost .researchIcon {
    height: calc(1.5* var(--baseSize));
    width: calc(1.5* var(--baseSize));
}

.buffLevel:not(.buffLevelResearched):hover {
    filter: brightness(1.3);
    cursor: pointer;
}

.buffLevel.buffLevelResearched {
    filter: grayscale(0.8);
}

.buffLevelDescription {
    padding: calc(0.7* var(--baseSize)) calc(0.1* var(--baseSize));
    pointer-events:none;
}

.buffTreeHelp {
    position: absolute;
    right: calc(2* var(--baseSize));
    bottom: calc(2* var(--baseSize));
    width: calc(49* var(--baseSize));
    height: calc(17* var(--baseSize));
    line-height: calc(2.7* var(--baseSize));
    color: #000;
    font-weight: bold;
    font-size: calc(1.75 * var(--baseSize));
    margin: 0 auto;
    padding: calc(2* var(--baseSize));
    box-shadow: 0 calc(1* var(--baseSize)) calc(1* var(--baseSize)) calc( 0.2 * var(--baseSize)) rgba(0, 0, 0, 0.3);
    background: #eae672;
    transform: rotate(2deg);    
}

.buffTreeHelp .researchIcon {
    width: calc(1.5* var(--baseSize));
    height: calc(1.5* var(--baseSize));
    display: inline-block;
    filter: drop-shadow(0 0 calc( 0.1 * var(--baseSize)) black) drop-shadow(0 0 calc( 0.1 * var(--baseSize)) black);
}

.machinesTrees {
    display: flex;
    overflow-y: auto;
    --printBack: #246fa5;
    --unit:calc(1* var(--baseSize));
    height: calc(82* var(--baseSize));
    box-sizing: border-box;
    font-size: calc(1.5* var(--baseSize));
    font-family: sans-serif;
}

.machineTreeColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 calc(3* var(--baseSize));
    margin-bottom: calc(140* var(--baseSize));
}

.techLevel {
    display: flex;
    position: relative;
    margin: calc(9* var(--baseSize)) calc(1* var(--baseSize)) calc(1* var(--baseSize)) calc(1* var(--baseSize));
    padding: calc(1* var(--baseSize));
    background-color: rgb(35 59 110 / 90%);
    border: solid calc( 0.1 * var(--baseSize)) #fff;
    padding-top: calc(2* var(--baseSize));
    align-items: center;
    cursor: pointer;
    box-shadow: calc(0.2* var(--baseSize)) calc(0.25* var(--baseSize)) calc( 0.1 * var(--baseSize)) calc(0.25* var(--baseSize)) rgba(0, 25, 78, 0.95), inset calc(0.1* var(--baseSize)) calc(0.1* var(--baseSize)) calc(1* var(--baseSize)) rgb(231 247 255 / 50%);
}

.techLevel * {
    cursor: pointer;
}

.techLevel.techLevel_0 {
    margin-top: calc(5* var(--baseSize));
}

.techLevel:hover {
    background-color: rgba(13, 42, 104, 0.5);
}

.techLevel:not(.techLevel_0):after {
    content: "";
    width: calc(0.5* var(--baseSize));
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    background-color: rgba(35, 59, 110, 0.9);
    height: calc(7.15* var(--baseSize));
    top: calc(-10.2* var(--baseSize));
    border-left: solid calc( 0.1 * var(--baseSize)) #f0f0f0;
    border-right: solid calc( 0.1 * var(--baseSize)) #f0f0f0;
}

.techLevel.researched {
    filter: grayscale(0.75);
}

.techLevel.researched:before {
    content: "Done";
    position: absolute;
    top: calc(-0.5* var(--baseSize));
    right: calc(-1.5* var(--baseSize));
    transform: rotate(30deg);
    font-weight: bolder;
    font-size: calc(2.5* var(--baseSize));
    text-shadow: 0 0 calc( 0.1 * var(--baseSize)) #f00, 0 0 calc( 0.2 * var(--baseSize)) #0a0, 0 0 calc( 0.3 * var(--baseSize)) #00a;
}

.techLevel.activeResearch {
    border-color: #fff700;
    background-color: rgba(35, 82, 110,0.9);
    box-shadow: 0 0 0 calc(0.2* var(--baseSize)) #fff700, calc(0.2* var(--baseSize)) calc(0.25* var(--baseSize)) calc( 0.1 * var(--baseSize)) calc(0.25* var(--baseSize)) rgba(0, 25, 78, 0.95), inset calc(0.1* var(--baseSize)) calc(0.1* var(--baseSize)) calc(1* var(--baseSize)) rgb(231 247 255 / 50%);
}

.techLevel.activeResearch .techLevelTitle {
    border-color: #fff700;
    background-color: rgba(35, 82, 110,0.9);
    box-shadow: 0 0 0 calc(0.2* var(--baseSize)) #fff700, calc(0.2* var(--baseSize)) calc(0.25* var(--baseSize)) calc( 0.1 * var(--baseSize)) calc(0.25* var(--baseSize)) rgba(0, 25, 78, 0.95), inset calc(0.1* var(--baseSize)) calc(0.1* var(--baseSize)) calc(1* var(--baseSize)) rgb(231 247 255 / 50%);
}

.techLevelTitle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -75%);
    background-color: rgb(12 41 102 / 90%);
    padding: calc(1* var(--baseSize));
    border: solid calc( 0.1 * var(--baseSize)) #fff;
    white-space: nowrap;
    color: cyan;
    text-shadow: 0 0 calc( 1 * var(--baseSize)) cyan;
}

.requiredTech {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: calc(2* var(--baseSize));
    height: calc(6* var(--baseSize));
    padding: calc(0.1* var(--baseSize)) calc(0.2* var(--baseSize));
    border: solid calc( 0.1 * var(--baseSize)) #fff;
    background-color: #00ffff5c;  
    margin-top: calc(2* var(--baseSize));
}

.requiredTech:after {
    content: "Requirement";
    position: absolute;
    top: calc(-1.5* var(--baseSize));
    left: 0;
    width: 100%;
    font-weight: bold;
    font-size: calc(1.2* var(--baseSize));
    text-align: center;
}

.requiredTech > div {
    filter: drop-shadow(calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) calc( 0.2 * var(--baseSize)) black);
}

.requiredTech:hover > div {
    transform: scale(3);
    z-index: 2;
    background-color: #0185a3;
    border: solid calc( 0.05 * var(--baseSize)) #fff;
    cursor: pointer;
    box-shadow: inset calc(0.1* var(--baseSize)) calc(0.1* var(--baseSize)) calc(0.5* var(--baseSize)) rgb(231 247 255 / 50%);
}

.rewardTechs {
    display: flex;
    margin-top: calc(2* var(--baseSize));
}

.rewardTechs > .machineImage {
    position: relative;
    margin:0 calc(0.5* var(--baseSize));
}

.creatureImage {
    background-repeat: no-repeat;
    background-size: calc(var(--unit) * 6) calc(var(--unit) * 6);
    width: calc(var(--unit) * 6);
    height: calc(var(--unit) * 6);
}

.machineImage {    
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(var(--unit) * 8);
    height: calc(var(--unit) * 8);
}

.machineName {
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(-0.2* var(--baseSize));
    transform: translate(0, -100%);
    font-weight: bold;
    text-transform: capitalize;
    font-size: calc(1.2* var(--baseSize));
}

.creatureImage.creaturePart {
    height: calc(2* var(--unit));
}

.creatureImage.creaturePart_1 {
    background-position: top;
}

.creatureImage.creaturePart_2 {
    background-position: center;
}

.creatureImage.creaturePart_3 {
    background-position: bottom;
}

.closeTrees {
    position: absolute;
    right: 0;
    top: calc(3.5* var(--baseSize));
    transform: translate(0,-100%);
    color: #fff;
    cursor: pointer;
    font-weight: bold;
}

.closeTrees:hover {
    color:cyan;
}

.blackBack {
    background-color: #202020;
    background-image: radial-gradient(#0c0c0c calc( 0.3 * var(--baseSize)), #1f244a calc( 0.3 * var(--baseSize)), transparent calc( 0.4 * var(--baseSize))), linear-gradient(16deg, #45474a 0%, #0a0a0a 74%);
    background-repeat: repeat, no-repeat;
    background-size: calc(4* var(--baseSize)) calc(4* var(--baseSize)), cover;
    border-color:#008d8d !important;
}

.bluePrintBack {
    background-color: var(--printBack, #23487e);
    background-size: calc(10 * var(--baseSize)) calc(10 * var(--baseSize)), calc(10 * var(--baseSize)) calc(10 * var(--baseSize)), calc(2 * var(--baseSize)) calc(2 * var(--baseSize)), calc(2 * var(--baseSize)) calc(2 * var(--baseSize));
    background-position: -calc( 0.2 * var(--baseSize)) -calc( 0.2 * var(--baseSize)), -calc( 0.2 * var(--baseSize)) -calc( 0.2 * var(--baseSize)), -calc( 0.1 * var(--baseSize)) -calc( 0.1 * var(--baseSize)), -calc( 0.1 * var(--baseSize)) -calc( 0.1 * var(--baseSize));    
    background-image: linear-gradient(rgba(255, 255, 255, 0.3) calc( 0.2 * var(--baseSize)), transparent calc( 0.2 * var(--baseSize))), linear-gradient(90deg, rgba(255, 255, 255, 0.3) calc( 0.2 * var(--baseSize)), transparent calc( 0.2 * var(--baseSize))), linear-gradient(rgba(255, 255, 255, 0.1) calc( 0.1 * var(--baseSize)), transparent calc( 0.1 * var(--baseSize))), linear-gradient(90deg, rgba(255, 255, 255, 0.1) calc( 0.1 * var(--baseSize)), transparent calc( 0.1 * var(--baseSize)));
}

.shadowBack {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    background-image: repeating-linear-gradient(45deg, #303030 0, #303030 calc( 0.1 * var(--baseSize)), transparent 0, transparent 50%);
    background-size: 25px 25px;
    z-index: 7;
}

.machinePopup, .machineModal {
    position: absolute;
    top: calc(var(--y) * 1px);
    left: calc(var(--x) * 1px);
    --unit: calc(var(--baseSize) * 1.25);
    border: solid 1px #0095ff;
    padding: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 45);
    background-color: rgb(240 240 240 / 75%);
    box-shadow: calc(var(--baseSize) * 1) calc(var(--baseSize) * 1) calc(var(--baseSize) * 1.5) rgb(0 0 0 / 50%);
    z-index: 5;
}

.machinePopup {
    pointer-events:none;
    border: solid 1px cyan;
}

.machinePopupTitle {
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
}

.machinePopupContent {
    display: flex;
    flex-wrap: wrap;
}

.machinePopupInfo {
    font-size: calc(var(--baseSize) * 1.2);
    border-top: solid 1px cyan;
    padding-top: calc(var(--baseSize) * 1);
    margin-top: calc(var(--baseSize) * 1);
}

.machineModalQuestions .button {
    font-size: calc(1.3 * var(--baseSize));
    padding: calc(0.5 * var(--baseSize));
    margin-top: calc(0.5 * var(--baseSize));
}

.smartSplitterContent {
    display: inline-flex;
    --unit: calc(var(--baseSize) * 1);
    align-items: center;
}

.closeModal {
    position: absolute;
    top: calc(var(--baseSize) * -0.25);
    right: 0;
    transform: translate(0,-100%);
    color: #fff;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
    font-size: calc(var(--baseSize) * 1.5);
    cursor:pointer;
}

.closeModal:hover {
    filter: brightness(1.5);
}

.splitterPulldownWrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

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

.fluidNetworkStatus div {
    font-size: calc(var(--baseSize) * 1.3);
}

.screenShake {
  animation: shake 0.2s; 
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(0deg); }
  20% { transform: translate(-3px, 0px) rotate(0deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(0deg); }
  50% { transform: translate(-1px, 2px) rotate(0deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(0deg); }
  80% { transform: translate(-1px, -1px) rotate(0deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(0deg); }
}

#saveNotice {
    position: absolute;
    pointer-events: none;
    bottom: 1vh;
    right: 1vw;
    color:#000;
    z-index: 8;
}

#cloned {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0);
    box-shadow: 0 0 calc(2* var(--baseSize)) #000;
    padding: calc(1.4 * var(--baseSize)) calc(1.5 * var(--baseSize)) calc(0.5 * var(--baseSize)) calc(1.5 * var(--baseSize));
    box-sizing: border-box;
    border: solid calc( 0.1 * var(--baseSize)) #a0a0a0;
    border-top: none;
    border-right: none;
    border-radius: 0 0 calc(0.7 * var(--baseSize)) calc(0.7 * var(--baseSize));
    z-index: 2;
    pointer-events: none;
    color: #b4ff00;
    text-shadow: calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) #000, 0 0 calc(1 * var(--baseSize)) limegreen;
}

#cloned:after {
    content: "Cloned";
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(1.2 * var(--baseSize));
    color: #fff;
    font-variant: all-petite-caps;
    text-shadow: none;
    width: 100%;
    text-align: center;
}

#emergency {
    position: absolute;
    top: 0;
    left: 50%;
    box-shadow: 0 0 calc(2* var(--baseSize)) #000;
    padding: calc(1.4 * var(--baseSize)) calc(1.5 * var(--baseSize)) calc(0.5 * var(--baseSize)) calc(1.5 * var(--baseSize));
    box-sizing: border-box;
    border: solid calc( 0.1 * var(--baseSize)) #a0a0a0;
    border-top: none;
    border-right: none;
    border-radius: 0 0 calc(0.7 * var(--baseSize)) calc(0.7 * var(--baseSize));
    z-index: 2;
    pointer-events: none;
    color: #05d1d1;
    text-shadow: calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) #000, 0 0 calc(1 * var(--baseSize)) cyan;
    transform: translate(-50%, 0);
    text-align: center;
    --unit: calc(1* var(--baseSize));
    max-width: calc(40 * var(--baseSize));
}

.emergencyTitle {
    font-size: calc(4 * var(--baseSize));
    color: cyan;
}

#emergency .creatureImage {
    display: inline-block;
}

.emergencyRequirements {
    font-size: calc(4 * var(--baseSize));
    display: flex;
    justify-content: center;
    align-items: center;
}

#backToMenu {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-120%, 0);
    padding: calc(0.5* var(--baseSize)) calc(1* var(--baseSize));
    border-radius: 0 0 calc(1* var(--baseSize)) calc(1* var(--baseSize));
    border: solid 1px cyan;
    border-top: none;
}

#backToMenu img {
    width: calc(6 * var(--baseSize));
    height: calc(6 * var(--baseSize));
    filter: drop-shadow(calc(0.1 * var(--baseSize)) calc(0.1 * var(--baseSize)) 0 cyan);
    cursor:pointer;
}

#backToMenu:hover img {
    filter: drop-shadow(calc(0.1 * var(--baseSize)) calc(0.1 * var(--baseSize)) 0 cyan) brightness(1.2);
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    font-size: 5vw;
    text-shadow: 1px 1px 0 #fff;
}

.machinePopupContent .button {
    width: 100%;
    margin-top: calc(1 * var(--baseSize));
    padding: calc(0.5 * var(--baseSize));
}

#researchActions.canBuy, #researchActions.canBuy * {
    cursor: pointer;
}

#researchActions.canBuy:after {
    content: "";
    position: absolute;
    top: calc(6 * var(--baseSize));
    right: calc(1 * var(--baseSize));
    background: #f00;
    width: calc(1 * var(--baseSize));
    height: calc(1 * var(--baseSize));
    border-radius: 100%;
}

.combinedCreatureImage {
    display: flex;
    flex-direction: column;
}

#gameseed {
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 calc(2* var(--baseSize)) #000;
    padding: calc(0.5 * var(--baseSize)) calc(1.5 * var(--baseSize)) calc(1.5 * var(--baseSize)) calc(0.5 * var(--baseSize));
    box-sizing: border-box;
    border: solid calc( 0.1 * var(--baseSize)) #a0a0a0;
    border-bottom: none;
    border-left: none;
    border-radius: 0 calc(0.7 * var(--baseSize)) 0 0;
    z-index: 2;
    text-shadow: calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) calc( 0.1 * var(--baseSize)) #000, 0 0 calc(1 * var(--baseSize)) cyan;
    color: #05d1d1;
}

#gameseed:after {
    content: "Gamecode";
    position: absolute;
    top: calc(-1 * var(--baseSize));
    left: 0;
    font-size: calc(1.2 * var(--baseSize));
    color: #fff;
    font-variant: all-petite-caps;
    text-shadow: none;
    width: 100%;
    text-align: center;
}

.help {
    position: absolute;
    top: calc(16 * var(--baseSize));
    right: 0;
    width: calc(50 * var(--baseSize));
    height: calc(30 * var(--baseSize));
    display: flex;
    border-radius: calc(1.5 * var(--baseSize)) 0 0 calc(1.5 * var(--baseSize));
    box-shadow: calc(1 * var(--baseSize)) calc(1 * var(--baseSize)) calc(1.5 * var(--baseSize)) #000;
}

.helpText {
    position: absolute;
    top: 0;
    left: 0;
    padding: calc(1.5 * var(--baseSize));
    width: calc(31 * var(--baseSize));
    height: calc(30 * var(--baseSize));
    font-size: calc(1.5 * var(--baseSize));
    font-family: sans-serif;
    color: white;
    line-height: calc(2.5 * var(--baseSize));
    z-index: 2;
    box-sizing: border-box;
}

.help .helpImage {
    position: absolute;
    top:0;
    right: calc(-3 * var(--baseSize));
    background-image: url(img/cloneDoctor1.png);
    background-repeat: no-repeat;
    background-size: calc(30 * var(--baseSize));
    width: calc(30 * var(--baseSize));
    height: calc(30 * var(--baseSize));
    z-index:1;
    filter: drop-shadow(0 0 calc(2 * var(--baseSize)) black);
}

.gameover .help .helpImage {
    filter: drop-shadow(0 0 calc(3 * var(--baseSize)) white);
}

.helpText b.gamewon {
    font-size: calc(2.5 * var(--baseSize));
    text-align: center;
    display: inline-block;
    line-height: calc(3 * var(--baseSize));
}

.closeHelp {
    position: absolute;
    top: calc(0.5 * var(--baseSize));
    right: calc(1 * var(--baseSize));
    color: #fff;
    text-shadow: calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) #000;
    cursor: pointer;
    transition: all 0.5s;
    z-index: 3;
}

.closeHelp:hover {
    text-shadow: 0 0 calc(0.5 * var(--baseSize)) #f0f0f0;
}

.helpButton {
    position: absolute;
    width: calc(3 * var(--baseSize));
    height: calc(3 * var(--baseSize));
    z-index: 4;
    background: #f0f0f0;
    text-align: center;
    color: #000;
    border-radius: calc(0.5 * var(--baseSize));
    line-height: calc(2.5 * var(--baseSize));
    text-shadow: calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) #fff;
    cursor: pointer;
    transition: all 0.5s;
}

.helpButton.helpForward {
    bottom: calc(1 * var(--baseSize));
    right: calc(1 * var(--baseSize));
}

.helpButton.helpBack {
    bottom: calc(1 * var(--baseSize));
    left: calc(2 * var(--baseSize));
}

.helpButton:hover {
    filter:brightness(1.2);
    box-shadow: 0 0 calc(0.5 * var(--baseSize)) #fff;
}

.help.helpResearch {
    z-index:10;
}

.help .helpImage_1 {background-image: url(img/cloneDoctor1.png);}
.help .helpImage_2 {background-image: url(img/cloneDoctor2.png);}
.help .helpImage_3 {background-image: url(img/cloneDoctor3.png);}
.help .helpImage_4 {background-image: url(img/cloneDoctor4.png);}
.help .helpImage_5 {background-image: url(img/cloneDoctor5.png);}

.victoryMessage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: calc(3.5 * var(--baseSize));
    pointer-events: none;
}

.victoryTitle {
    text-shadow: calc(1 * var(--baseSize)) calc(1 * var(--baseSize)) calc(1 * var(--baseSize)) #000, 0 0 calc(5 * var(--baseSize)) cyan, 0 0 calc(1 * var(--baseSize)) #0072ff;
    font-size: calc(16 * var(--baseSize));
    font-family: 'Rubik Microbe', cursive;
}

#menu {
    position: absolute;
    top: calc(20 * var(--baseSize));
    left: calc(59 * var(--baseSize));
    width: calc(75 * var(--baseSize));
    height: calc(50 * var(--baseSize));
    background: #edbaba;
    padding: calc(5 * var(--baseSize)) calc(10 * var(--baseSize));
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: calc(1 * var(--baseSize));
    z-index: 2;
    background-image: url(img/skin.jpg);
    background-blend-mode: overlay;
    box-shadow: 0 0 calc(2* var(--baseSize)) #ffc3c3;
    color: #700101;
    border: solid calc(0.5 * var(--baseSize)) rgb(42 0 0 / 75%);
    border-top: 0;
    border-left: 0;
    text-align: center;
}

#menu .menuButton {
    display: none;
    width: calc(35 * var(--baseSize));
    height: calc(6 * var(--baseSize));
    line-height: calc(4 * var(--baseSize));
    font-size: calc(2 * var(--baseSize));
    text-transform: uppercase;
    margin-top: calc(4 * var(--baseSize));
}

#menu #menuTitle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-69%);
    color: #fff;
    font-size: calc(12 * var(--baseSize));
    white-space: nowrap;
    z-index: 2;
    font-family: 'Nosifer', cursive;
    pointer-events: none;
    
    animation: movearound 120s linear infinite;
    background-image: linear-gradient(to bottom, rgba(218,188,188,0) 0%,rgba(218,188,188,0.2) 63%,rgba(147,1,1,1) 100%), url(img/blood.jpg);
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    text-shadow: calc(0.5 * var(--baseSize)) calc(0.2 * var(--baseSize)) rgb(255 255 255 / 10%);
}

#mutantImage1 {
    position: absolute;
    background-image: url(img/mutant2.png);
    background-size: contain;
    width: calc(20 * var(--baseSize));
    height: calc(20 * var(--baseSize));
    background-repeat: no-repeat;
    left: calc(50 * var(--baseSize));
    top: calc(31 * var(--baseSize));
    transform: rotate(328deg);
    z-index: 1;
}

#mutantImage2 {
    position: absolute;
    background-image: url(img/mutant3.png);
    background-size: contain;
    width: calc(20 * var(--baseSize));
    height: calc(13 * var(--baseSize));
    background-repeat: no-repeat;
    left: calc(108 * var(--baseSize));
    top: calc(23 * var(--baseSize));
    z-index: 1;
}

#mutantImage3 {
    position: absolute;
    background-image: url(img/human.png);
    background-size: contain;
    width: calc(20 * var(--baseSize));
    height: calc(20 * var(--baseSize));
    background-repeat: no-repeat;
    left: calc(125 * var(--baseSize));
    top: calc(69 * var(--baseSize));
    z-index: 1;
    transform: rotate(170deg);
}

#mutantImage4 {
    position: absolute;
    background-image: url(img/mutant2.png);
    background-size: contain;
    width: calc(20 * var(--baseSize));
    height: calc(20 * var(--baseSize));
    background-repeat: no-repeat;
    left: calc(75 * var(--baseSize));
    top: calc(66 * var(--baseSize));
    z-index: 1;
    transform: rotate(363deg);
}

#menu .button {
    border: solid calc( 0.1 * var(--baseSize)) #cd0000;
    border-bottom: solid calc(0.5 * var(--baseSize)) #cd0000;
    border-right: solid calc(0.4 * var(--baseSize)) #9f0000;
    padding: calc(1 * var(--baseSize));
    background: linear-gradient(180deg, #9d0000, #f73a0e57);
    margin-bottom: 0;
    box-sizing: border-box;
}

#menu .button:active {
    border-bottom: solid calc(0.2 * var(--baseSize)) #cd0000;
}

#menuWrap > div {
    filter: drop-shadow(calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) #00000075);
}

#menuOptions {
    padding-top: calc(4 * var(--baseSize));
}

#loadMenu {
    display: none;
    position: absolute;
    background: rgb(255 181 181 / 90%);
    border: solid 1px #f00;
    border-radius: calc(1 * var(--baseSize));
    height: calc(53 * var(--baseSize));
    width: calc(40 * var(--baseSize));
    padding: calc(2 * var(--baseSize)) calc(5 * var(--baseSize));
    backdrop-filter: blur(2px);
    top: calc(2 * var(--baseSize));
}

#loadMenuTitle {
    font-size: calc(4 * var(--baseSize));
}

#loadMenuText {
    font-size: calc(1.5 * var(--baseSize));
}

#closeLoadMenu {
    font-size: calc(1.5 * var(--baseSize));
    color: #fff;
    position: absolute;
    top: calc(-2.5 * var(--baseSize));
    right: calc(0.5 * var(--baseSize));
    text-shadow: 1px 1px 1px black;
    cursor: pointer;
    transition: all 0.5s;
}

#closeLoadMenu:hover {
    filter:invert(1);
}

#loadOptions {
    height: calc(30 * var(--baseSize));
}

input#seedInput {
    outline: #f00;
    border: solid calc(0.3 * var(--baseSize)) #ff9393;
    font-size: calc(2 * var(--baseSize));
    border-radius: calc(0.5 * var(--baseSize));
    margin-bottom: calc(1 * var(--baseSize));
}

#loadOptions {
    height: calc(34.5 * var(--baseSize));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.storedGame {
    border: solid 1px #a00;
    padding: calc(1 * var(--baseSize));
    width: 100%;
    margin: calc(0.5 * var(--baseSize));
    background: #ffffff;
    border-radius: calc(0.25 * var(--baseSize));
    cursor: pointer;
    transition:all 0.5s;
}

.storedGame:hover {
    color:#ffffff;
    background: #700101;
}

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

#other {
    position: absolute;
    top: calc(1 * var(--baseSize));
    left: calc(1 * var(--baseSize));
}

#other a {
    cursor: pointer;
    color: #720523;
    text-transform: capitalize;
    font-family: sans-serif;
    text-decoration: none;
}

#other a:hover {
    text-decoration: underline;
    color:#000;
}

#playerName {
    position: absolute;
    top: calc(1 * var(--baseSize));
    right: calc(1 * var(--baseSize));
    cursor: pointer;
    color: #720523;
}