/*
Copyright (C) 2020 Jan-Dirk van Dingenen

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

*/

@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

html {
    background-color: #303030;
    background-image: url(img/rust.jpg);
    background-size: cover;
    cursor:default;
}

body {
    padding:0;
    margin:0;
    overflow: hidden;
}

#game {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.factory {
    position: relative;
    display: inline-block;
    margin: calc(var(--size) * 1) calc(var(--size) * 2.3) calc(var(--size) * 1) calc(var(--size) * 2);
    width: calc(var(--size) * var(--facWidth));
    height: calc(var(--size) * var(--facHeight));
    border-left: solid calc(var(--size) * 0.1) #58606b;
}

.factory:before {
    content: "";
    position: absolute;
    width: 100%;
    background: #303030;
    height: var(--size);
    top: calc(var(--size) * -1);
    z-index: 101;
    pointer-events: none;
    background-image: url(img/rust.jpg);
    background-size: cover;
}

.factory:after {
    content: "";
    position: absolute;
    width: 100%;
    background: #303030;
    height: var(--size);
    top: calc(var(--size) * var(--facHeight));
    z-index: 101;
    pointer-events: none;
    background-image: url(img/rust.jpg);
    background-size: cover;
}

.factory.factory1 {
    transform: scaleX(-1);
}

.factory.factory1 .machineName {
    transform: scaleX(-1);
}

.prodFeed, .prodFeedBack {
    position: absolute;
    width: calc(var(--size) * 2);
    height: var(--size);
    left: calc(var(--size) * -2);
    top: 0;
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

.prodFeedBack {
    z-index: 0;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgb(35 35 37 / 0.5);
    border-bottom: solid 1px #303030;
    background-color: #8a94a1;
    background-image: url(img/rust2.png);
}

#prodFinish {
    position: absolute;
    width: calc(var(--size) * 1);
    height: calc(var(--size) * var(--facHeight));
    left: calc(var(--size) * (var(--facWidth) + 1));
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    background-color: #d9d9d9;
    border-top: solid calc(var(--size) * 0.07) #545454cc;
    border-left: solid calc(var(--size) * 0.07) #545454cc;
    border-right: solid calc(var(--size) * 0.08) #e9e9e9cc;
    border-bottom: solid calc(var(--size) * 0.08) #e9e9e9cc;
    background-image: url(img/rust2.png);
}

.machine {
    position: absolute;
    width: var(--size);
    height: var(--size);
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgb(35 35 37 / 0.5);
    transition: calc(var(--delay) * 2) all;
    top: calc(var(--size) * var(--y));
    left: calc(var(--size) * var(--x));
    background-color: #8a94a1;
}

.machine .innerMachine {    
    position: relative;
    background-size: contain;
    width: 100%;
    height: 100%;
    transform: rotate(calc(var(--rot) * 1deg));
    transition: calc(var(--delay) * 2) all;
    z-index:1;
}

.machine .machineName {
    position: absolute;
    bottom: 0;
    right: calc(var(--size) * 0.05);   
    z-index: 3;
    color: #000;
    text-shadow: 1px 1px 1px #cdcdcd;    
    text-transform: capitalize;
    font-family: monospace;
    font-size: calc(var(--size) * 0.14);    
    font-variant: small-caps;
}

.machineIcon {
    display: inline-block;
    background-size: contain;
    width: calc(var(--size) * 0.13);
    height: calc(var(--size) * 0.13);
    transform: rotate(calc(var(--rot) * 1deg + -90deg));
    transition: calc(var(--delay) * 2) all;
    position: relative;
    top: calc(var(--size) * 0.025);
    background-image: url(img/arrow.png);
    margin-right: calc(var(--size) * 0.04);
    filter: invert(1);
}

.machine_wall .machineIcon {
    display: none;
}

.machine_wall .machineName {
    color: #cdcdcd;
    text-shadow: 1px 1px 1px #000;
}

.machine_trash  .innerMachine {    
    background-image: url(img/trash.png);
}

.machine .innerMachine {    
    background-image: url(img/conveyor.png);
    background-position-x: calc(var(--size) * var(--turn));
}

.machine .productContainer:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background-size: contain;
    filter: brightness(1.1) drop-shadow(calc(var(--size) * 0.05) calc(var(--size) * 0.0) calc(var(--size) * 0.02) black);
}

.machine:hover .productContainer:after {
    opacity: 0.5;
}

.machine.machine_shapesquare .productContainer:after {
    background-image: url(img/square.png);
}

.machine.machine_shapecircle .productContainer:after {
    background-image: url(img/circle.png);
}

.machine.machine_cutter .productContainer:after {
    background-image: url(img/cutter.png);
}

.machine.machine_painter .productContainer:after {
    background-image: url(img/painter.png);
}

.machine.machine_combiner .productContainer:after {
    background-image: url(img/combiner.png);
}

.machine_wall  .innerMachine {    
    background-image: url(img/wall.png);
    background-position-x: 0;
}
/*
.machine.machine_splitter .innerMachine {
    background-image: url(img/splitter.png);
}

.machine_splitter .innerMachine {
    transform: scaleY(var(--flip)) rotate(calc(var(--rot) * 1deg));
    background-position-y: calc(var(--size) * var(--turn) * -1);
    background-position-x: 0;
}*/

.machine.machine_splitter .innerMachine {
    background-image: url(img/splitterh2.png);
}
.machine_splitter .innerMachine {
    transform: scaleY(var(--flip)) rotate(calc(var(--rot) * 1deg));
    background-position-y: calc(var(--size) * var(--turn) * 1);
    background-position-x: 0;
    background-size: 100%;
}

.machine.machine_splitter .innerMachine:after {
    content: "";
    background-image: url(img/splitterh1.png);
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background-position-y: calc(var(--size) * var(--turn) * -1);
    background-position-x: 0;
    background-size: 100%;
    z-index: 2;
    transition: calc(var(--delay) * 2) all;
}

.machine_splitter .machineIcon {
    transform: scaleY(var(--flip)) scaleX(var(--flip)) rotate(calc(var(--rot) * 1deg - 180deg));
}

.machine .productContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    z-index:2;
    line-height: 0;
    font-size: 0;
    justify-content: center;
    align-items: center;
}

.machine:not(.machine_trash):not(.machine_wall) {
    cursor:pointer;
}

.machine.machine_trash .productContainer {
    z-index: 0;
    overflow:hidden;
}

.machine:not(.machine_trash):not(.machine_wall):hover:after {
    content: "";
    background-image: url(img/rotate.png);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    top: 0;
    left: 0;
    opacity: 0.5;
    pointer-events: none;
    animation: rotate 3s infinite linear;
    background-size: calc(var(--size) * 0.5);
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 calc(var(--size) * 0.02) goldenrod);
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}


.arrow {
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: calc(var(--size) * var(--y));
    left: calc(var(--size) * var(--x));
    background-image: url(img/arrow.png);
    background-size: calc(var(--size) * 0.25);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: calc(var(--size) * 0.65);
    cursor: pointer;
    filter: opacity(0.25);
    z-index:102;
}

.arrow.arrowDown {
    top: calc(var(--size) * -1);
}

.arrow.arrowUp {
    top: calc(var(--size) * var(--facHeight));
    transform: rotate(180deg);
}

.arrow.arrowLeft {
    left: calc(var(--size) * var(--facWidth));
    transform: rotate(90deg);
}

.arrow.arrowRight {
    left: calc(var(--size) * -1);
    transform: rotate(270deg);    
}

.arrow:hover {
    filter: brightness(0.8) sepia(1) brightness(1) hue-rotate(-15deg);
}

.prod {
    background-color: #0000d5;
    width: calc(var(--size) * 0.44);
    height: calc(var(--size) * 0.44);
    margin: calc(var(--size) * 0.02);
    display: inline-block;
    background-image: url(img/prod.png);
    background-size: 110%;
    box-sizing: border-box;
    border: solid 1px rgb(255 255 255 / 0.25);
    box-shadow: calc(var(--size) * 0.015) calc(var(--size) * 0.015) 0 calc(var(--size) * 0.01) #0b0b4a;
    border-radius: calc(var(--size) * 0.015);
    filter: saturate(1.5);
    
    text-align: center;
    line-height: 100%;
    color: #fff;
    font-size: 18px;
}

.prod.prod_size_0 {
    width: calc(var(--size) * 0.22);
    height: calc(var(--size) * 0.22);
    margin: calc(var(--size) * 0.006) calc(var(--size) * 0.01);
}

.prod.prod_size_-1 {
    width: calc(var(--size) * 0.11);
    height: calc(var(--size) * 0.11);   
}

.prod.prod_part {
    margin: calc(var(--size) * -0.02);
    display: inline-block;
}

.prod.prod_colour_1 {
    background-color: #df0000;
    box-shadow: calc(var(--size) * 0.015) calc(var(--size) * 0.015) 0 calc(var(--size) * 0.01) #6b0d0d;
}

.prod.prod_shape_1 {
    border-radius: 100%;
    box-shadow: none;
}

.prod_container {
    display: block;
    line-height: 0;
    font-size: 0;
    margin: calc(var(--size) * 0.05);
    max-width: calc(var(--size) * 0.82);
}

button#turn {
    position: absolute;
    top: calc(var(--size) * -0.75);
    left: 0;
    font-size: calc(var(--size) * 0.15);
    padding: calc(var(--size) * 0.15);
    cursor: pointer;
    width: calc(var(--size) * 1);
    white-space: nowrap;
    text-align: center;
    font-family: 'Black Ops One', cursive;
    outline: none;
}

.orders {
    position: absolute;
    bottom: calc(var(--size) * -1);
    left: 50%;
    height: calc(var(--size) * 1.5);
    background-color: rgb(255 112 17);
    transform: translate(-50%,100%);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(img/rust2.png);
}

.playerCount1 .orders {
    left: calc(var(--size) * -2.8);
}

.hand {
    position: absolute;
    bottom: calc(var(--size) * -1);
    left: calc(var(--size) * -0.1);
    height: calc(var(--size) * 1.5);
    background-color: rgb(217 217 217 / 5%);
    transform: translate(3%,100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hand1 .orderScore {
    transform: scaleX(-1);
}

.orderCard .prod_container {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.orderCard {
    position: relative;
    background: #f0f0f0;
    height: calc(var(--size) * 1.3);
    margin: 0 calc(var(--size) * 0.1);
    width: calc(var(--size) * 1);
    border-radius: calc(var(--size) * 0.05);
    padding: calc(var(--size) * 0.05);
    box-sizing: border-box;
    box-shadow: calc(var(--size) * 0.02) calc(var(--size) * 0.02) calc(var(--size) * 0.05) #000;
    background-image: url(img/rust2.png);
}

.orderBlockContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--size) * 0.7);
}

.orderScore {
    text-align: center;
    font-family: 'Black Ops One', cursive;
    font-size: calc(var(--size) * 0.2);
}

.orderText {
    text-shadow: 1px 1px 1px #cdcdcd;
    text-transform: capitalize;
    font-family: monospace;
    font-size: calc(var(--size) * 0.15);
    font-variant: all-small-caps;
    line-height: calc(var(--size) * 0.12);
    text-align: center;
}

.prodFeedControl {
    position: absolute;
    top: calc(var(--size) * -0.3);
    left: calc(var(--size) * -0.25);
    background-color: #101010;
    background-image: url(img/gate.png);
    background-size: contain;
    filter: invert(1);
    background-repeat: no-repeat;
    background-position: center;
    width: calc(var(--size) * 0.25);
    height: calc(var(--size) * 0.25);
    z-index: 2;
    border-radius: calc(var(--size) * 0.05);
    border: outset 2px #9a9898;
    outline:none;
    cursor:pointer;
}

.prodFeedControl:hover {
    filter: invert(1) brightness(0.8) sepia(1) brightness(1) hue-rotate(-15deg);
}

.prodFeedControl:active  {
    border-bottom:outset 1px #9a9898;
    transform: translate(0, 1px);
}

.prodFeedControl.prodFeedClosed:after {
    content: "";
    position: absolute;
    background-color: #58606b;
    width: calc(var(--size) * 0.1);
    height: calc(var(--size) * 1.00);
    bottom: calc(var(--size) * -0.065);
    left: calc(var(--size) * 0.13);
    z-index: 10000;
    transform: translate(0, 100%);    
    box-sizing: border-box;
    border: solid 1px #303030;
    filter: invert(1);
}

.handMessage {
    position: absolute;
    top: calc(var(--size) * -0.2);
    color: #f0f0f0;
    text-shadow: 1px 1px 1px #353535;
    text-transform: capitalize;
    font-family: monospace;
    font-size: calc(var(--size) * 0.14);
    font-variant: small-caps;
    white-space: nowrap;
}

.factoryScore {
    position: absolute;
    left: calc(var(--size) * -1);
    top: calc(var(--size) * -1);
    pointer-events: none;
    z-index: 3;
    color: #f0f0f0;
    text-shadow: 1px 1px 1px #353535;
    text-transform: capitalize;
    font-family: monospace;
    font-size: calc(var(--size) * 0.5);
    font-variant: small-caps;
    white-space: nowrap;
    transform: translate(-50%,0);
}

.factory1 .factoryScore {
    transform: translate(-50%,0) scaleX(-1);
}


#toastContainer {
    position: absolute;
    top: 0;
    left: calc( var(--size) * 6);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 90vh;
    overflow-y:hidden;
}

.toast {
    cursor: pointer;
    width: calc(var(--size) * 3);
    text-align: center;
    padding: calc(var(--size) * 0.1) calc(var(--size) * 0.05);
    border-radius: calc(var(--size) * 0.1);
    margin-top: calc(var(--size) * 0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    border: double 0.3vw #8a94a1;
    transition: all 250ms;
    background-color: #f0f0f0;
    font-size: calc(var(--size) * 0.2);
    text-shadow: 1px 1px 1px #cdcdcd;
    text-transform: capitalize;
    font-family: monospace;
    font-variant: small-caps;
}

.toast_error {
    background-color: #f17c7c;
    color: hsl(0deg 100% 41%);
    text-shadow: 1px 1px 1px #fcdcdc;
}

.toast_info {
    background-color: #baffb9;
    color: rgb(42, 72, 37);
}

.toast_warning {
    background-color: #fffb84;
    color: rgb(72, 57, 37);
}

.arrow.activeControl {
    filter: drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod);
}

.activeControl .innerMachine {
    filter: drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod);
}

.arrow.activeControl:hover {
    filter: brightness(0.8) sepia(1) brightness(1) hue-rotate(-15deg) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod);;
}

.prodFeedControl.activeControl {
    filter: invert(1) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod) drop-shadow(0 0 1px goldenrod);
}

.ghost {
    visibility: hidden;
}

.mover {
    position: absolute;
    z-index:10;
}

.inactive {
    pointer-events:none;
    opacity: 0.7;
}

#menu {
    position: absolute;
    top: calc(var(--size) * 1);
    transform: translate(25%,0);
    width: 70vw;
    height: 80vh;
    background-color: #1e1e1e;
    padding: calc(var(--size) * 0.15);
    box-sizing: border-box;
    color: #e0e0e0;
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--size) * 0.15);
    z-index: 3;
    box-shadow: calc(var(--size) * 0.05) calc(var(--size) * 0.1) calc(var(--size) * 0.4) #000;
    background-image: url(img/rust2.png);
}

#menuTitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    top: 0;
    font-size: calc(var(--size) * 0.65);
    font-family: 'Black Ops One', cursive;
    filter: drop-shadow(0 0 2px #FF7011) drop-shadow(0 0 2px #FF7011) drop-shadow(0 0 2px #000);
}

button#startGame {
    position: absolute;
    bottom: calc(var(--size) * 0.15);
    left: 50%;
    transform: translate(-50%,0);
    z-index: 100;
    padding: calc(var(--size) * 0.15);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    font-size: calc(var(--size) * 0.2);
    font-family: 'Black Ops One', cursive;
    outline: none;
}

button#startGame:hover {
    color: #FF7011;
}

#help {
    width: 50%;
    overflow-y: auto;
    height: calc(80vh - (var(--size) * 1));
    font-family: monospace;
    font-variant: small-caps;
    font-size: calc(var(--size) * 0.17);
    line-height: calc(var(--size) * 0.17);
    box-sizing: border-box;
    padding-right: calc(var(--size) * 0.17);
}

#highscoresWrapper {
    width: 47%;
    overflow-y: auto;
    height: calc(80vh - (var(--size) * 1));
    font-family: 'Black Ops One', cursive;
}

.menuSubTitle {
    font-size: calc(var(--size) * 0.3);
    text-align: center;
    font-family: 'Black Ops One', cursive;
    filter: drop-shadow(0 0 2px #003) drop-shadow(0 0 2px #666) drop-shadow(0 0 2px #000);
}


#highscores {
    display: grid;
    grid-template-columns: 2fr 15fr 3fr 3fr;
}

#menu .machine {
    pointer-events: none;
    position: relative;
    display: inline-block;
    float: left;
    margin: 0 calc(var(--size) * 0.1);
}

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

.machineWrapper {
    width: calc(var(--size) * 4.5);
    display: inline-block;
    min-height: calc(var(--size) * 1.2);
    margin-bottom: calc(var(--size) * 0.1);
}

.gameover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 200;
    background: #fff;
    padding: calc(var(--size) * 0.2);
    box-shadow: calc(var(--size) * 0.1) calc(var(--size) * 0.1) calc(var(--size) * 0.2) #000;
    display: flex;
    flex-direction: column;
    font-family: 'Black Ops One', cursive;
    text-align: center;
    border: solid 1px #ff6600;
    background-image: url(img/rust2.png);
}

.gameoverTitle {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    transform: translate(0,-100%);
    font-size: calc(var(--size) * 0.4);
    line-height: calc(var(--size) * 0.2);
    color: #000;
    text-shadow: calc(var(--size) * 0.025) calc(var(--size) * 0.025) calc(var(--size) * 0.025) #ee6e19;
    white-space: nowrap;
}

button.restartGame {
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    font-size: calc(var(--size) * 0.2);
    font-family: 'Black Ops One', cursive;
    padding: calc(var(--size) * 0.15);
    margin-top: calc(var(--size) * 0.3);
    border: inset calc(var(--size) * 0.05) #b9b9b9;
    outline: none;
}

button.restartGame:hover {
    color: #FF7011;
    border: outset calc(var(--size) * 0.05) #b9b9b9;
}

button.restartGame:active {
    border-bottom-width: 1px;
    transform: translate(0,inset calc( (var(--size) * 0.05) - 1px));
    margin-top: calc( (var(--size) * 0.35) - 1px);
}

.cog {
    position: absolute;
    top:calc(var(--size) * var(--cogY));
    left:calc(var(--size) * var(--cogX));
    z-index: 0;
    background-image: url(img/cog.svg);
    width: calc(var(--size) * var(--cogSize));
    height: calc(var(--size) * var(--cogSize));
    filter: drop-shadow(calc(var(--size) / 100 * var(--cogSize)) calc(var(--size) / 50 * var(--cogSize)) calc(var(--size) / 400 * var(--cogSize)) #222);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: rotate calc(var(--cogSize) * 20s) infinite linear;
}

#playerName {
    top: 10px;
    position: absolute;
    right: 10px;
    color: #fff;
    font-size: 3vh;
    font-family: monospace;
    cursor:pointer;
    font-variant: small-caps;
}

#playerName:hover {
     color: #ff6f0f;
}

#others {
    font-size: 2vh;
    font-family: monospace;
    position: absolute;
    left: 0.5vh;
    top: 0.1vh;
}

#others a {
    color: #f0f0f0;
    font-variant: small-caps;
}

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

::-webkit-scrollbar {
    width: calc(var(--size) * 0.1);
    height: calc(var(--size) * 0.15);
}
 
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 calc(var(--size) * 0.05) rgb(0 0 0 / 85%);
    background-color: rgb(33 32 32 / 61%);
}
 
::-webkit-scrollbar-thumb {
    background-color: rgb(49 49 49 / 50%);
    background: linear-gradient(to right, rgb(25 25 25) 0%,rgb(55 55 55) 25%,rgb(80 80 80) 50%,rgb(55 55 55) 81%,rgb(23 23 23) 100%);
    box-sizing: border-box;
    border-top: solid 2px #7f79794d;
    border-bottom: solid 2px #0a0a0acc;
    border-radius: 15% 15% 0 0;
}


:not(input)::selection, button::selection {
  background: transparent;
}
:not(input)::-moz-selection, button::-moz-selection {
  background: transparent; 
}