/* Tribe questions */

.question-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 16px;
    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-4);
    width: 100%;
}

.question-container .label-top {
    color: var(--color-secondary-4);
    font-size: 1.2em;
}

.question-container .label-bottom {
    width: 100%;
    text-align: center;
}

.flex-center-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.text-center {
    text-align: center;
}

#btn-onboarding-question-fingerprint {
    padding: 16px;
    border-radius: 50%;
    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-1);
    transition: border 0.2s ease-in-out;
}

#btn-onboarding-question-fingerprint svg {
    stroke: var(--color-secondary-1);
    width: 64px;
    height: 64px;
}

#btn-onboarding-question-fingerprint.active {
    border: solid 8px var(--color-secondary-4);
}

#btn-onboarding-question-fingerprint.active svg {
    stroke: var(--color-secondary-4);
}

#onboarding-question-fingerprint-status {
    width: 100%;
    height: 32px;
    min-height: 32px;
    background-color: var(--color-background);
    border: solid 2px var(--color-primary);
}

#onboarding-question-fingerprint-status>div {
    width: 0%;
    height: 100%;
    background-color: var(--color-primary);
}

#btn-onboarding-question-violence-spam {
    width: 100%;
    padding: 32px;
    border-radius: 16px;
    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-1);
}

#btn-onboarding-question-violence-spam svg {
    stroke: var(--color-secondary-1);
}

#btn-onboarding-question-violence-spam.active {
    border: solid 2px var(--color-secondary-3);
}

#btn-onboarding-question-violence-spam.active svg {
    stroke: var(--color-secondary-3);
}

#btn-onboarding-question-violence-spam.disabled {
    opacity: 0.5;
    pointer-events: none;
}

#btn-onboarding-question-violence-restart {
    padding: 8px;
    border-radius: 50%;
    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-3);

    opacity: 0;
    pointer-events: none;
}

#btn-onboarding-question-violence-restart.active {
    opacity: 1;
    pointer-events: all;
}

#btn-onboarding-question-violence-restart svg {
    stroke: var(--color-secondary-3);
    width: 22px;
    height: 22px;
}

.obform-dish {
    width: 128px;
    height: 128px;
    object-fit: contain;
}

#dishes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 8px;
}

/* Tribe page */

#tribe-header {
    padding: 8px;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    gap: 2px;

    border: solid 2px var(--color-secondary-3);
    border-radius: 8px;
}

#tribe-header .top {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

#tribe-name {
    color: var(--color-secondary-3);
    font-size: var(--fontSize-big);
    font-family: var(--font-big);
}

#tribe-header .bottom {
    width: 100%;
    text-align: center;
    color: var(--color-text-secondary);
}

#tribe-rank {
    font-family: var(--font-big);
    font-size: var(--fontSize-big);
}

.tribe-leaderboard {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pod-1 {--podium-color: var(--color-secondary-3);}
.pod-2 {--podium-color: #938DAF;}
.pod-3 {--podium-color: #AF6529;}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.podium-item .profile-picture {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 12px;
}

.podium-item .profile-picture img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 2px var(--podium-color);
}

.podium-item .profile-picture .badge {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 30%);

    width: 32px;
    height: 32px;

    background-color: var(--color-background);
    color: var(--podium-color);

    border: solid 2px var(--podium-color);
    border-radius: 50%;

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

.podium-item .info  {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--fontSize-small);
}

#btn-goto-leaderboard {
    width: 32px;
    height: 32px;

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

    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-3);
    border-radius: 50%;

    stroke: var(--color-secondary-3);
    padding: 0;

    transform: translateY(-18px);
}

#top10-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;

    overflow-y: scroll;
}

.leaderboard-user {
    padding: 4px;
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;

    background-color: var(--color-background);
}

.leaderboard-user .rank {
    width: 32px;
    height: 32px;

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

    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-1);
    color: var(--color-secondary-1);
    border-radius: 50%;
}

.leaderboard-user img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.leaderboard-user .score {
    font-size: var(--fontSize-small);
    color: var(--color-text-secondary);
}

.leaderboard-user .name {
    font-size: var(--fontSize-medium);
    color: var(--color-text-primary);
}

/* Tribe cry */

#tribe-cry-container {
    width: 100%;
    padding: 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    border: solid 2px var(--color-state);
    border-radius: 8px;
    background-color: var(--color-background);
}

#tribe-cry-container .text {
    color: var(--color-text-secondary);
    text-align: center;
}

#tribe-cry-buttons>div {
    display: none;
    gap: 8px;
    align-items: center;
}

#tribe-cry-buttons>div.active {
    display: flex;
}

#tribe-cry-buttons button {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    font-size: var(--fontSize-small);
}

#btn-cry-tribe-mashup {
    width: 100%;
    background-color: var(--color-background);
    border: solid 2px var(--color-secondary-4);
    color: var(--color-secondary-4);
    margin-top: 8px;
}

#btn-cry-tribe-mashup.hide {
    display: none !important;
}

/* Image preview overlay */

#image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #000000AA;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

#image-preview-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#image-preview-overlay.active {
    display: flex;
}