/* 
    Created on : 4-nov-2019
    Author     : Jan-Dirk van Dingenen
                 boardwebgames.com
*/

@font-face {
    font-family: 'Luminari';
    font-style: normal;
    font-weight: normal;
    src: local('Luminari'), url('Luminari-Regular.woff') format('woff');
}

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

*:not(input):not(textarea) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

html {
    background-color:#964936;
    background-image:url(img/background.jpg);
    background-size: 500px;
    font-family:'Luminari';
}

body {
    margin:0px;
    --baseUnit: 500px;   
}

button {
    font-family:'Luminari';
    font-family: 'Luminari';
    font-size: calc(var(--baseUnit) * 0.04);
    color: #434244;
}

#game {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

#wrapper {
    position: relative;
    display: none;
    filter: drop-shadow(calc(var(--baseUnit) * 0.01) calc(var(--baseUnit) * 0.01) calc(var(--baseUnit) * 0.015) black);
}

#cardWrapper {
    background-image: url(img/logoGlow.png);
    /*background-image: url(img/gameBack.jpg);*/
    width: var(--baseUnit);
    height: calc(var(--baseUnit) * 1.466);
    background-repeat: no-repeat;
    background-position: center 25%;
    background-color: rgba(163, 103, 62, 0.1);
    background-size: calc(var(--baseUnit) * 1.2);
    box-sizing: border-box;
    box-shadow: inset 0px 0 calc(var(--baseUnit) * 0.25) rgba(253, 161, 98, 0.74);
    border-radius: 0 0 calc(var(--baseUnit) * 0.02) calc(var(--baseUnit) * 0.02);    
}

#cardHandle {    
    transition: all 0.5s ease-in-out;
    opacity:1;
}

#cardHandle.move_future {
    transform: translate(120%, 0);
    opacity:0;
}

#cardHandle.move_past {
    transform: translate(-120%, 0);
    opacity:0;
}

#cardHandle.move_possible, #cardHandle.move_present {
    transform: translate(0, -100%);
    opacity:0;
}

#card3D {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out; 
    width: var(--baseUnit);
    height: calc(var(--baseUnit) * 1.466);
}

#card3D.flipBack {
    transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}


#card3D > div {
    position: absolute;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    background-color: #994c35;
}

#cardSide1 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(5px);
    height: calc(var(--baseUnit) * 1.466);
    width: 10px;
    background-color: #4e1d16;
}

#cardFront {
    width: var(--baseUnit);
    height: calc(var(--baseUnit) * 1.466);
    background-image: none;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    transform: translateX(0px) translateY(0px) translateZ(0px);
    border-radius: 0 0 calc(var(--baseUnit) * 0.02) calc(var(--baseUnit) * 0.02);
    z-index: 1 !important;
}

#cardSide2 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(calc(var(--baseUnit) - 4px));
    height: calc(var(--baseUnit) * 1.466);
    width: 10px;
    background-color: #4e1d16;
}

#cardBack {
    width: var(--baseUnit);
    height: calc(var(--baseUnit) * 1.466);
    background-image: url(img/cardback.jpg);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(0.1px);
    border-radius: 0 0 calc(var(--baseUnit) * 0.02) calc(var(--baseUnit) * 0.02);
}

#goalCard {
    width: var(--baseUnit);
    height: calc(var(--baseUnit) * 0.682);
    background-image: none;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    transform: translate(0,-100%);
    box-shadow: 0 0 calc(var(--baseUnit) * 0.1) #000;
    transition: all 0.25s;
    z-index: 5;
    border-radius: 0 0 calc(var(--baseUnit) * 0.1) calc(var(--baseUnit) * 0.1);
    border-bottom: solid 1px #362411;
    cursor: pointer;
    background-color: #362411;
}

#goalCard.open {
    transform:unset;
}

#formulas {
    overflow: hidden;
    width: var(--baseUnit);
    height: calc(var(--baseUnit) /10);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    top: -1px;
}

.formula {
    display:inline-block;
    width: var(--baseUnit);
    height: calc(var(--baseUnit) /10);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    cursor:pointer;
}

#bodyFormula {
    background-image: url(img/bodyFormula.png);
}

#mindFormula {
    background-image: url(img/mindFormula.png);
}

#goalHandle {
    position: absolute;
    bottom: calc(var(--baseUnit) * -0.075);
    height: calc(var(--baseUnit) * 0.075);
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 0 0 calc(var(--baseUnit) * 0.05) calc(var(--baseUnit) * 0.05);
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding: calc(var(--baseUnit) * 0.01) calc(var(--baseUnit) * 0.055);
    cursor:pointer;
}

#goalHandle .resource {
    width: calc(var(--baseUnit) * 0.06);
    height: calc(var(--baseUnit) * 0.06);
    display: inline-block;
}

#day, #presentCards, #futureCards {
    display: flex;
    align-items: center;
}

#day span, #futureCards span, #presentCards span {
    font-size: calc(var(--baseUnit) * 0.07);
    color: #874a37;
    text-shadow: 0 0 1px #fff;
}

#day .resource {
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.1);
    margin-left: calc(var(--baseUnit) * 0.01);
}

#presentCards span {
    color: #a63d3e;
    font-size: calc(var(--baseUnit) * 0.06);
}

#futureCards span {
    color: #000000;
    font-size: calc(var(--baseUnit) * 0.06);
    text-shadow: 0 0 1px #00a9ff;
}

.marker {
    background-image: url(img/markers.png);
    background-repeat: no-repeat;
    background-size: 300% 100%;
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.1);
}

.marker.marker_time {background-position-x: 0}
.marker.marker_heart {background-position-x: 50%}
.marker.marker_goal {background-position-x: 100%}

.resource {
    background-image: url(img/resources.png);
    background-repeat: no-repeat;
    background-size: 1000% 100%;
    background-position: 0 0;
}

.resource.resource_food {background-position-x: 0}
.resource.resource_coin {background-position-x: 11.1%}
.resource.resource_energy {background-position-x: 22.2%}
.resource.resource_wisdom {background-position-x: 33.3%}
.resource.resource_fear {background-position-x: 44.4%}
.resource.resource_star {background-position-x: 55.5%}
.resource.resource_heart {background-position-x: 66.6%;}
.resource.resource_day {background-position-x: 78%}
.resource.resource_present {background-position-x: 89%}
.resource.resource_future {background-position-x: 100%}

.inventorySlot {
    width: calc(var(--baseUnit) * 0.065);
    height: calc(var(--baseUnit) * 0.065);
/*    background-color: rgba(255, 255, 255, 0.1);
    border: solid 1px rgba(255, 255, 255, 0.25);*/
    background-color: rgba(255, 255, 255, 0.3);
    border: solid 1px rgba(255, 255, 255, 0.55);
    border-radius: calc(var(--baseUnit) * 0.01);
    margin-bottom: calc(var(--baseUnit) * 0.025);
}

.inventoryBar {
    position: absolute;
    z-index: 2;
    top: calc(var(--baseUnit) * 0.2);
    transition: 0.5s all;
}

#bodyInventory {
    left: calc(var(--baseUnit) * 0.01);
}

#mindInventory {
    right: calc(var(--baseUnit) * 0.01);
}

.inventorySlot.hasResource {
    border: none;
    background-color: transparent;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    /*filter: drop-shadow(0 0 calc(var(--baseUnit) * 0.01) #fff);*/
}

.inventorySlot .resource {
    width: 100%;
    height: 100%;
}

.cardOption {
    position: absolute;
    width: calc(var(--baseUnit) * 0.9);
    height: calc(var(--baseUnit) * 0.1);
    cursor:pointer;
}

.cardOption.cardOption_1_0 {
    top: calc(var(--baseUnit) * 1.01);
    height: calc(var(--baseUnit) * 0.25);
}

.cardOption.cardOption_2_0 {
    top: calc(var(--baseUnit) * 1.01);
    height: calc(var(--baseUnit) * 0.17);
}

.cardOption.cardOption_2_1 {
    top: calc(var(--baseUnit) * 1.194);
    height: calc(var(--baseUnit) * 0.19);
}

.cardOption.cardOption_3_0 {
    top: calc(var(--baseUnit) * 0.94);
    height: calc(var(--baseUnit) * 0.16);
}

.cardOption.cardOption_3_1 {
    top: calc(var(--baseUnit) * 1.105);
    height: calc(var(--baseUnit) * 0.14);
}

.cardOption.cardOption_3_2 {
    top: calc(var(--baseUnit) * 1.26);
    height: calc(var(--baseUnit) * 0.14);
}

.cardOption.cardOption_4_0 {
    top: calc(var(--baseUnit) * 0.87);
    height: calc(var(--baseUnit) * 0.126);
    left: calc(var(--baseUnit) * 0.1);
    width: calc(var(--baseUnit) * 0.8);
}

.cardOption.cardOption_4_1 {
    top: calc(var(--baseUnit) * 1);
    height: calc(var(--baseUnit) * 0.13);
}

.cardOption.cardOption_4_2 {
    top: calc(var(--baseUnit) * 1.135);
    height: calc(var(--baseUnit) * 0.12);
}

.cardOption.cardOption_4_3 {
    top: calc(var(--baseUnit) * 1.26);
    height: calc(var(--baseUnit) * 0.13);
}

#popup, #modalPopup {
    background-image: url(img/popup.jpg);
    width: calc(var(--baseUnit) * 0.8);
    height: calc(var(--baseUnit) * 0.5456);
    top: calc(var(--baseUnit) * 0.275);
    position: absolute;
    z-index: 4;
    left: calc(var(--baseUnit) * 0.1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: calc(var(--baseUnit) * 0.05);
    box-shadow: calc(var(--baseUnit) * 0.005) calc(var(--baseUnit) * 0.005) calc(var(--baseUnit) * 0.005) calc(var(--baseUnit) * 0.001) #5d351a;
    box-sizing: border-box;
    padding: calc(var(--baseUnit) * 0.07);
    padding-top: 0;
    padding-bottom: calc(var(--baseUnit) * 0.09);
    display:none;    
}

#modalPopup.fullHeight {
    padding-bottom: 0;
}

#popup {
    z-index:5;
}

.popupContent {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: calc(var(--baseUnit) * 0.06);
    color: #6b403c;
    position: relative;
}

button.popupButton {
    position: absolute;
    bottom: calc(var(--baseUnit) * -0.025);
    width: calc(var(--baseUnit) * 0.561);
    height: calc(var(--baseUnit) * 0.07);
    border-radius: calc(var(--baseUnit) * 0.01);
    background-image: url(img/button.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
    outline: none;
    left: 50%;
    transform: translate(-50%,0);
}

.unclickable {
    pointer-events: none;
}

.popupContent .arrow, .popupContent .resource {
    display: inline-block;
    width: calc(var(--baseUnit) * 0.065);
    height: calc(var(--baseUnit) * 0.065);
    vertical-align: text-top;
}

.arrow {
    background-image: url(img/arrow.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 calc(var(--baseUnit) * 0.035);
}

.tradeType {
    background-image: url(img/button.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    background-color: transparent;
    padding: calc(var(--baseUnit) * 0.03) calc(var(--baseUnit) * 0.06);
    border-radius: calc(var(--baseUnit) * 0.01);
    cursor: pointer;
    
    box-shadow: 2px -1px 0px rgba(139, 76, 98, 0.75);
    border-left: solid 1px rgba(139, 76, 98, 0.5);
}

.dayEnd .inventoryBar {
    top: calc(var(--baseUnit) * 0.7);
}

.dayEnd #popup, .dayEnd #modalPopup {
    top: calc(var(--baseUnit) * 0.68);
}

.popupContent .chooseone {
    display: flex;
    justify-content: space-around;
    width: 75%;
    margin-top: calc(var(--baseUnit) * 0.08);
}

.popupContent .chooseone button, .popupContent .manualAdd button {
    background-image: url(img/button.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
    outline: none;
    padding: calc(var(--baseUnit) * 0.020);
    border-radius: calc(var(--baseUnit) * 0.01);
    
    box-shadow: 2px -1px 0px rgba(139, 76, 98, 0.75);
    border-left: solid 1px rgba(139, 76, 98, 0.5);
}

.popupContent .smallerContent {
    font-size: calc(var(--baseUnit) * 0.05);
}

.popupContent .chooseConfirm button {
    font-size: calc(var(--baseUnit) * 0.050);
}

#goalCard .daySlot {
    position: absolute;
    z-index: 10;
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.1);
    border-radius: calc(var(--baseUnit) * 0.01);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(62deg);
}

#goalCard .daySlot.daySlot_1 {
    top: calc(var(--baseUnit) * 0.46);
    left: calc(var(--baseUnit) * 0.17);
}

#goalCard .daySlot.daySlot_2 {
    top: calc(var(--baseUnit) * 0.376);
    left: calc(var(--baseUnit) * 0.085);
}

#goalCard .daySlot.daySlot_3 {
    top: calc(var(--baseUnit) * 0.325);
    left: calc(var(--baseUnit) * 0.185);
}

#goalCard .daySlot.daySlot_4 {
    top: calc(var(--baseUnit) * 0.256);
    left: calc(var(--baseUnit) * 0.075);
}

#goalCard .daySlot.daySlot_5 {
    top: calc(var(--baseUnit) * 0.205);
    left: calc(var(--baseUnit) * 0.175);
}

#goalCard .daySlot.daySlot_6 {
    top: calc(var(--baseUnit) * 0.137);
    left: calc(var(--baseUnit) * 0.066);
}

#goalCard .daySlot.daySlot_7 {
    top: calc(var(--baseUnit) * 0.086);
    left: calc(var(--baseUnit) * 0.168);
}

#goalCard .goalSlot {
    position: absolute;
    z-index: 10;
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.1);
    border-radius: calc(var(--baseUnit) * 0.01);
    display: flex;
    justify-content: center;
    align-items: center;    
}
/* -------------  */
#goalCard.goalType_tutorial .goalSlot_0 {
    top: calc(var(--baseUnit) * 0.131);
    left: calc(var(--baseUnit) * 0.55);
}

#goalCard.goalType_tutorial .goalSlot_1 {
    top: calc(var(--baseUnit) * 0.131);
    left: calc(var(--baseUnit) * 0.70);
}
/* -------------  */

#goalCard.goalType_normal .goalSlot_0 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.51);
}

#goalCard.goalType_normal .goalSlot_1 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.623);
}

#goalCard.goalType_normal .goalSlot_2 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.735);
}

#goalCard.goalType_normal .goalSlot_3 {
    top: calc(var(--baseUnit) * 0.176);
    left: calc(var(--baseUnit) * 0.51);
}

#goalCard.goalType_normal .goalSlot_4 {
    top: calc(var(--baseUnit) * 0.176);
    left: calc(var(--baseUnit) * 0.623);
}

#goalCard.goalType_normal .goalSlot_5 {
    top: calc(var(--baseUnit) * 0.176);
    left: calc(var(--baseUnit) * 0.735);
}
/* -------------  */

#goalCard.goalType_advanced .goalSlot_0 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.392);
}

#goalCard.goalType_advanced .goalSlot_1 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.506);
}

#goalCard.goalType_advanced .goalSlot_2 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.62);
}

#goalCard.goalType_advanced .goalSlot_3 {
    top: calc(var(--baseUnit) * 0.063);
    left: calc(var(--baseUnit) * 0.732);
}

#goalCard.goalType_advanced .goalSlot_4 {
    top: calc(var(--baseUnit) * 0.175);
    left: calc(var(--baseUnit) * 0.337);
}

#goalCard.goalType_advanced .goalSlot_5 {
    top: calc(var(--baseUnit) * 0.175);
    left: calc(var(--baseUnit) * 0.45);
}

#goalCard.goalType_advanced .goalSlot_6 {
    top: calc(var(--baseUnit) * 0.175);
    left: calc(var(--baseUnit) * 0.562);
}

#goalCard.goalType_advanced .goalSlot_7 {
    top: calc(var(--baseUnit) * 0.175);
    left: calc(var(--baseUnit) * 0.675);
}

#goalCard.goalType_advanced .goalSlot_8 {
    top: calc(var(--baseUnit) * 0.175);
    left: calc(var(--baseUnit) * 0.788);
}
/* -------------  */

#goalCard .heartSlot {
    position: absolute;
    z-index: 10;
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.095);
    display: flex;
    justify-content: center;
    align-items: center;
    /*border-radius: calc(var(--baseUnit) * 0.06) calc(var(--baseUnit) * 0.06) 100% 100%;*/
}

/* -------------  */

#goalCard.goalType_tutorial .heartSlot_3 {
    top: calc(var(--baseUnit) * 0.349);
    left: calc(var(--baseUnit) * 0.755);
}

#goalCard.goalType_tutorial .heartSlot_2 {
    top: calc(var(--baseUnit) * 0.429);
    left: calc(var(--baseUnit) * 0.84);
}

#goalCard.goalType_tutorial .heartSlot_1 {
    top: calc(var(--baseUnit) * 0.51);
    left: calc(var(--baseUnit) * 0.76);
}
/* -------------  */

#goalCard.goalType_normal .heartSlot_1 {
    top: calc(var(--baseUnit) * 0.376);
    left: calc(var(--baseUnit) * 0.737);
}

#goalCard.goalType_normal .heartSlot_2 {
    top: calc(var(--baseUnit) * 0.375);
    left: calc(var(--baseUnit) * 0.85);
}

#goalCard.goalType_normal .heartSlot_3 {
    top: calc(var(--baseUnit) * 0.504);
    left: calc(var(--baseUnit) * 0.737);
}

#goalCard.goalType_normal .heartSlot_4 {
    top: calc(var(--baseUnit) * 0.502);
    left: calc(var(--baseUnit) * 0.85);
}
/* -------------  */

#goalCard.goalType_advanced .heartSlot_1 {
    top: calc(var(--baseUnit) * 0.37);
    left: calc(var(--baseUnit) * 0.793);    
}

#goalCard.goalType_advanced .heartSlot_2 {
    top: calc(var(--baseUnit) * 0.495);
    left: calc(var(--baseUnit) * 0.793);
}
/* -------------  */

.scoreMe {
    box-shadow: 0 0 5px 5px #ffd700c4;
}

.scoreThis {
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fff);
    cursor:pointer;
}

span.itemName {
    color: #363774;
}

#loading {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 50;
    font-size: calc(var(--baseUnit) * 0.15);
    color: #d7c271;
    filter: drop-shadow(3px 3px 1px #333) drop-shadow(2px 2px 3px #cb6);
    animation: fade 3s linear both infinite;
}

@keyframes fade {
  0% { opacity:1; color:#d7c271;}
  50% {opacity:0.5; color:#38383b;}
  100% { opacity:1; color:#d7c271;}
}

.manualAdd {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: normal;
    width: 100%;
    flex-wrap: wrap;
    padding: calc(var(--baseUnit) * 0.015);
    padding-bottom: 0;
}

button.addManualResource {
    margin: calc(var(--baseUnit) * 0.015);
    margin-top: 0;
}

.item {
    width: calc(var(--baseUnit) * 0.06);
    height: calc(var(--baseUnit) * 0.06);
    display: inline-block;
    background-image: url(img/items.png);
    background-repeat: no-repeat;
    background-size: 600% 100%;
    background-position: 0 0;
    cursor:pointer;
}

.item.item_magnifier {
    background-position-x: calc(100 / 5 * 1%);
}
.item.item_rope {
    background-position-x: calc(100 / 5 * 2%);
}
.item.item_toolbox {
    background-position-x: calc(100 / 5 * 3%);
}
.item.item_harmonica {
    background-position-x: calc(100 / 5 * 4%);
}
.item.item_pendant {
    background-position-x: calc(100 / 5 * 5%);
}

img.showItem {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    max-width: 80%;
    cursor: pointer;
    border-radius: calc(var(--baseUnit) * 0.02);
    box-shadow: calc(var(--baseUnit) * 0.005) calc(var(--baseUnit) * 0.005) calc(var(--baseUnit) * 0.012) rgba(0,0,0,0.5);
}

.daySlot .resource {
    width: calc(var(--baseUnit) * 0.08);
    height: calc(var(--baseUnit) * 0.08);
    transform: rotate(-90deg);
}

.daySlot .resource.resource_heart {
    transform: rotate(-60deg);
}



/* intro box */

#intro {
}

.box-outer {
    width: calc(var(--dieUnit) *0.5);
    height: calc(var(--dieUnit) *0.5);
    perspective: 1000px;
    box-sizing: border-box;
    transform-style: preserve-3d;
    transition: all 1s;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    --dieUnit: calc(var(--baseUnit) *0.6);
    transform: translate(calc(-50% - calc(var(--dieUnit) *0.3)), -50%);
}

.box-outer .box {
    display: inline-block;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(0deg) rotateZ(0deg);     
    transition: all 3s;
}

.box-outer:not(.turnBox) .box.rotateBox {
    animation: rotate 15s linear both infinite;
}

@keyframes rotate {
  0% { transform: rotateX(-15deg) rotateY(0deg) rotateZ(0deg);}
  100% { transform: rotateX(-15deg) rotateY(360deg) rotateZ(0deg);}
}

.box-outer.turnBox {
    top: calc(var(--dieUnit) *0.4);
    --dieUnit: calc(var(--baseUnit) *0.7);
    transition: all 3s;
}
.box-outer.turnBox .box {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

.box-outer .box, .box-outer .box .box-face {
    position: absolute;
    width: calc(var(--dieUnit) *1);
    height: calc(var(--dieUnit) *1);
    transform-origin: center center;
}

.box-outer .box .box-face {
    background-color: #000;
    background-repeat: no-repeat;
    border: 1px solid #000;
    box-sizing: border-box;
    /*backface-visibility: hidden;*/
    background-position-x: 0;
    background-size:cover;   
}

.box-outer .box .box-face:first-child {
    transform: translateZ(calc(var(--dieUnit) *0.5));
    height: calc(var(--dieUnit) * 0.192);
    background-image: url(img/boxside0.jpg);
}

.box-outer .box .box-face:nth-child(2) {
    transform: rotateY(-90deg) translateZ(calc(var(--dieUnit) *0.5));
    height: calc(var(--dieUnit) * 0.192);
    background-image: url(img/boxside1.jpg);
}

.box-outer .box .box-face:nth-child(3) {
    transform: rotateX(-90deg) translateZ(calc(var(--dieUnit) * -0.31));
    background-color:#000;
}

.box-outer .box .box-face:nth-child(4) {
    transform: rotateX(90deg) translateZ(calc(var(--dieUnit) *0.5));
    background-image: url(img/boxcover.jpg);
}

.box-outer .box .box-face:nth-child(5) {
    transform: rotateY(90deg) translateZ(calc(var(--dieUnit) *0.5));
    height: calc(var(--dieUnit) * 0.192);
    background-image: url(img/boxside2.jpg);
}

.box-outer .box .box-face:nth-child(6) {
    transform: rotateY(180deg) translateZ(calc(var(--dieUnit) *0.5));
    height: calc(var(--dieUnit) * 0.192);
    background-image: url(img/boxside3.jpg);
}

#boxLogo {
    background-image: url(img/boxLogo.png);
    position: absolute;
    width: calc(var(--dieUnit) * 0.6);
    height: calc(var(--dieUnit) * 0.38);
    background-size: contain;
    left: calc(var(--dieUnit) * 0.22);
    top: calc(var(--dieUnit) * 0.008);
    opacity: 0;
    background-repeat: no-repeat;
    animation: fade2 3s linear both infinite;
    filter: drop-shadow(0 0 calc(var(--dieUnit) * 0.03) #ffeed7);
    z-index:2;
    pointer-events: none;
}

#kickNotify {
    position: absolute;
    right: -2px;
    z-index: 1;
    top: calc(var(--dieUnit) * 0.75);
}

div#kickNotify img {
    height: calc(var(--dieUnit) * 0.2);
}

@keyframes fade2 {
  0% { opacity:1;}
  50% {opacity:0; }
  100% { opacity:1;}
}

#gameOptions {
    display: none;
    position: absolute;
    top: calc(var(--baseUnit) * 1);
    background-image: url(img/gameOptions.png);
    background-size: calc(var(--baseUnit) * 1) auto;
    width: calc(var(--baseUnit) * 1);
    background-repeat: no-repeat;
    height: calc(var(--baseUnit) * 0.6);
    left: 52%;
    transform: translate(-50%, 0);
    filter: drop-shadow(calc(var(--baseUnit) * 0.01) calc(var(--baseUnit) * 0.01) calc(var(--baseUnit) * 0.015) black);
}

.gameOption {
    filter: drop-shadow(2px 2px 2px #303030);
    text-shadow: 0 0 1px #fff;
    margin-bottom: calc(var(--baseUnit) * 0.005);
    cursor: pointer;
    width: calc(var(--baseUnit) * 1);
    height: calc(var(--baseUnit) * 0.1);
}

.gameOption.gameOption_tutorial {
    margin-top: calc(var(--baseUnit) * 0.19);
}

.gameOption .resource {
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.1);
    display: inline-block;
    margin-left: calc(var(--baseUnit) * 0.02);
}

#tutorial {
    position: absolute;
    background-image: url(img/tutorial.png);
    width: calc(var(--baseUnit) * 0.8);
    height: calc(var(--baseUnit) * 0.16);
    top: calc(var(--baseUnit) * 0.2);
    z-index: 5;
    left: calc(var(--baseUnit) * 0.065);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    border-radius: calc(var(--baseUnit) * 0.05);
    box-sizing: border-box;
    opacity: 0.8;
    cursor:pointer;
    display:none;
}

#tutorialText {
    position: absolute;
    top: 50%;
    left: calc(var(--baseUnit) * 0.14);
    font-family: sans-serif;
    font-weight: 600;
    font-size: calc(var(--baseUnit) * 0.026);
    width: calc(var(--baseUnit) * 0.63);
    color: rgba(74, 39, 6, 0.8);
    transform: translate(0, -35%);
}

#tutorial .resource, #tutorial .item {
    width: calc(var(--baseUnit) * 0.03);
    height: calc(var(--baseUnit) * 0.03);
    display: inline-block;
    vertical-align: calc(var(--baseUnit) * -0.005);
}

.resource.canRemove:not(.resource_fear) {
    cursor:pointer;
    filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #fff);
    animation: fade 0.5s linear both infinite;
}

.popupContent .item {
    width: calc(var(--baseUnit) * 0.08);
    height: calc(var(--baseUnit) * 0.08);
    vertical-align: sub;
}

#popup.bigPromptPopup {
    padding-bottom: 0;
}

#popup.bigPromptPopup .popupContent {
    font-size: calc(var(--baseUnit) * 0.05);
}

#storyBook {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(var(--baseUnit) * 1);
    height: calc(var(--baseUnit) * 1.2);
    transform: translate(0, -50%);
    z-index: 15;
    background-image: url(img/storyEnd.jpg);
    background-size: cover;
    display:none;
}

#storyBook .storyPage {
    position: absolute;
    perspective: 1000px;
    box-sizing: border-box;
    transform-style: preserve-3d;
    width: calc(var(--baseUnit) * 0.95);
    height: calc(var(--baseUnit) * 1.15);
    background-image: url(img/storyEnd.jpg);
    background-size: cover;
    top: calc(var(--baseUnit) * 0.025);
    /*left: calc(var(--baseUnit) * 0.022);*/
    cursor:pointer;
}

#storyBook .storyPage.binderPage {
    width: calc(var(--baseUnit) * 1);
    height: calc(var(--baseUnit) * 1.2);
    top: 0;
    left: 0;
}

#storyBook img.storyPage.removePage {
    animation: turnpage 2s linear both;
    transform-origin: left;
}

@keyframes turnpage {
  0% { transform: rotateY(0deg);}
  60% {transform: rotateY(90deg); opacity:1;}
  100% { transform: rotateY(180deg); opacity:0; }
}

#signupWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

iframe {
    width: 640px;
    max-width: 100%;
    overflow: auto;
    margin: 0 auto;
    height: 640px;
    /*filter: drop-shadow(0 0 5px #dadce0) drop-shadow(0 0 15px #ddd) drop-shadow(0 0 40px rgba(255,255,255,0.7));*/
    filter: drop-shadow(1px 2px 2px #000);
}

.previewCard {
    position: absolute;
    border-radius: 10px;
    z-index: -1;
    top: 40px;
    display:none;
}

#signupPoster {
    display:none;
}

.cheatdiv {
    top: 0;
    position: absolute;
    width: calc(var(--baseUnit) * 0.1);
    height: calc(var(--baseUnit) * 0.1);
    top: calc(var(--baseUnit) * 0.1);
    cursor:pointer;
}

div#cheatSub {
    left: calc(var(--baseUnit) * 0.05);
}

div#cheatAdd {
    left: calc(var(--baseUnit) * 0.8);
}

@media (max-width: 1000px) {
    #signupPoster {
        text-align: center;
        margin-bottom: 20px;
        display:block;
    }
}

@media (min-width: 1000px) {
    img#previewCard1 {
        left: calc(50% - 415px);
        transform: translate(-50%,0) rotate(-10deg);
        box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.5);
        display:block;
    }

    img#previewCard2 {
        left: calc(50% + 415px);
        transform: translate(-50%,0) rotate(10deg);
        box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5);
        display:block;
    }
}

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

#others a {
    color: #e96533;
}

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