/*
 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=Megrim&display=swap');
@font-face {
    font-family: 'Agency FB';
    src: url('AgencyFB-Bold.woff2') format('woff2'), url('AgencyFB-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html {
    background-image: url(img/spaceBack.jpg);
    background-position: center;
    background-size: cover;
    background-color: #000;
    font-family: 'Agency FB';
    cursor:default;
    width: 100vw;
    height: 100vh;
    scrollbar-width: none;
}

body {
    margin: 0;
    --cubeSize: calc(var(--baseSize) * 0.8);
}

.button {
    position: relative;
    cursor: pointer;
    padding: calc(var(--baseSize) * 0.1);
    background-image: url(img/buttonMiddle.png);
    box-sizing: border-box;
    font-size: calc(var(--baseSize) * 0.4);
    color: transparent;
    background-size: contain, contain, contain;
    background-position: center;
    background-repeat: repeat-x;
    height: calc(var(--baseSize) * 0.7);
    filter: drop-shadow(0 0 calc(var(--baseSize) * 0.08) cyan) drop-shadow(calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.15) black);
}

.button:before {
    content: "";
    top: 0;
    left: calc(var(--baseSize) * -0.5);
    position: absolute;
    height: 100%;
    background-image: url(img/buttonLeft.png), url(img/buttonRight.png);
    width: calc( 100% + (var(--baseSize) * 0.5));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left, top right;
    transform: translate(calc(var(--baseSize) * 0.25), 0 );
}

.button:after {
    position: absolute;
    content: attr(title);
    color: #fff;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: font-size 300ms;
    white-space: nowrap;
}

.button:hover:after {
    font-size: calc(var(--baseSize) * 0.5);
}

.playerButton {
    cursor: pointer;
    background-image: url(img/button3.png);
    box-sizing: border-box;
    border-radius: calc(var(--baseSize) * 0.08);
    font-size: calc(var(--baseSize) * 0.4);
    color: transparent;
    background-size: 100% 100%;
    width: calc(var(--baseSize) * 1.1);
    height: calc(var(--baseSize) * 0.8);
    box-shadow: 0 0 calc(var(--baseSize) * 0.2) cyan;
}

.playerButton:after {
    position: absolute;
    content: attr(title);
    color: #fff;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: font-size 300ms;
    white-space: nowrap;
    text-shadow: 0 0 1px #00fff8, 0 0 1px #00fff8;
}

.playerButton:hover:after {
    text-shadow: 1px 1px #000;
    font-size: calc(var(--baseSize) * 0.5);
}

.playerButton:hover {
    transform: scale(1.1);
    z-index:2;
}

::-webkit-scrollbar {
    width: calc(var(--baseSize) * 0.125);
    height: calc(var(--baseSize) * 0.125);
}
::-webkit-scrollbar-thumb {
    border-radius: calc(var(--baseSize) * 0.2);
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.1) #494056;
    background-color: rgb(110 159 230 / 67%);
}
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.1) rgba(0,0,0,0.8);
}

#game {
    display: flex;
    justify-content: space-evenly;
    height: 100vh;
    width: 100vw;
    z-index:1;
}

#game:before, #menu:before {
    content: "";
    height: 100vh;
    width: 100vw;
    background-image: url(img/bordertl.png), url(img/bordertr.png), url(img/borderbl.png) , url(img/borderbr.png), url(img/borderbm.png), url(img/bordertm.png), url(img/borderlm.png), url(img/borderrm.png);
    background-size: calc(var(--baseSize) * 3.5);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y , repeat-y;
    background-position: top left, top right, bottom left, bottom right, bottom left, top left, top left, top right;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

#menu {
    background-image: url(img/AOG_FrontPanel.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 1) #04050a;
    border: solid 2px #030307;
    box-sizing: border-box;
    padding: calc(var(--baseSize) * 1.5);    
    z-index: 2;
}

#menu, #menu:before, .videoPlayer {
    height: calc(var(--baseSize) * 15);
    width: calc(var(--baseSize) * 22);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: calc(var(--baseSize) * 0.7);
}

.videoPlayer #myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.1) #000);
}

.clickToPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--baseSize) * 2) 0 calc(var(--baseSize) * 2) calc(var(--baseSize) * 2.5);
    border-color: transparent transparent transparent rgb(255 255 255);
    opacity: 0.5;
    cursor: pointer;
    transition: all calc(var(--animSpeed) * 0.5);
}

#closeVideo {
    position: absolute;
    top: calc(var(--baseSize) * 0);
    right: calc(var(--baseSize) * -2.5);
    color: #fff;
    font-size: calc(var(--baseSize) * 1);
    z-index: 1;
    cursor: pointer;
    transition: all calc(var(--animSpeed) * 0.5);
    opacity:0;
}

.videoPlayer:hover #closeVideo, .clickToPlay:hover  {
    filter: brightness(2) ;
    opacity:1;
}

#menu.canTrans, #menu.canTrans:before {
    transition: all var(--animSpeed);
    transition-timing-function: linear;
}
    

#menu #menuHeader {
    height: calc(var(--baseSize) * 2.3);
    top: calc(var(--baseSize) * -0.5);
    left:0;
}

#gameDesigner {
    position: absolute;
    background-image: url(img/gamedesigner.png);
    width: calc(var(--baseSize) * 5);
    height: calc(var(--baseSize) * 1);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: calc(var(--baseSize) * -0.1);
    left: 50%;
    transform: translate(-50%, 25%);
}

#playGame {
    position: absolute;
    bottom: calc(var(--baseSize) * 1.1);
    left: 50%;
    width: calc(var(--baseSize) * 9);
    height: calc(var(--baseSize) * 1.25);
    font-size: calc(var(--baseSize) * 1);
    transform: translate(-50%,0);
}

#playGame:hover:after {
    font-size: calc(var(--baseSize) * 1.5);
}

#playGame.button:before {
    content: "";
    top: 0;
    left: calc(var(--baseSize) * -1);
    position: absolute;
    height: calc(var(--baseSize) * 1.22);
    background-image: url(img/buttonLeft.png), url(img/buttonRight.png);
    width: calc( 100% + (var(--baseSize) * 1));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left, top right;
    transform: translate(calc(var(--baseSize) * 0.5), 0 );
}

#playGame.button:after {
    position: absolute;
    content: attr(title);
    color: #fff;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: font-size 300ms;
    white-space: nowrap;
    text-shadow: calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) #00fff8, 0 0 calc(var(--baseSize) * 0.05) #00fff8;
}

/*Switch game border per player*/
#game.switchBorders.turnPlayer_2:before {
    filter: hue-rotate(264deg);
}

#game.switchBorders.turnPlayer_1:before {
    filter: hue-rotate(168deg) brightness(1.3);
}

#game.switchBorders.turnPlayer_4:before {
    filter: hue-rotate(117deg) saturate(1.5);
}

#game.switchBorders.turnPlayer_null:before {
    filter: hue-rotate(75deg);
}

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

.toast .icon {
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(calc(var(--baseSize) * 0.01) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.075) black);
}
.toast .playerIdeology {
    position: relative;
    display: inline-block;
    width: calc(var(--baseSize) * 0.75);
    height: calc(var(--baseSize) * 0.75);
    right: unset;
}

.toast .planet {
    position: relative;
    display: inline-flex;
    --baseSize: calc(var(--baseSizeCopy) * 0.8);
    vertical-align: bottom;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    --cubeSize: calc(var(--baseSize) * 0.4);
    filter: grayscale(1);
}

#header, #menuHeader {
    background-image: url(img/header.png);
    background-position: center;
    background-size: contain;
    width: 100%;
    background-repeat: no-repeat;
    height: calc(var(--baseSize) * 1.1);
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

#verticalWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(var(--baseSize) * var(--baseWidth));
    height: 100vh;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding-bottom: calc(var(--baseSize) * 0.9);
    padding-top: calc(var(--baseSize) * 0.35);
}

#galaxyHandContainer {
    width: 100%;
}

#council {
    background-image: url(img/congress.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    height: calc(var(--baseSize) * 3.4);
    width: calc(var(--baseSize) * 4.85);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);
    display:flex;
    box-sizing: border-box;
    padding-top: calc(var(--baseSize) * 1.75);
    border-radius: calc(var(--baseSize) * 0.1);
}

.councilZoom {
    --baseSize: calc(var(--baseSizeCopy) * 2);
    position: absolute;
    right: 0;
    bottom: 0;
}

.tradeZoom .zoomClose, .councilZoom .zoomClose {
    font-size: calc(var(--baseSizeCopy) * 0.7);
    top: 0;
}

.councilSlot {
    position: relative;
    width: calc(var(--baseSize) * 0.6);
    height: calc(var(--baseSize) * 0.6);
    display: inline-block;
    margin-left: calc(var(--baseSize) * 0.3);
    margin-right: calc(var(--baseSize) * 0.035);
    --cubeSize: calc(var(--baseSize) * 0.7);    
}

.councilSlot .actionCube {
    margin: 0;
    transform: rotate(2deg) translate(calc(var(--cubeSize) * -0.05), 0);
}

#anomalies {
    background-image: url(img/anomalies.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    height: calc(var(--baseSize) * 3.4);
    width: calc(var(--baseSize) * 4.85);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);
    --cubeSize: calc(var(--baseSize) * 0.8);
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: calc(var(--baseSize) * 0.7);
    border-radius: calc(var(--baseSize) * 0.1);
}

#anomalies .actionCube {
    margin: 0;
    margin-left: calc(var(--cubeSize) * 0.05);
}

#trades {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: calc(var(--baseSize) * 3.4);
    align-items: flex-end;
    width: 100%;
    padding-left: calc(var(--baseSize) * 1.25);
    box-sizing: border-box;
    margin-bottom: calc(var(--baseSize) * 0.1);
}

#trades > div {
    --baseSize: calc(var(--baseSizeCopy) * 1.1);
}

.tradeCard {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(var(--baseSize) * 4.53);
    height: calc(var(--baseSize) * 3.4);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);    
    box-sizing: border-box;
    padding-top: calc(var(--baseSize) * 1.82);
    padding-left: calc(var(--baseSize) * 0.46);
    border-radius: calc(var(--baseSize) * 0.1);
}

.tradeCard.tradeId_0 {background-image: url(img/trade0.jpg);}
.tradeCard.tradeId_0b {background-image: url(img/trade0b.jpg);}
.tradeCard.tradeId_1 {background-image: url(img/trade1.jpg);}
.tradeCard.tradeId_1b {background-image: url(img/trade1b.jpg);}
.tradeCard.tradeId_2 {background-image: url(img/trade2.jpg);}
.tradeCard.tradeId_2b {background-image: url(img/trade2b.jpg);}
.tradeCard.tradeId_3 {background-image: url(img/trade3.jpg);}
.tradeCard.tradeId_3b {background-image: url(img/trade3b.jpg);}
.tradeCard.tradeId_4 {background-image: url(img/trade4.jpg);}
.tradeCard.tradeId_4b {background-image: url(img/trade4b.jpg);}

.tradeZoom {
    --baseSize: calc(var(--baseSizeCopy) * 2);
    position: absolute;
    left: 0;
    bottom: 0;
}

.tradeChoice.active {
    box-sizing: border-box;
    transition: background calc(var(--animSpeed) * 1);
    padding-left: calc(var(--baseSize) * 0.1);
    border: solid calc(var(--baseSize) * 0.02) rgb(119 221 255 / 90%);
    backdrop-filter: brightness(1.1);
    cursor: pointer;
    background: radial-gradient(ellipse at center, rgba(119,136,255,0) 0%,rgba(119,136,255,0.0) 50%,rgba(119,136,255,0.7) 100%);
}

.tradeChoice.active:hover {
    background: rgb(119 255 255 / 10%);
    border: solid calc(var(--baseSize) * 0.02) rgb(119 221 255 / 90%);
    border-color: #fff;
    transition: all var(--animSpeed);
}

.tradeChoice1 {
    position: absolute;
    bottom: calc(var(--baseSize) * 0.4);
    width: calc(var(--baseSize) * 1.55);
    height: calc(var(--baseSize) * 0.5);
    left: calc(var(--baseSize) * 0.5);        
}

.tradeChoice2 {
    position: absolute;
    bottom: calc(var(--baseSize) * 0.4);
    width: calc(var(--baseSize) * 1.55);
    height: calc(var(--baseSize) * 0.5);
    left: calc(var(--baseSize) * 2.5);
}

.tradeCard .slot {
    width: calc(var(--baseSize) * 0.49);
    height: calc(var(--baseSize) * 0.52);
    display: inline-block;
    margin-right: calc(var(--baseSize) * 0.29);
    --cubeSize: calc(var(--baseSize) * 0.55);
}

.tradeCard .leftOvers {
    --cubeSize: calc(var(--baseSize) * 0.55);
    position: absolute;
    bottom: calc(var(--baseSize) * 0.4);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.tradeCard.tradeFlipped .slot {
    width: calc(var(--baseSize) * 2.53);
    height: calc(var(--baseSize) * 0.68);
    display: flex;
    box-sizing: border-box;
    padding-top: calc(var(--baseSize) * 0.1);
    flex-wrap: wrap-reverse;
    justify-content: center;
}

.dummySlot {
    width: calc(var(--baseSize) * 0.49);
    height: calc(var(--baseSize) * 0.52);
    display: inline-block;
    margin-right: calc(var(--baseSize) * 0.29);
    --cubeSize: calc(var(--baseSize) * 0.55);
    background-image: url(img/nobody.png);
    background-position: center;
    background-size: calc(var(--baseSize) * 0.6);
}

.councilSlot .dummySlot {
    width: calc(var(--baseSize) * 0.6);
    height: calc(var(--baseSize) * 0.6);
    background-size: calc(var(--baseSize) * 0.8);
}

.tradeCard.tradeFlipped .tradeChoice.active {
    left: calc(var(--baseSize) * 1.5);
}

.tradeCard .actionCube {
    margin: 0;
    transform: rotate(2deg) translate(calc(var(--cubeSize) * -0.05), 0);
}

.tradeCard.tradeFlipped {
    padding-top: calc(var(--baseSize) * 1.6);
    padding-left: calc(var(--baseSize) * 1);
}

#galaxy, #handCards {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: calc(var(--baseSize) *7);
    margin-top: calc(var(--baseSize) * 0.75);
}

#handCards {
    justify-content: space-between;
    align-items: center;
}

.galaxyHandSwitch {
    position: absolute;
    z-index: 2;
    right: calc(var(--baseSize) * 0.3);
    top: calc(var(--baseSize) * 0.125);
    padding: calc(var(--baseSize) * 0.08);
    min-width: calc(var(--baseSize) * 2.8);
}

.sector {
    position: relative;    
    display: inline-block;
    height: calc(var(--baseSize) *7);
    width: calc(var(--baseSize) *4.55);
    background-size: contain;
    background-repeat: no-repeat;
/*    background-color: #000;   
    background-image: url(img/space.jpg);
*/
    box-shadow: inset 0 0 1px #fff;
}

.sectorCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-image: url(img/sectorCenter.png);
    background-size: contain;
    height: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 1);
    opacity: 1;
}

/*#galacticFleet {
    position: absolute;
    top: calc(var(--baseSize) * 1);
    left: calc(var(--baseSize) * 0.5);
    background-image: url(img/cruiser.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 0.5);
    pointer-events: none;
}*/

#galacticFleet {
    position: absolute;
    top: calc(var(--baseSize) * 1);
    left: calc(var(--baseSize) * 0.5);
    background-image: url(img/galacticFleet.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(var(--baseSize) * 1.2);
    height: calc(var(--baseSize) * 1.2);
    pointer-events: none;
    filter: drop-shadow(0 0 1px #fff);
    background-position: center;
}

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

.hiddenSector .sectorCenter {
    display: none;
}

.planet {
    position: absolute;    
    background-repeat: no-repeat;
    background-size: contain;
    height: calc(var(--baseSize) * 1.4);
    width: calc(var(--baseSize) * 1.4);
    top: calc(var(--planetY) * var(--baseSize));
    left: calc(var(--planetX) * var(--baseSize));
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    --cubeSize: calc(var(--baseSize) * 0.5);
}

.planet .icon {
    --size: 0.65;
    margin-left: calc(var(--baseSize) * var(--size) * -0.3);
}

.planet:hover {
    filter:brightness(1.4);
}

.planetCruiser {
    width: calc(var(--cubeSize) * 1.5);
    height: calc(var(--cubeSize) * 1.5);
    position: absolute;
    top: calc(var(--cubeSize) * -0.4);
    left: 50%;
    transform: translate(-50%, 0);
    background-image: url(img/icons.png);
    background-size: calc(var(--cubeSize) * 15);
    background-position-x: calc(var(--cubeSize) * -6);
}

.planetCruiser.planetCruiser_2 {
    filter: drop-shadow(calc(var(--cubeSize) * 0) calc(var(--cubeSize) * 0.25) calc(var(--cubeSize) * 0.15) #000) hue-rotate(136deg) brightness(0.8);
}

.planetCruiser.planetCruiser_1 {
    filter: drop-shadow(calc(var(--cubeSize) * 0) calc(var(--cubeSize) * 0.25) calc(var(--cubeSize) * 0.15) #000) hue-rotate(50deg) brightness(2);
}

.planetCruiser.planetCruiser_3 {
    filter: drop-shadow(calc(var(--cubeSize) * 0) calc(var(--cubeSize) * 0.25) calc(var(--cubeSize) * 0.15) #000) hue-rotate(226deg) brightness(0.8) saturate(1.5);
}

.planetCruiser.planetCruiser_4 {
    filter: drop-shadow(calc(var(--cubeSize) * 0) calc(var(--cubeSize) * 0.25) calc(var(--cubeSize) * 0.15) #000) hue-rotate(0deg) brightness(0.5) saturate(3);
}

.planet.canConquer {
    box-shadow: 0 0 20px 1px #f00, inset 0 0 10px #a12222;
    border-radius: 50%;
}

.warscores {
    display: grid;
    grid-template-columns: calc(var(--baseSize) * 0.5) auto auto;
    text-align: left;
    line-height: calc(var(--baseSize) * 1);
}

.warscores .icon {
    --size: 1;
}

.WarmPlanet {background-image: url(img/warmPlanet.png);}
.OceanicPlanet {background-image: url(img/oceanPlanet.png);}
.ArcticPlanet {background-image: url(img/arcticPlanet.png);}
.DesertPlanet {background-image: url(img/desertPlanet.png);}
.VolcanicPlanet {background-image: url(img/lavaPlanet.png);}
.BarrenPlanet {background-image: url(img/barrenPlanet.png);}

.actionCube.colonyCube {
    position: absolute;
    left: 40%;
    bottom: calc(var(--baseSize) * 0.3);
    transform: translate(-50%, 0);
}

.actionCube.developedCube {
    position: absolute;
    left: 40%;
    bottom: calc(var(--baseSize) * 0.65);
    transform: translate(-50%, 0);
}

.anomaly {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    height: calc(var(--baseSize) * 0.8);
    background-image: url(img/anomaly.png);
    width: calc(var(--baseSize) * 0.8);
    top: calc(var(--planetY) * var(--baseSize));
    left: calc(var(--planetX) * var(--baseSize));  
}

.anomaly:hover {
    filter: drop-shadow(0px 0px calc(var(--baseSize) * 0.1) #fff)
 }

.icon {
    --size: 0.5;
    position:relative;
    background-image: url(img/icons.png);
    width: calc(var(--baseSize) * var(--size));
    height: calc(var(--baseSize) * var(--size));
    background-repeat: no-repeat;
    background-size: 1000%;
    text-align: center;
    line-height: calc(var(--baseSize) * var(--size));
    font-family: 'Agency FB';
    font-size: calc(var(--baseSize) * var(--size) * 0.45);
    color:#000;
    font-weight: bold;
    cursor: default;
    text-shadow: 
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff,
        0 0 calc(var(--baseSize) * var(--size) * 0.1) #fff
}

.icon_Credits {
    background-position-x: calc(var(--baseSize) * var(--size) * 0);
}

.icon_Discovery {
    background-position-x: calc(var(--baseSize) * var(--size) * -1);
}

.icon_Influence {
    background-position-x: calc(var(--baseSize) * var(--size) * -2);
}

.icon_Productivity {
    background-position-x: calc(var(--baseSize) * var(--size) * -3);    
}

.icon_Cruiser {
    background-position-x: calc(var(--baseSize) * var(--size) * -4);
    text-color:transparent;
}

.icon_Strength {
    background-position-x: calc(var(--baseSize) * var(--size) * -5);
    text-color:transparent;
}

.icon_Prestige {
    background-position-x: calc(var(--baseSize) * var(--size) * -6);
}

.icon_Relic {
    background-position-x: calc(var(--baseSize) * var(--size) * -7);
}

.icon_Research {
    background-position-x: calc(var(--baseSize) * var(--size) * -8);
    text-color:transparent;
}

.icon_AdvancedResearch {
    background-position-x: calc(var(--baseSize) * var(--size) * -9);
    text-color:transparent;
}

.icon.icon_Action.Cube {
    --cubeSize: calc(var(--baseSize) * var(--size));
    width: var(--cubeSize);
    height: var(--cubeSize);
    border-radius: calc(var(--cubeSize) * 0.15);
    margin: 0 calc(var(--baseSize) * 0.15);
    background-image: url(img/cubes.png);
    background-repeat: no-repeat;
    background-size: calc(var(--cubeSize) * 4);
}

#players {
    position: relative;
    width: 100%;
    height: calc(var(--baseSize) * 7.9);
}

.player {
    position: absolute;
    top:0;
    left:0;
    z-index: calc(9 - var(--order));
}

.player.activePlayer {
    z-index:10;
}

.playerTab {
    --tabHeight: calc(var(--baseSize) * 1);
    position: absolute;
    left: 0;
    top: calc(var(--order) * (var(--tabHeight) * 1.1));
    width: calc(var(--baseSize) * 3);
    height: var(--tabHeight);
    border-radius: calc(var(--baseSize) * 0.25) 0 0 calc(var(--baseSize) * 0.25);
    padding-left: calc(var(--baseSize) * 0.1);
    line-height: var(--tabHeight);
    box-sizing: border-box;
    color: #e4e4e4;
    font-weight: bold;
    font-size: calc(var(--baseSize) * 0.4);
    font-family: 'Agency FB';
    transform: translate(calc(var(--baseSize) * 0.5), 0);
    cursor: pointer;
    text-shadow: 1px 1px 1px #000, 0px 0px 2px #fff;
    background-image: url(img/bordertm.png);
    background-blend-mode: luminosity;
    background-size: cover;
    transition: all calc(var(--animSpeed) * 0.5);
}

.tabIdeology {
    width: calc(var(--baseSize) * 0.7);
    height: calc(var(--baseSize) * 0.7);
    display: inline-block;
    background-size: contain;
    margin-right: calc(var(--baseSize) * 0.1);
    vertical-align: middle;
    background-repeat: no-repeat;
}

.playerTab:hover {
    color:#fff;
}

.currentPlayer .playerTab {
    filter: contrast(1.5) saturate(1.5);
    box-sizing: border-box;
    border-left: solid calc(var(--baseSize) * 0.25) rgb(255 255 255 / 50%);
}

.playerTabContent {
    width: calc(var(--baseSize) * 25);
    height: calc(var(--baseSize) * 7.8);
    position: absolute;
    top: 0;
    left: calc(var(--baseSize) * 3);
    border-radius: 0 calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1);
    background-image: url(img/spaceBack.jpg);
    background-blend-mode: luminosity;
    background-size: cover;
    background-position: bottom center;
    box-sizing: border-box;
    border: ridge calc(var(--baseSize) * 0.11) var(--playerColor);
    padding: 0;
}

.playerTabContent:after {
    position: absolute;
/*    content: "";*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.15;
    z-index: 10;
}

.actionBoard {
    --cubeSize: calc(var(--baseSize) * 0.75);
    background-image: url(img/actionBoard2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 1px;
    bottom: 1px;
    width: calc(var(--baseSize) * 11.68);
    height: calc(var(--baseSize) * 7.5);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);
}

.cpuTurn .actionBoard {
    pointer-events:none;
}

.action {
    position: absolute;
    width: calc(var(--baseSize) * 3.8);
    height: calc(var(--baseSize) * 2.85);
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    cursor:pointer;
}

.actionBoard .price {
    position: absolute;
    color: #dc1623;
    font-size: calc(var(--baseSize) * 0.45);
    font-weight: 900;
    text-shadow: 0 0 calc(var(--baseSize) * 0.1) #fff, 0 0 calc(var(--baseSize) * 0.1) #fff, 0 0 calc(var(--baseSize) * 0.1) #fff, 0 0 calc(var(--baseSize) * 0.1) #fff,0 0 calc(var(--baseSize) * 0.1) #fff,0 0 calc(var(--baseSize) * 0.1) #fff;
    text-align: center;
    width: calc(var(--baseSize) * 0.45);
}

.actionBoard  .price_Manufacture {
    top: calc(var(--baseSize) * 0.17);
    left: calc(var(--baseSize) * 2.6);
}

.price.price_Retrieve {
    top: calc(var(--baseSize) * 0.17);
    left: calc(var(--baseSize) * 5.95);
}

.price.price_Scavenge {
    top: calc(var(--baseSize) * 0.91);
    left: calc(var(--baseSize) * 9.95);
}

.price.price_Develop {
    top: calc(var(--baseSize) * 3.15);
    left: calc(var(--baseSize) * 2.03);
}

.price.price_Research {
    top: calc(var(--baseSize) * 3.15);
    left: calc(var(--baseSize) * 5.9);
}

.price.price_Colonize {
    top: calc(var(--baseSize) * 5.35);
    left: calc(var(--baseSize) * 2.02);
}

.price.price_Nominate {
    top: calc(var(--baseSize) * 5.37);
    left: calc(var(--baseSize) * 9.97);
}

.action:hover {
    backdrop-filter: brightness(1.2);
    box-sizing: border-box;
    border-bottom: solid calc(var(--baseSize) * 0.05) rgb(0 0 0 / 50%);
    border-right: solid calc(var(--baseSize) * 0.05) rgb(0 0 0 / 50%);
}

.action_Manufacture { 
    top: 0; 
    left:0; 
    justify-content: space-around;
    padding-bottom: calc(var(--baseSize) * 0.15);
}
.action_Retrieve    { 
    top: 0; 
    left: calc(var(--baseSize) * 3.95);
    justify-content: space-around;
    padding-bottom: calc(var(--baseSize) * 0.15);
}
.action_Scavenge    { 
    top: 0; 
    left: calc(var(--baseSize) * 7.9);
    justify-content: space-around;
    padding-bottom: calc(var(--baseSize) * 0.15);
}
.action_Develop     { 
    top: calc(var(--baseSize) * 2.9);
    left: 0; height: calc(var(--baseSize) * 2.3)
}

.action_Research {
    top: calc(var(--baseSize) * 2.9);
    left: calc(var(--baseSize) * 3.95);
    height: calc(var(--baseSize) * 2.3);
    justify-content: center;
    padding-bottom: calc(var(--baseSize) * 0.26);
}

.action_Explore {
    top: calc(var(--baseSize) * 5.2);
    left: calc(var(--baseSize) * 3.95);
    height: calc(var(--baseSize) * 2.3);
    justify-content: center;
    padding-bottom: calc(var(--baseSize) * 0.26);
}

.action_Nominate {
    top: calc(var(--baseSize) * 5.2);
    left: calc(var(--baseSize) * 7.9);
    height: calc(var(--baseSize) * 2.3);
    justify-content: center;
    padding-bottom: calc(var(--baseSize) * 0.26);
}

.action_Colonize {
    top: calc(var(--baseSize) * 5.2);
    left: 0;
    height: calc(var(--baseSize) * 2.3);
    justify-content: center;
    padding-bottom: calc(var(--baseSize) * 0.26);
}

.action_Trade {
    top: calc(var(--baseSize) * 2.9);
    left: calc(var(--baseSize) * 7.9);
    height: calc(var(--baseSize) * 2.3);
    justify-content: center;
    padding-bottom: calc(var(--baseSize) * 0.26);
}

.playerIdeology {
    position: absolute;
    top: calc(var(--baseSize) * 0.15);
    right: calc(var(--baseSize) * 0.25);
    width: calc(var(--baseSize) * 1.25);
    height: calc(var(--baseSize) * 1.25);
    background-size: contain;
    background-repeat: no-repeat;
}

#players .playerIdeology:hover {
    filter: brightness(1.2); 
}

#players .playerIdeology {
    cursor:pointer;
}

.ideology { background-image: url(img/ideologyUnknown.png); }
.ideology0 { background-image: url(img/ideology0.png); }
.ideology1 { background-image: url(img/ideology1.png); }
.ideology2 { background-image: url(img/ideology2.png); }
.ideology3 { background-image: url(img/ideology3.png); }
.ideology4 { background-image: url(img/ideology4.png); }

.factionSwitch {
    position: absolute;
    right: calc(var(--baseSize) * 2.53);
    top: calc(var(--baseSize) * 1.52);
    font-size: calc(var(--baseSize) * 0.36);
}

.techSwitch {
    position: absolute;
    right: calc(var(--baseSize) * 1.3);
    top: calc(var(--baseSize) * 1.52);
}

.tipSwitch {
    position: absolute;
    right: calc(var(--baseSize) * 0.2);
    top: calc(var(--baseSize) * 1.52);
}

.playerLog {
    position: absolute;
    right: calc(var(--baseSize) * 3.75);
    top: calc(var(--baseSize) * 1.52);
}

.techBoard {
    background-image: url(img/techBoard2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: calc(100% + calc(var(--baseSize) * 1));
    bottom: calc(var(--baseSize) * 0);
    width: calc(var(--baseSize) * 11);
    height: calc(var(--baseSize) * 5.15);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    box-sizing: border-box;
    box-shadow: 0 0 calc(var(--baseSize) * 0.1) 1px #363636;
}

.techBoard:before {
    content: 'TECH';
    position: absolute;
    left: calc(var(--baseSize) * -1);
    font-size: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 1);
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: center;
}

.tipBoard {
    background-image: url(img/tipBoard2.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: calc(100% + calc(var(--baseSize) * 1));
    bottom: calc(var(--baseSize) * 0);
    width: calc(var(--baseSize) * 11.35);
    height: calc(var(--baseSize) * 5.15);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black) contrast(1.1);
    box-sizing: border-box;
}

.tipBoard:before {
    content: 'TIPS';
    position: absolute;
    left: calc(var(--baseSize) * -1);
    font-size: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 1);
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: center;
}

.tipZoom {
    position: absolute;
    bottom: 0;
    --baseSize: calc(var(--baseSizeCopy) * 2);
    transform: translate(-50%,0);
    left: unset;
}

.tipBoard.tipZoom:before {
    display: none;
}

.tipAction {
    position: absolute;
    width: calc(var(--baseSize) * 3.72);
    height: calc(var(--baseSize) * 0.59);
    box-sizing: border-box;
    transition: background calc(var(--animSpeed) * 1);
    padding-left: calc(var(--baseSize) * 0.1);
    border-top: solid calc(var(--baseSize) * 0.02) rgb(119 221 255 / 90%);
    border-bottom: solid calc(var(--baseSize) * 0.02) rgb(104 184 211 / 90%);
    backdrop-filter: brightness(1.1);
    cursor: pointer;
    background: radial-gradient(ellipse at center, rgba(119,136,255,0) 0%,rgba(119,136,255,0.0) 50%,rgba(119,136,255,0.7) 100%);
    left: calc(var(--baseSize) * 0.68);
}

.tipAction:hover, .tipAction:active {
    color: #fff;
    background: rgb(119 251 255 / 20%);
    backdrop-filter: unset;
    border-color: #fff;
    transition: all var(--animSpeed);
}

.tipAction.tipAction_1 {
    top: calc(var(--baseSize) * 0.92);
}

.tipAction.tipAction_2 {
    top: calc(var(--baseSize) * 2.83);
}

.tipAction.tipAction_3 {
    top: calc(var(--baseSize) * 4.44);
    height: calc(var(--baseSize) * 0.55);
}

.logBoard {
    position: absolute;
    left: calc(100% + calc(var(--baseSize) * 1));
    bottom: calc(var(--baseSize) * 0.1);
    width: calc(var(--baseSize) * 11.9);
    height: calc(var(--baseSize) * 5);
}

.logBoard .logText {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--baseSize) * 11.9);
    height: calc(var(--baseSize) * 5);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);
    box-sizing: border-box;
    box-shadow: 0 0 calc(var(--baseSize) * 0.1) 1px #363636;
    overflow-y: auto;
    padding: calc(var(--baseSize) * 0.2);
    border-radius: calc(var(--baseSize) * 0.1);
    color: #f0f0f0;
    border: solid 1px var(--playerColor);
    white-space: nowrap;
    font-size: calc(var(--baseSize) * 0.35);
}

.logBoard .logText::-webkit-scrollbar-thumb {
    background-color: var(--playerColor);
}

.logBoard:before {
    content: 'LOG';
    position: absolute;
    left: calc(var(--baseSize) * -1);
    font-size: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 1);
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: center;
}

.researchSubject {
    display: flex;
    align-items: flex-end;
    padding-bottom: calc(var(--baseSize) * 0.21);
    padding-left: calc(var(--baseSize) * 0.09);
    cursor:pointer;
}

.researchSubject.researchSubject_1, .researchSubject.researchSubject_4, .researchSubject.researchSubject_7 {
    padding-left: 0;
}

.researchSubject .actionCube {
    transform: rotate(2deg) translate(calc(var(--cubeSize) * -0.05), 0);
}

.researchSubject:hover {
    backdrop-filter: brightness(1.2);
    box-sizing: border-box;
    border-bottom: solid calc(var(--baseSize) * 0.1) rgb(0 0 0 / 50%);
    border-right: solid calc(var(--baseSize) * 0.05) rgb(0 0 0 / 50%);
    border-top: solid calc(var(--baseSize) * 0.05) rgb(255 255 255 / 75%);
    border-left: solid calc(var(--baseSize) * 0.05) rgb(255 255 255 / 75%);
    box-shadow: calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.25) #000;
    border-radius: calc(var(--baseSize) * 0.1);
}

.factions {
    position: absolute;
    left: calc(100% + calc(var(--baseSize) * 1));
    bottom: calc(var(--baseSize) * 0.2);
    width: calc(var(--baseSize) * 12);
    height: calc(var(--baseSize) * 4.93);
    display: flex;
    justify-content: space-between;
}

.factions:before {
    content: 'FACTION';
    position: absolute;
    top: calc(var(--baseSize) * -0.15);
    left: calc(var(--baseSize) * -1);
    font-size: calc(var(--baseSize) * 0.74);
    width: calc(var(--baseSize) * 1);
    writing-mode: vertical-rl;
    text-orientation: upright;
    text-align: left;
    line-height: calc(var(--baseSize) * 1);
    letter-spacing: calc(var(--baseSize) * -0.15);
}

.faction, .factionCard {
    position: relative;
    background-image: var(--faction);
    width: calc(var(--baseSize) * 3.75);
    height: calc(var(--baseSize) * 5);
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) black);
    border-radius: calc(var(--baseSize) * 0.1);
}

#handCards .factionCard {
    width: calc(var(--baseSize) * 3.95);
    height: calc(var(--baseSize) * 5.27);
    filter: drop-shadow(calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.025) calc(var(--baseSize) * 0.015) white);
}

.zoomParent {
    z-index:15;
}

.factionZoom {
    --baseSize: calc(var(--baseSizeCopy) * 3);
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

#handCards .factionCard.factionZoom {
    filter: unset;
}

.factionZoom.zoomTop_true {
    top:0;
}

.factionZoom.zoomTop_false {
    bottom:0;
}

.zoomClose {
    color: rgb(255 255 255 / 50%);
    font-size: calc(var(--baseSizeCopy) * 0.8);
    position: absolute;
    top: calc(var(--baseSizeCopy) * 0.1);
    right: calc(var(--baseSizeCopy) * 0.1);
    display: inline-block;
    line-height: calc(var(--baseSizeCopy) * 0.8);
    cursor: pointer;
}

.zoomClose:hover {
    color: #fff;
    text-shadow: 0px 0px 1px #000;
}

.faction .actionArea {
    position: absolute;
    width: 100%;
    height: 15%;
    box-sizing: border-box;
    padding-left: 16.5%;
    padding-top: 3.5%;
    --cubeSize: calc(var(--baseSize) * 0.56);
}

.factionCard_22 .actionArea_1 {
    padding-left: 30%;
}

.faction .actionArea .actionCube {
    transform: rotate(3deg) translate(calc(var(--cubeSize) * -0.05), 0);
}

.faction .actionArea_0 {
    top: 52%;
}

.faction .actionArea_1 {
    top: 67.1%;
}

.faction .actionArea.active {
    box-sizing: border-box;
    transition: background calc(var(--animSpeed) * 1);
    padding-left: calc(var(--baseSize) * 0.1);
    border-top: solid calc(var(--baseSize) * 0.02) rgb(119 221 255 / 90%);
    border-bottom: solid calc(var(--baseSize) * 0.02) rgb(104 184 211 / 90%);
    backdrop-filter: brightness(1.1);
    cursor: pointer;
    background: radial-gradient(ellipse at center, rgba(119,136,255,0) 0%,rgba(119,136,255,0.0) 50%,rgba(119,136,255,0.7) 100%);
}

.faction .actionArea.active:hover {
    color: #fff;
    background: rgb(119 251 255 / 20%);
    backdrop-filter: brightness(1.2);
    border-color: #fff;
    transition: all var(--animSpeed);
}

.adaptationList {
    position: absolute;
    bottom: 0;
    height: calc(var(--baseSize) * 0.85);
    width: calc(var(--baseSize) * 3.75);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
}

.adaptationList div {
    height: calc(var(--baseSize) * 1.4);
    width: calc(var(--baseSize) * 1.4);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.playOptions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--baseSize) * 2.75);
    color: #a2c7ff;
    font-size: calc(var(--baseSize) * 0.25);
    font-family: 'Megrim', monospace;
    box-sizing: border-box;
    padding: calc(var(--baseSize) * 0.93) 0 0 calc(var(--baseSize) * 0.8);
    text-shadow: 0 0 1px #fff, 1px 1px 1px #000;
    /*background: linear-gradient(to bottom, rgba(119,136,255,0.0) 0%,rgba(119,136,255,0.5) 50%,rgba(119,136,255,0.0) 100%), linear-gradient(to right, rgb(187,119,255,0.0) 0%,rgba(187,119,255,0.5) 50%,rgba(187,119,255,0) 100%);*/
}

.playOptions .playOption,  select.iceOption {
    margin-bottom: calc(var(--baseSize) * 0.1);
    cursor: pointer;
    transition: color calc(var(--animSpeed) * 0.5);
    transition: background calc(var(--animSpeed) * 1);
    background: rgb(119 139 255 / 50%);
    box-sizing: border-box;
    padding-left: calc(var(--baseSize) * 0.1);
    border: solid 1px rgb(119 139 255);
    border-right: 0;
    border-left: 0;
}

.playOptions select.iceOption {
    width: calc(var(--baseSize) * 3.15);
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    text-shadow: inherit;
}

.playOptions select.iceOption option {
    background: rgb(203 209 241);
    color: #3f4a87;
}

.playOptions .playOption:hover {
    color: #fff;
    background: rgb(119 251 255 / 50%);
    border-color: #fff;
    backdrop-filter: invert(1);
    background: unset;   
}

.stats {
    position: absolute;
    top: 0;
    left: 100%;
    width: calc(var(--baseSize) * 11);
    height: calc(var(--baseSize) * 1.25);
    display: flex;
    padding: calc(var(--baseSize) * 0.2);
    box-sizing: border-box;
    justify-content: space-around;
    font-size: calc(var(--baseSize) * 0.5);
    color: #fff;
}

.stat {
    display: flex;
    align-items: center;
    transition: transform calc(var(--animSpeed) * 0.5);
}

.stat .icon {
    margin-right: calc(var(--baseSize) * 0.05);
}

.stat.updating {
    transform: scale(1.4);
}

.nextTurnOrder {
    font-size: calc(var(--baseSize) * 0.4);
    font-variant: all-small-caps;
    position: absolute;
    top: calc(var(--baseSize) * -0.35);
    left: calc(var(--baseSize) * 0.7);
    color: var(--playerColor);
    filter: brightness(1.5);
    text-shadow: none;
    font-weight: unset;
}

.actionCubes {
    --cubeSize : calc(var(--baseSize) * 0.8);
    position: absolute;
    top: calc(var(--baseSize) * 1.25);
    left: 100%;
    width: calc(var(--baseSize) * 8.5);
    height: calc(var(--baseSize) * 1.4);
    display: flex;
    padding: calc(var(--baseSize) * 0.2);
    box-sizing: border-box;
    font-size: calc(var(--baseSize) * 0.5);
    line-height: calc(var(--baseSize) * 1);
    color: #fff;
}

.actionCube {
    position: relative;
    width: var(--cubeSize);
    height: var(--cubeSize);
    border-radius: calc(var(--cubeSize) * 0.15);
    margin: 0 calc(var(--baseSize) * 0.15);
    background-image: url(img/cubes.png);
    background-repeat: no-repeat;
    background-size: calc(var(--cubeSize) * 4);    
}

.moving {
    z-index:50;
    transform: translate(-50%, -50%);
    filter: drop-shadow(calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.3) #000);
}

.player.activePlayer .playerTab {
    transform: unset;
    color:#fff;
}

.player_2 {--playerColor : #4c815d;}
.player_1 {--playerColor : #d3ab3f;}
.player_3 {--playerColor : #455e87;}
.player_4 {--playerColor : #bb6164;}

 .playerTab,  .playerTabContent,  :after, .ideologyModal {background-color: var(--playerColor)}

:before {color: var(--playerColor)}

.actionCube_2 {  background-position-x: calc(var(--cubeSize) * 0)}
.actionCube_1 {  background-position-x: calc(var(--cubeSize) * -1)}
.actionCube_3 {  background-position-x: calc(var(--cubeSize) * -2)}
.actionCube_4 {  background-position-x: calc(var(--cubeSize) * -3)}

#phaseData {
    position: absolute;
    bottom: calc(var(--baseSize) * 0);
    color: #d4a36f;
    font-size: calc(var(--baseSize) * 0.5);
    text-transform: uppercase;
    background: linear-gradient(to bottom, rgb(247 183 114) 0%,rgb(247 183 114) 54%,rgb(93 69 38) 80%);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: calc(var(--baseSize) * 0.8);
    line-height: calc(var(--baseSize) * 0.82);
}

.playerPhaseName {
    margin: 0 calc(var(--baseSize) * 0.5);
}

.phaseName {
    padding: 0 calc(var(--baseSize) * 0.5);
    cursor: default;
    height: calc(var(--baseSize) * 0.8);
}

.phaseName.currentPhase {
    background: linear-gradient(to bottom, rgb(247 183 114) 0%,rgb(247 183 114) 54%,rgb(93 69 38) 80%);
    -webkit-background-clip: unset;
    -webkit-text-fill-color: #34407b;
    border-radius: calc(var(--baseSize) * 0.05);
    text-shadow: -1px -1px #e9cdaf;
}

#phaseButtons {
    position: absolute;
    display: flex;
    bottom: calc(var(--baseSize) * 0.05);
    right: calc(var(--baseSize) * 0.25);
}

#phaseButtons .button {
    padding: calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.5);
    min-width: calc(var(--baseSize) * 2);
}

.showGalaxyNames .planet:after {
    content: attr(title);
    position: absolute;
    color: #9c9c9cd1;
    top: calc(var(--baseSize) * -0.05);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: calc(var(--baseSize) * 0.3);
}

.showGalaxyNames .anomaly:after {
    content: attr(title);
    position: absolute;
    color: #9c9c9cd1;
    top: calc(var(--baseSize) * -0.2);
    left: 0;
    width: 100%;
    text-align: center;
    font-size: calc(var(--baseSize) * 0.2);
    white-space: nowrap;
}

.finalScore {
    display: grid;
}

.finalScore.finalScore_2 {
    grid-template-columns: auto auto auto;
}

.finalScore.finalScore_3 {
    grid-template-columns: auto auto auto auto;
}

.finalScore.finalScore_4 {
    grid-template-columns: auto auto auto auto auto;
}

.finalScore .scoreItem {
    position: relative;
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 1.25);
}

.finalScore .ideology {
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 1);
    background-size: contain;
}

.finalScore .icon {
    --size: 1;
    filter: drop-shadow(0 0 1px rgba(255 255 255/ 20%));
}

.finalScore .actionCube {
    --cubeSize: calc(var(--baseSize) * 0.4);
}

.finalScore .planet {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(var(--baseSize) * 1.4);
    width: calc(var(--baseSize) * 1.4);
    transform: translate(calc(var(--baseSize) * -0.2) ,calc(var(--baseSize) * -0.2));
    filter: grayscale(1);
}

.finalScore .scoreValue, .finalScore .scoreItemTotal {
    line-height: calc(var(--baseSize) * 1);
}

.finalScore .scoreValue.finalValue {
    border-top: solid 1px;
}

.finalScore .winner {
    filter: brightness(1.3);
}

.gameoverHeader {
    position: absolute;
    top: calc(var(--baseSize) * -0.75);
    left: 0;
    color: #d4a36f;
    font-size: calc(var(--baseSize) * 2);
    text-transform: uppercase;
    background: linear-gradient(to bottom, rgb(207 152 93) 0%,rgb(200 147 90) 54%,rgb(56 41 27) 80%, rgb(0 0 0) 100%);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100%;
    text-align: center;
    filter: drop-shadow(calc(var(--baseSize) * 0) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.2) #426290) drop-shadow(calc(var(--baseSize) * 0.01) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) #000) drop-shadow(calc(var(--baseSize) * 0.01) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) #000);
}

.gameOverButton.button {
    width: calc(var(--baseSize) * 5);
}

.ideologyModal {
    position: absolute;
    top: calc(var(--baseSize) * 0.1);
    left: 25%;
    transform: translate(-100%, -100%);
    padding: calc(var( --baseSize) * 0.25) calc(var(--baseSize) * 0.25);
    display: flex;
    border-radius: calc(var(--baseSize) * 0.25);
    border-bottom-right-radius: 0;
    background-image: url(img/spaceBack.jpg);
    background-blend-mode: luminosity;
    background-size: cover;
    background-position: top right;
    box-sizing: border-box;
    border: ridge calc(var(--baseSize) * 0.11) var(--playerColor);
    color: var(--playerColor);
    text-shadow: 1px 1px 1px #000000;
    width: calc(var(--baseSize) * 7.5);
}

.ideologyOverview, .scoringOverview {
    display: grid;
    grid-template-columns: auto auto;
}

.ideologyModal .scoringOverview .planet {
    position: initial;
    --baseSize: calc(var(--baseSizeCopy) * 1);
    transform: translate(calc(var(--baseSizeCopy) * -0.2), calc(var(--baseSizeCopy) * -0.2));
}

.ideologySymbol {
    padding-bottom: calc(var(--baseSize) * 0.4);
}

.ideologyModal .ideologyIcon {
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 1);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.ideologyModal .icon {
    display: inline-block;
    --size: 0.75;
}

.ideologyName {
    font-size: calc(var(--baseSize) * 0.3);
    text-align: left;
}

.ideologyDescription {
    padding-left: calc(var(--baseSize) * 0.4);
    white-space: nowrap;
    line-height: calc(var(--baseSize) * 1);
}

.ideologyModal .planetCruiser {
    top: calc(var(--cubeSize) * -0.1);
}

.ideologyModal .planet {
    --baseSize: calc(var(--baseSizeCopy) * 0.8);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    --cubeSize: calc(var(--baseSize) * 0.4);
    display: inline-flex;
}

.ideologyModal .planet {
    filter:unset;
}

.ideologyModal .scoringOverview .icon {
    --size: 1;
}

.scoringOverview div {
    line-height: calc(var(--baseSize) * 1);
}

.scoringOverview {
    margin-right:calc(var(--baseSize) * 0.25);
}

.factionCard:not(.cardZoom, .zoomParent), 
.tradeCard:not(.cardZoom, .zoomParent),
#anomalies:not(.cardZoom, .zoomParent),
#council:not(.cardZoom, .zoomParent),
.tipBoard:not(.tipZoom, .zoomParent)
{
    cursor: zoom-in;
}

.cardSelector {
    position: absolute;
    top: calc(var(--baseSize) * -0.9);
    background-color: #000;
    width: calc(var(--baseSize) * 0.8 - calc(var(--baseSize) * 0.01));
    height: calc(var(--baseSize) * 0.8);
    left: calc(var(--baseSize) * 0);
    cursor: pointer;
    box-sizing: border-box;
    border-radius: calc(var(--baseSize) * 0.8);    
}

.cardSelector:after {
    content:"";
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: calc(var(--baseSize) * 0.4);
    height: calc(var(--baseSize) * 0.4);
    border-radius: calc(var(--baseSize) * 0.4);
    background: radial-gradient(ellipse at center, rgb(78 136 36) 0%,rgb(50 104 11) 50%,rgb(41 75 15) 100%);
    transition: all calc(var(--animSpeed) / 2);
}

.cardSelected.cardSelected:after  {
    background: radial-gradient(ellipse at center, rgb(231 243 221) 0%,rgb(107 255 0) 50%,rgb(14 32 0) 100%);
    box-shadow: #000 0 -1px calc(var(--baseSize) * 0.2) 1px, inset #70b500 0 -1px calc(var(--baseSize) * 0.3), #d0ff1d 0 2px calc(var(--baseSize) * 0.5), #d0ff1d 0 2px calc(var(--baseSize) * 0.5);
}

.cardSelector:hover:after {
    filter:brightness(1.3);
}

.doneSwapping {
    position: absolute;
    right: 0;
    top: calc(var(--baseSize) * 1.05);
}

.askModal {
    position: absolute;
    background-color: #040e1f;
    background-image: url(img/bordertl.png), url(img/bordertr.png), url(img/borderbl.png) , url(img/borderbr.png), url(img/borderbm.png), url(img/bordertm.png), url(img/borderlm.png), url(img/borderrm.png), url(img/spaceBack.jpg);
    background-size: calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5), calc(var(--baseSize) * 2.5),cover;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, repeat-x, repeat-y , repeat-y, no-repeat;
    background-position: top left, top right, bottom left, bottom right, bottom left, top left, top left, top right;
    left: 50%;
    top: 48%;
    padding: calc(var(--baseSize) * 1.5);
    transform: translate(-50%, -50%);
    z-index: 100;
    border-radius: calc(var(--baseSize) * 0.5);
    box-shadow: calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5) calc(var(--baseSize) * 0.5) #000, inset 0 0 calc(var(--baseSize) * 0.15) rgb(255 255 255 / 75%);
    color: #d4a36f;
    box-sizing: border-box;
    min-width: calc(var(--baseSize) * 11);
    min-height: calc(var(--baseSize) * 3);
    text-align: center;
    border: outset calc(var(--baseSize) * 0.025) rgb(160 160 160 / 50%);    
}

.askModal .modalClose {
    position: absolute;
    top: 0;
    right: 0;
}

.askModal .modalQuestions {
    max-height: calc(var(--baseSize) * 15);
    overflow-y: auto;
}

.askModal .modalTitle {
    position: absolute;
    font-size: calc(var(--baseSize) * 0.45);
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    color: #d4a36f;
    background: linear-gradient(to bottom, rgb(247 183 114) 0%,rgb(247 183 114) 54%,rgb(93 69 38) 80%);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.askModal .modalAnswer:hover {
    background: linear-gradient(to bottom, rgba(247, 183, 114, 0.5) 0%,rgba(247, 183, 114,0.9) 54%,rgba(93, 69, 38,0.6) 80%);
    -webkit-text-fill-color: unset;
    -webkit-background-clip: unset;
    color: #040e1f;
    border-radius: calc(var(--baseSize) * 0.1);
    box-sizing: border-box;
    border: solid 1px rgb(255 255 255 / 25%);
    text-shadow: -1px -1px 1px rgb(0 0 0 / 25%), 1px 1px 1px rgb(255 255 255 / 25%);
}

.askModal .modalAnswer {
    font-size: calc(var(--baseSize) * 0.5);
    color: #d4a36f;
    background: linear-gradient(to bottom, rgb(247 183 114) 0%,rgb(247 183 114) 54%,rgb(93 69 38) 80%);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    border: solid 1px transparent;
    padding: calc(var(--baseSize) * 0.25) 0;
}

.askModal .modalAnswer .icon {
    --size: 0.8;
    -webkit-text-fill-color: #000;
}

.askModal .modalClose {
    position: absolute;
    top: calc(var(--baseSize) * 0.05);
    right: calc(var(--baseSize) * 0.15);
    font-size: calc(var(--baseSize) * 0.6);
    cursor: pointer;
    background: linear-gradient(to bottom, rgb(247 183 114) 0%,rgb(247 183 114) 54%,rgb(130 92 43) 80%);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.askModal .modalClose:hover {
    filter: invert(1) brightness(2) ;
    transition: all calc(var(--animSpeed) * 0.5);
}

.askModal.collapsed {
    transition: all var(--animSpeed);
    --baseSize: calc(var(--baseSizeCopy) * 0.2);
    top: 1%;
    transform: translate(-175%, 0);
    cursor: zoom-in;
}

.askModal.collapsed .modalCollapse {
    pointer-events:none;
}

.askModal .modalClose.modalCollapse {
    top: calc(var(--baseSize) * -0.3);
    right: calc(var(--baseSize) * 0.3);
}

.askModal .modalMessage {
    font-size: calc(var(--baseSize) * 0.5);
}

.askModal .modalMessage .smallerMessage {
    font-size: calc(var(--baseSize) * 0.35);
}

.askModal.modalMiddle {
    transform: translate(-50%, calc(-50% - calc(var(--baseSize) * 0.3)));
}

.askModal.modalUp {
    left: 50%;
    top: calc(var(--baseSize) * 1.5);
    transform: translate(-50%, 0);
}

.askModal .anomaly, .askModal .icon {
    display: inline-block;
    position: initial;
    vertical-align: middle;
}

.askModalArrow {
    width: calc(var(--baseSize) * 0.7);
    margin: 0 calc(var(--baseSize) * 0.5);
    vertical-align: middle;
}

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

#other a {
    color: #f0f0f0;
}

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

#log {
    position: absolute;
    bottom: calc(var(--baseSize) * 0.07);
    left: calc(var(--baseSize) * 0.5);
    white-space: nowrap;
    min-width: calc(var(--baseSize) * 2);
}

.log {
    position: absolute;
    left: calc(var(--baseSize) * 1);
    overflow-y: auto;
    top: calc(var(--baseSize) * 1);
    z-index: 10;
    max-height: calc(100vh - calc(var(--baseSize) * 2));
    box-sizing: border-box;
    padding: calc(var(--baseSize) * 0.2);
    border-radius: calc(var(--baseSize) * 0.1);
    color: #f0f0f0;
    background: rgb(5 9 42 / 50%);
    border: solid 1px #425f8d;
    white-space: nowrap;
}

.logPlayer {
    color: var(--playerColor);
}

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

.log::selection {
    background: #43618f;
}
.log::-moz-selection {
    background: #43618f;
}

.playerPicker {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.menuPlayer {
    position: relative;
    cursor: pointer;
    width: calc(var(--baseSize) * 2);
    height: calc(var(--baseSize) * 2);
    margin: calc(var(--baseSize) * 0.5);
    background-size: contain;
    color: #fff;
    font-size: calc(var(--baseSize) * 0.3);
}

.menuPlayer.menuHuman {
    background-image: url(img/player.png);
}

.menuPlayer.menuHuman:after {
    content: "HUMAN";
}

.menuPlayer.menuCPU {
    background-image: url(img/bot.png);
}

.menuPlayer.menuCPU:after {
    content: "BOT";
}

.menuPlayer.menuNone {
    background-image: url(img/nobody.png);
}

.menuPlayer.menuNone:after {
    content: "NONE";
}

.menuPlayer:after {
    position: absolute;
    bottom: calc(var(--baseSize) * -0.35);
    width:100%;
    text-align: center;
}

.boolOptions {
    display: grid;
    grid-template-columns: calc(var(--baseSize) * 0.8)auto;
}

select.speedPicker {
    background-color: transparent;
    color: #f0f0f0;
    border: 0;
    outline: none;
    border-radius: 10% 10% 0 0;
    padding: calc(var(--baseSize) * 0.2);
    font-size: calc(var(--baseSize) * 0.8);
    font-family: 'Agency FB';
    text-shadow: 1px 1px 1px #000;
}

select.speedPicker option {
    background-color: transparent;
    color: #000;
}

#menu label {
    font-size: calc(var(--baseSize) * 0.8);
    font-family: 'Agency FB';
    color: #000000;
    text-shadow: -1px -1px 1px #5078ab;
}

#menu .checkbox {
    position: relative;
    width: calc(var(--baseSize) * 0.6);
    height: calc(var(--baseSize) * 0.6);
    margin-top: calc(var(--baseSize) * 0.2);
}

.checkbox:not(:checked):before {
    position: absolute;
    top: 0;
    left: 0;
    content: "✖";
    width: calc(var(--baseSize) * 0.6);
    height: calc(var(--baseSize) * 0.6);
    line-height: calc(var(--baseSize) * 0.6);
    text-align: center;
    color: #fff;
    font-size: calc(var(--baseSize) * 0.5);
    z-index: 1;
    pointer-events: none;
    background: #983b3b;
    font-weight: bold;
}

#menu .checkbox.checkbox_ranked {
    position: relative;
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 1);
    cursor:pointer;
}

#menu .checkbox.checkbox_ranked:after {
    content: "Challenge";
    position: absolute;
    left: calc(var(--baseSize) * -0.3);
    top: 0;
    height: 100%;
    transform: translate(-100%, 0);
    line-height: calc(var(--baseSize) * 1);
    color: #fff;
    font-size: calc(var(--baseSize) * 0.6);
    font-family: 'Agency FB';
    text-shadow: 1px 1px 1px #000;
}

#menu .checkbox.checkbox_ranked:before {
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 1);
    line-height: calc(var(--baseSize) * 1);
    font-size: calc(var(--baseSize) * 0.8);
}

#menu #rankedWrap {
    position: absolute;
    right: calc(var(--baseSize) * 1.5);
    bottom: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 4);
    padding: calc(var(--baseSize) * 0.05) calc(var(--baseSize) * 0.3);
    background-color: rgb(66 97 140 / 50%);
    box-sizing: border-box;
    border: solid 1px #5078ab;
    border-radius: calc(var(--baseSize) * 0.1);
    backdrop-filter: blur(calc(var(--baseSize) * 0.05));
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#menu #signRanked {
    position: absolute;
    right: calc(var(--baseSize) * 1.75);
    bottom: calc(var(--baseSize) * 1.4);
    width: calc(var(--baseSize) * 3.2);
}

#signRanked::after {
    color: #ff0;
}

.signupForm {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: calc(var(--baseSize) * 0.25);
    column-gap: calc(var(--baseSize) * 0.5);
    margin: calc(var(--baseSize) * 1) 0;
}

#signupErrors {
    color: #f55;
    margin-bottom: calc(var(--baseSize) * 0.5);
    text-shadow: 0 0 calc(var(--baseSize) * 0.2) #f00;
}

.signupSubTitle {
    color: #ffddb9;
}

.signupForm label {
    text-align: right;
}

.signupForm input {
    padding: calc(var(--baseSize) * 0.1);
    outline: none;
}

.signupForm input:focus {
    box-shadow: 0 0 0 calc(var(--baseSize) * 0.05) #2a62b5;
    border-color: #fff;
}

#menuOptions {
    position: relative;
}

.speedPickerWrapper, .boolOptions {
    width: calc(var(--baseSize) * 12);
}

.speedPickerWrapper, .boolOptions {
    width: calc(var(--baseSize) * 12);
    padding: calc(var(--baseSize) * 0.3);
    background-color: rgb(66 97 140 / 50%);
    box-sizing: border-box;
    border: solid 1px #5078ab;
    border-radius: calc(var(--baseSize) * 0.1);
    backdrop-filter: blur(calc(var(--baseSize) * 0.05));
}

.speedPickerWrapper {
    margin-bottom: calc(var(--baseSize) * 0.5);
}

.boolOptions * {
    margin-bottom: calc(var(--baseSize) * 0.4);
}

#menu.transitionToGame {
    opacity: 0.1;
}

#menu.transitionToGame, #menu.transitionToGame:before {
    width: 100vw;
    height: 100vh;
    pointer-events:none;
}

#menu.transitionToGame #menuHeader {
    height: calc(var(--baseSize) * 1);
    top: 0;
}

#menu.transitionToGame #menuOptions, 
#menu.transitionToGame #startGame, 
#menu.transitionToGame #gameDesigner {
    opacity: 0;
}


.hidden {
    opacity: 0;
    display:none;
    visibility:hidden;
}

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

#volumeControl {
    --soundIconSize: calc(var(--baseSize) * 0.8);
    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);
}

#other *:hover, #playerName:hover  {
    filter: drop-shadow(0 0 calc(var(--baseSize) * 0.1) white) brightness(10);
}

.scoreGrid {
    display: grid;
    grid-column-gap: calc(var(--baseSize) * 0.1);
}

.field_ideology .ideology {
    width: calc(var(--baseSize) * 0.6);
    height: calc(var(--baseSize) * 0.6);
    background-size: contain;
    background-repeat: no-repeat;
    float: right;
}

.field_score {
    text-align: right;
}

.smallScores {
    position: absolute;
    width: calc(var(--baseSize) * 6);
    height: calc(var(--baseSize) * 4.7);
    padding: calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.3);
    background-color: rgb(66 97 140 / 50%);
    box-sizing: border-box;
    border: solid 1px #5078ab;
    border-radius: calc(var(--baseSize) * 0.1);
    right: 0;
    top: calc(var(--baseSize) * 5.5);
    font-size: calc(var(--baseSize) * 0.5);
    color: #000000;
    text-shadow: -1px -1px 1px #d3d3d3;
    backdrop-filter: blur(calc(var(--baseSize) * 0.05));
}

.smallScores:before {
    display: block;
    content: attr(title);    
    width: calc(var(--baseSize) * 5);
    text-align: center;
    color: #f0f0f0;
    text-shadow: 1px 1px 1px #000;
}

.smallScores .scoreGrid {
    margin-top: calc(var(--baseSize) * 0.2);
}

.smallScores .scoreGrid div {
    height: calc(var(--baseSize) * 0.75);
}

.paginationHigh {
    position: absolute;
    top: calc(var(--baseSize) * 0.1);
    color: #e8c182;
    text-shadow: -1px -1px 1px #000000;
    cursor:pointer;
}
.paginationHigh.prevHigh {
    left: calc(var(--baseSize) * 0.3);
}

.paginationHigh.nextHigh {
    right: calc(var(--baseSize) * 0.3);
}

.paginationHigh:hover {
   color: #fff; 
}

.scoresLink {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: calc(var(--baseSize) * 3);
    right: 0;
    height: calc(var(--baseSize) * 2.35);
    width: calc(var(--baseSize) * 6);
    justify-content: space-between;
    align-items: center;
}

.button.highscoreMenuButton, .button.rulesButton, .button.videoButton {
    text-shadow: none;
    width: calc(var(--baseSize) * 5);
    padding: 0;
}

.scoresLink .button {
    height: calc(var(--baseSize) * 0.65);
}

.field_index0 {
    filter: drop-shadow(0 0 calc(var(--baseSize) * 0.1) gold);
}

.field_index1 {
    filter: drop-shadow(0 0 calc(var(--baseSize) * 0.1) silver);
}

.field_index2 {
    filter: drop-shadow(0 0 calc(var(--baseSize) * 0.1) #cd7f32);
}

#highscores {
    display: none;
    position: absolute;
    top: calc(var(--baseSize) * 2);
    left: calc(var(--baseSize) * 0.1);
    height: calc(var(--baseSize) * 12.1);
    width: calc(var(--baseSize) * 21.8);
    background-image: url(img/planetsBG.jpg);
    background-size: cover;
    border-radius: calc(var(--baseSize) * 0.5);
    box-sizing: border-box;
    border: solid 1px #5078ab;
    background-color: rgb(128 128 128);
    background-blend-mode: multiply;
    font-size: calc(var(--baseSize) * 0.4);
    box-shadow: calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.2) #000, calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.3) #000;
    z-index:5;
}

#highscoresSelection {
    display: flex;
    justify-content: space-around;
    padding: calc(var(--baseSize) * 0.3);
    background-color: rgb(66 97 140 / 50%);
    box-sizing: border-box;
    border-bottom: solid 1px #5078ab;
    border-radius: calc(var(--baseSize) * 0.1);
}

#highscoresTable {
    padding: calc(var(--baseSize) * 0.3);
    color: #f0f0f0;
}

#highscoresTable .scoreGrid {
    display: grid;
    grid-gap: calc(var(--baseSize) * 0.1) calc(var(--baseSize) * 0.3);
    overflow-y: auto;
    padding-bottom: calc(var(--baseSize) * 0.3);
    max-height: calc(var(--baseSize) * 10);
}

#highscoresTable .scoreGrid div {
    height: calc(var(--baseSize) * 0.65);
}

#highscoresTable .headerField {
    position: sticky;
    text-transform: uppercase;
    top: 0;
    backdrop-filter: blur(1px);
    text-shadow: 0 0 calc(var( --baseSize) * 0.25) black, 0 0 calc(var(--baseSize) * 0.25) black, 0 0 calc(var(--baseSize) * 0.25) black, 0 0 calc(var(--baseSize) * 0.25) black;
    z-index: 2;
}

#highscores .field_score {
    text-align: unset;
}

#highscoresTable .field_ideology .ideology  {
    float:unset;
}

#highscoresSelection .highButton {
    width: calc(var(--baseSize) * 2.4);
}

.button.highButton.activeHigh {
    filter: saturate(1.5) brightness(1.5);
}

.button.highButton.activeHigh:after {
    text-shadow: 1px 1px 1px #000000, 0 0 1px #000000;
}

.closeHigh {
    color: rgb(255 255 255);
    font-size: calc(var(--baseSizeCopy) * 0.8);
    position: absolute;
    top: calc(var(--baseSizeCopy) * -0.8);
    right: calc(var(--baseSizeCopy) * 0.1);
    display: inline-block;
    line-height: calc(var(--baseSizeCopy) * 0.8);
    cursor: pointer;
}

.closeHigh:hover {
    filter: drop-shadow(0 0 calc(var(--baseSize) * 0.1) white) brightness(10);
}

.subScores {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    transform: translate(0, calc(var(--baseSize) * -0.6));
}

.subScore {
    display: inline-block;
    position: relative;
    width: calc(var(--baseSize) * 6.95);
    height: calc(var(--baseSize) * 2.76);
    padding: calc(var(--baseSize) * 0.3);
    background-color: rgb(66 97 140 / 10%);
    box-sizing: border-box;
    border: solid 1px #5078ab;
    border-radius: calc(var(--baseSize) * 0.1);
    margin: calc(var(--baseSize) * 0.115);
    font-size: calc(var(--baseSize) * 0.3);
    color: #f0f0f0;
    box-shadow: inset 0 0 calc(var(--baseSize) * 1) rgb(66 97 140);
    overflow-y: auto;
}

.subScore:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--baseSize) * 2.7);
    height: calc(var(--baseSize) * 2.7);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    filter: blur(calc(var(--baseSize) * 0.07));
}

.subScore.ideoSubScore-1:before { background-image: url(img/ideologyUnknown.png); }
.subScore.ideoSubScore0:before { background-image: url(img/ideology0.png); }
.subScore.ideoSubScore1:before { background-image: url(img/ideology1.png); }
.subScore.ideoSubScore2:before { background-image: url(img/ideology2.png); }
.subScore.ideoSubScore3:before { background-image: url(img/ideology3.png); }
.subScore.ideoSubScore4:before { background-image: url(img/ideology4.png); }

#highscores .subScores .field_score {
    text-align: center;
}

.subScoreText {
    display: inline-block;
    width: calc(var(--baseSize) * 7);
    height: calc(var(--baseSize) * 2.8);
    color: #f0f0f0;
    text-align: center;
    font-size: calc(var(--baseSize) * 0.7);
    line-height: calc(var(--baseSize) * 2.8);
    text-shadow: 1px 1px 1px cyan;
}

.subScore.ideoSubScore3 {
    border-bottom-left-radius: calc(var(--baseSize) * 0.3);
}

.subScore.ideoSubScore4 {
    border-bottom-right-radius: calc(var(--baseSize) * 0.3);
}

#rankedHelp, #rankedWarning {
    display: none;
    width: calc(var(--baseSize) * 26);
    font-size: calc(var(--baseSize) * 0.5);
    text-align: left;
}

#rankedHelp li {
    min-height: calc(var(--baseSize) * 1);
}

#rankedHelp li::marker {
    font-family: monospace;
    font-weight: bold;
}

#rankedHelp .modalTitle, #rankedWarning .modalTitle {
    font-size: calc(var(--baseSize) * 0.9);
    bottom: unset;
    position: initial;
}

#rankedHelp .modalClose {
    font-size: calc(var(--baseSize) * 0.9);
    top: calc(var(--baseSize) * -0.2);
}

#rankedWarning{
    width: calc(var(--baseSize) * 20);
}