.content-rules .stack-v {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.content-rules .stack-v > div {
    transform: rotate(-2deg);
    margin-top: -28em;
}
.content-rules .stack-v > div:first-child {
    margin-top: 0;
}
.content-rules .stack-v > .card:nth-child(1) {
    transform: rotate(-1deg);
}
.content-rules .stack-v > .card:nth-child(2) {
    transform: rotate(-3deg);
    margin-top: -27.5em;
}
.content-rules .stack-v > .card:nth-child(3) {
    transform: rotate(-4deg);
}
.content-rules .stack-v > .card:nth-child(5) {
    margin-left: 6em;
    transform: rotate(1deg);
}

.content-rules .city {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-end;

    margin: 11em auto 22em;
    padding-top: 13em;
}
.content-rules .city > div {
    margin-top: -23em;
    transform: rotate(-2deg);
}
.content-rules .city > div:last-child {
    margin-top: -36em;
}
.content-rules .city > div:first-child {
    margin-top: 0;
}
.content-rules .city > div:nth-child(1) {
    transform: rotate(-2deg);
}
.content-rules .city > div:nth-child(2) {
    transform: rotate(-1deg);
}
.content-rules .city > div:nth-child(3) {
    transform: rotate(0deg);
}
.content-rules .city > div:nth-child(4) {
    transform: rotate(-3deg);
}
/* .content-rules .city > div:nth-child(5) {
} */

/* ACTION PLAY */

.city-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.city-wrap .city > div:nth-child(5) {
    margin-right: 18em;
    box-shadow: 10em 10em 1em rgba(0, 0, 0, 0.2);
}

.city-wrap .arrow:first-child {
    position: absolute;
    right: 8em;
    top: 4em;
    width: 9em;
    height: 10em;
    border-right: var(--light-border-line);
    border-top: var(--light-border-line);
    border-top-right-radius: 100%;
}
.city-wrap .arrow:first-child::after {
    right: -0.32em;
    bottom: -0.1em;
    transform: rotate(0deg);
}
.city-wrap .arrow:nth-child(2) {
    position: absolute;
    left: 5em;
    bottom: -1em;
    width: 9em;
    height: 23.5em;
    border-left: var(--light-border-line);
    border-bottom: var(--light-border-line);
    border-bottom-left-radius: 100%;
    transform: rotate(-5deg);
}
.city-wrap .arrow:nth-child(2)::after {
    right: -0.4em;
    bottom: 0.05em;
    transform: rotate(-94deg);
}

/* ACTION ACTIVATE */

.city-activate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
}
.content-rules .city-activate .city {
    margin-top: 2em;
    margin-bottom: 10em;
}

.city-activate .city > div:nth-child(5) {
    transform: rotate(90deg);
    margin-top: -22em;
    box-shadow: 0 1em 2em rgba(0, 0, 0, 0.85);
}

.city-activate .arrow {
    position: absolute;
    top: 0;
    width: 9em;
    height: 5.5em;
    border-left: var(--light-border-line);
    border-right: var(--light-border-line);
    border-top: var(--light-border-line);
    border-top-left-radius: 15em;
    border-top-right-radius: 15em;
}
.city-activate .arrow::after {
    right: -0.31em;
    bottom: 0.1em;
    transform: rotate(1deg);
}

/* ACTION ACQUIRE */

.action-acquire {
    position: relative;
    margin-top: 1em;
    margin-bottom: 11em;
    margin-left: 7em;
}
.action-acquire .card.card-catastrophe {
    transform: rotate(-1deg);
    /* position: absolute; */
    /* left: 18em; */
    /* top: -54em; */
}

.action-acquire-cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1em;
    margin-left: -8em;
}
.action-acquire-cards .card {
    box-shadow: 0 -0.4em 1em rgba(0, 0, 0, 0.5);
}
.action-acquire-cards > div:nth-child(1) {
    transform: rotate(-3deg);
}
.action-acquire-cards > div:nth-child(2) {
    transform: rotate(-1deg);
}
.action-acquire-cards > div:nth-child(3) {
    transform: rotate(1deg);
}
.action-acquire .arrow {
    position: absolute;
    left: -14em;
    bottom: -10.5em;
    width: 12em;
    height: 10em;
    transform: rotate(8deg);
}
.action-acquire .arrow > div {
    position: relative;
}
.action-acquire .arrow::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-right: var(--light-border-line);
    border-bottom: var(--light-border-line);
    border-bottom-right-radius: 100%;
}
.action-acquire .arrow::after {
    left: -0.2em;
    bottom: -0.04em;
    transform: rotate(90deg);
}
.circle {
    position: absolute;
    border: solid 0.5em #525252;
    filter: drop-shadow(0.1em 0.3em 0.3em rgba(0, 0, 0, 0.75));
    border-radius: 100%;
    --size: 6em;
    width: var(--size);
    height: var(--size);
}
.action-acquire .circle {
    left: -1.5em;
    top: 15.5em;
}

/* CITY ASH */

.city-ash {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    gap: 15em;
}
.content-rules .city-ash .city {
    margin-top: -2em;
    margin-bottom: 10em;
}

.city-ash .city > div:nth-child(5) {
    transform: rotate(-10deg);
    margin-top: -22em;
    margin-right: -3em;
    box-shadow: 0 1em 1em rgba(0, 0, 0, 0.5);
}

.city-ash .arrow {
    position: absolute;
}

.city-ash .arrow:first-child {
    left: 19em;
    top: 9em;
    width: 7em;
    height: 3em;
    border-left: var(--light-border-line);
    border-top: var(--light-border-line);
    border-top-left-radius: 100%;
}
.city-ash .arrow:first-child::after {
    right: -0.4em;
    top: -0.03em;
    transform: rotate(-88deg);
}

.city-ash .arrow:nth-child(2) {
    right: 15.5em;
    top: 11em;
    width: 7em;
    height: 3em;
    border-right: var(--light-border-line);
    border-bottom: var(--light-border-line);
    border-bottom-right-radius: 100%;
}
.city-ash .arrow:nth-child(2)::after {
    left: -0.4em;
    bottom: -0.03em;
    transform: rotate(93deg);
}

.city-ash > .card-chronicle {
    margin-top: -9em;
}

/* END GAME */

.end-game {
    position: relative;
}

.end-game .circle {
    position: absolute;
    left: 13em;
    top: 13em;
    width: 22em;
    height: 13em;
}

/* LAST RULE */

.last-rule-cards {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    margin: 0 auto;
    gap: 5em;
}

.last-rule-foresight-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.last-rule .stack-h {
    margin-top: 5em;
    margin-bottom: 1em;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.last-rule .stack-h > div {
    margin-left: -12em;
}
.last-rule .stack-h > div:first-child {
    margin-left: 0;
}

.last-rule .stack-h > div:nth-child(1) {
    transform: rotate(-10deg);
    margin-top: 3em;
}
.last-rule .stack-h > div:nth-child(2) {
    transform: rotate(-7deg);
    margin-top: -10em;
}
.last-rule .stack-h > div:nth-child(3) {
    transform: rotate(-4deg);
    margin-top: -12em;
}
.last-rule .stack-h > div:nth-child(4) {
    transform: rotate(0deg);
    margin-top: -0.5em;
}
.last-rule .stack-h > div:nth-child(5) {
    transform: rotate(3deg);
    margin-top: -1em;
}
/* .last-rule .stack-h > div.card-foresight:nth-child(4) {
} */

.turn-action {
    display: inline-block;
    font-family: "Title";
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 0.2em black;
    padding: 0.2em 0.7em 0;
    border-radius: 0.1em;
    margin-left: -0.7em;
}