/*
 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=Bangers&display=swap');

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: 'Bangers', cursive;
}

html {
    background: radial-gradient(#b8d8ed 3vh, #d3e7ff 3vh);
    background-size: 15vh 15vh;
}

body {
    margin: 0;
    padding:0;
    font-size:calc(var(--baseSize) * 0.16);
    font-family: sans-serif;
    --col0 : #c4403c;
    --col1 : #e1d036;
    --col2 : #3da745;
    --col3 : #4751be;
    
    --colDark1 : #80761d;
    --blockSize : var(--baseSize);
}

#game {
    display:none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow-x: hidden;
    --baseSizeCopy: var(--baseSize);
}

#board {
    position: relative;
    margin: 0 calc(var(--baseSize) * 0.15);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#diceRowWrapper {
    width: 100%;
    position: sticky;
    top: 0;
    padding: calc(var(--baseSize) * 0.15) 0;
    z-index: 1;
}

.vmobile #diceRowWrapper {
    --baseSize: calc(var(--baseSizeCopy) * 0.5);
}

#diceContainer {
    display: flex;
    width: calc(var(--baseSize) * 13.5);    
    justify-content: space-evenly;
}

.die {
    position: relative;
    width: calc(var(--baseSize) * 1);
    height: calc(var(--baseSize) * 1);
    box-sizing: border-box;
    margin: 0 calc(var(--baseSize) * 0.4);
    background-color:#f1f1e2;
    border-radius: calc(var(--baseSize) * 0.1);
    --dotColour: rgb(255 255 255 / 70%);
    box-shadow: 1px 1px 3px #646464;
}

.die:after {
    position: absolute;
    width: calc(var(--baseSize) * 0.2);
    height: calc(var(--baseSize) * 0.2);
    background-color: var(--dotColour);
    border-radius: 100%;
    /*box-shadow: inset calc(var(--baseSize) * 0.02) calc(var(--baseSize) * 0.02) calc(var(--baseSize) * 0.01) #00000038;*/
}

.die.dieColour_5 {
    --dotColour: #4f4e4e;
}

.die.dieColour_0 {
    background-color:var(--col0);
}

.die.dieColour_1 {
    background-color:var(--col1);
}

.die.dieColour_2 {
    background-color:var(--col2);
}

.die.dieColour_3 {
    background-color:var(--col3);
}

.die_1:after {
    content:"";
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.die_2:after {
    content:"";
    top:50%;
    left:50%;
    background-color:transparent;
    transform: translate(-50%,-50%);
    box-shadow: calc(var(--baseSize) * -0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour);
}

.die_3:after {
    content:"";
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    box-shadow: calc(var(--baseSize) * -0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour);
}

.die_4:after {
    content:"";
    top:50%;
    left:50%;
    background-color:transparent;
    transform: translate(-50%,-50%);
    box-shadow: calc(var(--baseSize) * -0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * -0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour);
}

.die_5:after {
    content:"";
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    box-shadow: calc(var(--baseSize) * -0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * -0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour);
}

.die_6:after {
    content:"";
    top:50%;
    left:50%;
    background-color:transparent;
    transform: translate(-50%,-50%);
    box-shadow: calc(var(--baseSize) * -0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) calc(var(--baseSize) * -0.25) 0 var(--dotColour),
                calc(var(--baseSize) * -0.25) calc(var(--baseSize) * 0.25) 0 var(--dotColour),
                calc(var(--baseSize) * 0.25) 0 0 var(--dotColour),
                calc(var(--baseSize) * -0.25) 0 0 var(--dotColour);
}


.scoreBlock {
    --resize: 1;
    --blockSize: calc(var(--baseSize) * var(--resize));
    display: inline-block;
    padding: calc(var(--blockSize) * 0.1);
    margin: calc(var(--baseSize) * 0.1);
    background: rgb(200 200 200 / 1);
    box-shadow: 1px 1px 3px #646464;
    width: calc(var(--blockSize) * 6.39);
    position: relative;
}

.scoreName {
    position: relative;
    height: calc(var(--blockSize) * 0.4);
    text-align: center;
    font-size: calc(var(--blockSize) * 0.3);
    color: #494949;
}

.scoreLine {
    display: flex;
    position: relative;
}

.scoreSlot {
    padding: calc(var(--blockSize) * 0.05) calc(var(--blockSize) * 0.01);
    cursor:default;
}

.scoreSlot.scoreSlot0 {
    padding-left: calc(var(--blockSize) * 0.1);
}

.scoreSlot.scoreSlot10 {
    padding-right: calc(var(--blockSize) * 0.6);
}

.scoreSlot.slotColour0 {
    background-color:var(--col0);
    color:var(--col0);
}

.scoreSlot.slotColour1 {
    background-color:var(--col1);
    color:var(--col1);
}

.scoreSlot.slotColour2 {
    background-color:var(--col2);
    color:var(--col2);
}

.scoreSlot.slotColour3 {
    background-color:var(--col3);
    color:var(--col3);
}

.scoreSlot.scoreLock {
    --lockSize : var(--blockSize);
    position: absolute;
    left: calc(var(--blockSize) * 5.9);
    top: calc(var(--blockSize) * 0.1);
    width: calc(var(--blockSize) * 0.4);
    height: calc(var(--blockSize) * 0.4);
    border-radius: calc(var(--blockSize) * 1);
    padding: 0;
    box-sizing: border-box;
    border: solid calc(var(--blockSize) * 0.01) rgba(0,0,0,0.5);
    background-color: rgb(255 255 255 / 67%);
    z-index:2;
}

.lockIcon {
    background: #434343;
    border-radius: calc(var(--lockSize) * 0.03);
    width: calc(var(--lockSize) * 0.20);
    height: calc(var(--lockSize) * 0.16);
    position: relative;
    top: calc(var(--lockSize) * 0.15);
    left: calc(var(--lockSize) * 0.09);
    transform: rotate(1deg);
    transition: 1s all;
}

.lockIcon:before {
    content: "";
    display: block;
    position: absolute;
    border: calc(var(--lockSize) * 0.03) solid #ff0000;
    top: calc(var(--lockSize) * -0.13);
    left: calc(var(--lockSize) * 0.05);
    width: calc(var(--lockSize) * 0.12);
    height: calc(var(--lockSize) * 0.095);
    border-radius: calc(var(--lockSize) * 0.35) calc(var(--lockSize) * 0.35) 0 0;
    border-bottom: 0;
    transform: rotate(37deg);
    transition: 1s all;
}

.lockIcon:after {
    content: "";
    position: absolute;
    background-color: rgb(255 255 255 / 67%);
    width: calc(var(--lockSize) * 0.03);
    height: calc(var(--lockSize) * 0.04);
    border-radius: calc(var(--lockSize) * 0.06) calc(var(--lockSize) * 0.06) 0 0 ;
    top: calc(var(--lockSize) * 0.09);
    left: calc(var(--lockSize) * 0.08);
    box-shadow: 0 calc(var(--lockSize) * -0.04) 0 calc(var(--lockSize) * 0.01) rgb(255 255 255 / 67%);
}

.locked .lockIcon:before {
    top: calc(var(--lockSize) * -0.11);
    left: calc(var(--lockSize) * 0.01);
    transform: unset;
}

.scoreSlot.scoreLock.locked .lockIcon {
    animation-name: locking;
    animation-duration: 1000ms;
    animation-timing-function: linear;
}

@keyframes locking {
  0%   {transform: scale(1);}
  50%  {transform: scale(4); filter: drop-shadow(0 0 1px black);}
  100% {transform: scale(1); filter: drop-shadow(0 0 1px black);}
}

.slotValue {
    position: relative;
    width: calc(var(--blockSize) * 0.5);
    height: calc(var(--blockSize) * 0.5);
    line-height: calc(var(--blockSize) * 0.5);
    font-size: calc(var(--blockSize) * 0.35);
    text-align: center;
    box-sizing: border-box;
    border: solid calc(var(--blockSize) * 0.01) rgba(0,0,0,0.5);
    border-radius: calc(var(--blockSize) * 0.1);
    background-color: rgb(255 255 255 / 67%);    
}

.scoreScored {
    display: flex;
    justify-content: space-between;
    background: rgb(0 0 0 / 0.25);
}

.scoreFailures {
    display: flex;
    padding-left: calc(var(--blockSize) * 0.1);
    font-size:calc(var(--blockSize) * 0.14);
    font-weight: bold;
}

.scoreFailure {
    width: calc(var(--blockSize) * 0.3);
    height: calc(var(--blockSize) * 0.3);
    line-height: calc(var(--blockSize) * 0.26);
    text-align: center;
    margin: calc(var(--blockSize) * 0.15) calc(var(--blockSize) * 0.01);
    margin-right: calc(var(--blockSize) * 0.07);
    box-sizing: border-box;
    border: solid calc(var(--blockSize) * 0.02) rgb(255 255 255 / 70%);
    border-radius: calc(var(--blockSize) * 0.1);
    background-color: #171717;
    color: #ececec;
}

.scoreTotals {
    display: flex;
}

.scoreTotal {
    position: relative;
    width: calc(var(--blockSize) * 0.5);
    height: calc(var(--blockSize) * 0.3);
    line-height: calc(var(--blockSize) * 0.26);
    text-align: center;
    margin: calc(var(--blockSize) * 0.15) calc(var(--blockSize) * 0.01);
    margin-right: calc(var(--blockSize) * 0.2);
    background-color: #fff;
    box-sizing: border-box;
    border: solid calc(var(--blockSize) * 0.02);
    border-radius: calc(var(--blockSize) * 0.1);
    font-size: calc(var(--blockSize) * 0.2);
}

.scoreTotal.scoreTotalAll {
    width: calc(var(--blockSize) * 1);
    margin-right: calc(var(--blockSize) * 0.05);
    margin-left: calc(var(--blockSize) * 0.1);
    font-size: calc(var(--blockSize) * 0.17);
}

.scoreTotal.scoreTotal0 {
    border-color:var(--col0);
}

.scoreTotal.scoreTotal1 {
    border-color:var(--col1);
}

.scoreTotal.scoreTotal2 {
    border-color:var(--col2);
}
.scoreTotal.scoreTotal3 {
    border-color:var(--col3);
}

.scoreTotal.scoreTotalFailures {
    background-color: #171717;
    color: #ececec;
    border: solid calc(var(--blockSize) * 0.02) rgb(255 255 255 / 70%);
}

.scoreTotal:after {
    position: absolute;
    left: calc(var(--blockSize) * -0.16);
    font-weight: bold;
    color: #cecece;
    font-size: calc(var(--blockSize) * 0.15);
}

.scoreTotal.scoreTotalAll:after {
    content: "=";
    left: calc(var(--blockSize) * -0.2);
}

.scoreTotal.scoreTotalFailures:after {
    content: "-";    
}

.scoreTotal.scoreTotal1:after, .scoreTotal.scoreTotal2:after, .scoreTotal.scoreTotal3:after  {
    content: "+";    
}

.scoreLine0 .lockIcon {
    background-color: var(--col0);
}

.scoreLine0 .lockIcon:before {
    border-color: var(--col0);
}

.scoreLine1 .lockIcon {
    background-color: var(--col1);
}

.scoreLine1 .lockIcon:before {
    border-color: var(--col1);
}

.scoreLine2 .lockIcon {
    background-color: var(--col2);
}

.scoreLine2 .lockIcon:before {
    border-color: var(--col2);
}

.scoreLine3 .lockIcon {
    background-color: var(--col3);
}

.scoreLine3 .lockIcon:before {
    border-color: var(--col3);
}

.scoreWait {
    height: calc(var(--blockSize) * 0.05);
    width: 100%;
    background: #fff;
}

.scoreWait.running {
    animation-name: waitBar;
    animation-duration: var(--timeLimit);
    animation-timing-function: linear;
}

@keyframes waitBar {
  0% {width: 100%; background: #ffffff;}
  50% {background: #ffffff;}
  75% {background: #ff6900;}
  100% {width: 0%; background: #ff0000;}
}

button {
    border: none;
    background-color: rgb(41, 219, 255);
    border-bottom: calc(var(--blockSize) * 0.05) solid rgb(26, 113, 145);
    text-shadow: 0 calc(var(--blockSize) * -0.02) #1a7191;
    padding: calc(var(--blockSize) * 0.07) calc(var(--blockSize) * 0.25);
    border-radius: calc(var(--blockSize) * 0.05);
    font-size: calc(var(--blockSize) * 0.18);
    color: rgb(255, 255, 255);
    outline: none;
    margin: calc(var(--blockSize) * 0.09) 0 0 calc(var(--blockSize) * 0.05);
    cursor: pointer;
    background-position: calc(var(--blockSize) * -1.2) calc(var(--blockSize) * -0.85), 0 0;
    background-size: 250% 250%, 100% 100%;
    transition: background-position 0s ease;
    background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50% ), -webkit-linear-gradient( rgb(101, 169, 215), rgb(101, 169, 215) );
}

button:active {
    border-bottom-width: calc(var(--blockSize) * 0.01) !important;
    transform: translate(0, calc(var(--blockSize) * 0.04));
}

button:hover, button:active {
    background-position: 0 0, 0 0 !important;
    transition-duration: 0.5s !important;;
}

button.skip {
    display:none;
}

.unavailable {
    filter: brightness(0.7);
}

.chosen {
    filter: brightness(1);
}

.clickable {
    filter: brightness(1.3);
    cursor:pointer;
}

.slotColour1.clickable {
    color: var(--colDark1);
}

.clickable .slotValue {
    border-color: #000;
}

.scoreSlot.chosen .slotValue:after {
    content: "";
    position: absolute;
    background-color: #303030;
    width: calc(var(--blockSize) * 0.61);
    height: calc(var(--blockSize) * 0.02);
    left: calc(var(--blockSize) * -0.07);
    top: calc(var(--blockSize) * 0.24);
    transform: rotate(45deg);
}

.scoreSlot.chosen .slotValue:before {
    content: "";
    position: absolute;
    background-color: #303030;
    width: calc(var(--blockSize) * 0.61);
    height: calc(var(--blockSize) * 0.02);
    left: calc(var(--blockSize) * -0.07);
    top: calc(var(--blockSize) * 0.24);
    transform: rotate(-45deg);
}

.scoreSlot.softMark .slotValue:after {
    content: "";
    position: absolute;
    width: calc(var(--blockSize) * 0.05);
    height: calc(var(--blockSize) * 0.05);
    background: currentColor;
    border-radius: 100%;
    right: calc(var(--blockSize) * 0.05);
    top: calc(var(--blockSize) * 0.05);
}

button.resizeButton {
    position: absolute;
    right: 0;
    height: calc(var(--blockSize) * 0.3);
    width: calc(var(--blockSize) * 0.3);
    cursor: pointer;
    text-align: center;
    line-height: calc(var(--blockSize) * 0.15);
    font-size: calc(var(--blockSize) * 0.2);
    padding: 0;
    font-family: sans-serif;
    font-weight: bold;
    text-shadow: none;
}

button.resizeButton.resizeButton_larger {
    right: unset;
    left: 0;
}

.currentPlayer {
    background: #e5c1ff;
}

.info {
    display: inline-block;
    vertical-align: top;
    height: calc(var(--blockSize) * 0.37);
    width: calc(var(--blockSize) * 1.3);
    margin: calc(var(--blockSize) * 0.1) 0 0 calc(var(--blockSize) * 0.1);
    font-size: calc(var(--blockSize) * 0.12);
    color: #ffffff;
    font-weight: bold;
    font-family: sans-serif;
}

#playerName:hover {
   text-shadow:0 0 calc(var(--baseSize) * 0.05) #fff;
}

#menuWrapper {
    --blockSize: calc(var(--baseSize) * 1.7);
    cursor: default;
}

#gameTitle {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 3;
    font-size: calc(var(--blockSize) * 0.8);
    white-space: nowrap;
}

#gameTitle:after {
    content: "ROLL & WRITE";
    position: absolute;
    top: calc(var(--blockSize) * 0.03);
    left: calc(var(--blockSize) * 0.03);
    color: #127ec6;
    width: 100%;
    z-index: -1;
    text-shadow: 0 0 calc(var(--blockSize) * 0.03) #00fff3;
}

#menu, #lobby {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%,-15%);
    padding: calc(var(--blockSize) * 0.4);
    border: solid 1px #9cfffa;
    border-radius: calc(var(--blockSize) * 0.2);
    box-shadow: calc(var(--blockSize) * 0.075) calc(var(--blockSize) * 0.075) calc(var(--blockSize) * 0.2) #00000080;
    background: #c5e8ff;
}

.vmobile #menu {
/*    width: calc(100% - calc(var(--blockSize) * 1));*/
    margin-top:5%;
}

#menu #gameTitle {
    font-size: calc(var(--blockSize) * 0.6);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: calc(var(--blockSize) * 0.2);
}

.menuItem {
    font-size: calc(var(--blockSize) * 0.4);
    padding-bottom: calc(var(--blockSize) * 0.2);
}

.menuItem select {
    font-size: calc(var(--blockSize) * 0.3);
    border: none;
    outline: none;
    background: transparent;
    text-shadow: calc(var(--blockSize) * 0.02) calc(var(--blockSize) * 0.02) calc(var(--blockSize) * 0.02) #fff;
    cursor: pointer;
    padding: 0 10px;
    box-sizing: border-box;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.menuItem select:hover {
    color:#002b49;
}

.menuItem label {
    width: calc(var(--blockSize) * 2);
    display: inline-block;    
    color: #002b49;
    text-shadow: calc(var(--blockSize) * 0.02) calc(var(--blockSize) * 0.02) calc(var(--blockSize) * 0.02) #fff;
}

.menuButtons {
    text-align: center;
}

.menuButtons button {
    font-size: calc(var(--blockSize) * 0.3);
    background-size: 260% 180%;
    background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50% ), -webkit-linear-gradient( rgb(101, 169, 215), rgb(101, 169, 215) );
    background-position: calc(var(--blockSize) * -2.2) calc(var(--blockSize) * 0), 0 0;
}

input#menu_multiplayer {
    width: calc(var(--blockSize) * 0.3);
    height: calc(var(--blockSize) * 0.3);
}

/*CSS background pattern by Ana Tudor*/
#menu:before, #menu:after, #lobby:before, #lobby:after, #highscores:before, #highscores:after {
    --c0: hsla(0, 0%, 0%, var(--p));
    --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
    background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #91d3ff 0, #ffffff calc(50% + 1px), transparent 0) 50%/ 0.75em 0.75em;
    --m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 45deg, var(--c1) 0%, var(--c1) 90deg);
    z-index: -1;
    --p: 0;
    --s: calc(1 - 2*var(--p));
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-mask: var(--m);
    mask: var(--m);
    content: "";
    border-radius: calc(var(--blockSize) * 0.2);
}

#menu:after, #lobby:after, #highscores:after {
    --p: 1;
}

#multiPlayerGames {
    display: none;
    position: absolute;
    top: 0;
    height: calc(100% - calc(var(--blockSize) * 0.1));
    right: calc(var(--baseSize) * -0.1);
    background: linear-gradient(to bottom, rgb(255 255 255) 0%,rgb(225 239 255) 100%);
    transform: translate(100%,0);
    border-radius: calc(var(--blockSize) * 0.1);
    padding: calc(var(--blockSize) * 0.05);
    overflow-y: auto;
    border: solid 1px #9cfffa;
    box-shadow: calc(var(--blockSize) * 0.075) calc(var(--blockSize) * 0.075) calc(var(--blockSize) * 0.2) #00000080;
}

#multiPlayerGames #availableGamesTitle {
    border-bottom: solid 1px #000;
    padding-bottom: calc(var(--baseSize) * 0.1);
    position: sticky;
    top: 0;
    text-align: center;
    font-size: calc(var(--baseSize) * 0.25);
}

#multiPlayerGames #availableGames {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: calc(var(--baseSize) * 0.1);
    text-align: center;
}

.joinButton {
    text-decoration: underline;
    cursor: pointer;
    color: #0075ff;
    padding: 0 calc(var(--baseSize) * 0.1);
    background-color: #b8d8ed;
    border-radius: calc(var(--baseSize) * 0.1);
    box-sizing: border-box;
    border: solid 1px #002b7a;
    box-shadow: 1px 1px 1px #00163f;
}

.joinButton:hover {
    color: #b8d8ed;
    background-color: #0075ff;
}

#lobby {
    --blockSize: var(--baseSize);
    display: none;
    font-size: calc(var(--blockSize) * 0.5);
    min-height: calc(var(--blockSize) * 4);
}

#lobbyTitle {
    border-bottom: solid 1px #000;
    margin-bottom: calc(var(--blockSize) * 0.1);
}

#lobbyPlayers {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lobbyUrlJoin {
    font-size: calc(var(--baseSize) * 0.4);
    margin-top: calc(var(--baseSize) * 0.4);
}

#lobbyButtons {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--baseSize) * 0.5);
}

#lobbyUrlCopier {
    display: flex;
    align-items: baseline;
}

input#lobbyUrl {
    width: 100%;
    padding: calc(var(--baseSize) * 0.15) 0;
    font-size: calc(var(--baseSize) * 0.175);
    font-family: sans-serif;
    font-weight: bold;
}

button.startMultiButton {
    font-size: calc(var(--blockSize) * 0.4);
    background-position: calc(var(--blockSize) * -2.7) calc(var(--blockSize) * -0.85), 0 0;
}

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

.toast {
    cursor: pointer;
    width: calc(var(--baseSize) * 5);
    text-align: center;
    padding: calc(var(--baseSize) * 0.2) calc(var(--baseSize) * 0.1);
    border-radius: calc(var(--baseSize) * 0.1);
    margin-top: calc(var(--baseSize) * 0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5), inset 0 0 0.3vw #000000;
    border: double 0.3vw #b8d8ed;
    transition: all 250ms;
    background-color: #f0f0f0;
    font-size: calc(var(--baseSize) * 0.25);
}

.toast_error {
    background-color: #f17c7c;
    color: hsl(0deg 100% 41%);
    font-weight: bold;
    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);
}

#playerName {
    position: absolute;
    top: calc(var(--baseSize) * 0.1);
    right: calc(var(--baseSize) * 0.1);
    color: #fff;
    cursor: pointer;
    font-size: calc(var(--baseSize) * 0.4);
    text-shadow: 0 0 calc(var(--baseSize) * 0.02) black;
}

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

#other a, #highscoreToggle {
    color: #0078c9;
    margin: calc(var(--baseSize) * 0.05);
    display: inline-block;
    cursor:pointer;
    text-decoration: underline;
}

#other a:hover, #highscoreToggle:hover {
    color:#000;
    text-decoration: none;
}

#highscores {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: calc(var(--blockSize) * 0.1);
    border: solid 1px #64ffc6;
    border-radius: calc(var(--blockSize) * 0.2);
    box-shadow: calc(var(--blockSize) * 0.075) calc(var(--blockSize) * 0.075) calc(var(--blockSize) * 0.2) #00000080;
    background: #c5ffdd;
    z-index: 100;
}

.highscoreMenu {
    overflow-y: auto;
    height: 80vh;
    min-width: 50vw;
    overflow-x: hidden;
    font-size: calc(var(--baseSize) * 0.4);
    color: #303030;
}

.highscoreMenuSelect {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-evenly;
    background-color: rgb(199 255 222 / 90%);
    padding: calc(var(--baseSize) * 0.10);
    z-index: 2;
}

.highscoreMenuItem {
    padding: calc(var(--baseSize) * 0.10);
    background-color: #89ffbe;
    border: solid 1px #00ff13;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.2) #00ff1361;
}

.highscoreMenuItem.highscoreMenuItemSelected {
    background-color: #fff;
}

.highscoreMenuItem:hover:not(.highscoreMenuItemSelected) {
    background-color: #d5ffe8;
}

.highscorePage {
    display: grid;
    grid-template-columns: 2fr 16fr 6fr 12fr 5fr;
    padding: 0 calc(var(--baseSize) * 0.3);
    position: relative;
    font-size: calc(var(--baseSize) * 0.35);
}

.highPageHead {
    text-decoration: underline;
    color: #005d3c;
    padding-bottom: calc(var(--baseSize) * 0.1);
    position: sticky;
    top: calc(var(--baseSize) * 0.9);
    background: rgb(197 254 223 / 0.8);
}

.highscoreMenu::-webkit-scrollbar {
    width: calc(var(--baseSize) * 0.15);
    height: calc(var(--baseSize) * 0.15);
}
 
.highscoreMenu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.1) rgb(0 0 0 / 85%);
    border-radius: 10px;
    background-color: rgb(68 68 68 / 61%);
}
 
.highscoreMenu::-webkit-scrollbar-thumb {
    border-radius: calc(var(--baseSize) * 0.15);
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.1) #04ffd3;
    background-color: rgba(32, 158, 136,0.5);
}

.highscoreTitle {
    position: absolute;
    z-index: 3;
    font-size: calc(var(--baseSize) * 0.9);
    pointer-events: none;
    color: #000000;
    transform: translate(-50%,-82%);
    left: 50%;
}

.highscoreTitle:after {
    content: "HIGHSCORES";
    position: absolute;
    top: calc(var(--baseSize) * 0.03);
    left: calc(var(--baseSize) * 0.03);
    color: #70ff9f;
    width: 100%;
    z-index: -1;
    text-shadow: 0 0 calc(var(--blockSize) * 0.03) #68ff73;
}

.highscoreClose {
    position: absolute;
    right: 0;
    transform: translate(100%,-100%);
    font-family: sans-serif;
    font-weight: bold;
    font-size: calc(var( --baseSize) * 0.4);
    cursor: pointer;
}

.highscoreClose:hover {
    color: #7cffad;
    text-shadow: 0 0 1px #000;
}

.highscoreField_multi {
    position: relative;
    text-align: center;
}

.highIsMulti_1:after {
    position: absolute;
    content: "✔";
    font-size: calc(var(--baseSize) * 0.3);
    font-weight: bold;
    line-height: calc(var(--baseSize) * 0.4);
}

.highIsMulti_0:after {
    position: absolute;
    content: "✖";
    font-family: monospace;
    font-size: calc(var(--baseSize) * 0.3);
    font-weight: bold;
    line-height: calc(var(--baseSize) * 0.4);
}

#playAgain {
    display:none;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#playAgain button {
    font-size: calc(var(--baseSize) * 0.65);
    --blockSize: var(--baseSize);
    background-position: calc(var(--blockSize) * -4) calc(var(--blockSize) * -0.85), 0 0;
    border-bottom: calc(var(--blockSize) * 0.05) solid rgb(30 26 145);
    text-shadow: 0 calc(var(--blockSize) * -0.02) #341a91;
    background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50% ), -webkit-linear-gradient( rgb(115 101 215), rgb(131 101 215) );
    border-radius: calc(var(--blockSize) * 0.1);
}

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