/*
 Copyright (C) 2018 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=Gravitas+One|Griffy|Kanit');

:root {
    --viewHeight;
    --viewWidth;
    --dieSize : 60;
    --infoSize : calc((var(--viewHeight) *0.96 / 3) - 100);   
    --mazeBlockSize: calc(var(--viewHeight) / (var(--gridSize))); 
    cursor:default;
}

html {
    background-image: url(img/grunge.png);
    background-size: cover;
    background-color: #111;
    height: 100%;
    width: 100%;
}

body {
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    margin: 0;
}

#characterPicker, #undergears {
    color: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 5;
    width: 50vw;
    height: 70vh;
    border-radius: 2vw;
    overflow: hidden;
    background-image: url(img/overgears.png);
    background-size: cover;
    border: ridge 4px #333;
}

#undergears {
    background-image: url(img/gears.jpg);
}

#undergears img {
    position: absolute;
    top: 18px;
    left: 42px;
    animation: rotating 4s linear infinite;
}

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

#characterPicker .character {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    left:0px;
    top:0px;    
    height: 100%;
    transition: 1s all;
    background-image:url(img/charBack.png);
    background-size: cover;
    border-radius: 1vw;
}

#characterPicker .character.notPlayable {
    filter: grayscale(100%);
}

#characterPicker .character.notPlayable:after {
    content: "LOCKED";
    position: absolute;
    font-family: 'Kanit', sans-serif;
    font-size: 200px;
    color: rgba(255,255,255,0.3);
    transform: rotate(-20deg);
    font-weight: 800;
    top: 25%;
}

#characterPicker img {
    height: calc(100% - 20px);
    padding: 10px;
}

.charTitle {
    font-family: 'Griffy', cursive;
    font-size: 2vw;
    position: absolute;
    bottom: 5px;
    left: 2vw;
    text-shadow: 1px 1px 1px #000;
}

#titleHead {
    color: #FFF;
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translate(-50%,0);
    z-index: 10;
    font-family: 'Griffy', cursive;
    font-size: 10vW;
    white-space: nowrap;
    background: url(img/charBack.png) no-repeat;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: grayscale(100%) contrast(500%);
    pointer-events: none;
}

.arrow {
    border: solid rgba(255,255,255,0.4);
    border-width: 0 25px 25px 0;
    display: inline-block;
    padding: 25px;
}

#navHolder>.arrow {
    border: solid rgba(255,255,255,0.4);
    border-width: 0 2vh 2vh 0;
    display: inline-block;
    outline: none;
    cursor: pointer;
}

#navHolder>.arrow:hover {
    border-color: rgba(255,255,255,1);
}

.rightArrow {
    transform: rotate(-45deg);
}

.leftArrow {
    transform: rotate(135deg);
}

#characterPicker .arrow {
    display: none;
    transition: 0.5s all;
    position: absolute;
    top: calc(50% - 60px);
    z-index: 10;
    opacity: 0.5;
    cursor:pointer;
}

#characterPicker .rightArrow {
    right: 30px;
}

#characterPicker .leftArrow {
    left: 30px;
}

#characterPicker:hover .arrow {
    display:inline-block;
}

#characterPicker .arrow:hover {
    border-color:rgba(255,255,255,0.9);
}

#intro #navHolder {
    text-align: center;
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translate(-50%,0);
    z-index:7;
}

#intro button#playChar {    
    font-size: 5vh;
    padding: 0 2vw;    
    font-family: Gravitas One;
    border-radius: 1vh;
    outline: none;
    cursor: pointer;
    margin: 0 5vw;   
}

#intro #goShoppe {
    font-size: 2vh;
    padding: 1vh 2vw;
    font-family: Gravitas One;
    border-radius: 1vh;
    outline: none;
    cursor: pointer;
    margin: 0 5vw;
    position: absolute;
    top: 50%;
    right: 2vw;
    transform: translate(0,-50%);
}

#intro #goBestiary {
    font-size: 2vh;
    padding: 1vh 2vw;
    font-family: Gravitas One;
    border-radius: 1vh;
    outline: none;
    cursor: pointer;
    margin: 0 5vw;
    position: absolute;
    top: 50%;
    left: 2vw;
    transform: translate(0,-50%);
}

#intro #shoppe, #intro #bestiary {
    display: grid;
    grid-template-columns: auto auto auto auto;
    color: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 6;
    width: 50vw;
    height: 70vh;
    border-radius: 2vw;
    overflow: hidden;
    background-image: url(img/grunge.png);
    background-size: cover;
    border: ridge 4px #333;
    background-color: #000;
    filter: sepia(100%);
    overflow-y: auto;
    padding: 1vw;
    box-sizing: border-box;
    padding-top: 8vh;
    cursor: default;
}

#intro #bestiary {
    display:none;
    filter: unset;
    overflow: hidden;
}

#intro #shoppe::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
 
#intro #shoppe::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 100%;
    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%);
}
 
#intro #shoppe::-webkit-scrollbar-thumb {
    border-radius: 100%;
    background-color: rgba(32, 158, 136,0.5);
    background: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%);
}


#intro #shoppe div {
    padding: 1vh 1vw;
    color: #5e79c7;
}

#intro #shoppe div.forSale_false {
    opacity:0.3 !important;
    color: #5e79c7 !important;
}

#intro #shoppe div.shoppeCol {
    font-weight: 900;
    color: #4cb4cc;
}

#intro #shoppe div.shoppeItemName {
    font-family: 'Griffy', cursive;
    color: #6b8ae4;
}

#intro #shoppe div.shoppeItemDesc {
    font-family: monospace;
    font-size: 15px;
}

#intro #shoppe div.shoppeItemCost {
    font-family: 'Griffy', cursive;
}

#intro #shoppe #shoppeHeader {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 3vh;
    font-family: 'Griffy', cursive;
    font-size: 3vh;
    color: #ffd749;
    font-weight: 600;
}

#intro #shoppe div.shoppeItemBuy {
    cursor: pointer;
    border: solid 1px rgba(255, 255, 255, 0.66);
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: #004eff;
    color: rgba(255, 255, 255, 0.66);
    background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
    background-image: url(img/grunge.png);
    background-size: cover;
    height: max-content;
    opacity: 0.3;
}

#intro #shoppe div.shoppeItemBuy.gotMoney:hover, #intro #shoppe div.shoppeItemBuy.gotMoney:active, #intro #shoppe div.shoppeItemBuy.gotMoney:focus {
    border: solid 1px #000;
    background-color: #ff4e00;
    color: #000;
}

#intro #shoppe div.shoppeItemBuy.gotMoney {
    opacity: 1;
}

#intro #shoppe div.shoppeItemBuy.forSale_false {
    padding: 0 0 1vh 0;
    border: 0;
    cursor:default;
}

#game {
    display:flex;
    overflow: hidden;
}

.overlay {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    display: none;
    z-index: 10;
    position: absolute;
}

#game.inCombat #menu, #game.inCombat #maze{
    pointer-events:none;
    opacity:0.5;
}

#combat {
    height:95vh;
    border:solid 1px #000;
    width:95vw;
    position:fixed;
    top:50%;
    left: 20px;
    transform: translate(0,-50%);
    padding:1vh;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.3);
    border-radius:1vh;
    background: #d0d0d0;
    display:none;
    max-width: calc( (var(--mazeBlockSize) * var(--gridSize) * 1px) + 400px);
    max-height: calc( var(--mazeBlockSize) * var(--gridSize) * 1px) ;
    z-index: 10;
}

#combat .equipment {
    display: inline-block;
    max-width : calc(100% - calc( var(--infoSize) * 1.2px));
}

#combat .equipment .side {
    display: inline-block;
    position: unset;
    --dieSize: 40;
    padding: 0;
    transition: 0.25s all;
}

#combat .equipment .side_equipment.activated, #combat .equipment .side_prayer.activated {
    --dieSize: 50;
}

#combat .equipment .prayerCounters {
    line-height: calc( var(--dieSize) * 1px);
    color: #303030;
    font-weight: bold;
    cursor: default;
    pointer-events: none;
}

#player, #opponent, #dicePlayed {
    height: 31vh;
    width: 100%;
    position:relative;
}

#opponent #opponentDeck {    
    height: calc(var(--dieSize) * 2.5px);
    width: calc(100% - calc( var(--infoSize) * 1.2px));
}

#combat .info {
    position: absolute;
    padding-bottom: 25px;
    right:0px;
    width: calc( var(--infoSize) * 1px);
}

#player .info {
    bottom:0px;
}

#opponent .info {
    top:0px;
}

.info .picture {
    width: calc( var(--infoSize) * 1px);
    height: calc( var(--infoSize) * 1px);
}

.info .picture.dragon {
    width: calc( var(--infoSize) * 2px);
    transform: translate(-25%,0);
}

.info .picture.giant {
    height: calc( var(--infoSize) * 1.5px);
    transform: translate(0,-25%);
    margin-bottom: calc( var(--infoSize) * -0.5px);
}

.info .picture.dragon.giant {
    transform: translate(-40%,-5%);
}

.info .outerbar {
    position:relative;
    width: calc( var(--infoSize) * 1px);
    height: 22px;
    border: solid 2px #fff;
    border-radius: 3px;
    margin-bottom:4px;
    background-color: #808080;        
}

.info .outerbar:after {
    content: "/";
    position: absolute;
    left: calc( var(--infoSize) * 0.5px);
    color: #fff;
    top: -3px;
}

.info .bar {
    content: "";
    height: 22px;
    position: absolute;
    top: 0px;
    left: 0px;
    transition:all 0.5s;
}

.info .bar:before, .info .bar:after {
    position: absolute;
    top: 0px;
    width: calc((var(--infoSize) - 5) * 0.5px);
    text-align: right;
    height: 20px;
    line-height: 20px;
    color:#fff;
}

.info .bar:before {
    text-align: right;
    left:0px;
}

.info .bar:after {
    text-align: left;
    left:calc((var(--infoSize) + 20) * 0.5px);
}

.info .bar.healthBar {
    background-color: #a00;
    background-image: url(img/healthbar.jpg);
    background-size: cover;
}

.info .bar.manaBar {
    background-color: #00a;
    background-image: url(img/manabar.jpg);
    background-size: cover;
}

.info .bar.xpBar {
    background-color: #00a;
    background-image: url(img/xpbar.jpg);
    background-size: cover;
}

.info .effects, .info .abilities {
    min-height: 30px;
    position: absolute;
    right: 0px;
    min-width: calc((var(--infoSize) - 4) * 1px);
    white-space: nowrap;
    z-index:1;
}

#player .info .effects {
    top: -30px;
}

.info .effects .effect {
    --dieSize : 30;
    width: calc(var(--dieSize) * 1px);
    height: calc(var(--dieSize) * 1px);  
    font-size: calc(var(--dieSize) * 0.54px);
    background-image: url(icons/effectIcons.png?ver=2);
    background-size: calc( var(--dieSize) * 77px) calc(var(--dieSize) * 1px);
    display: inline-block;
    text-align: center;
    color: #fff;
    vertical-align: top;    
    cursor:help;
    transition: 0.25s all;
}

#combat #opponent .info[data-before]:before {
    position: absolute;
    content: attr(data-before);
    font-size: 150%;
    top: 25%;
    left: 60%;
    transform: translate(-50%,-50%) rotate(15deg);
    text-shadow: 0 0 1px #000;
    color: #fff;
    opacity: 0.8;
}

#combat .abilities .combatAbility {
    width: 30px;
    height: 30px;
    --dieSize: 30;
    background-image: url(icons/abilityIcons.png);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
    display: inline-block;
    text-align: center;
    color: #fff;
    vertical-align: top;
    font-size: 16px;
    cursor: pointer;
    transition:all 0.2s;
    margin-right:5px;
}

.info .effects .effect.activated {
    --dieSize: 50;
}

#combat .abilities .combatAbility:not(.abilityCooling):hover {
    filter: drop-shadow(0px 0px 2px yellow);
}

#combat .abilities .combatAbility.abilityCooling { 
    filter:opacity(25%);
    cursor:default;
}

#endRound, #playerActions {
    position: absolute;
    height: calc((var(--infoSize)) * 0.3px);
    width: calc((var(--infoSize)) * 0.2px);
    left: calc((var(--infoSize)) * -0.23px);
    top: calc((var(--infoSize)) * 0.5px);
    cursor:pointer;
}

#endRound {
    display:none;
    background-image: url(icons/hourglass.png);
    background-size: cover;
    filter: drop-shadow(0px 0px 5px #050);
}

#playerActions {
    pointer-events:none;
    background-image: url(icons/hourglass.png);
    background-size: cover;
    font-size: 24px;
    filter: brightness(150%);
}
#playerActions:after {
    counter-increment: playerActions var(--playerActions);
    content: counter(playerActions);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}

#opponent .healthBar {
    width: calc( ( var(--monsterHealth) / var(--monsterMaxHealth) ) * var(--infoSize) * 1px);    
}

#opponent .manaBar {
    width: calc( ( var(--monsterMana) / var(--monsterMaxMana) ) * var(--infoSize) * 1px);    
}

#opponent .healthBar:before {
    counter-increment: monsterHealth var(--monsterHealth);
    content: counter(monsterHealth);
}

#opponent .manaBar:before {
    counter-increment: monsterMana var(--monsterMana);
    content: counter(monsterMana);
}

#opponent .healthBar:after {
    counter-increment: monsterMaxHealth var(--monsterMaxHealth);
    content: counter(monsterMaxHealth);
}

#opponent .manaBar:after {
    counter-increment: monsterMaxMana var(--monsterMaxMana);
    content: counter(monsterMaxMana);
}

.player .healthBar {
    width: calc( ( var(--playerHealth) / var(--playerMaxHealth) ) * var(--infoSize) * 1px);    
}

.player .manaBar {
    width: calc( ( var(--playerMana) / var(--playerMaxMana) ) * var(--infoSize) * 1px);    
}

.player .xpBar {
    width: calc( ( var(--playerXP) / var(--playerMaxXP) ) * var(--infoSize) * 1px);    
}

.player .healthBar:before {
    counter-increment: playerHealth var(--playerHealth);
    content: counter(playerHealth);
}

.player .manaBar:before {
    counter-increment: playerMana var(--playerMana);
    content: counter(playerMana);
}

.player .xpBar:before {
    counter-increment: playerXP var(--playerXP);
    content: counter(playerXP);
}

.player .healthBar:after {
    counter-increment: playerMaxHealth var(--playerMaxHealth);
    content: counter(playerMaxHealth);
}

.player .manaBar:after {
    counter-increment: playerMaxMana var(--playerMaxMana);
    content: counter(playerMaxMana);
}

.player .xpBar:after {
    counter-increment: playerMaxXP var(--playerMaxXP);
    content: counter(playerMaxXP);
}

#dicePlayed {
    --dieSize: 60;
    text-align: center;
}

#player #roll-wrap {
    height: calc(var(--dieSize) * 2.5px);
    width: calc(100% - calc( var(--infoSize) * 1.2px));
    position: absolute;
    bottom: 0px;
    left: 0px;
    box-sizing: border-box;
    padding-top: 10px;
}    

.die {                 
    --trans: calc(var(--dieSize) / 2);
    position: relative;  
    display: inline-block;
    margin: 10px auto 0;  
    height: calc( var(--dieSize) * 1.2px);  
    width: calc( var(--dieSize) * 1.2px); 
    transition: all 0.4s linear;  
    transform-style: preserve-3d; 
    padding: calc(var(--dieSize) / 7 * 1px);   
    top:0px;
    left:0px;
} 

.side { 
    position: absolute;  
    height: calc( var(--dieSize) * 1px);  
    width: calc( var(--dieSize) * 1px);  
    background-color: rgba(50, 50, 50, 0.7);  
    font-size: 37px;  
    color: #fff;  
    border-radius: calc(var(--dieSize) / 20 * 1px);;  
    text-align: center;                  
    background-image: url(icons/dice_attack.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
    box-sizing: border-box;
} 
.side_attack {
    background-image: url(icons/dice_attack.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}
.side_equipment {
    background-image: url(icons/dice_equipment.jpg);
    background-size: calc( var(--dieSize) * 30px) calc(var(--dieSize) * 1px);
}

.side_action {
    background-image: url(icons/dice_action.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}

.side_action2 {
    background-image: url(icons/dice_action2.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}

.side_action3 {
    background-image: url(icons/dice_action3.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}
.side_action4 {
    background-image: url(icons/dice_action4.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}


.side_spell {
    background-image: url(icons/dice_spell.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}

.side_spell2 { 
    background-image: url(icons/dice_spell2.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}

.side_mana {
    background-image: url(icons/dice_mana.jpg);
    background-size: calc( var(--dieSize) * 25px) calc(var(--dieSize) * 1px);
}

.side_special {
    background-image: url(icons/dice_special.jpg);
    background-size: calc( var(--dieSize) * 5px) calc(var(--dieSize) * 1px);
}

.side_prayer {
    background-image: url(icons/dice_prayer.jpg);
    background-size: calc( var(--dieSize) * 5px) calc(var(--dieSize) * 1px);
}

.side_buildings {
    --dieSize: 200 !important;
    background-image: url(img/buildings.png);
    background-size: 1600px 200px;
}

.die .side1 { 
    transform: rotateX(90deg) translateZ(calc(var(--trans) * 1px));  
} 
.die .side2 { 
    transform: rotateX(-90deg) rotate(180deg) translateZ(calc(var(--trans) * 1px));  
} 
.die .side3 { 
    transform: rotateY(90deg) translateZ(calc(var(--trans) * 1px));  
} 
.die .side4 { 
    transform: rotateY(180deg) translateZ(calc(var(--trans) * 1px));  
} 
.die .side5 { 
    transform: rotateY(-90deg) translateZ(calc(var(--trans) * 1px));  
} 
.die .side6 { 
    transform:  translateZ(calc(var(--trans) * 1px)); 
} 

.sideImg_0 {background-position-x: calc(var(--dieSize) * -0px)}
.sideImg_1 {background-position-x: calc(var(--dieSize) * -1px)}
.sideImg_2 {background-position-x: calc(var(--dieSize) * -2px)}
.sideImg_3 {background-position-x: calc(var(--dieSize) * -3px)}
.sideImg_4 {background-position-x: calc(var(--dieSize) * -4px)}
.sideImg_5 {background-position-x: calc(var(--dieSize) * -5px)}
.sideImg_6 {background-position-x: calc(var(--dieSize) * -6px)}
.sideImg_7 {background-position-x: calc(var(--dieSize) * -7px)}
.sideImg_8 {background-position-x: calc(var(--dieSize) * -8px)}
.sideImg_9 {background-position-x: calc(var(--dieSize) * -9px)}

.sideImg_10 {background-position-x: calc(var(--dieSize) * -10px)}
.sideImg_11 {background-position-x: calc(var(--dieSize) * -11px)}
.sideImg_12 {background-position-x: calc(var(--dieSize) * -12px)}
.sideImg_13 {background-position-x: calc(var(--dieSize) * -13px)}
.sideImg_14 {background-position-x: calc(var(--dieSize) * -14px)}
.sideImg_15 {background-position-x: calc(var(--dieSize) * -15px)}
.sideImg_16 {background-position-x: calc(var(--dieSize) * -16px)}
.sideImg_17 {background-position-x: calc(var(--dieSize) * -17px)}
.sideImg_18 {background-position-x: calc(var(--dieSize) * -18px)}
.sideImg_19 {background-position-x: calc(var(--dieSize) * -19px)}

.sideImg_20 {background-position-x: calc(var(--dieSize) * -20px)}
.sideImg_21 {background-position-x: calc(var(--dieSize) * -21px)}
.sideImg_22 {background-position-x: calc(var(--dieSize) * -22px)}
.sideImg_23 {background-position-x: calc(var(--dieSize) * -23px)}
.sideImg_24 {background-position-x: calc(var(--dieSize) * -24px)}
.sideImg_25 {background-position-x: calc(var(--dieSize) * -25px)}
.sideImg_26 {background-position-x: calc(var(--dieSize) * -26px)}
.sideImg_27 {background-position-x: calc(var(--dieSize) * -27px)}
.sideImg_28 {background-position-x: calc(var(--dieSize) * -28px)}
.sideImg_29 {background-position-x: calc(var(--dieSize) * -29px)}

.sideImg_30 {background-position-x: calc(var(--dieSize) * -30px)}
.sideImg_31 {background-position-x: calc(var(--dieSize) * -31px)}
.sideImg_32 {background-position-x: calc(var(--dieSize) * -32px)}
.sideImg_33 {background-position-x: calc(var(--dieSize) * -33px)}
.sideImg_34 {background-position-x: calc(var(--dieSize) * -34px)}
.sideImg_35 {background-position-x: calc(var(--dieSize) * -35px)}
.sideImg_36 {background-position-x: calc(var(--dieSize) * -36px)}
.sideImg_37 {background-position-x: calc(var(--dieSize) * -37px)}
.sideImg_38 {background-position-x: calc(var(--dieSize) * -38px)}
.sideImg_39 {background-position-x: calc(var(--dieSize) * -39px)}

.sideImg_40 {background-position-x: calc(var(--dieSize) * -40px)}
.sideImg_41 {background-position-x: calc(var(--dieSize) * -41px)}
.sideImg_42 {background-position-x: calc(var(--dieSize) * -42px)}
.sideImg_43 {background-position-x: calc(var(--dieSize) * -43px)}
.sideImg_44 {background-position-x: calc(var(--dieSize) * -44px)}
.sideImg_45 {background-position-x: calc(var(--dieSize) * -45px)}
.sideImg_46 {background-position-x: calc(var(--dieSize) * -46px)}
.sideImg_47 {background-position-x: calc(var(--dieSize) * -47px)}
.sideImg_48 {background-position-x: calc(var(--dieSize) * -48px)}
.sideImg_49 {background-position-x: calc(var(--dieSize) * -49px)}

.sideImg_50 {background-position-x: calc(var(--dieSize) * -50px)}
.sideImg_51 {background-position-x: calc(var(--dieSize) * -51px)}
.sideImg_52 {background-position-x: calc(var(--dieSize) * -52px)}
.sideImg_53 {background-position-x: calc(var(--dieSize) * -53px)}
.sideImg_54 {background-position-x: calc(var(--dieSize) * -54px)}
.sideImg_55 {background-position-x: calc(var(--dieSize) * -55px)}
.sideImg_56 {background-position-x: calc(var(--dieSize) * -56px)}
.sideImg_57 {background-position-x: calc(var(--dieSize) * -57px)}
.sideImg_58 {background-position-x: calc(var(--dieSize) * -58px)}
.sideImg_59 {background-position-x: calc(var(--dieSize) * -59px)}

.sideImg_60 {background-position-x: calc(var(--dieSize) * -60px)}
.sideImg_61 {background-position-x: calc(var(--dieSize) * -61px)}
.sideImg_62 {background-position-x: calc(var(--dieSize) * -62px)}
.sideImg_63 {background-position-x: calc(var(--dieSize) * -63px)}
.sideImg_64 {background-position-x: calc(var(--dieSize) * -64px)}
.sideImg_65 {background-position-x: calc(var(--dieSize) * -65px)}
.sideImg_66 {background-position-x: calc(var(--dieSize) * -66px)}
.sideImg_67 {background-position-x: calc(var(--dieSize) * -67px)}
.sideImg_68 {background-position-x: calc(var(--dieSize) * -68px)}
.sideImg_69 {background-position-x: calc(var(--dieSize) * -69px)}

.sideImg_70 {background-position-x: calc(var(--dieSize) * -70px)}
.sideImg_71 {background-position-x: calc(var(--dieSize) * -71px)}
.sideImg_72 {background-position-x: calc(var(--dieSize) * -72px)}
.sideImg_73 {background-position-x: calc(var(--dieSize) * -73px)}
.sideImg_74 {background-position-x: calc(var(--dieSize) * -74px)}
.sideImg_75 {background-position-x: calc(var(--dieSize) * -75px)}
.sideImg_76 {background-position-x: calc(var(--dieSize) * -76px)}
.sideImg_77 {background-position-x: calc(var(--dieSize) * -77px)}
.sideImg_78 {background-position-x: calc(var(--dieSize) * -78px)}

.side .level { 
    position: absolute;
    bottom: 0px;
    right: calc(var(--dieSize) / 10 * 1px);
    font-size: calc(var(--dieSize) / 3 * 1px);
    font-family: 'Gravitas One', cursive;
    line-height: calc(var(--dieSize) / 2 * 1px);
    cursor:default;
}

.side_attack .level {
    color: #970301;
}

.side.side_action .level {
    color: #bcff00;
    font-size: calc(var(--dieSize) / 5 * 1px);
    line-height: calc(var(--dieSize) / 3 * 1px);
}

.defaced:after, .claimed:after, .cursed:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0.8;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.side.played {
    filter: saturate(50%);
}

.defaced:after {
    background-image: url(icons/deface.png);
}

.claimed:after {
    background-image: url(icons/claimed.png);
}

.cursed:after {
    background-image: url(icons/curse.png);
}

#die-editor {
    position: absolute;
    top: 50%;
    left: calc(var(--dieSize) * 1px);
    --dieSize: calc(var(--mazeBlockSize) * 0.6);
    background-color: #000;
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgb(37, 38, 39) 100%);
    padding: 10px 0px 10px 10px;
    border-radius: 5px;
    min-width: calc( ((var(--mazeBlockSize) * var(--gridSize)) - var(--dieSize) - var(--dieSize) ) * 1px);
    transform: translate(0,-50%);
    border: solid 3px #2b2b2b;
    z-index:11;
    min-height: calc(var(--mazeBlockSize) * 5px);
    display:none;
}

#die-editor #activeDice {
    display: flex;
}

#die-editor #activeDice .openDie {
    margin-right: calc(var(--dieSize) / 5 * 1px);   
}

#die-editor #activeDice .openDie .side {
    position: relative;
    margin-bottom: calc(var(--dieSize) / 20 * 1px);   
}

#die-editor #closeEditor, #event #closeEvent {
    height: 30px;
    width: 30px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #FA6900;
    background: linear-gradient(to bottom, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%);
    cursor:pointer;
    transition:all 2s;
}

#die-editor #closeEditor:after, #event #closeEvent:after {
    position: absolute;
    left: 4px;
    content: "\d7";
    font-size: 50px;
    color: #FFF;
    line-height: 22px;
}

#die-editor #closeEditor:hover, #event #closeEvent:hover {
    background: linear-gradient(to bottom, rgba(255,127,4,1) 0%,rgba(255,124,0,1) 49%,rgba(255,167,61,1) 100%,rgba(255,167,61,1) 100%,rgba(255,167,61,1) 100%,rgba(255,183,107,1) 100%);
}


#die-editor .tileInfo {
    width: calc(var(--mazeBlockSize) * 5 * 0.5px);
    min-height: calc(var(--mazeBlockSize) * 3 * 0.4px);
    position: absolute;
    bottom: 10px;
    right: 55px;
    border: solid 1px #FF8107;
    padding: 1%;
    color: #FF8107;
    box-sizing: border-box;
    font-size: 75%;
    cursor:default;
}

#die-editor .tileInfo .tileInfoTitle {
    color: #fff0f0;
}

#die-editor .tileInfo .tileCost {
    position: absolute;
    bottom: 2px;
    right: 5px;
}

#die-editor .tileInfo .tileCost img {
    width: 14px;
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 10px;
}

#die-editor #editmode {
    color: #fff;
    min-width: calc(var(--mazeBlockSize) * 5 * 0.6px);
    min-height: calc(var(--mazeBlockSize) * 2 * 0.6px);
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: calc(var(--mazeBlockSize) * 0.15px);
    display:none;
}

#die-editor #equipmentslots {
    position: absolute;
    top: 10px;
    right: 55px;
    width: calc(var(--mazeBlockSize) * 5 * 0.5px);
    text-align: center;
    color:  #FF8107;
    cursor:default;
}

#equipmentslots img {
    height: 30px;
    width: 30px;
    vertical-align: middle;
}

#die-editor .tileEquipped {
    position: absolute;
    top: 0px;
    right: 0px;
    height: calc( var(--dieSize) * 0.35px);
    width: calc( var(--dieSize) * 0.35px);
    background-image: url(icons/eqIcon.png);
    background-size: cover;
    cursor: pointer;
    transition: 0.25s all;
}

#die-editor .tileEquipped.notEquipped {
    filter: grayscale(1);
    opacity: 0.5;
}

#die-editor .tileEquipped.equipped {
    background-color: #ff8714;
    border-radius: 0 0 0 calc( var(--dieSize) * 0.15px);
}

#die-editor .tileEquipped:hover {
    filter: grayscale(0);
    opacity: 1;
    filter: brightness(150%);
}

#die-editor .activeTile {
    box-shadow: 0 0 1px 3px #fff;
}

#die-editor  #replaceTileOk, #die-editor #upgradeTileOk {
    position: absolute;
    bottom: 0px;
    right: 10px;
    padding: 5px 15px;
    cursor:pointer;
}

#die-editor .openDie .disabled {
    filter: grayscale(100%) opacity(30%);
}

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

#player .death {
    animation: deathBack 1.5s linear 1;
    background-color:black;
}

.death img {
    animation: death 1.5s linear 1;
    transform: scale(0.01);    
}

.resetDeath.death img {
    transform: scale(1) rotate(0deg);
    cursor:pointer;
}

.resetDeath.death img:hover {
    filter: drop-shadow(0 0 11px gold);
    transition: 3s;
}

@keyframes death{
  0% {transform: rotate(0deg) scale(1);}
  100% {transform: rotate(3600deg) scale(0.01);}
}

@keyframes deathBack{
  0% {background-color:transparent;}
  100% {background-color:black;}
}


#maze {       
    background-image: url(img/mazeback.png);
    height: calc(var(--mazeBlockSize) * var(--gridSize) * 1px);
    width: calc(var(--mazeBlockSize) * var(--gridSize) * 1px);
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(var(--gridSize), auto);
    position:relative;
    
}

#maze .mazeblock {
    height: calc(var(--mazeBlockSize) * 1px);
    width: calc(var(--mazeBlockSize) * 1px);
    box-sizing: border-box;
    position:relative;
}

#maze.forest .mazeblock.maze_wall {
    background-image: url(img/forest.jpg);
    background-size: contain;
    box-sizing: border-box;    
}

#maze.forest .mazeblock.maze_open {
    background-image: none;
    background-color: #7d8952;
    border: solid 1px rgba(255,255,255,0.1);
}

#maze.dungeon .mazeblock.maze_wall {
    background-image: url(img/dungeon.jpg);
    background-size: contain;
    box-sizing: border-box;    
}

#maze.dungeon .mazeblock.maze_open {
    background-image: none;
    background-color: #776c5f;
    border: solid 1px rgba(255,255,255,0.1);
}

#maze.crypt .mazeblock.maze_wall {
    background-image: url(img/crypt.jpg);
    background-size: contain;
    box-sizing: border-box;    
}

#maze.crypt .mazeblock.maze_open {
    background-image: none;
    background-color: #706e66;
    border: solid 1px rgba(255,255,255,0.1);
}

#maze.water .mazeblock.maze_wall {
    background-image: url(img/water.jpg);
    background-size: contain;
    box-sizing: border-box;    
}

#maze.water .mazeblock.maze_open {
    background-image: none;
    background-color: #3787F8;
    border: solid 1px rgba(255,255,255,0.1);
}

#maze.volcano .mazeblock.maze_wall {
    background-image: url(img/volcano.jpg);
    background-size: contain;
    box-sizing: border-box;    
}

#maze.volcano .mazeblock.maze_open {
    background-image: none;
    background-color: #9a261c;
    border: solid 1px rgba(255,255,255,0.1);
}

#maze.clouds .mazeblock.maze_wall {
    background-image: url(img/clouds.jpg);
    background-size: contain;
    box-sizing: border-box;    
}

#maze.clouds .mazeblock.maze_open {
    background-image: none;
    background-color: #A3CBF0;
    border: solid 1px rgba(255,255,255,0.1);
}

#maze .mazeblock img {
    height: calc(var(--mazeBlockSize) * 1px);
    width: calc(var(--mazeBlockSize) * 1px);
}

#maze .mazeblock img.dragon {
    position:absolute;
    left:-50%;
    width: calc(var(--mazeBlockSize) * 2px);
    z-index: 1;
}

#maze .mazeblock img.giant {
    position: absolute;
    top: -50%;
    height: calc(var(--mazeBlockSize) * 1.5px);
    z-index: 1;
}

#maze .mazeblock img.giant.dragon {
    width: calc(var(--mazeBlockSize) * 2.5px);
    height: calc(var(--mazeBlockSize) * 2px);
    top: -100%;
    left: -135%;
}

#maze .mazeblock .building {    
    height: calc(var(--mazeBlockSize) * 1px);
    width: calc(var(--mazeBlockSize) * 1px);
    background-size: calc( var(--mazeBlockSize) * 8px) calc(var(--mazeBlockSize) * 1px);
    background-image: url(img/buildings.png);    
    --imageSize : var(--mazeBlockSize);
}

.building_shop { background-position-x : calc( var(--imageSize) * -1px); }
.building_chest { background-position-x : calc( var(--imageSize) * -2px); }
.building_lemonade { background-position-x : calc( var(--imageSize) * -3px); }
.building_anvil { background-position-x : calc( var(--imageSize) * -4px); }
.building_monastery { background-position-x : calc( var(--imageSize) * -5px); }
.building_church { background-position-x : calc( var(--imageSize) * -6px); }
.building_stairs { background-position-x : calc( var(--imageSize) * -7px); }
.building.building_hermit { 
    background-image: url(img/hermit.png) !important;
    background-size: contain !important;
}

#monsterMenu .buildingButton {
    text-align: center;
}

#maze .mazeblock span {
    position: absolute;
    top: 5%;
    right: 10%;
    pointer-events: none;
    color: #f0f0f0d9;
    text-shadow: 0 0 2px #000;
    opacity:0;
}

#mazePlayer, #mazePlayer img {
    position:absolute;
    height: calc(var(--mazeBlockSize) * 1px);
    width: calc(var(--mazeBlockSize) * 1px);
}

#maze.Teleport .mazeblock:hover {
    border:solid 2px #a00;
}

#maze.Portal .mazeblock:hover img {
    background: radial-gradient(ellipse at center, rgba(143,2,34,1) 0%,rgba(57,1,14,1) 50%,rgba(0,0,0,0.34) 83%,rgba(0,0,0,0) 100%);
}

#maze.Invisibility #mazePlayer {
    opacity:0.5;
}

#menu {
    width: calc( 100vw - (var(--mazeBlockSize) * var(--gridSize) * 1px) );
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    color: #f5f5f5;
    max-width: 400px;
    border: solid 1px #a2a2a2;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
    background-image: url(img/grunge.png);
    background-size: cover;
}


#menu #monsterMenu {    
    width: 80%;
    display: flex;
    flex-direction: column;
    padding: 2% 10%;
    height: 30%;    
}

#menu #monsterMenu .title {
    color:#fff;
    text-transform: capitalize;
    padding-left: 5%;
}

#menu #monsterMenu .title.bossMonster {
    color: #c10000;
}

#menu #monsterMenu .title.eliteMonster {
    color: #dccd00;
}



#menu #monsterMenu .monsterImage {
    display: flex;
    justify-content: center;
    max-width: 100%;
    max-height: 30vh;
    overflow: hidden;
}

#menu #monsterMenu .monsterImage img {
    object-fit: contain;
    max-width: 100%;
    max-height: 20vh;
}

#menu #monsterMenu .building {
    background-image: url(img/buildings.png);
    width: calc( var(--imageSize) * 1px);
    height: calc( var(--imageSize) * 1px);
    background-size: calc( var(--imageSize) * 8px) calc(var(--imageSize) * 1px);
    margin: auto;
}

#menu #monsterMenu  .monsterButton {
    text-align: center;
}

#menu #monsterMenu button#fight {
    margin-top: 1vh;
    padding: 0.5vh 2vh;
    cursor: pointer;
}

#menu #playerMenu {
    width: 80%;
    display: flex;
    flex-direction: column;
    padding: 2% 10%;
    height: 65%;
    cursor:default;
}

#menu #playerImage {
    display: flex;
    justify-content: center;
}


#menu #playerMenu #playerLevel {
    text-align: center;
    position:relative;
}

#menu #playerMenu #playerLevel:after {
    counter-increment: playerLevel var(--playerLevel);
    content: counter(playerLevel);
}

#menu #playerMenu #playerImage img {
    object-fit: contain;
    max-width: 100%;
    max-height: 20vh;
}

#menu #playerMenu .outerbar {
    margin: 4px auto;
}

#menu  #otherStats {
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
}

#menu #otherStats > div {
    display: inline-block;
    width: 10%;
}

#menu #otherStats div img {
    width: 100%;
    object-fit: contain;
}

#menu #otherStats .value {
    text-align: center;
}

#menu #otherStats .actions .value:after {
    counter-increment: playerActions var(--playerActions);
    content: counter(playerActions);
}

#menu #otherStats .gold .value:after {
    counter-increment: playerGold var(--playerGold);
    content: counter(playerGold);
}

#menu #otherStats .mana .value:after {
    counter-increment: playerMana var(--playerMana);
    content: counter(playerMana);
}

#menu #otherStats .rolls .value:after {
    counter-increment: rolls var(--rolls);
    content: counter(rolls);
}

#menu #playerAbilities {
    display: flex;
    align-content: center;
    flex-direction: column;
    margin-top: 2%;
}

#menu #playerAbilities div {
    margin-bottom: 1%;
    width: 20%;
    align-self: center;
    vertical-align: middle;
    height: 20px;
    line-height: 20px;
    border: solid 1px #fff;
    background: #303030;
    color: #fff;
    min-width: 100px;
    text-align: center;
    cursor:pointer;
    padding: 0 5%;
    white-space: nowrap;
}   

#menu #playerAbilities .playerAbility.abilityCooling {
    cursor:default;
    color: #a0a0a0;
    border-color: #a0a0a0;
    background-color: #606060;
} 

#menu #viewDice {
    --dieSize: 18;
    transform: rotateX(40deg) rotateY(0deg);
    position: absolute;
    right: 0px;
    top: -5px;
    left: unset;
    cursor:pointer;
    animation: rotateDie 4s linear infinite;
}

@keyframes rotateDie{
  0% {transform: rotateX(360deg) rotateY(0deg);}
  50% {transform: rotateX(180deg) rotateY(180deg);}
  100% {transform: rotateX(0deg) rotateY(360deg);}
}


#event {
    position: absolute;
    top: 50%;
    left: calc(var(--dieSize) * 1px);
    --dieSize: calc(var(--mazeBlockSize) * 0.6);
    background-color: #000;
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgb(37, 38, 39) 100%);
    padding: 10px 0px 10px 10px;
    border-radius: 5px;
    min-width: calc( ((var(--mazeBlockSize) * var(--gridSize)) - var(--dieSize) - var(--dieSize) ) * 1px);
    transform: translate(0,-50%);
    border: solid 3px #2b2b2b;
    z-index:11;
    display:none;
    max-width: 75vw;
}

.eventOptions {
    display: flex;
    display: flex;
    justify-content: space-evenly;
    margin: 30px;
    color: #efefef;
    position: relative;
    z-index: 10;
}

.eventOption {
    margin: 10px 5px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 5px;
    box-shadow: 1px 1px 1px rgba(255,255,255,0.2);
}

#event .eventOptionImage {
    width: calc(var(--mazeBlockSize) * 2px);
    height: calc(var(--mazeBlockSize) * 2px);
    position:relative;
}

#event .eventOptionImage img {
    width: 100%;
    object-fit: contain;
}

.eventOptionName {
    text-align: center;
}

#event .eventOptionPrice {
    background: #4162a8;
    border-top: 1px solid #38538c;
    border-right: 1px solid #1f2d4d;
    border-bottom: 1px solid #151e33;
    border-left: 1px solid #1f2d4d;
    border-radius: 4px;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    color: #fff;
    padding: 10px 0 12px 0;
    text-align: center;
    text-shadow: 0 -1px 1px #1e2d4d;
    cursor: pointer;
    margin-top: 15px;
}

#event .eventOptionPrice:hover {
    box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
}

#event .eventOptionPrice:active {
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    transform: translate(0,4px);
}

#event .eventOptionPrice img {
    display: inline-block;
    width: calc(var(--mazeBlockSize) * 0.2px);
}

#event .eventOption .tile.side {
    --dieSize: calc(var(--mazeBlockSize) * 1.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#event .eventTitle {
    color:#fefefe;
    text-align:center;
}

#event .combatDieEvent .eventOptionImage {
    width: calc(var(--dieSize) * 1px);
    height: calc(var(--dieSize) * 1px);
    margin: calc(var(--dieSize) * 0.1px);
    float:left;
}

#event .combatDieEvent .dieColumn {
    display: flex;
    flex-direction: column;
    float: left;
}

#event .combatDieEvent .dieColumn .eventOptionImage {
    margin-top:1px;
    margin-bottom: 1px;    
}

.helpBox {
    position: absolute;
    transform: translate(0, -110%);
    pointer-events: none;
    font-size: calc( var(--dieSize) * 0.25px);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
    padding:  calc( var(--dieSize) * 0.16px);
    min-width: calc( var(--dieSize) * 2px);
    max-width: calc( var(--dieSize) * 5px);
    border-radius: calc( var(--dieSize) * 0.08px);
    background-image: none !important;
    text-align:left;
    background-color: #f0f0f0;
    pointer-events:none;
    z-index:10;
}

.helpBox img.descImg {
    height: calc( var(--dieSize) * 0.25px);
    vertical-align: middle;
}

#opponentDeck .helpBox {
    transform: translate(0 , 160%);
}

.helpBox h3 {
    margin: 0px;
    text-align: center;
    --dieSize: 30;
    min-height: 30px;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 5px;
}

.helpBox.side_attack {
    background-color: #eeaf8c;
    color: #970301;
}

.helpBox.side_action {
    background-color: #29AB09;
    color: #C0FF01;
}

.helpBox.side_equipment {
    background-color: #BB8F60;
    color: #572B02;
}

.helpBox.side_mana {
    background-color: #300058;
    color: #c055ff;
}

.helpBox.side_spell {
    background-color: #526cff;
    color: #00ffec;
}

.helpBox.side_prayer {
    background-color: #f4f5a9;
    color: #ce7400;
}

.helpBox.side_special {
    background-color: #f4f5a9;
    color: #ce7400;
}

.helpBox .side {
    position: relative;
    float: left;
    display: inline-block;
    vertical-align: middle;
}

.helpBox span {
    font-style: italic;
}

.helpBox hr {
    opacity: 0.5;    
}

#playAll, #discardMode, #endTurn {
    position: absolute;
    height: calc((var(--infoSize)) * 0.2px);
    width: calc((var(--infoSize)) * 0.2px);
    left: calc((var(--infoSize)) * -0.2px);
    bottom: calc((var(--infoSize)) * 0.14px);
    cursor: pointer;
    background: linear-gradient(135deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    font-size: calc((var(--infoSize)) * 0.06px);
    text-align: center;
    color: #fff;
    line-height: calc((var(--infoSize)) * 0.1px);
    border: outset 2px #fff;
    border-radius: 5px;
    transform: translate(-10px,0px);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    padding: 2px;
    text-shadow: 1px 1px 2px #000;
}

#endTurn {
    bottom: calc((var(--infoSize)) * 0.39px);
}

#playAll:hover {
    background: linear-gradient(135deg, rgb(119, 98, 38) 0%,rgba(14,14,14,1) 100%);
}

#endTurn:hover {
    background: linear-gradient(135deg, rgb(200, 98, 38) 0%,rgba(14,14,14,1) 100%);
}

#discardMode {
    top: calc((var(--infoSize)) * 0.15px);
    background-image: url(icons/discard.png), linear-gradient(135deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background-size: contain;
}

#discardMode.discarding {
    background-image: url(icons/discard_active.png), linear-gradient(135deg, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
}

#discardMode:hover {
    background-image: url(icons/discard.png), linear-gradient(135deg, rgb(119, 98, 38) 0%,rgba(14,14,14,1) 100%);;
}

#discardMode.discarding:hover {
    background-image: url(icons/discard_active.png), linear-gradient(135deg, rgb(119, 98, 38) 0%,rgba(14,14,14,1) 100%);;
}

#player #roll-wrap.discarding {
    filter: drop-shadow(0px 0px 10px #000) brightness(90%);
}

#player #roll-wrap.discarding:after {
    content: "DISCARD";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    line-height: calc(var(--dieSize) * 2.5px);
    font-size: calc(var(--dieSize) * 2px);
    opacity: 0.1;
    font-weight: bold;
}

.textDiv {
    position: absolute;
    font-weight: bold;
}

.effectHelp {
    position: absolute;
    top: -40px;
    border: solid 1px #c5c5c5;
    transform: translate( calc(-100% + 15px) , 0);
    font-weight: normal;
    padding: 4px 7px;
    background: rgba(43, 43, 43, 0.9);
    border-radius: 4px 4px 0px 4px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
    max-width: calc((var(--dieSide)) * 3px);
    white-space: normal;
    pointer-events:none;
}

.oldPlayedDie {
    top: calc(var(--dieSize) * -3px) !important;
    zoom: 0.6;
}

#levelUp {
    color:#f0f0f0;
}

#event #levelUp .eventTitle {
    font-size: 200%;
}

#levelUp .gained {
    display: flex;
    justify-content: center;
}

#levelUp .levelChoiceHolder {
    display: flex;
    justify-content: space-around;
    padding-right:10px;
}

#levelUp .bigOr {
    line-height: calc(var(--dieSize) * 3px);
    font-size: 200%;
    margin: 10px;
}

#levelUp .abilityIcon {
    background-position-x: -30px;
    background-size: 750px 30px;
    background-image: url(icons/abilityIcons.png);
    height: 30px;
    width: 30px;
    margin-right: 10px;
    background-color: #D0D0D0;
    background-repeat: no-repeat;
    border-radius: 3px;
}

#event .prayerDieEvent {
    display: flex;
    justify-content: space-around;
    margin: calc(var(--dieSize) * 0.5px) 0px;
}

#event .prayerDieEvent .eventOptionImage {
    width: calc(var(--dieSize) * 1px);
    height: calc(var(--dieSize) * 1px);
	cursor: pointer;
}

#event .prayerDieEvent .side_prayer {
    color: #303030;
    font-weight: bold;
    text-shadow: 0 0 1px #fff;
} 


#event .prayerDieEvent .counterCount {
    position: absolute;
    bottom: 0px;
    color: #fff;
    font-size: 75%;
    transform: translate(0% , 100%);
    text-align: center;
}

#die-editor .curseCount img {
    width: calc(var(--dieSize) * 0.6px);
    height: calc(var(--dieSize) * 0.6px);
    position: absolute;
    z-index: -1;
    left: 0px;
    top: 0px;
    filter: brightness(150%);
}

#die-editor .curseCount {
    position: relative;
    color: #f00;
    text-align: center;
    width: calc(var(--dieSize) * 0.6px);
    height: calc(var(--dieSize) * 0.6px);
    line-height: calc(var(--dieSize) * 0.6px);
    margin-left: calc(var(--dieSize) * 0.15px);
    cursor:default;
}

#die-editor .showAbilities {
    font-size: 75%;
    margin-top: 5px;
}

#die-editor .showAbility {
    border: solid 1px #FF8107;
    margin-bottom: 2px;
    background: rgba(255, 129, 7, 0.15);
}

#die-editor .showAbilityTitle {
    color: #fff0f0;
} 

#die-editor .showAbilityDesc {
    padding: 0 5px;
}

#die-editor .showAbilityTitle span {
    color: #FF8107;
    font-size: 90%;
    display: inline-block;
    float: right;
    margin-right: 5px;
} 

.wishList, .playerchoices {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0px;
    display: flex;
    justify-content: space-around;
    transform: translate(0%, -50%);
    width: calc( (var(--mazeBlockSize) * var(--gridSize) * 1px) + 350px);
}

.wish, .playerchoice  {
    width: calc( (var(--mazeBlockSize) * 2px));
    text-align: center;
    height: calc( (var(--mazeBlockSize) * 1px));
    line-height: calc( (var(--mazeBlockSize) * 1px));
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    cursor: pointer;
    background: #29AB09;
    color: #C0FF01;
}

.playerchoice  {
    background: #0c1fb0;
    color: #00ffe9;
}

.wish:hover, .playerchoice:hover {
    filter: brightness(125%);
}

.wish.wish0 {
    transform: rotate(-15deg);
}

.wish.wish1 {
    transform: translate(0,-50%);
}

.wish.wish2 {
    transform: rotate(15deg);
}

.wishMessage {
    border-radius: 5px;
    position: absolute;
    top: 10%;
    left: calc( (var(--mazeBlockSize) * var(--gridSize) * 0.5px) );
    width: calc( (var(--mazeBlockSize) * 3px));
    text-align: center;
    height: calc( (var(--mazeBlockSize) * 0.5px));
    line-height: calc( (var(--mazeBlockSize) * 0.5px));
    background: #fff;
    overflow: hidden;
    z-index: 10;
}

#menu #playerAbilities div.dungeonAbility.active {
    border: solid 1px #303030;
    background: #fff;
    color: #303030;
}

#maze .talentPicker {
    padding: calc(var(--mazeBlockSize) * 0.5px);
    position: absolute;
    top: 25%;
    left: 50%;
    background-image: url(img/grunge.png);
    background-size: cover;
    background-color: rgb(41, 41, 41);
    transform: translate(-50%,-25%);
    max-height: calc(var(--mazeBlockSize) * calc(var(--gridSize) - 1) * 1px);
    max-width: calc(var(--mazeBlockSize) * calc(var(--gridSize) - 1) * 1px);
    box-sizing: border-box;
    border-radius: calc(var(--mazeBlockSize) * 0.5px);
    z-index: 11;
    width: 100%;
    color: #c0c0c0;
    display: grid;
    grid-template-columns: auto auto auto;
}

#maze .talentPick {
    position:relative;
}

#maze .talentName {
    text-align: center;
    line-height: calc(var(--mazeBlockSize) * 0.5px);
    cursor: pointer;
    position: relative;
    border: solid 1px #404040;
    box-sizing: border-box;
}

#maze .talentName:hover {
    filter: drop-shadow(0 0 1px rgb(255, 0, 0));
    background-color: rgb(72, 0, 0);
    border-radius: 2px;
}

#maze .talentDesc {
    display: none;
    position: absolute;
    background-image: url(img/grunge.png);
    background-size: cover;
    background-color: rgb(72, 0, 0);
    padding: 10px;
    border-radius: 10px;
    z-index: 5;
    box-shadow: 2px 2px 7px #000;
    left: 50%;
    transform: translate(-50%,5px);
    width: calc(var(--mazeBlockSize) * 2px);
    text-align: center;
    pointer-events: none;
    font-size: 75%;
}

#maze .talentPick:hover .talentDesc {
    display: block;
}

#maze .talentPick .talentName:after {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 5px;
    height: calc(var(--mazeBlockSize) * 0.25px);
    width: calc(var(--mazeBlockSize) * 0.25px);
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    top: calc(var(--mazeBlockSize) * 0.125px);
}

#maze .talentPick.talentAbility .talentName:after {
    background-image: url(icons/talentAbility.png);
}

#maze .talentPick.talentEffect .talentName:after {
    background-image: url(icons/talentEffect.png);
}

#maze .talentPick.talentInstant .talentName:after {
    background-image: url(icons/talentInstant.png);
}

#maze .talentPicker .talentPickerTitle {
    position: absolute;
    top: 0px;
    text-align: center;
    width: 100%;
    font-size: 150%;
    line-height: calc(var(--mazeBlockSize) * 0.5px);
    color: #d0d0d0;
}

body>#gameover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 1px;
    transition: all 5s;
    white-space: nowrap;
}
body>#gameover.enlarged {
    font-size: 15vw;
    top: 25%;
    text-shadow: 0vw 5vw 5vw rgba(146, 146, 146, 0.5); 
}

body>#gameover.enlarged.final {   
    transition: all 10s;
    font-size: 15vw;
    top: 25%;
    text-shadow: 0vw -100vh 8vw rgba(146, 146, 146, 0.2);
    filter: blur(1px);
}

body>#score {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    padding:20px;
    background-color:rgba(02,0,0,0.5);
    border-radius: 10px;
}

body>#score  button#tryagain {
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor:pointer;
}

body #imageLayer {
    position:absolute;
    z-index:-1;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;    
    overflow: hidden;
}

body #imageLayer img {
    position:absolute;
    transform:translate(-50%,-50%);
    opacity:1;
    animation: fadein 0.5s linear;
    width:20vw;
}

@keyframes fadein {
  0% { opacity:0;}
  100% {  opacity:1; }
}

#bestiary .bestiaryMonsterName {
    position: absolute;
    top: 8vh;
    left: 20px;
    z-index: 3;
    font-family: 'Griffy', cursive;
    font-size: 5vw;
    text-shadow: 0 0 10px #fff;
    text-transform: capitalize;
}

.bestiaryMonsterInfo {
    font-family: 'Griffy', cursive;
    position: absolute;
    top: 22vh;
    width: 18vw;
    color: rgba(255, 255, 255, 0.51);
    z-index: 3;
}

#bestiary .bestiaryMonsterImg img {
    height: 70vh;
    position: absolute;
    bottom: 0px;
    left: 50%;
    float: right;
    transform: translate(-30%,0);
}

#bestiary .bestiaryMonsterTerrains {
    position: absolute;
    bottom: 0px;
    left: 20px;
    z-index:2;
}

#bestiary .bestiaryMonsterTerrains div {
    width: 5vh;
    height: 5vh;
    display: inline-block;
    margin: 10px;
    box-sizing: border-box;
    border: inset 2px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.bestiaryMonsterTerrain_dungeon {
    background-image: url(img/dungeon.jpg);
    background-size: contain;
    box-sizing: border-box;
}

.bestiaryMonsterTerrain_water {
    background-image: url(img/water.jpg);
    background-size: contain;
    box-sizing: border-box;
}

.bestiaryMonsterTerrain_volcano {
    background-image: url(img/volcano.jpg);
    background-size: contain;
    box-sizing: border-box;
}

.bestiaryMonsterTerrain_forest {
    background-image: url(img/forest.jpg);
    background-size: contain;
    box-sizing: border-box;
}

.bestiaryMonsterTerrain_crypt {
    background-image: url(img/crypt.jpg);
    background-size: contain;
    box-sizing: border-box;
}

.bestiaryMonsterTerrain_clouds {
    background-image: url(img/clouds.jpg);
    background-size: contain;
    box-sizing: border-box;
}

.tutorialBalloon, .tutorialPopup  {
    position: absolute;
    transform: translate(-35%,calc(-100% - 25px));
    background-color: rgba(255, 253, 190, 1);
    border: solid 2px #828282;
    width: 200px;
    border-radius: 50px 10px 50px 50px;
    padding: 15px;
    font-size: 13px;
    font-family: monospace;
    text-align: center;
    color: #000;
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.75);
    z-index: 1000;
    box-sizing: border-box;
}

.tutorialBalloon.hidden, .tutorialPopup.hidden {
    display:none;
}

.tutorialBalloon:after, .tutorialPopup:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: rgba(255, 253, 190, 1);
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -20px;
}

.tutorialBalloon:before, .tutorialPopup:before {
    content: "close";
    position: absolute;
    top: 2px;
    right: 8px;
    text-decoration: underline;
    cursor: pointer;
    font-size: 75%;
}

.tutorialBalloon.alignL, .tutorialPopup.alignL {
    text-align:left;
    padding-left: 20px;
}

.tutorialBalloon.wide, .tutorialPopup.wide {
     width: 400px;
}

.tutorialBalloon.left, .tutorialPopup.left {
    transform: translate(calc(-100% - 25px) , 0);
}

.tutorialBalloon.left:after, .tutorialPopup.left:after {
    bottom: unset;
    left: unset;
    margin-left: unset;
    margin-bottom: unset;
    
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: rgba(255, 253, 190, 1);
    border-right: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-right: -18px;
}

.tutorialBalloon.bottom, .tutorialPopup.bottom {
    transform: translate(-35%, 25px);    
}

.tutorialBalloon.bottom:after, .tutorialPopup.bottom:after {
    bottom: unset;
    left: unset;
    margin-left: unset;
    margin-bottom: unset;
   
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom-color: rgba(255, 253, 190, 1);
    border-top: 0;
    border-left: 0;
    margin-left: -10px;
    margin-top: -20px;
}

#tutorial {
    position: absolute;
    top:20px;
    right:20px;
    z-index: 900;
}

#tutorialButtonText {
    display: inline-block;
    color: #a0a0a0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  top: -4px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switchSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    background: radial-gradient(ellipse at center, rgb(193, 185, 185) 0%,rgb(239, 239, 239) 47%,rgb(255, 255, 255) 100%);
    transition: .4s;
    border-radius: 34px;
    filter: drop-shadow(-1px -1px 1px #000);
    box-shadow: 1px 1px 0px 1px #aaa;
}

.switchSlider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  background: radial-gradient(ellipse at center, rgb(41, 253, 0) 0%,rgb(2, 135, 0) 47%,rgb(0, 118, 3) 100%);
  transition: 400ms;
  border-radius: 50%;
}

input:checked + .switchSlider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

input:checked + .switchSlider:before {
    background-color: #a00;
    background: radial-gradient(ellipse at center, rgb(255, 0, 0) 0%,rgb(154, 0, 0) 47%,rgb(101, 0, 0) 100%);
}