/* ================================================== MAIN MAP */

#map-container {
    position: relative;
    background-color: #fff;
}

.map {display: flex}
.map .col {
    display: flex;
    flex-direction: column;
}
.map .tile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}

#map-main .tile {
    width: calc(40vh / 4);
    height: calc(40vh / 4);
}

.temple #map-main .tile {background-image: url(../images/tiles/tile-temple.svg)}
.forest #map-main .tile {border: 1px solid var(--black)}

#map-player {
    position: absolute;
    transform: translate(-50%, -50%);
}

/* ================================================== CLOSE-UP MAP */

#map-closeup-container {
    background-color: #fff;
    position: absolute;
    top: 50%; left: 25%;
    transform: translate(-50%, -50%);
}

#map-closeup .tile {
    width: calc(70vh / 5);
    height: calc(70vh / 5);
}

.temple #map-closeup .tile {background-image: url(../images/tiles/tile-temple-closeup.svg)}
.forest #map-closeup .tile {border: 1px solid var(--black)}

/* ================================================== ENTITIES */

.entity-group-appearance {
    max-width: calc(65vh / 5);
    background-color: var(--black);
    color: #c9e1dc;
    font-weight: bold;
    padding: 3px 5px;
    border-radius: 8px;
    text-align: center;
}

.entity-appearance.player,
.entity-group-appearance.player {background-color: #d0613e}
#entity-group-0, #entity-closeup-0-0 {z-index: 10}

.entity-appearance {
    max-width: calc(36vh / 4);
    background-color: var(--black);
    color: #c9e1dc;
    font-weight: bold;
    padding: 3px 5px;
    border-radius: 8px;
    text-align: center;
}

.entity-group, .entity-closeup {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: .4s;
}

.entity-closeup {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entity-hp, .entity-sp {
    width: 50px;
    height: 5px;
    margin-bottom: 3px;
    background-color: #333;
    display: flex;
}

.hp-amount, .sp-amount {height: 5px}
.hp-amount {background-color: #dbd82e}
.sp-amount {background-color: #cf3baf}

.spirit-det, .spirit-det-2 {color: var(--det)}
.spirit-spi, .spirit-spi-2 {color: var(--spi)}

.rift {color: var(--spi)}
.ouroboros-heart {color: #d34f4f}

.entity-group.ouroboros {z-index: 5}

.ouroboros-x, .ouroboros-y {z-index: 3}

/* ================================================== TARGETS AND ZONES */

.target {
    width: 80%;
    height: 80%;
    border: none;
    border-radius: 10px;
    background-color: var(--black);
    position: absolute;
    top: 10%; left: 10%;
    animation: target 1.4s infinite ease-out;
    transition: background-color .4s;
    z-index: 10;
}

@keyframes target {
    0% {opacity: 40%}
    50% {opacity: 70%}
    100% {opacity: 40%}
}

.target:hover {background-color: #445a97}

.preview {
    width: 92%;
    height: 92%;
    border-radius: 6px;
    position: absolute;
    top: 4%; left: 4%;
    opacity: .7;
    pointer-events: none;
}

.preview.weak {background-color: #cfcf25}
.preview.medium {background-color: #c23b3b}
.preview.strong {background-color: #c626d4}

/* ================================================== CONJURES */

#current-conjure {
    position: absolute;
    bottom: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%);
}

#current-conjure img {
    width: 60px;
    height: 60px;
    animation: pulsing 2s infinite ease-in;
}

@keyframes pulsing {
    0% {opacity: 35%}
    40% {opacity: 90%}
    60% {opacity: 90%}
    100% {opacity: 35%}
}