.evolution-tree {
    display: flex;
    flex-direction: column;
    padding: 0.75vh;
    border-radius: 10px;

    top: 1vh;
    left: 1vh;

    transform-origin: top left;
}

.evolution-tree-container {
    background: var(--beige-bg);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: var(--inset-shadow);
    border-radius: .5vmin;
    padding: 1vh;

    display: flex;
    flex-direction: column;

    gap: 0.5vmin;

    height: 100%;
}

.evolutions-container {
    display: flex;
    flex-direction: row;
    position: relative;
}

.evolution-worker-pool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    gap: 0.5vh;
    font-size: var(--fs-xl);
    --worker-size: 1.4em;
}

.evolutions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 50%;
}

.evolutions > * + * {
  margin-left: -1vmin;
}

.evolution-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1vmin;
}

.evolution {
    display: grid;
    place-items: center;
}

.evolution-tile {
    --h: 5vh;
    width: var(--h);
    height: calc(var(--h) * sqrt(3/4));
    display: grid;
    place-items: center;
    background: var(--yellow);
    box-shadow: none;
    filter: var(--card-drop-shadow);
    text-align: center;
    font-size: var(--fs-xs);
    padding: 0.2vmin;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    cursor: pointer;
    grid-area: 1 / 1;
}

.evolution-tile.evolved {
    background: var(--blue);
}

.evolution-tile.available {
    background: var(--honey);
}

.evolution-tile:hover {
    background: var(--highlight-color);
}

.evolution-tile.infection-unlocked {
    background: var(--green);
}

.evolution-tile.infection-unlocked:hover {
    background: var(--highlight-color);
}

.evolution-tile.placeholder {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: var(--inset-shadow);
    cursor: default;
    filter: none;
}

.evolution-tile.placeholder:hover {
    background: rgba(0, 0, 0, 0.05);
}

.evolution-tile-worker-container {
    grid-row: 1 / 1;
    grid-column: 1 / 1;

    display: flex;
    flex-direction: row;
    flex: wrap;
}

.evolution-tile-image {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.evolution-tile-image-img {
    --ih: 5vh;
    width: var(--ih);
    height: calc(var(--ih) * sqrt(3/4));
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.evolution-description {
    display: flex;
    flex-direction: column;
    gap: 0.5vh;
    position: absolute;
    width: 20%;
    background: var(--white);
    right: 0;
    top: 0;
    height: 18vh;
    border: 1px solid var(--grey);
    border-radius: 5px;
    padding: 1vh;
    visibility: hidden;
    transition: visibility 0.2s;
    font-size: var(--fs-xs);
    overflow: hidden;
}

.evolution-description-header {
    font-size: var(--fs-s);
}

.evolution-description-body {
    font-style: italic;
}

.evolution-description-effect {
}

.evolution-description .flower-yield {
    flex-wrap: wrap;
}

.evolution-tile:hover + .evolution-description {
    visibility: visible;
}

.evolution-description .flower-yield > .icon {
    box-shadow: none;
}

.evolution-description .evolution-cost {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2vmin 0.6vmin;
}

.evolution-description .evolution-cost-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.2vmin;
    white-space: nowrap;
}