/*
 Copyright (C) 2019 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/css?family=Finger+Paint|Ultra|Montserrat|Butcherman&display=swap');

html {
    background-color:#030B0B;
}

button {
    position:relative;
}

body {
    margin: 0;
    --blockSize: 50;
    overflow:hidden;
}

#game {
    width: calc(var(--blockSize) * var(--horizontalSize) * 1px);
    position: relative;
    /*height: calc(100vh + 3px);*/
    height: calc(calc(var(--blockSize) * (var(--verticalSize) + 0.5 ) * 1px) + 3px);
    margin: 0 auto;
    top: -3px;
}

#grid {
    z-index: 1;
    width: 100%;
    height: 100%;
    bottom: 5px;
    left: 0;
    position: absolute;
}

#grid .gridRow {
    width: calc(var(--blockSize) * 1px);
    height: 100%;
    display: inline-block;
}

#grid .gridRow div {
    width: calc(var(--blockSize) * 1px);
    background-image: url(img/gridslice.png);
    height: calc(var(--blockSize) * 1px);
    background-size: contain;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

canvas#gameBack {
    position:absolute;
    width: calc(var(--blockSize) * var(--horizontalSize) * 1px);
    /*height: calc(100vh + 3px);*/
    height: calc(calc(var(--blockSize) * (var(--verticalSize) + 0.5 ) * 1px) + 3px);
    top:0px;
    left:0px;
    z-index:0;
}

#canvas {
    position: absolute;
    z-index: 2;
    bottom: 5px;
    pointer-events: none;
}

.pillar {
    position: absolute;
    /*height: calc(100vh + 3px);*/
    height: calc(calc(var(--blockSize) * (var(--verticalSize) + 0.5 ) * 1px) + 3px);
    top: 0px;
    left: calc(var(--blockSize) * -2.5px);
    z-index: 3;
    pointer-events:none;
}

.pillar.pillarRight{
    left:unset;    
    right: calc(var(--blockSize) * -2.5px);
     -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.pillar.pillarRight.pillarRight2 {
    z-index: 2;
    left: calc(var(--blockSize) * -2.5px);
    right: unset;
}

.pillar.pillarLeft2 {
    left: unset;
    z-index: 2;
    right: calc(var(--blockSize) * -2.5px);
}

.pillar img {
    display: block;
}

img.pillarTop, img.pillarBottom {
    width: calc(var(--blockSize) * 3px);
    height: calc(var(--blockSize) * 1.6px);
    position: absolute;
    left: 0px;
}

img.pillarTop {
    top:0px;
}

img.pillarBottom {
    bottom:0px;
}

img.pillarCenter {
    position: absolute;
    top: calc(var(--blockSize) * 1.4px);
    /*height: calc(100vh + 3px - calc(var(--blockSize) * 2.95px));*/
    height: calc(calc(calc(var(--blockSize) * (var(--verticalSize) + 0.5 ) * 1px) + 3px) - calc(var(--blockSize) * 2.95px) );
    width: calc(var(--blockSize) * 3px);
}

.lava {
    position: absolute;
    left: 0px;
    z-index: 2;
    width: calc(var(--blockSize) * var(--horizontalSize) * 1px);
    bottom: 0px;
    background-image: url(img/lava.png);
    pointer-events:none;
}

.lava div {
    width: calc(var(--blockSize) * 1px);
    height: calc(var(--blockSize) * 3.6px);
    display: inline-block;
    background-image: url(img/lava.png);
    background-size: calc(var(--blockSize) * 11px) calc(var(--blockSize) * 3.6px);
    background-position-x: 0;
    background-position-y: bottom;
    animation: lavaMove 1s infinite;
}

@keyframes lavaMove {
  0% { background-position-x: calc(var(--blockSize) * 0px); }
  8.99% { background-position-x: calc(var(--blockSize) * 0px); }
  9% { background-position-x:  calc(var(--blockSize) * -1px); }
  17.99% { background-position-x:  calc(var(--blockSize) * -1px); }
  18% { background-position-x:  calc(var(--blockSize) * -2px); }
  26.99% { background-position-x:  calc(var(--blockSize) * -2px); }
  27% { background-position-x:  calc(var(--blockSize) * -3px); }
  35.99% { background-position-x:  calc(var(--blockSize) * -3px); }
  36% { background-position-x:  calc(var(--blockSize) * -4px); }
  44.99% { background-position-x:  calc(var(--blockSize) * -4px); }
  45% { background-position-x:  calc(var(--blockSize) * -5px); }
  53.99% { background-position-x:  calc(var(--blockSize) * -5px); }
  54% { background-position-x:  calc(var(--blockSize) * -6px); }
  62.99% { background-position-x:  calc(var(--blockSize) * -6px); }
  63% { background-position-x:  calc(var(--blockSize) * -7px); }
  71.99% { background-position-x:  calc(var(--blockSize) * -7px); }
  72% { background-position-x:  calc(var(--blockSize) * -8px); }
  80.99% { background-position-x:  calc(var(--blockSize) * -8px); }
  81% { background-position-x:  calc(var(--blockSize) * -9px); }
  89.99% { background-position-x:  calc(var(--blockSize) * -9px); }
  90% { background-position-x:  calc(var(--blockSize) * -10px); }
  100% { background-position-x:  calc(var(--blockSize) * -10px); }
}

.screenShake {
  animation: shake 0.2s; 
}

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

#clock {
    visibility: hidden;
    position: absolute;
    right: calc(var(--blockSize) * -5.5px);
    width: calc(var(--blockSize) * 5px);
    z-index: 6;
    top: calc(var(--blockSize) * 0.4px);
    height: calc(var(--blockSize) * 5px);
    background-image: url(img/goalclock.png);
    background-size: calc(var(--blockSize) * 5px) auto;
    background-repeat: no-repeat;
    filter: drop-shadow(calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.2px) black);
}

#clock  canvas#clockCanvas {
    position: absolute;
    top: calc(var(--blockSize) * 1px);
    left: calc(var(--blockSize) * 0.48px);
    z-index:1;
}

#clock #clockBottom {
    position: absolute;
    top: calc(var(--blockSize) * 2.8px);
    left: calc(var(--blockSize) * 0.1px);
    z-index: 2;
    background-image: url(img/clockunder.png);
    background-size: calc(var(--blockSize) * 2.8px) calc(var(--blockSize) * 1.4px);
    background-repeat: no-repeat;
    width: calc(var(--blockSize) * 2.8px);
    height: calc(var(--blockSize) * 1.4px);
    color: #FCFCFC;
    font-family: 'Finger Paint', cursive;
    text-align: center;
    line-height: calc(var(--blockSize) * 1.15px);
    font-size: calc(var(--blockSize) * 0.45px);
}

#spellCasting {
    display:none;
    position: absolute;
    right: calc(var(--blockSize) * -3.6px);
    width: calc(var(--blockSize) * 3px);
    z-index: 5;
    top: calc(var(--blockSize) * 7px);
    min-height: calc(var(--blockSize) * 2px);
    background-image: url(img/boardBack.jpg);
    background-size: calc(var(--blockSize) * 3px) auto;
    height: calc(var(--blockSize) * 6.5px);
}

#spells {
    position: absolute;
    z-index: 1;
    padding: calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.35px);
    width: calc(var(--blockSize) * 3.5px);
    box-sizing: border-box;
    height: calc(var(--blockSize) * 6.5px);
}

#spells .spell {
    width: calc(var(--blockSize) * 2.1px);
    padding: calc(var(--blockSize) * 0.07px);
}

#spells .spell:hover {
    background-color:rgba(255,255,255,0.1);
} 

#spells .spell.casting {
    background-color: #12b05924;
}

#spells #manaBowl {
    height: calc(var(--blockSize) * 6.4px);
    width: calc(var(--blockSize) * 0.5px);
    position: absolute;
    left: calc(var(--blockSize) * -0.5px);
    top: 0;
}

#spells #manaBowl:before {
    content: "";
    background-color: #e400ff;
    position: absolute;
    bottom: 0;
    border-radius: calc(var(--blockSize) * 0.1px);
    width: 100%;
    height: calc(var(--manaHeight) * 1%);
    z-index: -1;
    border-top: inset 2px #4c0056;
    transition: all 0.5s;
}

#spells #manaBowl img {
    height: calc(var(--blockSize) * 6.4px);
    width: calc(var(--blockSize) * 0.5px);
}

#spells .spellName {
    color: #FCFCFC;
    font-family: 'Finger Paint', cursive;
    font-size: calc(var(--blockSize) * 0.2px);
    text-align: right;
    margin-right: calc(var(--blockSize) * 0.1px);
}

#spells .spellLight {
    width: calc(var(--blockSize) * 0.25px);
    height: calc(var(--blockSize) * 0.25px);
    display:inline-block;
}

#spells .spellLight.spell_true {
    background-color: #ABFF00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 6px;   
}

#spells .spellLight.spell_false {
    background-color: #F00;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;    
}

#spells .spellBar {
    display: inline-block;
    width: calc(var(--blockSize) * 1.75px);
    height: calc(var(--blockSize) * 0.1px);
    margin-left: calc(var(--blockSize) * 0.05px);
    margin-bottom: calc(var(--blockSize) * 0.075px);
    border-radius: calc(var(--blockSize) * 1.5px);
    position: relative;
    box-sizing: border-box;
    border: inset 1px #dbdbdb;
    overflow: hidden;
    background-color: #9d0000;
}

#spells .spellBar .spellBarInner {
    height: calc(var(--blockSize) * 0.1px);
    width: 0%;
    background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);
    border-radius: calc(var(--blockSize) * 0.1px);
}

#sign {
    visibility: hidden;
    position: absolute;
    right: calc(var(--blockSize) * -4px);
    width: calc(var(--blockSize) * 3.5px);
    z-index: 5;
    top: calc(var(--blockSize) * 5px);
    filter: drop-shadow(calc(var(--blockSize) * 0.5px) calc(var(--blockSize) * 0.5px) calc(var(--blockSize) * 0.4px) black);
}

.oneDungeon #sign {
    top: calc(var(--blockSize) * 1px);
}

#sign img {
    position: absolute;
    left: 0;
    width: calc(var(--blockSize) * 3.5px);
    z-index: 2;
    top: 0;
}

#signText {
    position: absolute;
    left: calc(var(--blockSize) * 0.25px);
    z-index: 1;
    top: calc(var(--blockSize) * 0.24px);
    width: calc(var(--blockSize) * 2.9px);
    height: calc(var(--blockSize) * 0.7px);
    text-align: center;
    color: #000;
    font-family: 'Ultra', serif;
    font-size: calc(var(--blockSize) * 0.35px);
    background-color: #efefef;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    background-image: url(img/casinogradient.png);
    background-size: auto 100%;
}
.signNumber {
    line-height: calc(var(--blockSize) * 0.7px);
}

.spin.signNumber {
    background-image: url(img/casino.png);
    background-repeat: no-repeat;
    background-position: calc(var(--blockSize) * 0px);
    background-size: cover;
    color:transparent;
    animation: spin 0.25s infinite;
}

@keyframes spin {
  0% { background-position: calc(var(--blockSize) * 0px); } 
  24.9% { background-position: calc(var(--blockSize) * 0px); }
  25% { background-position: calc(var(--blockSize) * -0.57px); }
  49.9% { background-position: calc(var(--blockSize) * -0.57px); }
  50% { background-position: calc(var(--blockSize) * -1.14px); }
  74.9% { background-position: calc(var(--blockSize) * -1.14px); }
  75% { background-position: calc(var(--blockSize) * -1.67px); }
  100% { background-position: calc(var(--blockSize) * -1.67px); }
}

#safeWheel {
    position: absolute;
    left: calc(var(--blockSize) * 0.3px);
    z-index: 2;
    top: calc(var(--blockSize) * 1.8px);
    width: calc(var(--blockSize) * 2.44px);
    height: calc(var(--blockSize) * 1.8px);
    background-image: url(img/safewheel.png);
    background-size: cover;
    background-repeat: no-repeat;
    filter: drop-shadow(calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) #000);
}

.spinWheel #safeWheel {
    animation: spinwheel 0.25s infinite;
}

@keyframes spinwheel {
  0% { background-position-x: 0); } 
  19.99% { background-position-x: calc(var(--blockSize) * 2.44px * 0); } 
  20% { background-position-x: calc(var(--blockSize) * 2.44px * -1); } 
  39.99% { background-position-x: calc(var(--blockSize) * 2.44px * -1); } 
  40% { background-position-x: calc(var(--blockSize) * 2.44px * -2); } 
  59.99% { background-position-x: calc(var(--blockSize) * 2.44px * -2); } 
  60% { background-position-x: calc(var(--blockSize) * 2.44px * -3); } 
  79.99% { background-position-x: calc(var(--blockSize) * 2.44px * -3); } 
  80% { background-position-x: calc(var(--blockSize) * 2.44px * -4); } 
  99.99% { background-position-x: calc(var(--blockSize) * 2.44px * -4); } 
  100% { background-position-x: 0); } 
}

#nextBlocks, #goldHolding {
    visibility: hidden;
    position: absolute;
    left: calc(var(--blockSize) * -3.8px);
    width: calc(var(--blockSize) * 3.5px);
    z-index: 5;
    top: calc(var(--blockSize) * 0.9px);
    height: calc(var(--blockSize) * 4.5px);
    background-position: center;
    filter: drop-shadow(calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.2px) rgba(0,0,0,0.5));
    color: #FCFCFC;
    padding: calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.2px);
    box-sizing: border-box;
    background-image: url(img/boardBack.jpg);
    background-size: calc(var(--blockSize) * 3.5px) auto;
}

#goldHolding {
    left: unset;
    right: calc(var(--blockSize) * -4.1px);
    top: calc(var(--blockSize) * 10.7px);
    height: calc(var(--blockSize) * 2.5px);
}

#nextBlocksText, #goldHoldingText {
    z-index: 2;
    position: absolute;
    top: calc(var(--blockSize) * 0.25px);
    left: calc(var(--blockSize) * 0.8px);
    width: calc(var(--blockSize) * 2px);
}

#goldHoldingText {
    top: calc(var(--blockSize) * 0.35px);
}

#nextBlocksCanvas {
    left: calc(var(--blockSize) * 0.25px);
    top: calc(var(--blockSize) * 1.3px);
    z-index: 1;
    position: absolute;
}

img#nextBlocksTop, img#goldHoldingTop {
    position: absolute;
    top: calc(var(--blockSize) * -0.5px);
    width: 100%;
    left: 0;
    z-index:0;
}

img#nextBlocksBottom, img#goldHoldingBottom  {
    position: absolute;
    bottom: calc(var(--blockSize) * -0.42px);
    width: 100%;
    left: 0;
    z-index:0;
}

#holdingText {
    position: absolute;
    left: calc(var(--blockSize) * 1.4px);
    z-index: 6;
    top: calc(var(--blockSize) * 1.05px);
    width: calc(var(--blockSize) * 1.6px);
    text-align: left;
    color: #FCFCFC;
    font-family: 'Finger Paint', cursive;
    font-size: calc(var(--blockSize) * 0.5px);
    line-height: calc(var(--blockSize) * 0.45px);
    transform: rotate(-4deg);
}

#monsterBoard {
    visibility: hidden;
    position: absolute;
    left: calc(var(--blockSize) * -3.7px);
    width: calc(var(--blockSize) * 3.5px);
    z-index: 5;
    top: calc(var(--blockSize) * 6px);
    background-image: url(img/monsterboard.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: calc(var(--blockSize) * 4.7px);
    background-position: center;
    filter: drop-shadow(calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.2px) rgba(0,0,0,0.5));
    color: #FCFCFC;
    font-family: 'Finger Paint', cursive;
    display: grid;
    padding: calc(var(--blockSize) * 0.82px) calc(var(--blockSize) * 0.55px) calc(var(--blockSize) * 0.6px) calc(var(--blockSize) * 1.125px);
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    box-sizing: border-box;
    text-align: center;
    font-size: calc(var(--blockSize) * 0.5px);
    line-height: calc(var(--blockSize) * 0.6px);
}

#pregame {
    position: absolute;
    z-index: 3;
    top: 0;
    background-color: #030b0b;
    height: calc(calc(var(--blockSize) * (var(--verticalSize) + 0.5 ) * 1px) + 3px);
    width: calc(var(--blockSize) * var(--horizontalSize) * 1px);
    left: calc(calc(100vw - calc(var(--blockSize) * var(--horizontalSize) * 1px)) / 2);
}

#pregame img {
    margin-top: 5vh;
    width: calc(var(--blockSize) * var(--horizontalSize) * 1px);
    width: calc(100vw - (var(--blockSize * var(--horizontalSize) * 1px)) / 2)
}

#loading {
    color: #ff0299;
    font-size: calc(var(--blockSize) * 2px);
    padding: 0 calc(var(--blockSize) * 0.5px);
    border-radius: calc(var(--blockSize) * 0.2px);
    margin-top: calc(var(--blockSize) * 4px);
    margin-left: 50%;
    transform: translate(-50%,0);
    text-align: center;
    animation: load 1s infinite;
    position: absolute;
    top: 20vh;
}

@keyframes load {
    0% { color: #ff0299; }
    50% { color: #fff; }
    100% { color: #ff0299; }
}

#waveContainer {
    position: absolute;
    top: calc(var(--blockSize) * -0.7px);
    left: 0;
    width: calc(var(--blockSize) * var(--horizontalSize) * 1px);
    z-index: 1;
    overflow:hidden;
    height: calc(var(--blockSize) * 2px);
}

#wave {
    position: absolute;
    bottom: calc(var(--blockSize) * 0.26px);
    right: calc(var(--blockSize) * 1px);
    height: calc(var(--blockSize) * 0.6px);
    width: calc(var(--blockSize) * 20px);    
    white-space: nowrap;
    text-align: right;
}

#entranceFront, #entranceBack {
    position: absolute;
    top: calc(var(--blockSize) * 0px);
    /*left: calc(var(--blockSize) * 18px);*/
    left: calc(var(--blockSize) * calc(var(--horizontalSize) - 2) * 1px);
    width: calc(var(--blockSize) * 3px);
    height: calc(var(--blockSize) * 1.3px);
    background-size: cover;
    background-repeat: no-repeat;
}

#entranceFront {
    z-index: 2;
    background-image: url(img/entranceFront.png);
    left: calc(calc(var(--blockSize) * calc(var(--horizontalSize) - 2) * 1px) - 1px);
    /*left: calc(calc(var(--blockSize) * 18px) - 1px);*/
}

#entranceBack {
    z-index: 0;
    background-image: url(img/entranceBack.png);
}

.mob {
    display: inline-block;
    --mobWidth: calc(var(--blockSize) * 0.43);
    width: calc(var(--mobWidth) * 1px);
    height: calc(var(--mobWidth) * 2px);
    background-repeat: no-repeat;
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.2px);
    animation: walk 1s infinite;
    margin-right: calc(var(--mobWidth) * -0.5px);
    background-position-y: bottom;
}

.mob.groupStart {
    margin-right: calc(var(--mobWidth) * 0.5px);
    position: relative;
}

.mob.groupBanner:before {
    position: absolute;
    content: "";
    background-image: url(img/flagbanner.png);
    width: calc(var(--mobWidth) * 0.75px);
    height: calc(var(--mobWidth) * 2.5px);
    background-size: calc(var(--mobWidth) * 4.5px) calc(var(--mobWidth) * 2.5px);
    bottom: calc(var(--mobWidth) * 0.2px);
    left: calc(var(--mobWidth) * 0.3px);
    z-index: -1;
    animation: wavebanner 0.5s infinite;   
}

.mob.prince.groupBanner:before, .mob.saint.groupBanner:before  {
    content:none;
}

@keyframes wavebanner {
    0% { background-position-x: calc(var(--mobWidth) * -0px)}
    15.99% { background-position-x: calc(var(--mobWidth) * -0px)}
    16% { background-position-x: calc(var(--mobWidth) * -0.75px)}
    31.99% { background-position-x: calc(var(--mobWidth) * -0.75px)}
    32% { background-position-x: calc(var(--mobWidth) * -1.5px)}
    47.99% { background-position-x: calc(var(--mobWidth) * -1.5px)}
    48% { background-position-x: calc(var(--mobWidth) * -2.25px)}
    65.99% { background-position-x: calc(var(--mobWidth) * -2.25px)}
    66% { background-position-x: calc(var(--mobWidth) * -3px)}
    81.99% { background-position-x: calc(var(--mobWidth) * -3px)}
    82% { background-position-x: calc(var(--mobWidth) * -3.75px)}
    99.99% { background-position-x: calc(var(--mobWidth) * -3.75px)}
    100% { background-position-x: calc(var(--mobWidth) * -0px)}
}

.mob.knight {
    background-image:url(img/knightRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.2px);
}

.mob.paladin {
    background-image:url(img/paladinRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.4px);
}

.mob.dwarf {
    background-image:url(img/dwarfRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1px);
}

.mob.sapper {
    background-image:url(img/sapperRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.77px);
}

.mob.elf {
    background-image:url(img/elfRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.3px);
}

.mob.priest {
    background-image:url(img/priestRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.2px);
}

.mob.elementalist {
    background-image:url(img/elementalistRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.7px);
}

.mob.demolisher {
    background-image:url(img/demolisherRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 1.7px);
}

.mob.hobbit {
    background-image:url(img/hobbitRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 0.9px);
}

.mob.prince {
    background-image: url(img/princeRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 2px);
    filter: drop-shadow(0 0 calc(var(--mobWidth) * 0.2px) #fff);
}

.mob.saint {
    background-image: url(img/angelRight.png);
    background-size: calc(var(--mobWidth) * 12px) calc(var(--mobWidth) * 2px);
    filter: drop-shadow(0 0 calc(var(--mobWidth) * 0.2px) goldenrod);
}

.mob.groupStart.hobbit:before, .mob.groupStart.dwarf:before {
    bottom: 0px;
}

#diffContainer {
    position: absolute;
    top: 1vh;
    left: 2vw;
}

select#difficulty {    
    border: 0;
    background: transparent;
    color: white;
    font-family: 'Finger Paint', cursive;
    font-size: calc(var(--blockSize) * 0.4px);
    outline: none;
}

select#difficulty option {
    color: #fff;
    background: #000;
    outline: 0;
}

#diffContainer .playModeInfoText {
    left: 0;
    right: unset;
}



@keyframes walk {
    0% { background-position-x: calc(var(--mobWidth) * -0px)}
    8.99% { background-position-x: calc(var(--mobWidth) * -0px)}
    9% { background-position-x: calc(var(--mobWidth) * -1px)}
    17.99% { background-position-x: calc(var(--mobWidth) * -1px)}
    18% { background-position-x: calc(var(--mobWidth) * -2px)}
    26.99% { background-position-x: calc(var(--mobWidth) * -2px)}
    27% { background-position-x: calc(var(--mobWidth) * -3px)}
    35.99% { background-position-x: calc(var(--mobWidth) * -3px)}
    36% { background-position-x: calc(var(--mobWidth) * -4px)}
    44.99% { background-position-x: calc(var(--mobWidth) * -4px)}
    45% { background-position-x: calc(var(--mobWidth) * -5px)}
    53.99% { background-position-x: calc(var(--mobWidth) * -5px)}
    54% { background-position-x: calc(var(--mobWidth) * -6px)}
    62.99% { background-position-x: calc(var(--mobWidth) * -6px)}
    63% { background-position-x: calc(var(--mobWidth) * -7px)}
    71.99% { background-position-x: calc(var(--mobWidth) * -7px)}
    72% { background-position-x: calc(var(--mobWidth) * -8px)}
    80.99% { background-position-x: calc(var(--mobWidth) * -8px)}
    81% { background-position-x: calc(var(--mobWidth) * -9px)}
    89.99% { background-position-x: calc(var(--mobWidth) * -9px)}
    90% { background-position-x: calc(var(--mobWidth) * -10px)}
    94.99% { background-position-x: calc(var(--mobWidth) * -10px)}
    95% { background-position-x: calc(var(--mobWidth) * -11px)}
    99.99% { background-position-x: calc(var(--mobWidth) * -11px)}
    100% { background-position-x: calc(var(--mobWidth) * -0px)}
}

.flyGold {
    display: none;
    --goldWidth: calc(var(--blockSize) * 1);
    position: absolute;
    z-index: 10;
    top: calc(var(--goldWidth) * var(--y) *1px);
    left: calc(var(--goldWidth) * var(--x) *1px);
    width: calc(var(--goldWidth) *1px);
    height: calc(var(--goldWidth) *1px);
    background-image: url(img/goldflow.png);
    background-size: calc(var(--goldWidth) *6px) calc(var(--goldWidth) *1px);
}

.flyGold.fly {
    display:block;
    animation: fly 0.25s infinite, rotate 1s linear infinite;
}

@keyframes fly {
    0% { background-position-x: calc(var(--goldWidth) * -0px)}
    15.99% { background-position-x: calc(var(--goldWidth) * -0px)}
    16% { background-position-x: calc(var(--goldWidth) * -1px)}
    31.99% { background-position-x: calc(var(--goldWidth) * -1px)}
    32% { background-position-x: calc(var(--goldWidth) * -2px)}
    47.99% { background-position-x: calc(var(--goldWidth) * -2px)}
    48% { background-position-x: calc(var(--goldWidth) * -3px)}
    65.99% { background-position-x: calc(var(--goldWidth) * -3px)}
    66% { background-position-x: calc(var(--goldWidth) * -4px)}
    81.99% { background-position-x: calc(var(--goldWidth) * -4px)}
    82% { background-position-x: calc(var(--goldWidth) * -5px)}
    99.99% { background-position-x: calc(var(--goldWidth) * -5px)}
    100% { background-position-x: calc(var(--goldWidth) * -0px)}
}

@keyframes rotate { 
    0% { transform: rotate(0deg) scale(1); opacity:1}
    50% { transform:rotate(180deg) scale(1.75); opacity:1}
    100% { transform: rotate(360deg) scale(0.25); opacity:0.5} 
}

#highscoreTableContainer {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.8);
    display:none;
}

#highscoreTable {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%,-50%);
    width: 30vw;
    height: 80vh;
    z-index: 100;
    border-radius: 0.5vh;
    color: #e4e3e3;
    font-size: 1.8vh;
    font-family: 'Finger Paint', cursive;
    padding: 2vh 2vw;
    box-sizing: border-box;
    background-color: #111;
    border: ridge 1vh rgba(33, 33, 33, 0.25);
    cursor: default;
    box-shadow: 0.5vw 1vh 0.5vw #000000;
    background-image: url(img/blackboard.jpg);
    background-size: cover;
}

#highscoreTable .closeHighScoreTable {
    top: -1vh;
    position: absolute;
    right: 1vh;
    font-size: 2vw;
    cursor: pointer;
}

#highscoreTable .closeHighScoreTable:hover {
    color: #DBC336;
}

#highscoreTable #highscoreHeader {
    /*border-bottom: solid 0.3vh;*/
    margin: 2vh 0;
}

#highscoreTable #highscoreTitle {
    text-align: center;
    font-size: 1.6vw;
    text-decoration: underline;
    margin-bottom: 2vh;
}

#highscoreTable .highscoreTab {
    display: inline-block;
    width: 40%;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 1.2vw;
    border: solid 0.3vh;
    border-bottom: none;
    margin: 0 5%;
}

#highscoreTable .highscoreTab:hover, #highscoreTable .highscoreTab.activeTab {
    color: #DBC336;
}


#highscoreTable .scoreList {
    overflow-y: auto;
    height: 60vh;
}

#highscoreTable .scoreLine:hover {
    font-weight:900;
    cursor: default;
    color:#fff;
}

#highscoreTable .scoreLine .scorePlayer, #sideHighScores .scoreLine .scorePlayer {
    text-align: left;
    width: 43%;
    display: inline-block;
    padding-left:7%;
}

#highscoreTable .scoreLine .scoreScored, #sideHighScores .scoreLine .scoreScored {
    text-align: right;
    width: 43%;
    display: inline-block;
    padding-right:7%;
}


#encyclopedia {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    position: absolute;
    top: 0;
    z-index: 5;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0.5vw 0.5vh 0.5vh black);
}

#encyclopediaText {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%,-50%);
    width: 60vw;
    height: 100vh;
    z-index: 100;
    border-radius: 0.5vh;
    display: flex;
    color: #e2f0ff;
    font-size: 1.8vh;
    font-family: 'Finger Paint', cursive;
    background-image: url(img/blueprintCenter.png);
    background-size: 60vw 110vh;
    padding: 10vh 0 24vh 0;
    background-repeat: no-repeat;
    background-position: top left;
    box-sizing: border-box;
    animation: openEnc 1s;
    animation-iteration-count: 1
}

@keyframes openEnc { 
    0% { width: 0vw; background-size: 0vw 110vh;}
    100% { width: 60vw; background-size: 60vw 110vh;} 
}

#encyclopediaText:before {
    content: "";
    background-image: url(img/blueprintLeft.png);
    width: 30vw;
    height: 110vh;
    position: absolute;
    left: calc(-30vw + 1px);
    top: -4px;
    background-size: auto 110vh;
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -1;
}


#encyclopediaText:after {
    content: "";
    background-image: url(img/blueprintRight.png);
    width: 30vw;
    height: 110vh;
    position: absolute;
    right: calc(-30vw + 1px);
    top: 1px;
    background-size: auto 110vh;
    background-repeat: no-repeat;   
    background-position: top left;
    z-index: -1
}

.encyclopediaMenu {
    width: 19vw;
    border-right: solid 1px #fff;
    margin-right: 2vw;
    margin-top: 5vh;
}

.encyclopediaDisplay {
    width: 54vw;
    margin-top: 5vh;
}

.encyclopediaMenuItem {
    cursor:pointer;
    margin-bottom: 2vh;
}

.encyclopediaMenuItem.selectedTopic {
    font-weight: bold;
}

.encyclopediaMenuSubItem {
    margin-left: 1vw;
    font-weight: normal;
    cursor:pointer;
    color:#e2f0ff;
    text-shadow: unset;
    font-size: 1.6vh;
}

.encyclopediaMenuItem:hover, .encyclopediaMenuSubItem:hover, .topicLink:hover {
    color: #ffffff;
    text-shadow: 0 0 0.1vw #0014ff;
}

.encyclopediaMenuSubItem.selectedTopic {
    font-weight: bold;
    color:#fff;
}

.topicTitle {
    font-size: 3vh;
    font-weight: 900;
}

.topicLink {
    text-decoration: underline;
    cursor:pointer;
}

.topicDescription {
    margin-top: 2vh;
    margin-bottom: 1vh;
}

.topicImage {
    position:relative;
    border-radius: 0.5vh;
    display:inline-block;
    border: solid 2px #fff;
    box-sizing: border-box;
}

.topicImage_tiles {
    --tileSize: calc(var(--blockSize) * 4);
    width:calc(var(--tileSize) * 1px);
    height:calc(var(--tileSize) * 1px);
    background-Image: url(img/tiles1.jpg);
    background-size: calc(var(--tileSize) * 30px);
}

.topicImage_traps {
    --tileSize: calc(var(--blockSize) * 4);
    width:calc(var(--tileSize) * 1px);
    height:calc(var(--tileSize) * 1px);
    background-image: url(img/largeTraps.png?v=0);
    background-size: calc(var(--tileSize) * 4px);
    background-repeat: no-repeat;
    right:2px;
    border:none;
}

.topicImageContainer_wreckball {
    display: grid;
    position: relative;
    --tileSize: calc(var(--blockSize) * 4);
    grid-template-rows: calc(var(--tileSize) * 1px) calc(var(--tileSize) * 1px);
    grid-template-columns: calc(var(--tileSize) * 1px) calc(var(--tileSize) * 1px) calc(var(--tileSize) * 1px);
    width: calc(var(--tileSize) * 3px);
    height: calc(var(--tileSize) * 2px);
}

/* weight trap uses wreckball container too */
.topicImageContainer_wreckball .topicImage.topicImage_traps.topicImage_traps_weight {
    position: absolute;
    left: calc(var(--tileSize) * 1px);
    top: calc(var(--tileSize) * 0.25px);
}

.topicCorridorImage {
    margin-right:0.5vw;
}

.topicDragonImage0 {
    border-radius: 1vh 0 0 0;
    float: left;
    border-bottom:none;
    border-right:none;
}

.topicDragonImage1 {
    border-radius: 0 1vh 0 0;
    float: left;
    border-bottom:none;
    border-left:none;
}

.topicDragonImage2 {
    border-radius: 0 0 0 1vh;
    float: left;
    clear: left;
    border-top:none;
    border-right:none;
}

.topicDragonImage3 {
    border-radius: 0 0 1vh 0;
    float: left;
    border-top:none;
    border-left:none;
}

.topicWreckImage1 {
    border-radius: 1vh 1vh 0 0;
    border-bottom:none;
}

.topicWreckImage3 {
    border-radius: 1vh 0 0 1vh;
    border-right:none;
}

.topicWreckImage4 {
    border-radius: unset;
    border-top:none;
    border-left:none;
    border-right:none;
}

.topicWreckImage5 {
    border-radius: 0 1vh 1vh 0;
    border-left:none;
}

.topicWeightImage0 {
    border-radius: 1vh 0 0 0;
    border-right:none;
    border-bottom:none;
}

.topicWeightImage1 {
    border-radius: unset;
    border-left: none;
    border-right: none;
}

.topicWeightImage2 {
    border-radius: 0 1vh 0 0;
    border-left: none;
    border-bottom: none;
}

.topicWeightImage3 {
    border-top: none;
    border-radius: 0 0 1vh 1vh;
}


.topicWeightImage5 {
    border-top: none;
    border-radius: 0 0 1vh 1vh;
}

.dragonBreak {
    width: -webkit-fill-available;
}

.mobImgContainer {
    overflow: hidden;
    margin: 1vh 1vw;
    display: inline-block;
    width: calc(var(--blockSize) * 1.5px);
    height:auto;
    position:relative;
}

.mobImgOuterContainer {
    border-radius: 0.5vh;
    display: inline-block;
    border: solid 2px #00275f;
    box-sizing: border-box;
/*    background-color: #fff;*/
    box-shadow: 0.2vw 0.4vh 0.4vw #000;
    position:relative;
    margin-bottom:1vh;
    overflow: hidden;
    height:auto;
}

.mobStatsContainer, .spellStatsContainer {
    display: inline-grid;
    grid-template-columns: 9vw 8vw;
    margin-left: 2vw;
    grid-gap: 0.5vw;
    padding: 2vh 1vw;
    width: 17vw;
    vertical-align: top;
    border-radius: 0.5vh;
    box-shadow: 0.2vw 0.4vh 0.4vw #000;
    border: solid 2px #00275f;
}


.spellStatsContainer {
    margin-top: 2vh;
    margin-left: 0;
}

span.mobStatSpanCol {
    grid-column: span 2 / 3;
}

.mobImgContainer img {
    position: relative;
    height: auto;
    width: calc(var(--blockSize) * 12 * 1.5px);
}

.mobImgContainer_minotaur {
    width: calc(var(--blockSize) * 2.5px);
}

.mobImgContainer_minotaur img {
    width: calc(var(--blockSize) * 12 * 2.5px);
}

.topImages.parentScreen .topicImage, .topImages.parentScreen .topicImageContainer_wreckball {
    --tileSize: calc(var(--blockSize) * 1.4);
}

.topImages.parentScreen .topicImageContainer_dragon .topicImage, .topImages.parentScreen .topicImageContainer_wreckball .topicImage, .topImages.parentScreen .topicImageContainer_wreckball {
    --tileSize: calc(var(--blockSize) * 1.1);
}

.topImages.parentScreen.parentScreen_tiles {
    display: flex;
    flex-wrap: wrap;
}

.topImages.parentScreen .topicLink {
    margin: 0.5vh;
}

.mobImgContainer.mobImgContainer_dragon {
    width: calc(var(--blockSize) * 3px);
}

.mobImgContainer_dragon img {
    width: calc(var(--blockSize) * 3px);
}

.topicImage_tiles .topicImage.topicImage_traps {
    position: absolute;
    top: 2px;
    border: none;
}

.topicImageContainer_wreckball .topicImage.topicImage_traps.topicImage_traps_wreckball {
    position: absolute;
    top: 2px;
    width: calc(var(--tileSize) * 3px);
    height: calc(var(--tileSize) * 2px);
    border:none;
}

.topicImageContainer_dragon {
    float: left;
    display: inline-block;
}

.topicImage.topicImage_traps.topicImage_traps_spike {
    top: -4px;
    right: 0px;
    opacity: 0.8;
    width: calc(var(--tileSize) * 0.98px);
}

.topImages >.topicImage_traps_wreckball {
    width: calc(var(--tileSize) * 3px);
    height: calc(var(--tileSize) * 2px);
}

.topicImage.topicImage_traps.topicImage_traps_princess {
    right: -2px;
    top: -3px;
}

.topicImage.topicImage_traps.topicImage_traps_poison {
    width: calc(calc(var(--tileSize) * 1px) - 4px);
    right: 0;
}

.topImages .topicImage.topicImage_cage {
    width: calc(var(--tileSize) * 1px);
    height: calc(var(--tileSize) * 1px);
    background-image: url(img/elements.png);
    background-size: calc(var(--tileSize) * 11px) calc(var(--tileSize) * 1px);
    background-repeat: no-repeat;
    background-position-x: calc(var(--tileSize) * -9px);
    position: absolute;
    top: -2px;
    left: -2px;
}

.topicImage_traps_minotaur {
    left: 2px;
}

.encyclopediaControl, .closeEncyclopedia {
    cursor: pointer;
    font-size: calc(var(--blockSize) * 0.75px);
    position: absolute;
    bottom: 9vh;
}

.encyclopediaControl:hover, .closeEncyclopedia:hover {
    color: #8aa9bb;
    text-shadow: 0 0 0.1vw #fff;
}

.previousMenuItem.encyclopediaControl {
    left: 2vw;
}

.nextMenuItem.encyclopediaControl {
    right: -2vw;
}

 .closeEncyclopedia{
    bottom:unset;
    top: 12vh;
}

#overlordTV {
    position: absolute;
    top: -80vh;
    height: 72vh;
    width: 70vw;
    left: 15vw;
    z-index: 100;
    padding: 3vh;
    box-sizing: border-box;
    background-image: url(img/tv.png);
    background-repeat: no-repeat;
    background-size: 70vw 72vh;
}

#overlordTV #overlordScreenContainer {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
    overflow: hidden;
}

#overlordTV #overlordScreen {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity:0;
    border: 2px solid #666;
    box-sizing: border-box;
}

/* tv effect by Alec Lownes */

#overlordTV #overlordScreen:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

#overlordTV #overlordScreen:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
}

#overlordTV #overlordScreen.tvOn {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
}

#overlordTV #overlordScreen.tvOff {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}

@keyframes flicker {
  0% { opacity: 0.69002;}
  5% { opacity: 0.73962;}
  10% { opacity: 0.38433;}
  15% { opacity: 0.22994;}
  20% { opacity: 0.95621;}
  25% {opacity: 0.58809;}
  30% {opacity: 0.56343;}
  35% {opacity: 0.45967;}
  40% {opacity: 0.22494;}
  45% {opacity: 0.51345;}
  50% {opacity: 0.83969;}
  55% {opacity: 0.67555;}
  60% {opacity: 0.25034;}
  65% {opacity: 0.86229;}
  70% {opacity: 0.77318;}
  75% {opacity: 0.11121;}
  80% {opacity: 0.97015;}
  85% {opacity: 0.39418;}
  90% {opacity: 0.42313;}
  95% {opacity: 0.36456;}
  100% {opacity: 0.76023;}
}


@keyframes turn-on {
  0% {
    transform: scale(1, 0.8) translate3d(0, 0, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 1;
  }
  3.5% {
    transform: scale(1, 0.8) translate3d(0, 100%, 0);
  }
  3.6% {
    transform: scale(1, 0.8) translate3d(0, -100%, 0);
    opacity: 1;
  }
  9% {
    transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
    -webkit-filter: brightness(30);
    filter: brightness(30);
    opacity: 0;
  }
  11% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(0) brightness(0);
    filter: contrast(0) brightness(0);
    opacity: 0;
  }
  100% {
    transform: scale(1, 1) translate3d(0, 0, 0);
    -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
    filter: contrast(1) brightness(1.2) saturate(1.3);
    opacity: 1;
  }
}

@keyframes turn-off {
  0% {
    transform: scale(1, 1.3) translate3d(0, 0, 0);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.3, 0.001) translate3d(0, 0, 0);
    -webkit-filter: brightness(10);
    filter: brightness(10);
  }
  99.99% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: scale(0, 0.0001) translate3d(0, 0, 0);
    -webkit-filter: brightness(50);
    filter: brightness(50);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.overlordMessage {
    color: #900701;
    text-align: center;
    font-family: 'Butcherman', cursive;
    font-size: calc(var(--blockSize) * 0.5px);
    text-shadow: 0 0px 1px #000;
}

.overlordMessage img {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 100%;
    height: auto;
}

.overlordTextMessage {
    animation: marquee 15s linear;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    cursor:default;
}

@keyframes marquee {
    0%   { transform: translate(0, 100%); }
    100% { transform: translate(0, 0); }
}


#pregame #playerName {
    position: absolute;
    color: #fff;
    top: 1vh;
    right: 2vw;
    z-index: 100000000;
    font-family: 'Finger Paint', cursive;
    font-size: calc(var(--blockSize) * 0.4px);
    cursor:pointer;
}

#pregame #playerName:hover {
    color: #FF3973;
}

#pregame .startButton, .gameOverButtonsContainer button {
    visibility: hidden;
    background-color: #FF2B7D;
    height: calc(var(--blockSize) * 2px);
    text-align: center;
    font-size: calc(var(--blockSize) * 1px);
    color: #fff;
    border-radius: calc(var(--blockSize) * 0.1px);
    text-shadow: 2px 2px 2px #000;
    transition: all 250ms linear;
    border: outset calc(var(--blockSize) * 0.1px) #fff;
}

#pregame .startButton:hover {
    font-size: calc(var(--blockSize) * 1.1px);
}

#pregame .startButton:active, .gameOverButtonsContainer active {
    background-color: #000;
}

.overlordMessage .gameOverButtonsContainer button {
    background-color: #840033;
    visibility: visible;
    font-size: calc(var(--blockSize) * 0.4px);
    height: calc(var(--blockSize) * 1.2px);
    margin: calc(var(--blockSize) * 1px);
    padding: 0 calc(var(--blockSize) * 0.2px);
    border: outset calc(var(--blockSize) * 0.03px) #918e8e;
    cursor: pointer;
    color: #f77b7b;
    text-shadow: unset;
    width: calc(var(--blockSize) * 4px);
    vertical-align: top;
}

.overlordMessage .gameOverButtonsContainer button:hover {
    font-size: calc(var(--blockSize) * 0.5px);
    text-shadow: 2px 2px 2px #000;
}

#pregame #openEncyclopedia {
    visibility: hidden;
}

#modusBox {
    left: 2vw;
    position: absolute;
    bottom: 2vh;
    display: flex;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    padding-right: 4vw;
    box-sizing: border-box;
    justify-content: space-between;
    flex-wrap: wrap;
}

#modusBox button {
    margin: 1vh;
    width: calc(var(--blockSize) * 5px);
    font-size: calc(var(--blockSize) * 0.5px);
    text-align: left;
    font-family: 'Finger Paint', cursive;
    display: inline-block;
    cursor:pointer;
}

#modusBox .startButtonContainer {
    width: 100%;
    text-align: center;
}

#tutorial {
    display:none;
    position: absolute;
    top: calc(var(--blockSize) * 0.5px);
    left: calc(var(--blockSize) * 0px);
    width: calc(var(--blockSize) * 6px);
    height: calc(var(--blockSize) * 2px);
    z-index: 2;
    background-color: #161a318f;
    border-radius: 0 calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) 0;
    border: solid 1px #001d78;
    border-left: none;
    box-shadow: calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) rgba(0,0,0,0.7);
}

#tutorial #tutorialImg {
    width: calc(var(--blockSize) * 2px);
    height: calc(var(--blockSize) * 2px);
    background-image: url(img/tutorial.png);
    background-size: contain;
    display: inline-block;
}

#tutorial #tutorialText {
    display: inline-block;
    width: calc(var(--blockSize) * 3.6px);
    background: #fff;
    vertical-align: bottom;
    padding: calc(var(--blockSize) * 0.1px);
    margin-bottom: calc(var(--blockSize) * 0.45px);
    border-radius: calc(var(--blockSize) * 0.05px);
    font-family: 'Montserrat', sans-serif;
    font-size: calc(var(--blockSize) * 0.2px);
    position: relative;
}

kbd  {
    font-family: 'Montserrat', sans-serif;
    font-size: calc(var(--blockSize) * 0.175px);
    width: calc(var(--blockSize) * 0.45px);
    text-align: center;
    position: absolute;
    right: calc(var(--blockSize) * -0.1px);
    bottom: calc(var(--blockSize) * -0.35px);
    cursor: pointer;
    outline: none;
    transition: all 0.5s;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    padding: calc(var(--blockSize) * 0.05px) calc(var(--blockSize) * 0.1px);
    white-space: nowrap;
}

#tutorial .tutorialButton:hover {
    color: #002295;
    text-shadow: 0 0 2px rgba(0, 137, 255, 0.23);
}

.oneDungeon .gridCell, .oneDungeon #spellCasting {
    cursor: url('img/wand.svg'),pointer;
}

.casting.oneDungeon .gridCell, .casting.oneDungeon #spellCasting {
    cursor: url('img/wandActive.svg'),pointer;
}

.gridCell.tutHighLight {
    box-shadow: 0 0 calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.2px) #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

.gridCell.tutSoftHighLight {
    background-color: rgba(255, 255, 255, 0.5);
}

.tutHighLight {
    filter:drop-shadow(0 0 calc(var(--blockSize) * 0.15px) #fff) !important;
}

#escapeMenu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
/*    width: calc(var(--blockSize) * var(--horizontalSize) * 0.8px);
    height: calc(calc(var(--blockSize) * (var(--verticalSize) + 0.5 ) * 0.8px) + 3px);*/
    text-align: center;
    background-color: #171717;
    color: #FBFBFB;
    padding: calc(var(--blockSize) * 0.5px);
    box-sizing: border-box;
    box-shadow: 0 0 0 calc(var(--blockSize)*10px) #00000094, 0 0 calc(var(--blockSize)*10px) 0 #ffa500, 0 0 calc(var(--blockSize)*0.25px) calc(var(--blockSize)*0.01px) #ffa500d1;
    border-radius: calc(var(--blockSize)*0.25px);
    border: solid 1px #4c4339;
    background-image: url(img/blackboard.jpg);
    background-size: cover;
    font-family: 'Finger Paint', cursive;
        font-size: calc(var(--blockSize) * 0.45px);
}

#escapeMenu > img {
    width: calc(var(--blockSize) * var(--horizontalSize) * 0.5px);
}

#escapeMenu .keyMapTitle {
    color: #DBC336;
}

#escapeMenu .command {
    display: flex;
}

#escapeMenu .controlsContainer {
    display: flex;
    justify-content: start;
    width: calc(var(--blockSize) * 9px);
}

#escapeMenu .controlName {
    width: calc(var(--blockSize) * 4.5px);
    display: inline-block;
    text-align: right;
    margin-right: calc(var(--blockSize)* 0.4px);
}

#escapeMenu kbd.controlChar {
    position: unset;
    width: calc(var(--blockSize) * 2.5px);
    font-size: calc(var(--blockSize) * 0.25px);
    margin: calc(var(--blockSize) * 0.1px);
    line-height: calc(var(--blockSize) * 0.4px);
}

#escapeMenu .keyMapTitle {
    text-transform: uppercase;
    color: #DBC336;
    font-size: calc(var(--blockSize) * 0.5px);
    font-weight: 900;
}

#escapeMenu .closeMenu {
    position: absolute;
    top: calc(var(--blockSize) * 0px);
    right: calc(var(--blockSize) * 0.3px);
    font-size: calc(var(--blockSize) * 0.75px);
    padding: 0;
    cursor: pointer;
}

#escapeMenu .closeMenu:hover {
    color: #DBC336;
}

#escapeMenu kbd.controlChar.activeControlChar {
    border: solid 1px rgb(0, 4, 174);
    box-shadow: unset;
    background-color: #adf7ff;
    color: rgb(0, 4, 174);
}

#escapeMenu #resetControls {
    color: #DBC336;
    text-decoration: underline;
    font-size: calc(var(--blockSize) * 0.3px);
    margin-top: calc(var(--blockSize) * 0.25px);
    cursor:pointer;
}

#escapeMenu #resetControls:hover {
    color: #FFF;
}

button kbd {
    top: 0;
    right: 0;
    left: unset;
    bottom: unset;
}

#levelSelect {
    display:none;
}

#levelBox {
    color: #E8E8E8;
    font-size: calc(var(--blockSize) * 0.5px);
    text-align: left;
    font-family: 'Finger Paint', cursive;
    display: none;
    justify-content: space-around;
    text-align: center;    
}

#levelBox .levelList {
    width: calc(var(--blockSize) * 5px);
}

#levelBox .levelPicker {
    height: calc(var(--blockSize) * 3px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #0c1b14;
    border-radius: calc(var(--blockSize) * 0.1px);
    border: solid calc(var(--blockSize) * 0.1px)#cfcfcf;
}

#levelBox .pickLevel {
    padding: calc(var(--blockSize) * 0.1px) 0;
    transition: all 250ms linear;
}

#levelBox .pickLevel:hover:not(.activeLevel) {
    cursor: pointer;
    background-color: rgba(255,255,255,0.05);
    transform: scale(1.1);
    color: #fff;
}

#levelBox .pickLevel.activeLevel {
    cursor: default;
    background-color: rgba(251, 142, 255, 0.05);
    transform: scale(1.1);
    color: #ff0299;
}

#showGameMode {
    display:none;
}

#sideHighScores {
    position: absolute;
    top: calc(var(--blockSize) * 1.3px);
    z-index: 4;
    left: calc( calc(calc(100vw - calc(var(--blockSize) * var(--horizontalSize) * 1px)) / 2) + calc(var(--blockSize) * var(--horizontalSize) * 1px));
    height: calc(var(--blockSize) * 5.5px);
    margin-left: calc(var(--blockSize) * 0.3px);
    font-size: 0.75vw;
    text-align: left;
    font-family: 'Finger Paint', cursive;
    background-position: center;
    filter: drop-shadow(calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.2px) rgba(0,0,0,0.5));
    color: #FCFCFC;
    padding: calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.2px);
    box-sizing: border-box;
    background-image: url(img/boardBack.jpg);
    width: calc(var(--blockSize) * 3.5px);
    background-size: calc(var(--blockSize) * 3.5px) auto;
}

#sideHighScores #sideHighScoresText {
    padding: calc(var(--blockSize) * 0.3px) calc(var(--blockSize) * 0.15px);
    position: absolute;
    font-size: calc(var(--blockSize) * 0.24px);
    font-family: 'Finger Paint', cursive;
    z-index: 10;
    height: calc(var(--blockSize) * 4.8px);
    overflow: hidden;
    top: 0;
    width: calc(var(--blockSize) * 2.8px);
}

#sideLevelInfo {
    position: absolute;
    left: calc(var(--blockSize) * -3.8px);
    width: calc(var(--blockSize) * 3.5px);
    z-index: 5;
    top: calc(var(--blockSize) * 1.3px);
    height: calc(var(--blockSize) * 4.5px);
    background-position: center;
    filter: drop-shadow(calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.1px) calc(var(--blockSize) * 0.2px) rgba(0,0,0,0.5));
    color: #FCFCFC;
    padding: calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.2px);
    box-sizing: border-box;
    background-image: url(img/boardBack.jpg);
    background-size: calc(var(--blockSize) * 3.5px) auto;
}

#sideLevelInfo #sideLevelInfoText {
    padding: calc(var(--blockSize) * 0.4px);
    position: absolute;
    font-size: calc(var(--blockSize) * 0.24px);
    font-family: 'Finger Paint', cursive;
    z-index: 10;
    height: calc(var(--blockSize) * 3.8px);
    overflow: hidden;
    top: 0;
}

.sideLevelInfoTextHeader {
    text-align: center;
    font-weight: bold;
    margin-bottom: calc(var(--blockSize) * 0.15px);
    text-decoration: underline;
}

#sideHighScores .extraHeader {
    text-align: center;
    font-weight: bold;
    margin-bottom: calc(var(--blockSize) * 0.2px);
}

#townName {
    display:none;
    color: #ffffff;
    position: absolute;
    z-index: 4;
    padding: calc(var(--blockSize) * 0.05px) calc(var(--blockSize) * 0.15px);
    left: 50%;
    transform: translate(-50%,0);
    top: calc(var(--blockSize) * 0.15px);
    border: solid calc(var(--blockSize) * 0.02px) #fff;
    background: #1C70AE;
    box-shadow: 0 0 0 2px #1C70AE;
    border-radius: calc(var(--blockSize) * 0.05px);
    text-transform: uppercase;
    font-family: monospace;
    font-size: calc(var(--blockSize) * 0.17px);
}

span.playmodeInfo {
    position: relative;
    font-size: calc(var(--blockSize) * 0.2px);
    border: solid 3px #E8E8E8;
    border-radius: calc(var(--blockSize) * 1px);
    padding: calc(var(--blockSize) * 0px) calc(var(--blockSize) * 0.1px);
    margin-left: calc(var(--blockSize) * 0.2px);
    display: inline-block;
    top: calc(var(--blockSize) * -0.08px);
    cursor: help;
    text-align: center;
    color: #E8E8E8;
    font-family: 'Finger Paint', cursive;
}

span.playmodeInfo:hover {
    color:goldenrod;
}

.playModeInfoText {
    display: none; 
    position: absolute;
    font-size: calc(var(--blockSize) * 0.2px);
    pointer-events: none;
    width: calc(var(--blockSize) * 4.5px);
    z-index: 6;
    background-color: #dc3c5c;
    right: calc(var(--blockSize) * 0px);
    top: calc(var(--blockSize) * 0.4px);
    padding: calc(var(--blockSize) * 0.1px);
    border-radius: calc(var(--blockSize) * 0.1px);
    box-shadow: calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.2px) calc(var(--blockSize) * 0.2px) #000;
    border: solid 1px #ff2b7d;
    color: #E8E8E8;
}

span.playmodeInfo:hover .playModeInfoText {
    display: block;
}

.gameOverScore {
    color: #fff;
    font-size: calc(var(--blockSize) * 1px);
}

.gameOverResults {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-top: calc(var(--blockSize) * 1px);
}

.gameOverResultsBlock {
    width: 33%;
    text-shadow: 0 0px 5px #000;
}

.gameOverResultsPlaytime, .gameOverResultsCasualties{
    color: #ae3d3d;
    font-size: calc(var(--blockSize) * 0.4px);
    font-size: calc(var(--blockSize) * 0.6px);
}

.levelBoxTitle, #sideLevelInfo, #sideHighScores, .topicTitle, .topicDescription {
    cursor:default;
}

#others {
    position: absolute;
    top: 3px;
    left: 10px;
    font-size: 80%;
    font-family: Verdana, sans-serif;
    font-size: 0.7vw;
    z-index: 10000;
}

#others a {
    color: #44b051;
}

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

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

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
 
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: rgb(68, 68, 68);
    background: linear-gradient(to bottom, rgb(46, 46, 46) 1%,rgb(66, 68, 67) 50%,rgb(46, 46, 46) 100%);
}
 
::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px #bdbdbd;
    background-color: rgba(183, 183, 183, 0.5);
}