.friend-challenge-invite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(520px, calc(100% - 32px));
    margin: 18px auto 22px;
    padding: 16px 18px;
    border: 4px solid #2ecc71;
    background: rgba(6, 20, 13, 0.92);
    box-shadow: 6px 6px 0 #1b8f4d;
    text-align: center;
}

.friend-challenge-invite strong {
    color: #f1c40f;
    font-size: 13px;
}

.friend-challenge-invite span {
    color: #fff;
    font-size: 11px;
}

.friend-challenge-invite small {
    color: #7ee787;
    font-size: 7px;
    line-height: 1.7;
}

.friend-challenge-invite--legacy {
    border-color: #f39c12;
    box-shadow: 6px 6px 0 #a75d08;
}

.friend-challenge-result {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    width: min(720px, calc(100% - 32px));
    margin: 12px auto 20px;
    padding: 14px 18px;
    border: 4px solid #e74c3c;
    background: rgba(13, 17, 23, 0.94);
    box-shadow: 5px 5px 0 #922b21;
    color: #fff;
    text-align: center;
}

.friend-challenge-result[hidden] {
    display: none !important;
}

.friend-challenge-result strong {
    flex: 0 0 100%;
    color: #f1c40f;
    font-size: 11px;
}

.friend-challenge-result span {
    font-size: 9px;
}

.friend-challenge-result em {
    flex: 0 0 100%;
    color: #ff8f87;
    font-size: 10px;
    font-style: normal;
}

.friend-challenge-result--won {
    border-color: #2ecc71;
    box-shadow: 5px 5px 0 #1b8f4d;
}

.friend-challenge-result--won em {
    color: #7ee787;
}

.friend-challenge-result--tied {
    border-color: #f1c40f;
    box-shadow: 5px 5px 0 #9b7c0a;
}

.friend-challenge-result--tied em {
    color: #ffe88a;
}

@media (max-width: 768px) {
    .friend-challenge-invite {
        margin-top: 12px;
        padding: 12px;
    }

    .friend-challenge-result {
        gap: 8px 12px;
        padding: 12px;
    }
}