/* ================================================== INCLUDES */

@font-face {
    font-family: "Roman SD";
    src: url(../fonts/Roman-SD.ttf) format("truetype");
}

/* ================================================== GLOBAL */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: serif;
    color: #333;
    background: linear-gradient(180deg, rgba(254,223,171,1) 0%, rgba(255,192,62,1) 100%);
}

/* ================================================== TEXTS */

h1, h2, h3, .roman-font {
    font-family: "Roman SD", serif;
}

/* ================================================== BUTTONS */

button {
    padding: 10px 15px;
    background-color: #211;
    color: #fff;
    font-size: 20px;
    border: none;
    font-family: inherit;
    border-radius: 0;
    transition: .4s;
    cursor: pointer;
}

button:hover {
    background-color: #944;
}

button.to-main-menu {
    position: fixed;
    top: 30px; left: 30px;
    z-index: 100;
}

/* ================================================== SCREENS */

body > section {
    width: 100vw;
    height: 100vh;
    position: fixed;
}

body > section:not(.active) {
    display: none;
}

#main-menu > div {
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#main-menu button {margin-top: 20px}

/* ================================================== DICE */

.fire {background-image: url(../dice/fire-power.png) !important}
.ice {background-image: url(../dice/ice-power.png) !important}
.ground {background-image: url(../dice/ground-power.png) !important}
.poison {background-image: url(../dice/poison-power.png) !important}

.fire,
.ice,
.ground,
.poison {
    background-size: contain;
}

.frozen::after {
    content: "";
    width: 150%;
    height: 150%;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(200, 200, 255, .5);
}

/* ================================================== INFO POPUP */

.info {
    position: relative;
    cursor: pointer;
}

.info > i {
    width: 200px;
    padding: 10px;
    background-color: #fff;
    font-size: 18px;
    font-style: normal;
    text-align: left;
    color: #333;
    font-family: serif;
    border: 1px solid #333;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 75%; left: 75%;
    z-index: 100;
}
.info:hover > i {display: flex}

.info .faces {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
}
.info .faces > div {
    width: 22px;
    height: 22px;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info .faces > div:not(:last-of-type) {border-right: 0}

.info > i .price {margin: 10px; font-family: "Roman SD", serif}
.info > i .description {font-size: 14px; font-style: italic; margin-top: 5px}

i p.effect {
    font-size: 14px;
    margin: 5px;
}

/* ================================================== DICE */

.die {background-size: cover !important}

.die-normal {background: url(../dice/normal.png)}
.die-fire {background: url(../dice/fire.png)}
.die-ice {background: url(../dice/ice.png)}
.die-ground {background: url(../dice/ground.png)}
.die-poison {background: url(../dice/poison.png)}
.die-gold {background: url(../dice/gold.png)}

.die-normal.rolled {background: url(../dice/normal-face.png)}
.die-fire.rolled {background: url(../dice/fire-face.png)}
.die-ice.rolled {background: url(../dice/ice-face.png)}
.die-ground.rolled {background: url(../dice/ground-face.png)}
.die-poison.rolled {background: url(../dice/poison-face.png)}
.die-gold.rolled {background: url(../dice/gold-face.png)}

.broken {opacity: .5}

.roll:not(.broken):not(.frozen) {
    animation: roll 1s ease-out;
}

@keyframes roll {
    0% {transform: rotate(0)}
    100% {transform: rotate(1080deg)}
}

/* ================================================== MAIN MENU */

#main-menu #cliffs {
    width: 80%;
    height: 100%;
    position: absolute;
    left: 0; bottom: 0;
    z-index: 100;
    transition: 1s;
}

#main-menu.zoom #cliffs {
    left: -100%;
    pointer-events: none;
}

#main-menu #title-play {
    width: 30%;
    max-width: 300px;
    position: absolute;
    right: 0; top: 10%;
    z-index: 50;
}

#main-menu #play {
    width: 100%;
    margin-top: 30px;
}

#main-menu .cliff-1 {
    height: 80%;
    width: 100%;
    background: url(../backgrounds/intro-cliff.svg) left bottom no-repeat;
    background-size: contain;
    position: absolute;
    left: 0; bottom: 0;
    z-index: 10;
}

#main-menu .cliff-2 {
    height: 50%;
    width: 100%;
    background: url(../backgrounds/cliff-foreground.svg) left bottom no-repeat;
    background-size: contain;
    position: absolute;
    left: 0; bottom: 0;
    z-index: 20;
}

#main-menu #city {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0; right: 0;
    transform-origin: bottom right;
    transition: 1s;
}

#main-menu:not(.zoom) #city {
    transform: scale(.5);
    pointer-events: none;
}

#city #hills,
#city #gods {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0; left: 0;
    z-index: 1;
    object-fit: contain;
    object-position: bottom center;
}

#gods {opacity: .5}

#main-hub {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0; bottom: 0;
    z-index: 20;
}

#city-ground {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0; left: 0;
    z-index: 10;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
}

#main-hub button {
    background-color: transparent;
    height: 50%;
    position: absolute;
    bottom: 5%; left: 0;
    z-index: 9;
}

#main-hub button img {width: 100%}

#main-hub button span {
    padding: 10px 20px;
    background-color: #211;
    position: absolute;
    top: -50px; left: 50%;
    transform: translateX(-50%);
    transition: inherit;
}
#main-hub button:hover span {background-color: #944}
#main-menu:not(.zoom) #main-hub button span {opacity: 0}

#main-hub button#arena-button {width: 23%; left: 50%}
#main-hub button#forge-button {width: 10%; bottom: -7%; left: 30%}
#main-hub button#oracle-button {width: 10%; bottom: -2%; left: 81%}

#back-to-title {
    margin: 0 !important;
    position: absolute;
    left: 50px; top: 50px;
    z-index: 30;
}
#main-menu:not(.zoom) #back-to-title {opacity: 0}

/* ================================================== PLAYER */

#player-infos {
    text-align: right;
    position: fixed;
    top: 30px; right: 30px;
    font-weight: bold;
    font-size: 20px;
    transition: 1s;
}

#main-menu:not(.zoom) + #player-infos {opacity: 0}