/* ================================================== VARIABLES */

#map {
    --row-offset: 0;
}

/* ================================================== WORLD */

#world {
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0; left: 0;

    transition: 2s;
}

body:not(.world) #world {
    opacity: 0;
    pointer-events: none;
}

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

#map-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#map {
    display: flex;
    flex-direction: column;
}

#map .row {
    display: flex;
    margin-left: calc(var(--row-offset) * 100vh / 30);
}

/* ================================================== TILES */

.row > div {
    height: calc(100vh / 15);

    aspect-ratio: cos(30deg);
    clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
}

.row > div:not(:last-of-type) {margin-right: 11px}

.tile {
    font: bold 22px/50px sans-serif;
    text-align: center;

    position: relative;

    transition: .4s;
}

[data-current="frost"] .tile {background-color: #ccc}
[data-current="water"] .tile {background-color: #aaf}
[data-current="war"] .tile {background-color: #792929}
[data-current="jungle"] .tile {background-color: #dfa527}

.tile.start {background-color: rgb(167, 63, 149)}
.tile.impassable {background-color: #f88}
.tile.end {background-color: #333}

.tile:not(.revealed) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.hazard + .hazard,
.hazard:has(+ .hazard) {font-size: 14px}

.feature {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px #fff;
}

.curiosity.hidden .feature {
    opacity: 0;
    pointer-events: none;
}

/* ------------------------------ Move */

button.move {
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;

    border-radius: 100%;
    background-color: #f55;

    text-align: center;
    font-weight: bold;

    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);

    transition: .4s;
}

button.move:not(:hover) {animation: glow 2s linear infinite}

@keyframes glow {
    0% {opacity: 1}
    50% {opacity: 0.3}
    100% {opacity: 1}
}

button.move.danger {
    background-color: #333;
    color: #fff;
}

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

#map-player {
    width: 20px;
    height: 20px;

    background-color: #333;
    border: 3px solid #dd0;
    border-radius: 100%;

    position: absolute;
    top: calc(var(--player-position-top) * 100vh / 15);
    left: calc((var(--player-left-shift) * 100vh / 30) + (var(--player-position-left) * (86.6vh / 15 + 11px)) - 4px);
    transform: translate(-50%, -50%);

    transition: .4s;
    box-shadow: 2px 2px 8px 0px #000;
}

/* ================================================== RESSOURCES */

#ressources {
    padding: 14px;
    border: 1px solid currentColor;
    background-color: #fff;
    
    position: absolute;
    top: 5vh; left: 5vh;
}

#ressources hr {margin: 10px 0}

.action.locked {
  display: none;
}

.resources-endurance {
    font-size: 22px;
    font-weight: bold;
}

/* ================================================== DIALOGUE */

#dialogue {
    max-width: 28vw;
    padding: 14px;
    border: 1px solid currentColor;
    background-color: #fff;
    
    position: absolute;
    top: 5vh; right: 5vh;
    
    transition: .4s;
}

#dialogue:not(.shown) {
    opacity: 0;
    pointer-events: none;
}

#dialogue.choices #dialogue-next {display: none}
#dialogue:not(.choices) #dialogue-choices {display: none}

#dialogue-text p:not(:first-child) {margin-top: 10px}

/* ------------------------------ Choices */

#dialogue-choices {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

#dialogue-choices button:not(:first-child) {
    margin-top: 10px;
}

#dialogue-next {margin-top: 20px}

/* ------------------------------ Revival */

#revival {
    width: 100%;
    height: 100vh;
    padding: 10vh;

    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, .8);
    font-size: 48px;
    font-style: italic;
    letter-spacing: 2px;

    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0; left: 0;

    opacity: 0;
    pointer-events: none;
}

#revival.shown {animation: flash 2s ease-out 1}

@keyframes flash {
    0% {opacity: 0}
    40% {opacity: 1}
    100% {opacity: 0}
}

/* ================================================== LEAVE */

#leave-world {
    position: absolute;
    top: 3vh; left: 50%;
    transform: translateX(-50%);
}