/*
 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=Uncial+Antiqua');

@font-face {
    font-family: 'xxii_arabian-onenightstandBd';
    src: url('xxii_arabian-onenightstand-webfont.woff2') format('woff2'),
         url('xxii_arabian-onenightstand-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(37,0,102,1) 30%,rgba(216,184,121,1) 90%,rgba(201,159,20,1) 100%);
    height: 100vh;
}

body {
    --boardUnit: 18vh;
    --playerColour: #000955;
    --meepleSize : calc(var(--boardUnit) * 0.3);
    --opponentColour: #4d013c;
    --icons : 11;
    --gapSize : 0.3;
    
    margin: 0;
    overflow-y: hidden;
    background-image: url(img/backdrop2.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

#game {
    justify-content: center;
    margin-top: calc(var(--boardUnit) * 0.1);
    min-width: calc(var(--boardUnit) * 9);
    font-family: sans-serif;
    
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: calc(var(--boardUnit) * var(--gapSize));
}

#turnMarker {
    display: none;
    position: absolute;
    top: 45%;
    left: 50%;
    font-size: calc(var(--boardUnit) * 0.4);
    font-family: 'xxii_arabian-onenightstandBd', sans-serif;
    transform: translate(-50%,-50%);
    z-index: 10;
    color: goldenrod;
    background: #000000;
    padding: calc(var(--boardUnit) * 0.1) calc(var(--boardUnit) * 0.6);
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.02) goldenrod);
    border-radius: 0 0 calc(var(--boardUnit) * 0.25) calc(var(--boardUnit) * 0.25);
    text-shadow: 0px 0px calc(var(--boardUnit) * 0.1) #faff00;
    cursor: default;
}

#turnMarker:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url(img/backdrop2.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 135%;
    z-index: 11;
    transform: translate(0,-99%);
}

@media (max-width: 1300px) {
    body {
        --gapSize : 0;
    }
}

@media (max-width: 1030px) {
    body {
        --boardUnit: 14.6vh;
    }
    
    #game { 
        margin-top: calc(var(--boardUnit) * 0.5);
    }
}

#info {
    --meepleSize: calc(var(--boardUnit) * 0.2);
    width: calc(var(--boardUnit) * 2);
    height: calc(var(--boardUnit) * 5);
}

#instruct {
    font-size: calc(var(--boardUnit) * 0.18);
    text-align: center;
    color: #daa520;
    margin-bottom: calc(var(--boardUnit) * 0.2);    
}

#hand {
    display: flex;
    justify-content: space-evenly;
}

#buttonContainer {
    display: flex;
    justify-content: space-evenly;
    margin-top: calc(var(--boardUnit) * 0.2);    
}

#buttonContainer button {
    font-size: calc(var(--boardUnit) * 0.15);
    font-family: sans-serif;
}

.yesIcon {
    transition: color 0.5s;
    color: #00f100;
}

.noIcon {
    transition: color 0.5s;
    color: #ff3300;
}

#guide {
    width: calc(var(--boardUnit) * 2);
    height: calc(var(--boardUnit) * 1.5);
    --iconUnit: calc(var(--boardUnit) * 0.2);
}

.scoring {
    width: calc(var(--boardUnit) * 2);
    height: calc(var(--boardUnit) * 1.75);
    background: var(--playerColour);
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    color: #daa520;
    font-size: calc(var(--boardUnit) * 0.13);
}

#opponent.scoring {
    background: var(--opponentColour);
}

#opponent #diceHolder {
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.owned, .ghostLayer {
    display: flex;
    justify-content: flex-start;
    height: calc(var(--boardUnit) * 0.3);
    width: calc(var(--boardUnit) * 2);
    box-sizing: border-box;
    border-top:solid calc(var(--boardUnit) * 0.005) rgba(255,255,255,0.5);    
    align-items: center;
    padding: 0 calc(var(--boardUnit) * 0.03);
    position:relative;
}

.owned:first-child {
    border-bottom:solid calc(var(--boardUnit) * 0.005) rgba(255,255,255,0.5)
}

.owned .meeple {
    margin-right: calc(var(--boardUnit) * 0.01);
}

.owned:before {
    position: absolute;
    top: 0;
    left: 0;
    text-align: right;
    pointer-events: none;
    opacity: 0.1;
    color: #fff;
    font-weight: 900;
    line-height: calc(var(--boardUnit) * 0.3);
    padding-right: calc(var(--boardUnit) * 0.1);
    box-sizing: border-box;
    width: calc(var(--boardUnit) * 2);
}

.ownedYellow:before {
    content: "viziers";
}

.ownedWhite:before {
    content: "elders";
}

.ownedGoods:before {
    content: "goods";
}

.ownedDjinns:before {
    content: "djinns";
}

.ownedRed:before {
    content: "assasins";
}

#board {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: calc(var(--boardUnit) * 6);
    height: calc(var(--boardUnit) * 5);
    background-color: #4d013c;
    border-radius: calc(var(--boardUnit) * 0.06);
}

.location {
    --iconUnit : calc(var(--boardUnit) * 0.3);
    position:relative;
    width: var(--boardUnit);
    height: var(--boardUnit);
    background-image: url(img/tilesMap.jpg);
    background-size: calc(var(--boardUnit) * 8);
    background-position-x: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 2.5%;
    box-sizing: border-box;
    padding: calc(var(--boardUnit) * 0.05);
    justify-items: center;
    align-items: center;
}

#board #loc_0_0 {
    border-radius: calc(var(--boardUnit) * 0.06) 0 0 0;
}

#board #loc_5_0 {
    border-radius: 0 calc(var(--boardUnit) * 0.06) 0 0;
}

#board #loc_5_4 {
    border-radius: 0 0 calc(var(--boardUnit) * 0.06) 0;
}

#board #loc_0_4 {
    border-radius: 0 0 0 calc(var(--boardUnit) * 0.06);
}

.location_1 { background-position-x: calc(var(--boardUnit) * 7); }
.location_2 { background-position-x: calc(var(--boardUnit) * 6); }
.location_3 { background-position-x: calc(var(--boardUnit) * 5); }
.location_4 { background-position-x: calc(var(--boardUnit) * 4); }
.location_5 { background-position-x: calc(var(--boardUnit) * 3); }
.location_6 { background-position-x: calc(var(--boardUnit) * 2); }
.location_7 { background-position-x: calc(var(--boardUnit) * 1); }

.location.nohighlight {
    filter: brightness(75%);
}

.location.highlight {
    filter: brightness(115%);
    box-shadow: inset 0 0 calc(var(--boardUnit) * 0.2) calc(var(--boardUnit) * 0.01) rgba(120, 114, 0, 0.5);
}

.location.highlight:hover, .location.highlight:focus  {
    filter: brightness(125%);
    box-shadow: inset 0 0 calc(var(--boardUnit) * 0.2) calc(var(--boardUnit) * 0.01) rgba(186, 177, 0, 0.7);
}

.location.darklight {
    box-shadow: inset 0 0 calc(var(--boardUnit) * 0.2) calc(var(--boardUnit) * 0.02) var(--opponentColour);
}

.location.darklight:not(.deepdarklight):hover, .location.darklight:not(.deepdarklight):focus  {
    filter: brightness(115%);
    box-shadow: inset 0 0 calc(var(--boardUnit) * 0.1) calc(var(--boardUnit) * 0.05) var(--opponentColour);
}

.location.deepdarklight {
    box-shadow: inset 0 0 calc(var(--boardUnit) * 0.5) calc(var(--boardUnit) * 0.1) var(--opponentColour);
}

.location .specials {
    position: absolute;
    bottom: 0px;
    left: calc(var(--boardUnit) * 0.3);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    justify-content: space-evenly;
    z-index:0;
}
    
.location .tree {    
    width: var(--iconUnit);
    height: var(--iconUnit);
    background-image: url(img/icons.png);
    background-size: calc(var(--icons) * var(--iconUnit));
    background-position-x: calc(-9 * var(--iconUnit));
    filter: brightness(0);
}

.location .palace {    
    width: var(--iconUnit);
    height: var(--iconUnit);
    background-image: url(img/icons.png);
    background-size: calc(var(--icons) * var(--iconUnit));
    background-position-x: calc( -10 * var(--iconUnit));
    filter: brightness(0);
}

.location .specials div:nth-child(n+3) {
    margin-bottom: calc(var(--boardUnit) * -0.1);
}

.location .specials.playerColour div {
    filter: hue-rotate(253deg) brightness(0.6);
}

.location .specials.opponentColour div {
    filter: hue-rotate(290deg) brightness(0.8);
}

.meeple {
    width: var(--meepleSize);
    height: var(--meepleSize);  
    box-sizing: border-box;    
    background-image: url(img/icons.png);
    background-size: calc(var(--meepleSize) * var(--icons));
    filter: drop-shadow(calc(var(--boardUnit) * 0.015) 0 calc(var(--boardUnit) * 0.01) #333);
    display: inline-block;
    vertical-align: sub;
}

.location .meeple {
    z-index:3;
}

.meeple_Vizier {
    background-position-x: calc(var(--meepleSize) * -3);
}
.meeple_Elder {
    background-position-x: calc(var(--meepleSize) * -2);
}
.meeple_Builder {
    background-position-x: calc(var(--meepleSize) * -8);
}
.meeple_Merchant {
    background-position-x: calc(var(--meepleSize) * -7);
}
.meeple_Assasin {
    background-position-x: calc(var(--meepleSize) * -4);
} 

#hand .meeple.highlight {
    filter: drop-shadow( 0 0 calc(var(--boardUnit) * 0.025) pink);
}

.highlight, .darklight:not(.deepdarklight), button {
    cursor:pointer;
}

.camel {
    position: absolute;
    width: calc(var(--boardUnit) * 0.3);
    height: calc(var(--boardUnit) * 0.3);
    bottom: 0px;
    left: 0px;
    background-image: url(img/icons.png);
    background-size: calc(var(--boardUnit) * var(--icons) *0.3);
    background-position-x: calc(var(--boardUnit) * -5 *0.3);
    filter: hue-rotate(253deg) brightness(0.6);
}

.camel.camel_opponentColour {
    filter: hue-rotate(290deg) brightness(0.8);
}

.overview {
    height: calc(var(--boardUnit) * 0.5);
    width: calc(var(--boardUnit) * 2);
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto auto;
    --iconUnit: calc(var(--boardUnit) * 0.2);
    padding: 0 calc(var(--boardUnit) * 0.05);
}

.fullScore {
    position: absolute;
    background: #000955;
    padding: calc(var(--boardUnit) * 0.1);
    border-radius: calc(var(--boardUnit) * 0.1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: grid;
    grid-template-columns: auto auto;
    z-index: 5;
    top: calc(var(--boardUnit) * 0.05);
    right: 1px;
    transform: translate(100%, 0);
    grid-column-gap: calc(var(--boardUnit) * 0.1);
    line-height: calc(var(--boardUnit) * 0.15);
    border-left: 0;
}

#player {
    border-radius: calc(var(--boardUnit) * 0.1) calc(var(--boardUnit) * 0.1) 0 0;
}

#player .overview .score {
    position: relative;
    cursor: pointer;
}

.playerName {
    grid-area: 1 /1 / 1/ span 4;
    text-align: center;
    font-size: calc(var(--boardUnit) * 0.20);
    font-family: 'Uncial Antiqua', cursive;
}

#sale {
    width: calc(var(--boardUnit) * 1);
    height: calc(var(--boardUnit) * 5);
    position: relative;
}

#saleSwitch {
    width: calc(var(--boardUnit) * 1);
    height: calc(var(--boardUnit) * 0.25);
}

#saleSwitch:after {
    content: "";
    position: absolute;
    top: calc(var(--boardUnit) * 0.025);
    left: calc(var(--boardUnit) * 0.1);
    width: calc(var(--boardUnit) * 0.8);
    height: calc(var(--boardUnit) * 0.21);
    border-radius: calc(var(--boardUnit) * 0.2);
    z-index: 3;
    pointer-events: none;
}

input#saleSwitcher {
    width: calc(var(--boardUnit) * 0.8);
    height: calc(var(--boardUnit) * 0.21);
    padding: 0;
    position: relative;
    margin: calc(var(--boardUnit) * 0.02) calc(var(--boardUnit) * 0.1);
    cursor:pointer;
    font-family: 'xxii_arabian-onenightstandBd', sans-serif;
}

input#saleSwitcher:before {
    content: "Market";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: calc(var(--boardUnit) * 0.8);
    height: calc(var(--boardUnit) * 0.21);
    text-align: right;
    transition: 0.5s;
    font-size: calc(var(--boardUnit) * 0.11);
    border-radius: calc(var(--boardUnit) * 0.2);
    border: solid calc(var(--boardUnit) * 0.04) rgb(204, 192, 149);
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(219,202,177,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(219,202,177,1) 100%);
    line-height: calc(var(--boardUnit) * 0.14);
    padding: 0 calc(var(--boardUnit) * 0.05);
    color: rgba(255, 237, 206, 1);
    filter: drop-shadow(1px 1px 0 rgba(193,158,103,1));
    box-shadow: inset 0 0 2px 1px rgba(56, 52, 44, 0.58);
    text-shadow: 1px 1px 0 rgb(0, 0, 0);
}

input#saleSwitcher:checked:before {
    content: "Djinns"; 
    text-align: left;
    color: rgba(255, 237, 207, 1);
}

input#saleSwitcher:after {
    content: "";
    position: absolute;
    top: calc(var(--boardUnit) * 0.05);
    left: calc(var(--boardUnit) * 0.07);
    width: calc(var(--boardUnit) * 0.11);
    height: calc(var(--boardUnit) * 0.11);
    border-radius: calc(var(--boardUnit) * 0.25);
    background: radial-gradient(ellipse at center, rgba(213,206,166,1) 0%,rgba(201,193,144,1) 40%,rgba(183,173,112,1) 100%);
    transition: 0.5s;
    z-index: 2;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

input#saleSwitcher:checked:after {
    transform: translate(calc(var(--boardUnit) * 0.55),0);    
}

#market, #djinns {
    position: absolute;
    width: calc(var(--boardUnit) * 1);
    height: calc(var(--boardUnit) * 4.75);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    bottom: 0;
    border-radius: 0 calc(var(--boardUnit) * 0.03) calc(var(--boardUnit) * 0.03) 0;
}

#djinns {
    display:flex;
    color: #000;
}

#market .merch {
    transform: rotate(-90deg) translate(calc(var(--boardUnit) * 0.25), calc(var(--boardUnit) * 0.25));
    --cardUnit : var(--boardUnit);
}

#market.buyGoods .merch {
    cursor:pointer;
}

#player .merch {
    --cardUnit: var(--boardUnit)*0.3;
    margin-top: calc(var(--cardUnit) * 0.05);
    margin-right: calc(var(--cardUnit) * 0.05);
}

#player .owned.ownedGoods {
    flex-direction: row;
    justify-content: flex-start;
    align-items: normal;
}

.merch {
    position:relative;
    width: calc(var(--cardUnit) * 0.5);
    height: calc(var(--cardUnit) * 0.9);
    margin-bottom: calc(var(--cardUnit) * -0.5);
    padding: calc(var(--cardUnit) * 0.05);
    box-sizing: border-box;    
    background: #fff;
    background-image: url(img/market.jpg);
    background-size: calc(var(--cardUnit) * 5);
    background-repeat: no-repeat;
    border-radius: calc(var(--cardUnit) * 0.05);
    box-shadow: 1px 0px 1px 1px #f5f5f5;
    transition: all 0.3s;
}

.merch.merch_0 { background-position-x: calc(var(--cardUnit) * -0.0); }
.merch.merch_1 { background-position-x: calc(var(--cardUnit) * -0.5); }
.merch.merch_2 { background-position-x: calc(var(--cardUnit) * -1.0); }
.merch.merch_3 { background-position-x: calc(var(--cardUnit) * -1.5); }
.merch.merch_4 { background-position-x: calc(var(--cardUnit) * -2.0); }
.merch.merch_5 { background-position-x: calc(var(--cardUnit) * -2.5); }
.merch.merch_6 { background-position-x: calc(var(--cardUnit) * -3.0); }
.merch.merch_7 { background-position-x: calc(var(--cardUnit) * -3.5); }
.merch.merch_8 { background-position-x: calc(var(--cardUnit) * -4.0); }
.merch.merch_9 { background-position-x: calc(var(--cardUnit) * -4.5); }

.merch .rarity {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(var(--cardUnit) * 0.1);
    background: rgba(0, 0, 0, 0.1);
    left: 50%;
    transform: translate(-50%,0);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 calc(var(--cardUnit) * 0.05) calc(var(--cardUnit) * 0.05);
    z-index: 1;
    font-size: calc(var(--boardUnit) * 0.09);
    line-height: font-size: calc(var(--cardUnit) * 0.1);
    color:#008000;    
    font-weight:900;
}

.merch .rarity div {
    width: calc(var(--cardUnit) * 0.04);
    height: calc(var(--cardUnit) * 0.06);
    background: #008000;
    /* transform: rotate(-45deg) translate(calc(var(--cardUnit) * -0.025), 0); */
    margin: 0 calc(var(--cardUnit) * 0.01);
}

#player .merch:hover, #player .merch:focus {
    --cardUnit: var(--boardUnit)*1;
    z-index: 10;
    transform: translate(0 , -50%);
}


#market .merch:hover, #market .merch:focus  {
    transform: rotate(0deg) translate(calc(var(--boardUnit) * 0.25), calc(var(--boardUnit) * -0.25));
    z-index: 10;
}

#market .merch:first-child:hover,#market .merch:first-child:focus {
    transform: rotate(0deg) translate(calc(var(--boardUnit) * 0.25), 0);
}

#djinns djinn-card {
    --cardUnit : var(--boardUnit)*1;
}

.owned.ownedDjinns {
    flex-direction: row;
    justify-content: flex-start;
    align-items: normal;
}

.ownedDjinns djinn-card {
    --cardUnit: var(--boardUnit)*0.22;
    margin-right: 2px;
    position: relative;
    width: calc(var(--cardUnit) * 0.5);
    height: calc(var(--cardUnit) * 0.9);    
}

#opponent .ownedDjinns djinn-card {
    width: unset;
}

.ownedDjinns djinn-card, .ownedDjinns djinn-card * {
    transition: all 0.3s;
}

.ownedDjinns djinn-card:hover, .ownedDjinns djinn-card:focus {
    --cardUnit: var(--boardUnit)*1;
    z-index: 10;
    transform: translate(0 , -50%);
}

#djinns.buyDjinn .djinnCard {
    cursor:pointer;
}

#djinns.buyDjinn .djinnCard:hover, #djinns.buyDjinn .djinnCard:focus  {
    background-color: #7d7d7d;
}

.djinnCard {
    width: calc(var(--cardUnit) * 1);
    height: calc(var(--cardUnit) * 1.3);
    box-sizing: border-box;
    background-image: url(img/natural-paper.png);
    background-size: cover;
    border: solid calc(var(--cardUnit) * 0.005) #bdbdbd;
    box-shadow: calc(var(--cardUnit) * 0.005) calc(var(--cardUnit) * 0.01) calc(var(--cardUnit) * 0.01) #b1b1b1;
    border-radius: calc(var(--cardUnit) * 0.1);
    background-color: #dfc59a;
    position:relative;
    cursor:pointer;
}

.djinnName {
    text-align: center;
    font-size: calc(var(--cardUnit) * 0.12);
    font-family: 'Uncial Antiqua', cursive;
    line-height: calc(var(--cardUnit) * 0.2);
    color: #000;
}

.djinnImg {
    width: calc(var(--cardUnit) * 0.9);
    margin: calc(var(--cardUnit) * 0.05);
    margin-top: 0;
    margin-bottom: calc(var(--cardUnit) * 0.15);
    border-radius: calc(var(--cardUnit) * 0.1);
    border: inset 2px #000;
    box-sizing: border-box;
}

.djinnValue {
    position: absolute;
    bottom: calc(var(--cardUnit) * 0.03);
    right: calc(var(--cardUnit) * 0.03);
    width: calc(var(--cardUnit) * 0.3);
    height: calc(var(--cardUnit) * 0.2);
    line-height: calc(var(--cardUnit) * 0.2);
    border-radius: 100%;
    background: radial-gradient(ellipse at center, rgb(178, 106, 255) 0%,rgba(14,14,14,1) 100%);
    color: #f0f0f0;
    z-index: 0;
    border: solid calc(var(--cardUnit) * 0.01) #f0f0f0;
    font-size: calc(var(--cardUnit) * 0.15);
    text-align: center;
    text-shadow: calc(var(--cardUnit) * 0.01) calc(var(--cardUnit) * 0.01) calc(var(--cardUnit) * 0.01) #000;
}

.djinnInfo {
    position: absolute;
    bottom: calc(var(--cardUnit) * 0.03);
    left: calc(var(--cardUnit) * 0.03);
    width: calc(var(--cardUnit) * 0.2);
    height: calc(var(--cardUnit) * 0.2);
    line-height: calc(var(--cardUnit) * 0.2);
    border-radius: 100%;
    background: radial-gradient(ellipse at center, rgb(178, 106, 255) 0%,rgba(14,14,14,1) 100%);
    color: #f0f0f0;
    z-index: 0;
    border: solid calc(var(--cardUnit) * 0.01) #f0f0f0;
    font-size: calc(var(--cardUnit) * 0.15);
    text-align: center;
    text-shadow: calc(var(--cardUnit) * 0.01) calc(var(--cardUnit) * 0.01) calc(var(--cardUnit) * 0.01) #000;
}

.djinnInfo img.djinnLook {
    width: 50%;
    filter: invert(90%);
    transition: 500ms all;
}

.djinnCard:hover .djinnInfo {
    background: radial-gradient(ellipse at center, rgb(78, 0, 160) 0%,rgba(14,14,14,1) 100%);
}

.djinnCard:hover  .djinnInfo img.djinnLook {
    filter: invert(100%) drop-shadow(0 0 3px #fff);
}

#modal {
    display: none; 
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%,-50%);
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(104,60,94,1) 100%);
    width: calc(var(--boardUnit) * 5);
    height: calc(var(--boardUnit) * 3);
    z-index: 101;
    border-radius: 0 0 calc(var(--boardUnit) * 0.2) calc(var(--boardUnit) * 0.2);
    padding: calc(var(--boardUnit) * 0.2);
    box-sizing: border-box;
    --cardUnit: calc(var(--boardUnit) * 0.75);
    --iconUnit: calc(var(--boardUnit) * 0.2);
    color: #303030;
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.03) goldenrod);
}

div#modal:before {
    content: "";
    position: absolute;
    top: calc(calc(var(--boardUnit) * -1) + 2px);
    left: 0;
    background-image: url(img/backdrop.png);
    width: calc(var(--boardUnit) * 5);
    height: calc(var(--boardUnit) * 1);
    background-size: contain;
    background-repeat-y: no-repeat;
}

#modal #modalHeader {
    width: 100%;
    text-align: center;
    margin-bottom: calc(var(--boardUnit) * 0.2);
    font-size: calc(var(--boardUnit) * 0.25);
    color: rgba(218, 165, 32, 0.5);
    background-image: linear-gradient(135deg, rgba(255,204,60,1) 0%,rgba(255,246,224,1) 25%,rgba(255,203,56,1) 50%,rgba(255,246,224,1) 75%,rgba(255,203,56,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

#modal #modalBody {
    width: 100%;
}

#overlay {
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%,rgba(0,0,0,1) 90%,rgba(0,0,0,1) 100%);
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    z-index: 100;
}

#modal .merchRow {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: calc(var(--cardUnit) * 0.9);
    width: 100%;
    background: #330553;
    margin-bottom: calc(var(--boardUnit) * 0.2);
    border-radius: calc(var(--boardUnit) * 0.05);
    border: inset calc(var(--boardUnit) * 0.0125) #d9a520;
}

#modal .merchRow .merch {
    cursor:pointer;
}

#modal .merchRow .merch:hover, #modal .merchRow .merch:focus {
    box-shadow: 0 0 calc(var(--cardUnit) * 0.05) #b0f4ff;
}

#modal button#sellMerch {
    float: right;
    font-size: calc(var(--boardUnit) * 0.2);
    margin-top: calc(var(--boardUnit) * 0.1);
}

#modal .merchRow.keeprow:before, #modal .merchRow.sellrow:before {
    content: "KEEP";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    height: calc(var(--cardUnit) * 1);
    font-size: calc(var(--cardUnit) * 0.9);
    line-height: calc(var(--cardUnit) * 0.9);
    color: rgba(218, 165, 32, 0.5);
    background-image: linear-gradient(135deg, rgba(255,204,60,1) 0%,rgba(255,246,224,1) 25%,rgba(255,203,56,1) 50%,rgba(255,246,224,1) 75%,rgba(255,203,56,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

#modal .merchRow.sellrow:before {
    content: "SELL";
}

#modal .priceTag {
    display: inline-block;
    font-size: calc(var(--boardUnit) * 0.2);
    margin-top: calc(var(--boardUnit) * 0.1);
    color: rgba(218, 165, 32, 0.5);
    background-image: linear-gradient(135deg, rgba(255,204,60,1) 0%,rgba(255,246,224,1) 25%,rgba(255,203,56,1) 50%,rgba(255,246,224,1) 75%,rgba(255,203,56,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.modalDjinnHeader {
    font-family: 'Uncial Antiqua', cursive;
}

.modalDjinnContainer {
    display: flex;
    flex-flow: row;
    justify-content: between;
}

.modalDjinnContainer .modalDjinnImage {
    width: calc(var(--boardUnit) * 2);
    height: calc(var(--boardUnit) * 2);
    border-radius: calc(var(--boardUnit) * 0.1);
    border: inset 4px #000;
    box-sizing: border-box;
}

.modalDjinnContainer .modalDjinnRight {
    color: #d9d9d9;
    width: 90%;
    margin-left: calc(var(--boardUnit) * 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: calc(var(--boardUnit) * 0.1);
}

.modalDjinnContainer .modalDjinnRight .modalDjinnDescription {
    font-weight: 900;
}

.modalDjinnContainer .modalDjinnButtons {    
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

button {
    font-size: calc(var(--boardUnit) * 0.2);
    background-color: #000000;
    text-decoration: none;
    position: relative;
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(20, 12, 18)), color-stop(1, rgb(48, 28, 43)) );
    border-radius: 5px;
    box-shadow: inset 0px calc(var(--boardUnit) * 0.005) 0px #482c40, 0px calc(var(--boardUnit) * 0.025) 0px 0px #460e38, 0px calc(var(--boardUnit) * 0.05) calc(var(--boardUnit) * 0.025) #3c2336;
    border: none;
    color: #c29724;
    font-family: 'Uncial Antiqua', cursive;
    padding: calc(var(--boardUnit) * 0.03) calc(var(--boardUnit) * 0.15);
    outline: none;
    text-shadow: calc(var(--boardUnit) * -0.005) calc(var(--boardUnit) * -0.005) calc(var(--boardUnit) * 0.005) #584719;
    transition: color 0.5s;
}

button:active {
    top: calc(var(--boardUnit) * 0.015);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(20, 12, 18)), color-stop(1, rgb(48, 28, 43)) );
    box-shadow: inset 0px 1px 0px #482c40, 0px 2px 0px 0px #460e38, 0px 5px 3px #3c2336;
}

button:hover, button:hover div {
    color: #ffba00;
    filter: brightness(125%);
}

.modalDjinnContainer .modalDjinnActivation {
    display: flex;
    justify-content: space-around;
    height: 0px;
    --iconUnit : calc(var(--boardUnit) * 0.3);
}

.icon {
    background-image: url(img/icons.png);
    background-size: calc(var(--iconUnit) * var(--icons));
    background-repeat: no-repeat;
    background-position: 0;
    width: var(--iconUnit);
    height: var(--iconUnit);
    display: inline-block;
    vertical-align: text-bottom;
}

.icon.icon1 {background-position-x: calc(var(--iconUnit) * -1);}
.icon.icon2 {background-position-x: calc(var(--iconUnit) * -2);}
.icon.icon3 {background-position-x: calc(var(--iconUnit) * -3);}
.icon.icon4 {background-position-x: calc(var(--iconUnit) * -4);}
.icon.icon5 {background-position-x: calc(var(--iconUnit) * -5);}
.icon.icon6 {background-position-x: calc(var(--iconUnit) * -6);}

.icon.textIcon {
    background-image: unset;
    font-size: calc(var(--iconUnit) * 1);
}

.overview .icon {
    vertical-align: middle;
    margin-right: calc(var(--iconUnit) * 0.2);
}

.overview .camels .icon5 {
    filter: hue-rotate(420deg) brightness(3) grayscale(0.3);
}

.ghostLayer {
    z-index: 0;
    opacity: 0.1;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.meeple.meeple_ghost {
    background-image: unset;
    background-color: #fff;
}

.ownedDjinns .meeple.meeple_ghost {
    border-radius: 0;
}

.marker {
    position: absolute;
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.05) #fff);
}

.whiteMarker, .whiteMarker2 { 
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--boardUnit) * 0.25) calc(var(--boardUnit) * 0.125) 0 calc(var(--boardUnit) * 0.125);
    border-color: #fff transparent transparent transparent;
    top: calc(var(--boardUnit) * -0.125);
    left: calc(var(--boardUnit) * 0.375);
    z-index: 10;
    
}

.whiteMarker2 {
    left: calc(var(--boardUnit) * 0.6);
}

.blackMarker {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--boardUnit) * 0.125) 0 calc(var(--boardUnit) * 0.125) calc(var(--boardUnit) * 0.25);
    border-color: transparent transparent transparent #000;
    top: calc(var(--boardUnit) * 0.375);
    left: calc(var(--boardUnit) * -0.125);
}

#toastContainer {
    position: absolute;
    width: calc(var(--boardUnit) * 2.1);
    left:calc(50% - var(--boardUnit));
    top:0;
    z-index: 1000;
    font-family: sans-serif;    
    --cardUnit: calc(var(--boardUnit) * 0.5);
    --iconUnit: calc(var(--boardUnit) * 0.2);
    --meeplesize: calc(var(--boardUnit) * 0.3);
}

#toastContainer .toast {
    position: relative;
    background: #94688f;
    padding: calc(var(--boardUnit) * 0.05) calc(var(--boardUnit) * 0.1);
    border-radius: calc(var(--boardUnit) * 0.05);
    color: #ffeccc;
    box-shadow: calc(var(--boardUnit) * 0.05) calc(var(--boardUnit) * 0.05) calc(var(--boardUnit) * 0.1) rgba(0, 0, 0, 0.5);
    margin-top: calc(var(--boardUnit) * 0.025);
    cursor: pointer;
    border: inset 1px #b583af;
}

#toastContainer .toast:after {
    content: "X";
    color: #4d013c;
    top: calc(var(--boardUnit) * 0.05);
    right: calc(var(--boardUnit) * 0.05);
    position: absolute;
    font-weight: bold;
    font-size: calc(var(--boardUnit) * 0.1);
    transition: 0.5s all;
}

#toastContainer .toast:hover:after {
    color : #fff;
}

#toastContainer .djinnCard {
    pointer-events:none;
    display:inline-block;
}

#toastContainer .djinnCard .djinnInfo {
    display:none;
}

.locationPopup {
    --iconUnit: calc(var(--boardUnit) * 0.12);
    --meepleSize: calc(var(--boardUnit) * 0.12);
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 10;
    padding: calc(var(--boardUnit) * 0.06);
    border-radius: 0 0 calc(var(--boardUnit) * 0.075) calc(var(--boardUnit) * 0.075);
    width: calc(var(--boardUnit) * 2.5);
    top: 0;
    left: 50%;
    border: outset calc(var(--boardUnit) * 0.01) #a58960;
    box-sizing: border-box;
    font-size: calc(var(--boardUnit) * 0.085);
    background: linear-gradient(to bottom, rgb(0, 0, 0) 0%,rgb(70, 34, 106) 100%);
    border-top: solid 1px rgba(0, 0, 0, 0);
    color: goldenrod;
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.02) goldenrod);
    cursor: default;
}

.location .locationPopup .palace, .location .locationPopup .tree {
    filter: sepia(100%) brightness(250%);
}

.locationPopup:before {
    content: "";
    position: absolute;
    top: calc(calc(var(--boardUnit) * -0.5) + 1px);
    left: 0;
    background-image: url(img/backdrop.png);
    width: 100%;
    height: calc(var(--boardUnit) * 0.5);
    background-size: contain;
    background-repeat-y: no-repeat;
    z-index: 0;
}

.locationPopup:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: #432165;
    border-bottom: 0;
    margin-left: -20px;
    margin-bottom: -20px;
    filter: drop-shadow(0 3px 2px #000);
}

.locationPopup.popBottom {
    top: unset;
    bottom: 0;
    transform: translate(-50%, 100%);
    border-radius: calc(var(--boardUnit) * 0.075) calc(var(--boardUnit) * 0.075) 0 0;
    background: linear-gradient(to bottom, rgb(70, 34, 106) 0% , rgb(0, 0, 0) 100%);
}

.locationPopup.popBottom:before {
    bottom: calc(calc(var(--boardUnit) * -0.5) + 1px);
    top: unset;
    transform: rotate(180deg);
}

.locationPopup.popBottom:after {
    bottom: unset;
    margin-bottom: 0;
    top: 0px;
    border: 20px solid transparent;
    border-bottom-color: #432165;
    border-top: 0;
    margin-top: -20px;
    filter: drop-shadow(0 -2px 2px goldenrod);
}

.gameOverHeader {
    color: #ffb600;
    font-size: calc(var(--boardUnit) * 0.4);
    font-family: 'Uncial Antiqua', cursive;
    text-shadow: 0 0 calc(var(--boardUnit) * 0.05) #ff4300;
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.1) #ffffa0);
}

.endReason, .endScore {
    text-align: center;
    color: #daa520;
    font-size: calc(var(--boardUnit) * 0.2);
}

.endScore {
    margin-top: calc(var(--boardUnit) * 0.3);
    font-weight: 700;
}

.endButtons {
    display: flex;
    justify-content: space-around;
    margin-top: calc(var(--boardUnit) * 0.5);
}

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

#intro {
    position: absolute;
    top: calc(var(--boardUnit) * 2);
    left: 50%;
    transform: translate(-50%,0);
    padding: calc(var(--boardUnit) * 0.5);
    border-radius: 0 0 calc(var(--boardUnit) * 0.05) calc(var(--boardUnit) * 0.05);
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgb(98, 56, 128) 100%);
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.1) goldenrod);
    width: calc(var(--boardUnit) * 4);
    padding-top:0;
}

#intro:before {
    content: "";
    position: absolute;
    height: calc(var(--boardUnit) * 2);
    width: calc(var(--boardUnit) * 5);
    background-image: url(img/backdrop3.png);
    background-size: contain;
    background-position: bottom center;
    top: 0;
    left: 0;
    transform: translate(0, -99%);
    background-repeat: no-repeat;
}

#intro div#logo {
    width: calc(var(--boardUnit) * 4);
    height: calc(var(--boardUnit) * 1);
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(calc(var(--boardUnit) * 0.01) 0 calc(var(--boardUnit) * 0.02) pink);
    position: relative;
    top: calc(var(--boardUnit) * -0.15);
    font-family: 'xxii_arabian-onenightstandBd', serif;
    font-size: calc(var(--boardUnit) * 0.79);
    text-align: center;
    text-shadow: 0 0 1px rgb(96, 0, 173);
    cursor:default;
}

#intro #nameInputContainer {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#intro input#nameInput {
    display: block;
    width: calc(var(--boardUnit) *2);
    height: calc(var(--boardUnit) *0.25);
    font-size: calc(var(--boardUnit) *0.20);
    padding: calc(var(--boardUnit) *0.05);
    border: solid calc(var(--boardUnit) *0.05) #1b004c;
    color: #333333;
    border-radius: calc(var(--boardUnit) * 0.05);
    outline-color: goldenrod;
    text-align: center;
    font-family: 'Uncial Antiqua', cursive;
    outline: none;
    transition: all 2s;
}

#intro input#nameInput:focus {    
    border: solid calc(var(--boardUnit) *0.05) goldenrod;
    box-shadow: 0 0 calc(var(--boardUnit) *0.05) goldenrod;
}

#intro div#introButtons {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-direction: row;
    width: calc(var(--boardUnit) *2);
}

#intro button#startGame {
    margin-top: calc(var(--boardUnit) * 0.1);
}

#intro img#introImgLeft {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-51%,-18%);
    height: calc(var(--boardUnit) * 3);
}

#intro img#introImgRight {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(68%,-14%);
    height: calc(var(--boardUnit) * 3);
}

input::selection {
  background: purple;
  color:goldenrod;
}
input::-moz-selection {
  background: purple; 
  color:goldenrod;
}

#others {
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 100%;
}

#others a {
    color: #bf9e76;
    font-family: monospace;  
}

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

div#highscores {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 100%;
    color: #bf9e76;
    font-family: monospace;
    text-decoration: underline;
    cursor:pointer;
}

div#highscores:hover {
    color:#fff;
}

#highScoreTable {
    display: none;
    position: absolute;
    top: calc(var(--boardUnit) * 0.1);
    left: 50%;
    transform: translate(-50%,0);
    width: calc(var(--boardUnit) * 5);
    background-color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(37,0,102,1) 10%,rgba(216,184,121,1) 90%,rgba(201,159,20,1) 100%);
    height: 90vh;
    box-sizing: border-box;
    padding: calc(var(--boardUnit) * 0.3);
    padding-top:0;
    font-family: sans-serif;
    border-radius: calc(var(--boardUnit) * 0.1);
    z-index: 2000;    
    cursor:default;
}

#highScoreTable * {
    cursor:default;
}

#highScoreTable #highScoreTableTitle {
    width: 100%;
    height: calc(var(--boardUnit) * 0.6);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    font-family: 'xxii_arabian-onenightstandBd', serif;
    font-size: calc(var(--boardUnit) * 0.5);
    margin: calc(var(--boardUnit) * 0.1) 0;
    text-align: center;
    filter: drop-shadow(0 0 calc(var(--boardUnit) * 0.02) white);
    line-height: calc(var(--boardUnit) * 0.50);
}

#highScoreTable #scores {
    max-height: calc(90vh - var(--boardUnit) * 1);
    width: 100%;
    overflow-y: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: calc(var(--boardUnit) *0.2);
    font-size: calc(var(--boardUnit) *0.16);
    line-height: font-size: calc(var(--boardUnit) *0.16);
}

#highScoreTable #scores::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
 
#highScoreTable #scores::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    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%);
}
 
#highScoreTable #scores::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px #16003e;
    background-color: rgb(201, 160, 25);
}

#highScoreTable .scoreHeader {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #3c1868;
    box-sizing: border-box;
    padding-left: calc(var(--boardUnit) *0.06);
    color: goldenrod;
    box-shadow: 0 0 2px 2px #6a466d;
}

#highScoreTable .scoreRow {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: calc(var(--boardUnit) *0.2);
    font-size: calc(var(--boardUnit) *0.16);
    line-height: font-size: calc(var(--boardUnit) *0.16);
}

#highScoreTable .scoreName {
    font-family: 'Uncial Antiqua', cursive;
}

#highScoreTable #closeHigh {
    position: absolute;
    top: calc(var(--boardUnit) * 0.02);
    right: calc(var(--boardUnit) * 0.1);
    font-size: calc(var(--boardUnit) * 0.2);
    font-weight: 900;
    cursor: pointer;
    transition: all 0.5s;
    cursor:pointer;
}

#highScoreTable #closeHigh:hover {
    color:#fff;
} 

/* ------- adapted from roll-a-die by chukwumaijem -------  */
.dice-outer {
    --dieUnit: calc(var(--boardUnit) *0.2);
    display: inline-block;
    position: relative;
    width: 0;
    height: 0;
    perspective: 1000px;
    margin-right: calc(var(--dieUnit) *2);
    margin-bottom: calc(var(--dieUnit) *1);
    box-sizing: border-box;
    transition: opacity 1s ease-in-out;
    transform: rotateX(-15deg);
    transform-style: preserve-3d;
    animation: roll 3s linear both;
}


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

.dice-outer .dice {
    display: inline-block;
    transform-style: preserve-3d;
}

.dice-outer .dice .dice-face {
    background: #fff;
    background-image: url(img/die.jpg);
    background-repeat: no-repeat;
    border: calc(var(--dieUnit) *0.025) solid #aaa;
    box-sizing: border-box;
    backface-visibility: hidden;
    background-size: calc(var(--dieUnit) * 6);
    background-position-x: 0;
}

#die_1.dice-outer .dice .dice-face {
    filter:invert(1);
}

.dice-outer .dice .dice-face:first-child {
    transform: translateZ(calc(var(--dieUnit) *0.5));
    background-position-x: calc(var(--dieUnit) * 0);
}

.dice-outer .dice .dice-face:nth-child(2) {
    transform: rotateY(-90deg) translateZ(calc(var(--dieUnit) *0.5));
    background-position-x: calc(var(--dieUnit) * -1);
}

.dice-outer .dice .dice-face:nth-child(3) {
    transform: rotateX(-90deg) translateZ(calc(var(--dieUnit) *0.5));
    background-position-x: calc(var(--dieUnit) * -2);
}

.dice-outer .dice .dice-face:nth-child(4) {
    transform: rotateX(90deg) translateZ(calc(var(--dieUnit) *0.5));
    background-position-x: calc(var(--dieUnit) * -3);
}

.dice-outer .dice .dice-face:nth-child(5) {
    transform: rotateY(90deg) translateZ(calc(var(--dieUnit) *0.5));
    background-position-x: calc(var(--dieUnit) * -4);
}

.dice-outer .dice .dice-face:nth-child(6) {
    transform: rotateY(180deg) translateZ(calc(var(--dieUnit) *0.5));
    background-position-x: calc(var(--dieUnit) * -5);
}

@keyframes roll {
    0% { transform: rotateX(-55deg) rotateY(45deg) translate(0px, 0px) rotateZ(-200deg) rotateY(100deg); }
    1% { transform: rotateX(-55deg) rotateY(45deg) translate(3px, 1px) rotateZ(-190deg) rotateY(95deg); }
    2% { transform: rotateX(-55deg) rotateY(45deg) translate(6px, 11px) rotateZ(-180deg) rotateY(90deg); }
    3% { transform: rotateX(-55deg) rotateY(45deg) translate(9px, 31px) rotateZ(-170deg) rotateY(85deg); }
    4% { transform: rotateX(-55deg) rotateY(45deg) translate(11px, 58px) rotateZ(-160deg) rotateY(80deg); }
    5% { transform: rotateX(-55deg) rotateY(45deg) translate(14px, 94px) rotateZ(-150deg) rotateY(75deg); }
    6% { transform: rotateX(-55deg) rotateY(45deg) translate(17px, 140px) rotateZ(-140deg) rotateY(70deg); }
    7% { transform: rotateX(-55deg) rotateY(45deg) translate(20px, 194px) rotateZ(-130deg) rotateY(65deg); }
    8% { transform: rotateX(-55deg) rotateY(45deg) translate(23px, 171px) rotateZ(-120deg) rotateY(60deg); }
    9% { transform: rotateX(-55deg) rotateY(45deg) translate(25px, 147px) rotateZ(-110deg) rotateY(55deg); }
    10% { transform: rotateX(-55deg) rotateY(45deg) translate(28px, 132px) rotateZ(-100deg) rotateY(50deg); }
    11% { transform: rotateX(-55deg) rotateY(45deg) translate(30px, 126px) rotateZ(-90deg) rotateY(45deg); }
    12% { transform: rotateX(-55deg) rotateY(45deg) translate(33px, 129px) rotateZ(-80deg) rotateY(40deg); }
    13% { transform: rotateX(-55deg) rotateY(45deg) translate(35px, 141px) rotateZ(-70deg) rotateY(35deg); }
    14% { transform: rotateX(-55deg) rotateY(45deg) translate(37px, 162px) rotateZ(-60deg) rotateY(30deg); }
    15% { transform: rotateX(-55deg) rotateY(45deg) translate(40px, 192px) rotateZ(-50deg) rotateY(25deg); }
    16% { transform: rotateX(-55deg) rotateY(45deg) translate(42px, 185px) rotateZ(-40deg) rotateY(20deg); }
    17% { transform: rotateX(-55deg) rotateY(45deg) translate(44px, 175px) rotateZ(-30deg) rotateY(15deg); }
    18% { transform: rotateX(-55deg) rotateY(45deg) translate(46px, 173px) rotateZ(-20deg) rotateY(10deg); }
    19% { transform: rotateX(-55deg) rotateY(45deg) translate(48px, 180px) rotateZ(-10deg) rotateY(5deg); }
    20% { transform: rotateX(-55deg) rotateY(45deg) translate(50px, 195px) rotateZ(0deg) rotateY(0deg); }
    21% { transform: rotateX(-55deg) rotateY(45deg) translate(51px, 192px) rotateZ(0deg) rotateY(0deg); }
    22% { transform: rotateX(-55deg) rotateY(45deg) translate(53px, 190px) rotateZ(0deg) rotateY(0deg); }
    23% { transform: rotateX(-55deg) rotateY(45deg) translate(54px, 197px) rotateZ(0deg) rotateY(0deg); }
    24% { transform: rotateX(-55deg) rotateY(45deg) translate(56px, 196px) rotateZ(0deg) rotateY(0deg); }
    25% { transform: rotateX(-55deg) rotateY(45deg) translate(57px, 198px) rotateZ(0deg) rotateY(0deg); }
    26% { transform: rotateX(-55deg) rotateY(45deg) translate(58px, 198px) rotateZ(0deg) rotateY(0deg); }
    27% { transform: rotateX(-55deg) rotateY(45deg) translate(59px, 199px) rotateZ(0deg) rotateY(0deg); }
    28% { transform: rotateX(-55deg) rotateY(45deg) translate(59px, 199px) rotateZ(0deg) rotateY(0deg); }
    29% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    30% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    31% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    32% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    33% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    34% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    35% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    36% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    37% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    38% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    39% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    40% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    41% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    42% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    43% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    44% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    45% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    46% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    47% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    48% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    49% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    50% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    51% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    52% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    53% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    54% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    55% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    56% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    57% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    58% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    59% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    60% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    61% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    62% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    63% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    64% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    65% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    66% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    67% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    68% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    69% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    70% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    71% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    72% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    73% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    74% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    75% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    76% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    77% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    78% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    79% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    80% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    81% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    82% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    83% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    84% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    85% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    86% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    87% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    88% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    89% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    90% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    91% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    92% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    93% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    94% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    95% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    96% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    97% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    98% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    99% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
    100% { transform: rotateX(-55deg) rotateY(45deg) translate(60px, 199px) rotateZ(0deg) rotateY(0deg); }
}

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