.win-screen-holder {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-button-shadow);
}

.win-screen {
    position: absolute;
    left: 10%;
    top: 10%;
    right: 10%;
    bottom: 10%;
    border-radius: 1.5em;
    box-shadow: inset 0 0 1em 1em var(--color-button-shadow);
    background-color: var(--color-bg);

    display: flex;
    flex-direction: column;

    padding: 1.5em;
}

.win-screen .congratulations {
    font-weight: bold;
    font-variant: small-caps;
    font-size: 3em;
    text-align: center;
    animation: win_screen_congratulations_animation 10s infinite;
    text-shadow: 0.05em 0.05em var(--color-button-shadow);
    padding-bottom: 0.25em;
}

.win-screen .main-stats {
    display: grid;
    gap: 2em;
    padding: 1em 2em;
    grid-auto-columns: 1fr;
    justify-self: center;
}

.win-screen .main-stats > * {
    grid-row: 1;
}

.win-screen .main-stat .name {
    font-size: 1.25em;
    text-align: center;
}

.win-screen .main-stat-value-holder {
    background-color: var(--color-bg-dark);
    border-radius: 0.5em;
    padding: 0.5em;
    margin-top: 0.5em;
    position: relative;
}

.win-screen .main-stat-value-holder .stat {
    font-size: 4em;
    text-align: center;
}

.win-screen .stat-ranking {
    position: absolute;
    right: -1em;
    bottom: -1em;
    height: 4em;
    width: 4em;
    border-radius: 2em;
    display: grid;
    justify-items: center;
    align-items: center;
}

.win-screen .stat-ranking .stat-rank {
    font-size: 2em;
}

.win-screen .stat-ranking.rank-a { background-color: var(--color-class-soldier); }
.win-screen .stat-ranking.rank-b { background-color: var(--color-class-scientist); }
.win-screen .stat-ranking.rank-c { background-color: var(--color-class-laborer); }
.win-screen .stat-ranking.rank-d { background-color: var(--color-class-priest); }
.win-screen .stat-ranking.rank-f { background-color: var(--color-progressbar); }

.win-screen .button {
    padding: 0.5em 1em;
    border-radius: 0.5em;
    align-self: center;
}

.win-screen .button > * {
    font-size: 1.5em;
}

.win-screen .stat-table {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-auto-rows: 1fr;
    margin-top: 0.5em;
    padding: 0.5em;
}

.win-screen .stat-table > p {
    font-size: 1.25em;
}

.win-screen .stat-table *:nth-child(4n+3), .win-screen .stat-table *:nth-child(4n+4) {
    background-color: var(--color-bg-dark);
}


@keyframes win_screen_congratulations_animation {
    0%, 100% { color: var(--color-class-peasant) }
    16% { color: var(--color-class-laborer) }
    33% { color: var(--color-class-scientist) }
    50% { color: var(--color-class-soldier) }
    66% { color: var(--color-class-specialist) }
    84% { color: var(--color-class-priest) }
}